[IMP] compiler: generate templates in strict mode

Before this commit, generated template functions were not using strict
mode. This may be a bad idea, since strict mode could be more performant
in some cases.

doc/reference/templates.md

@@ -540,6 +540,15 @@ This can be used to define variables scoped to a sub template:
 <!-- "var" does not exist here -->
 ```
 
+Note: by default, the rendering context for a sub template is simply the current
+rendering context (so, the current component). However, it may be useful to be
+able to specify a specific object as context. This can be done by using the
+`t-call-context` directive:
+
+```xml
+<t t-call="other-template" t-call-context="obj"/>
+```
+
 ### Dynamic sub templates
 
 The `t-call` directive can also be used to dynamically call a sub template,

src/compiler/code_generator.ts

@@ -140,6 +140,7 @@ interface Context {
   tKeyExpr: string | null;
   nameSpace?: string;
   tModelSelectedExpr?: string;
+  ctxVar?: string;
 }
 
 function createContext(parentCtx: Context, params?: Partial<Context>) {
@@ -264,7 +265,10 @@ export class CodeGenerator {
       tKeyExpr: null,
     });
     // define blocks and utility functions
-    let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
+    let mainCode = [
+      `  "use strict";`,
+      `let { text, createBlock, list, multi, html, toggler, comment } = bdom;`,
+    ];
     if (this.helpers.size) {
       mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
     }
@@ -967,16 +971,21 @@ export class CodeGenerator {
 
   compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
+    let ctxVar = ctx.ctxVar || "ctx";
+    if (ast.context) {
+      ctxVar = generateId("ctx");
+      this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+    }
     if (ast.body) {
-      this.addLine(`ctx = Object.create(ctx);`);
-      this.addLine(`ctx[isBoundary] = 1;`);
+      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 });
+      const subCtx: Context = createContext(ctx, { preventRoot: true, ctxVar });
       this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
       if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
-        this.addLine(`ctx[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = b${nextId};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -994,7 +1003,7 @@ export class CodeGenerator {
       }
       this.define(templateVar, subTemplate);
       block = this.createBlock(block, "multi", ctx);
-      this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block!, {
+      this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
@@ -1002,13 +1011,13 @@ export class CodeGenerator {
       const id = generateId(`callTemplate_`);
       this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
       block = this.createBlock(block, "multi", ctx);
-      this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block!, {
+      this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     }
     if (ast.body && !ctx.isLast) {
-      this.addLine(`ctx = ctx.__proto__;`);
+      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
   }
 
@@ -1031,7 +1040,7 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let value = `new LazyValue(${name}, ctx, node)`;
+      let value = `new LazyValue(${name}, ctx, this, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1046,7 +1055,7 @@ export class CodeGenerator {
         value = expr;
       }
       this.helpers.add("setContextValue");
-      this.addLine(`setContextValue(ctx, "${ast.name}", ${value});`);
+      this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
   }
 
@@ -1187,7 +1196,7 @@ export class CodeGenerator {
       })`,
     });
 
-    let blockExpr = `${id}(${propString}, ${keyArg}, node, ctx, ${ast.isDynamic ? expr : null})`;
+    let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;
     }

src/compiler/inline_expressions.ts

@@ -86,9 +86,8 @@ const STATIC_TOKEN_MAP: { [key: string]: TKind } = Object.assign(Object.create(n
 
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof. Currently we don't support delete and void
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ".split(
-  ","
-);
+const OPERATORS =
+  "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
 
 type Tokenizer = (expr: string) => Token | false;
 

src/compiler/parser.ts

@@ -115,6 +115,7 @@ export interface ASTTCall {
   type: ASTType.TCall;
   name: string;
   body: AST[] | null;
+  context: string | null;
 }
 
 interface SlotDefinition {
@@ -557,11 +558,13 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
     return null;
   }
   const subTemplate = node.getAttribute("t-call")!;
-
+  const context = node.getAttribute("t-call-context");
   node.removeAttribute("t-call");
+  node.removeAttribute("t-call-context");
+
   if (node.tagName !== "t") {
     const ast = parseNode(node, ctx);
-    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null };
+    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null, context };
     if (ast && ast.type === ASTType.DomNode) {
       ast.content = [tcall];
       return ast;
@@ -579,6 +582,7 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
     type: ASTType.TCall,
     name: subTemplate,
     body: body.length ? body : null,
+    context,
   };
 }
 

src/runtime/blockdom/attributes.ts

@@ -93,6 +93,10 @@ function toClassObj(expr: string | number | { [c: string]: any }) {
       for (let key in expr as any) {
         const value = (expr as any)[key];
         if (value) {
+          key = trim.call(key);
+          if (!key) {
+            continue;
+          }
           const words = split.call(key, wordRegexp);
           for (let word of words) {
             result[word] = value;

src/runtime/template_helpers.ts

@@ -108,15 +108,17 @@ function shallowEqual(l1: any[], l2: any[]): boolean {
 class LazyValue {
   fn: any;
   ctx: any;
+  component: any;
   node: any;
-  constructor(fn: any, ctx: any, node: any) {
+  constructor(fn: any, ctx: any, component: any, node: any) {
     this.fn = fn;
     this.ctx = capture(ctx);
+    this.component = component;
     this.node = node;
   }
 
   evaluate(): any {
-    return this.fn(this.ctx, this.node);
+    return this.fn.call(this.component, this.ctx, this.node);
   }
 
   toString() {

tests/__snapshots__/reactivity.test.ts.snap

@@ -49,6 +49,7 @@ 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);
   
@@ -57,7 +58,7 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -67,6 +68,7 @@ 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>\`);
@@ -81,6 +83,7 @@ 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);
   
@@ -89,7 +92,7 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -99,6 +102,7 @@ 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>\`);
@@ -113,6 +117,7 @@ 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>\`);
@@ -128,13 +133,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['contextObj'].b;
     return block1([txt1], [b2]);
   }
@@ -144,6 +150,7 @@ 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>\`);
@@ -221,6 +228,7 @@ 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);
@@ -228,8 +236,8 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b3 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -238,6 +246,7 @@ 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>\`);
@@ -252,6 +261,7 @@ 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);
@@ -259,8 +269,8 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b3 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -269,6 +279,7 @@ 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>\`);
@@ -283,6 +294,7 @@ 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);
@@ -290,8 +302,8 @@ exports[`Reactivity: useState two independent components on different levels are
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b3 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -300,6 +312,7 @@ 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>\`);
@@ -314,13 +327,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -329,6 +343,7 @@ 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>\`);
@@ -343,6 +358,7 @@ 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);
@@ -355,7 +371,7 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`id\`] = v_block2[i1];
       const key1 = ctx['id'];
-      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     ctx = ctx.__proto__;
     const b2 = list(c_block2);
@@ -369,6 +385,7 @@ 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>\`);
@@ -383,6 +400,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -18,6 +19,7 @@ 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>\`);
@@ -32,6 +34,7 @@ exports[`app can configure an app with props 1`] = `
 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/>\`);
@@ -45,6 +48,7 @@ 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/compiler/__snapshots__/attributes.test.ts.snap

@@ -3,6 +3,7 @@
 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\\"/>\`);
@@ -17,6 +18,7 @@ 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\\"/>\`);
@@ -31,6 +33,7 @@ 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\\"/>\`);
@@ -45,6 +48,7 @@ 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\\"/>\`);
@@ -59,6 +63,7 @@ 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\\"/>\`);
@@ -73,6 +78,7 @@ 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\\"/>\`);
@@ -87,6 +93,7 @@ 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\\"/>\`);
@@ -101,6 +108,7 @@ 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\\"/>\`);
@@ -115,6 +123,7 @@ 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\\"/>\`);
@@ -129,6 +138,7 @@ 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\\"/>\`);
@@ -143,6 +153,7 @@ 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\\"/>\`);
@@ -157,6 +168,7 @@ 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\\"/>\`);
@@ -168,9 +180,55 @@ 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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
 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\\"/>\`);
@@ -185,6 +243,7 @@ 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\\"/>\`);
@@ -199,6 +258,7 @@ 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\\"/>\`);
@@ -213,6 +273,7 @@ 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\\"/>\`);
@@ -227,6 +288,7 @@ 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\\"/>\`);
@@ -241,6 +303,7 @@ 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\\"/>\`);
@@ -255,6 +318,7 @@ 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\\"/>\`);
@@ -269,6 +333,7 @@ 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\\"/>\`);
@@ -283,6 +348,7 @@ 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\\"/>\`);
@@ -297,6 +363,7 @@ 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;
   
@@ -315,6 +382,7 @@ 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;
   
@@ -333,6 +401,7 @@ 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;
   
@@ -351,6 +420,7 @@ 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\\"/>\`);
@@ -365,6 +435,7 @@ 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\\"/>\`);
@@ -378,6 +449,7 @@ 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\\"/>\`);
@@ -391,6 +463,7 @@ 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\\\\\`\\"/>\`);
@@ -404,6 +477,7 @@ 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\\"/>\`);
@@ -417,6 +491,7 @@ 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\\"/>\`);
@@ -431,6 +506,7 @@ 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\\"/>\`);
@@ -445,6 +521,7 @@ 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\\"/>\`);
@@ -459,6 +536,7 @@ 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\\"/>\`);
@@ -470,9 +548,25 @@ 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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'a  b  c':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
 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\\"/>\`);
@@ -487,6 +581,7 @@ 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\\"/>\`);
@@ -498,9 +593,40 @@ 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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {' a ':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+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\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {' ':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
 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\\"/>\`);
@@ -515,6 +641,7 @@ 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\\"/>\`);
@@ -529,6 +656,7 @@ 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\\"/>\`);
@@ -543,6 +671,7 @@ 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\\"/>\`);
@@ -557,6 +686,7 @@ 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\\"/>\`);
@@ -571,6 +701,7 @@ 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\\"/>\`);
@@ -585,6 +716,7 @@ 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\\"/>\`);
@@ -598,6 +730,7 @@ 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\\"/>\`);
@@ -613,6 +746,7 @@ 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\\"/>\`);
@@ -627,6 +761,7 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 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\\"/>\`);
@@ -643,6 +778,7 @@ 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>\`);
@@ -656,6 +792,7 @@ 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\\"/>\`);
@@ -670,6 +807,7 @@ 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\\"/>\`);
@@ -684,6 +822,7 @@ 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\\"/>\`);
@@ -698,6 +837,7 @@ 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>\`);
@@ -712,6 +852,7 @@ 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\\"/>\`);
@@ -726,6 +867,7 @@ 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,6 +3,7 @@
 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 = \\"\\") {
@@ -14,6 +15,7 @@ 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>\`);
@@ -27,6 +29,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -17,6 +18,7 @@ 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>\`);
@@ -32,6 +34,7 @@ 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>\`);
@@ -47,6 +50,7 @@ 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>\`);
@@ -62,6 +66,7 @@ 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;
   
@@ -89,6 +94,7 @@ 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>\`);
@@ -104,6 +110,7 @@ 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>\`);
@@ -119,6 +126,7 @@ 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>\`);
@@ -133,6 +141,7 @@ 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;
   
@@ -155,6 +164,7 @@ 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\`);
   
@@ -167,6 +177,7 @@ 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>\`);
@@ -181,6 +192,7 @@ 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\`);
@@ -205,6 +217,7 @@ 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>\`);
@@ -219,6 +232,7 @@ 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>\`);
@@ -233,6 +247,7 @@ 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>\`);
@@ -248,6 +263,7 @@ 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>\`);
@@ -263,6 +279,7 @@ 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;
   
@@ -279,6 +296,7 @@ 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>\`);
@@ -294,6 +312,7 @@ 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>\`);
@@ -308,6 +327,7 @@ 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>\`);
@@ -322,6 +342,7 @@ 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>\`);
@@ -338,6 +359,7 @@ 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;
   
@@ -365,6 +387,7 @@ 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>\`);
@@ -379,6 +402,7 @@ 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>\`);
@@ -394,6 +418,7 @@ 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>\`);
@@ -409,6 +434,7 @@ 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>\`);
@@ -424,6 +450,7 @@ 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>\`);
@@ -439,6 +466,7 @@ 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>\`);
@@ -454,6 +482,7 @@ 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>\`);
@@ -470,6 +499,7 @@ 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\`);
   
@@ -485,6 +515,7 @@ 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>\`);
@@ -499,6 +530,7 @@ 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\`);
   
@@ -514,6 +546,7 @@ 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,6 +3,7 @@
 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);
@@ -35,7 +36,7 @@ exports[`misc complex template 1`] = `
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`slot\`] = v_block4[i1];
       const key1 = ctx['slot'].id;
-      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block4[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     ctx = ctx.__proto__;
     b4 = list(c_block4);
@@ -82,6 +83,7 @@ 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\`);
@@ -134,6 +136,7 @@ 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;
   
@@ -149,6 +152,7 @@ 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;
   
@@ -165,6 +169,7 @@ 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;
   
@@ -181,6 +186,7 @@ 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\`);
@@ -319,8 +325,8 @@ exports[`misc other complex template 1`] = `
     if (!ctx['project']) {
       b24 = block24();
     } else {
-      const b26 = comp1({bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, ctx, null);
-      const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, ctx, null);
+      const b26 = comp1({bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__2\`, node, this, null);
+      const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
       b25 = block25([], [b26, b27]);
     }
     return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);

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

@@ -3,6 +3,7 @@
 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,6 +3,7 @@
 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>\`);
@@ -16,6 +17,7 @@ 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>\`);
@@ -29,6 +31,7 @@ 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>\`);
@@ -42,6 +45,7 @@ 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>\`);
@@ -55,6 +59,7 @@ 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>\`);
@@ -68,6 +73,7 @@ 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>\`);
@@ -81,6 +87,7 @@ 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>\`);
@@ -94,6 +101,7 @@ 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>\`);
@@ -108,6 +116,7 @@ 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>\`);
@@ -122,6 +131,7 @@ 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 = \\"\\") {
@@ -133,6 +143,7 @@ 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/>\`);
@@ -146,6 +157,7 @@ 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 = \\"\\") {
@@ -157,6 +169,7 @@ 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 = \\"\\") {
@@ -168,6 +181,7 @@ 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 = \\"\\") {
@@ -179,6 +193,7 @@ 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;
   
@@ -194,6 +209,7 @@ 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 = \\"\\") {
@@ -205,6 +221,7 @@ 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>\`);
@@ -221,6 +238,7 @@ 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 = \\"\\") {
@@ -232,6 +250,7 @@ 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 = \\"\\") {
@@ -243,6 +262,7 @@ 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 = \\"\\") {
@@ -256,6 +276,7 @@ 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 = \\"\\") {
@@ -269,6 +290,7 @@ 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>\`);
@@ -283,6 +305,7 @@ 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>\`);
@@ -297,6 +320,7 @@ 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>\`);
@@ -311,6 +335,7 @@ 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>\`);
@@ -327,6 +352,7 @@ 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>\`);
@@ -344,6 +370,7 @@ 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 = \\"\\") {
@@ -357,6 +384,7 @@ 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 = \\"\\") {
@@ -370,6 +398,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -16,6 +17,7 @@ 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>\`);
@@ -29,6 +31,7 @@ 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>\`);
@@ -42,6 +45,7 @@ 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>\`);
@@ -55,6 +59,7 @@ 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>\`);
@@ -75,6 +80,7 @@ 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>\`);
@@ -90,6 +96,7 @@ 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\`);
   
@@ -105,6 +112,7 @@ 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\\"/>\`);
@@ -118,6 +126,7 @@ 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,6 +3,7 @@
 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\`);
   
@@ -18,6 +19,7 @@ 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>\`);
@@ -31,6 +33,7 @@ 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\`);
   
@@ -43,6 +46,7 @@ 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>\`);
@@ -56,6 +60,7 @@ 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\`);
@@ -81,6 +86,7 @@ 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;
   
@@ -96,6 +102,7 @@ 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\`);
@@ -121,6 +128,7 @@ 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\`);
@@ -144,6 +152,7 @@ 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\`);
@@ -167,6 +176,7 @@ 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;
   
@@ -182,6 +192,7 @@ 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\`);
@@ -205,6 +216,7 @@ 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\`);
@@ -226,6 +238,7 @@ 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\`);
@@ -247,6 +260,7 @@ 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;
   
@@ -263,6 +277,7 @@ 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);
   
@@ -279,6 +294,7 @@ 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>\`);
@@ -293,6 +309,7 @@ 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>\`);
@@ -307,6 +324,7 @@ 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\`);
@@ -326,6 +344,7 @@ 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 = \\"\\") {
@@ -337,6 +356,7 @@ exports[`t-call (template calling) inherit context 2`] = `
 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\`);
   
@@ -355,6 +375,7 @@ 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\`);
@@ -376,6 +397,7 @@ 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\`);
@@ -410,6 +432,7 @@ 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\`);
@@ -431,6 +454,7 @@ 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\`);
@@ -465,6 +489,7 @@ 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\`);
@@ -487,6 +512,7 @@ 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\`);
@@ -523,6 +549,7 @@ 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\`);
@@ -546,6 +573,7 @@ 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 = \\"\\") {
@@ -557,6 +585,7 @@ 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\`);
@@ -581,6 +610,7 @@ 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 = \\"\\") {
@@ -592,6 +622,7 @@ 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\`);
   
@@ -607,6 +638,7 @@ 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>\`);
@@ -617,9 +649,42 @@ 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\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['obj'];
+    const b2 = callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+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>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value'];
+    return block1([txt1]);
+  }
+}"
+`;
+
 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\`);
@@ -639,6 +704,7 @@ 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;
   
@@ -654,6 +720,7 @@ 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\`);
   
@@ -672,6 +739,7 @@ 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>\`);
@@ -685,6 +753,7 @@ 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\`);
@@ -706,6 +775,7 @@ 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>\`);
@@ -720,6 +790,7 @@ 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\`);
@@ -754,6 +825,7 @@ 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>\`);
@@ -768,6 +840,7 @@ 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\`);
@@ -787,6 +860,7 @@ 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\`);
@@ -821,6 +895,7 @@ 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>\`);
@@ -837,6 +912,7 @@ 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\`);
@@ -866,6 +942,7 @@ 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>\`);
@@ -879,6 +956,7 @@ 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>\`);
@@ -890,9 +968,75 @@ 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\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = ctx['obj'];
+    return callTemplate_1.call(this, ctx1, node, key + \`__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>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value'];
+    return block1([txt1]);
+  }
+}"
+`;
+
+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\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    let ctx1 = ctx['obj'];
+    ctx1 = Object.create(ctx1);
+    ctx1[isBoundary] = 1;
+    setContextValue(ctx1, \\"value2\\", ctx['aaron']);
+    return callTemplate_1.call(this, ctx1, node, key + \`__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>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['value1'];
+    let txt2 = ctx['value2'];
+    return block1([txt1, txt2]);
+  }
+}"
+`;
+
 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\`);
@@ -912,6 +1056,7 @@ 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>\`);
@@ -926,6 +1071,7 @@ 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\`);
@@ -943,6 +1089,7 @@ 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>\`);
@@ -956,6 +1103,7 @@ 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\`);
@@ -974,6 +1122,7 @@ 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>\`);
@@ -987,6 +1136,7 @@ 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\`);
@@ -1004,6 +1154,7 @@ 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;
   
@@ -1019,6 +1170,7 @@ 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\`);
@@ -1040,6 +1192,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -23,6 +24,7 @@ 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>\`);
@@ -37,6 +39,7 @@ 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\`);
   
@@ -52,6 +55,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -21,6 +22,7 @@ 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>\`);
@@ -35,6 +37,7 @@ 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>\`);
@@ -49,6 +52,7 @@ 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;
   
@@ -64,6 +68,7 @@ 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;
   
@@ -79,6 +84,7 @@ 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 = \\"\\") {
@@ -99,6 +105,7 @@ 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>\`);
@@ -113,6 +120,7 @@ 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;
   
@@ -126,7 +134,7 @@ exports[`t-esc t-esc is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['var'];
     return block1([txt1]);
   }
@@ -136,6 +144,7 @@ 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>\`);
@@ -150,6 +159,7 @@ 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\`);
@@ -171,6 +181,7 @@ 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;
   
@@ -186,6 +197,7 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 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,6 +3,7 @@
 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;
   
@@ -25,6 +26,7 @@ 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;
   
@@ -49,6 +51,7 @@ 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;
   
@@ -80,6 +83,7 @@ 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;
   
@@ -111,6 +115,7 @@ 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;
   
@@ -147,6 +152,7 @@ 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;
   
@@ -169,6 +175,7 @@ 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;
   
@@ -188,6 +195,7 @@ 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;
   
@@ -214,6 +222,7 @@ 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\`);
@@ -267,6 +276,7 @@ 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 = \\"\\") {
@@ -285,6 +295,7 @@ 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\`);
@@ -332,6 +343,7 @@ 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;
   
@@ -354,6 +366,7 @@ 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;
   
@@ -388,6 +401,7 @@ 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;
   
@@ -414,6 +428,7 @@ 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;
   
@@ -442,6 +457,7 @@ 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;
   
@@ -465,6 +481,7 @@ 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;
   
@@ -490,6 +507,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -21,6 +22,7 @@ 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>\`);
@@ -41,6 +43,7 @@ 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 = \\"\\") {
@@ -62,6 +65,7 @@ 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>\`);
@@ -85,6 +89,7 @@ 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>\`);
@@ -104,6 +109,7 @@ 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>\`);
@@ -123,6 +129,7 @@ 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>\`);
@@ -140,6 +147,7 @@ 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>\`);
@@ -178,6 +186,7 @@ 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>\`);
@@ -199,6 +208,7 @@ 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>\`);
@@ -221,6 +231,7 @@ 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 = \\"\\") {
@@ -236,6 +247,7 @@ 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 = \\"\\") {
@@ -253,6 +265,7 @@ 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>\`);
@@ -272,6 +285,7 @@ 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>\`);
@@ -291,6 +305,7 @@ 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>\`);
@@ -308,6 +323,7 @@ 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>\`);
@@ -330,6 +346,7 @@ 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>\`);
@@ -347,6 +364,7 @@ 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>\`);
@@ -369,6 +387,7 @@ 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 = \\"\\") {
@@ -385,6 +404,7 @@ 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 = \\"\\") {
@@ -404,6 +424,7 @@ 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;
   
@@ -425,6 +446,7 @@ 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;
   
@@ -448,6 +470,7 @@ 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;
   
@@ -474,6 +497,7 @@ 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 = \\"\\") {
@@ -492,6 +516,7 @@ 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>\`);
@@ -512,6 +537,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -18,6 +19,7 @@ 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>\`);
@@ -33,6 +35,7 @@ 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>\`);
@@ -48,6 +51,7 @@ 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;
   
@@ -72,6 +76,7 @@ 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>\`);
@@ -93,6 +98,7 @@ 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,6 +3,7 @@
 exports[`t-out literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
+  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { safeOutput } = helpers;
   
@@ -18,6 +19,7 @@ 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;
   
@@ -30,6 +32,7 @@ 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\`);
@@ -51,6 +54,7 @@ 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;
   
@@ -67,6 +71,7 @@ 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;
   
@@ -82,6 +87,7 @@ 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;
   
@@ -97,6 +103,7 @@ 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\`);
@@ -118,6 +125,7 @@ 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;
   
@@ -133,6 +141,7 @@ 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;
   
@@ -148,6 +157,7 @@ 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;
   
@@ -161,7 +171,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, node);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -171,6 +181,7 @@ 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;
   
@@ -186,6 +197,7 @@ 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;
   
@@ -201,6 +213,7 @@ 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;
   
@@ -216,6 +229,7 @@ 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;
   
@@ -232,6 +246,7 @@ 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;
   
@@ -249,6 +264,7 @@ 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;
   
@@ -264,6 +280,7 @@ 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;
   
@@ -279,6 +296,7 @@ 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;
   
@@ -294,6 +312,7 @@ 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;
   
@@ -310,7 +329,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, node);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
       const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);
@@ -326,6 +345,7 @@ 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;
   
@@ -341,6 +361,7 @@ 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;
   
@@ -353,6 +374,7 @@ 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;
   
@@ -368,6 +390,7 @@ 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;
   
@@ -383,6 +406,7 @@ 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;
   
@@ -398,6 +422,7 @@ 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;
   
@@ -410,6 +435,7 @@ 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;
   
@@ -425,6 +451,7 @@ 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;
   
@@ -440,6 +467,7 @@ 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;
   
@@ -455,6 +483,7 @@ 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;
   
@@ -470,6 +499,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -19,6 +20,7 @@ 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>\`);
@@ -35,6 +37,7 @@ 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>\`);
@@ -50,6 +53,7 @@ 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\`);
   
@@ -65,6 +69,7 @@ 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>\`);
@@ -80,6 +85,7 @@ 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>\`);
@@ -100,6 +106,7 @@ 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;
   
@@ -128,6 +135,7 @@ 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,6 +3,7 @@
 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;
   
@@ -21,6 +22,7 @@ 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;
   
@@ -39,6 +41,7 @@ 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;
   
@@ -54,6 +57,7 @@ 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;
   
@@ -72,6 +76,7 @@ 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;
   
@@ -90,6 +95,7 @@ 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;
   
@@ -106,7 +112,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, node);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
     return text(ctx['value']);
   }
 }"
@@ -115,6 +121,7 @@ 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;
   
@@ -130,6 +137,7 @@ 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;
   
@@ -142,7 +150,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, node);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -152,6 +160,7 @@ 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;
   
@@ -170,6 +179,7 @@ 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;
   
@@ -191,6 +201,7 @@ 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;
   
@@ -206,7 +217,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, node);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     setContextValue(ctx, \\"v1\\", 'after');
     const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
@@ -217,6 +228,7 @@ 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\`);
@@ -238,6 +250,7 @@ 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;
   
@@ -257,6 +270,7 @@ 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\`);
@@ -282,6 +296,7 @@ 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;
   
@@ -301,6 +316,7 @@ 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;
   
@@ -319,6 +335,7 @@ 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;
   
@@ -338,6 +355,7 @@ 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;
   
@@ -368,6 +386,7 @@ 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;
   
@@ -398,6 +417,7 @@ 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;
   
@@ -428,6 +448,7 @@ 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;
   
@@ -457,6 +478,7 @@ 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;
   
@@ -471,7 +493,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, node);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['setvar'];
     return block1([txt1]);
   }
@@ -481,6 +503,7 @@ 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;
   
@@ -497,7 +520,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, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
     const b3 = safeOutput(ctx['v2']);
@@ -509,6 +532,7 @@ 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;
   
@@ -525,7 +549,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, node));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
     const b3 = safeOutput(ctx['v2']);
@@ -537,6 +561,7 @@ 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`] = `
 "function anonymous(app, bdom, helpers
 ) {
+  \\"use strict\\";
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue } = helpers;
   
@@ -559,6 +584,7 @@ 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;
   
@@ -581,6 +607,7 @@ 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;
   
@@ -602,6 +629,7 @@ 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;
   
@@ -615,7 +643,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, node));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }
@@ -625,6 +653,7 @@ 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,6 +3,7 @@
 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'}/>\`);
@@ -17,6 +18,7 @@ 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'}/>\`);
@@ -31,6 +33,7 @@ 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'}/>\`);
@@ -45,6 +48,7 @@ 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'}>\`);
@@ -59,6 +63,7 @@ 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'}>\`);
@@ -73,6 +78,7 @@ 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'}>\`);
@@ -87,6 +93,7 @@ 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'}>\`);
@@ -104,6 +111,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -17,6 +18,7 @@ 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>\`);
@@ -30,6 +32,7 @@ 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>\`);
@@ -43,6 +46,7 @@ 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\`);
   
@@ -58,6 +62,7 @@ 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>\`);
@@ -74,6 +79,7 @@ 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\`);
   
@@ -89,6 +95,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -16,6 +17,7 @@ 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>\`);
@@ -29,6 +31,7 @@ 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>\`);
@@ -42,6 +45,7 @@ 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>\`);
@@ -55,6 +59,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -16,6 +17,7 @@ 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>\`);
@@ -29,6 +31,7 @@ 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>
@@ -44,6 +47,7 @@ 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>
@@ -59,6 +63,7 @@ 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>\`);
@@ -72,6 +77,7 @@ 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>\`);
@@ -85,6 +91,7 @@ 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

@@ -63,6 +63,24 @@ describe("attributes", () => {
     expect(result).toBe(`<div></div>`);
   });
 
+  test("dynamic class attribute which is only a space", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: " " });
+    expect(result).toBe(`<div></div>`);
+  });
+
+  test("dynamic class attribute with multiple consecutive spaces", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: "a  b" });
+    expect(result).toBe(`<div class="a b"></div>`);
+  });
+
+  test("dynamic class attribute that starts and ends with a space", () => {
+    const template = `<div t-att-class="c"/>`;
+    const result = renderToString(template, { c: " a " });
+    expect(result).toBe(`<div class="a"></div>`);
+  });
+
   test("dynamic undefined generic attribute", () => {
     const template = `<div t-att-thing="c"/>`;
     const result = renderToString(template, { c: undefined });
@@ -260,6 +278,14 @@ describe("attributes", () => {
     const template = `<div class="static" t-att-class="{a: b, c: d, e: f}"/>`;
     const result = renderToString(template, { b: true, d: false, f: true });
     expect(result).toBe(`<div class="static a e"></div>`);
+    // leading and trailing space in the key
+    expect(renderToString(`<div t-att-class="{' a ': value}" />`, { value: true })).toBe(
+      '<div class="a"></div>'
+    );
+    // whitespace only key
+    expect(renderToString(`<div t-att-class="{' ': value}" />`, { value: true })).toBe(
+      "<div></div>"
+    );
   });
 
   test("t-att-class with multiple classes", () => {
@@ -269,6 +295,10 @@ describe("attributes", () => {
     expect(renderToString(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
       '<div class="a b c"></div>'
     );
+    // multiple spaces between classes
+    expect(renderToString(`<div t-att-class="{'a  b  c': value}" />`, { value: true })).toBe(
+      '<div class="a b c"></div>'
+    );
   });
 
   test("t-att-class with multiple classes, some of which are duplicate", () => {

tests/compiler/inline_expressions.test.ts

@@ -221,4 +221,11 @@ describe("expression evaluation", () => {
     expect(compileExpr("a.c in b")).toBe("ctx['a'].c in ctx['b']");
     expect(compileExpr("typeof val")).toBe("typeof ctx['val']");
   });
+
+  test("binary operators", () => {
+    expect(compileExpr("1 | 1")).toBe("1|1");
+    expect(compileExpr("1 & 1")).toBe("1&1");
+    expect(compileExpr("1 ^ 1")).toBe("1^1");
+    expect(compileExpr("~1")).toBe("~1");
+  });
 });

tests/compiler/parser.test.ts

@@ -1033,6 +1033,7 @@ describe("qweb parser", () => {
         type: ASTType.TCall,
         name: "blap",
         body: null,
+        context: null,
       },
       memo: "",
       hasNoFirst: false,
@@ -1070,6 +1071,7 @@ describe("qweb parser", () => {
       type: ASTType.TCall,
       name: "blabla",
       body: null,
+      context: null,
     });
   });
 
@@ -1077,10 +1079,20 @@ describe("qweb parser", () => {
     expect(parse(`<t t-call="sub">ok</t>`)).toEqual({
       type: ASTType.TCall,
       name: "sub",
+      context: null,
       body: [{ type: ASTType.Text, value: "ok" }],
     });
   });
 
+  test("t-call expression with t-call-context", async () => {
+    expect(parse(`<t t-call="blabla" t-call-context="someContext"/>`)).toEqual({
+      type: ASTType.TCall,
+      name: "blabla",
+      body: null,
+      context: "someContext",
+    });
+  });
+
   test("t-call on a div node", async () => {
     expect(parse(`<div t-call="blabla" />`)).toEqual({
       type: ASTType.DomNode,
@@ -1096,6 +1108,7 @@ describe("qweb parser", () => {
           type: ASTType.TCall,
           name: "blabla",
           body: null,
+          context: null,
         },
       ],
     });
@@ -1111,6 +1124,7 @@ describe("qweb parser", () => {
         type: ASTType.TCall,
         name: "blabla",
         body: null,
+        context: null,
       },
     });
   });
@@ -1547,7 +1561,7 @@ describe("qweb parser", () => {
       on: null,
       slots: {
         default: {
-          content: { body: null, name: "subTemplate", type: ASTType.TCall },
+          content: { body: null, name: "subTemplate", type: ASTType.TCall, context: null },
           attrs: null,
           scope: null,
           on: null,

tests/compiler/t_call.test.ts

@@ -445,4 +445,38 @@ describe("t-call (template calling)", () => {
     const expected2 = "<div><bar>quux</bar></div>";
     expect(context.renderToString("main", { template: "bar", val: "quux" })).toBe(expected2);
   });
+
+  test("t-call-context", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="value"/></span>`);
+    context.addTemplate("main", `<t t-call="sub" t-call-context="obj"/>`);
+
+    expect(context.renderToString("main", { obj: { value: 123 } })).toBe("<span>123</span>");
+  });
+
+  test("t-call on a div with t-call-context", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="value"/></span>`);
+    context.addTemplate("main", `<div t-call="sub" t-call-context="obj"/>`);
+
+    expect(context.renderToString("main", { obj: { value: 123 } })).toBe(
+      "<div><span>123</span></div>"
+    );
+  });
+
+  test("t-call-context and value in body", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="value1"/><t t-esc="value2"/></span>`);
+    context.addTemplate(
+      "main",
+      `
+      <t t-call="sub" t-call-context="obj">
+        <t t-set="value2" t-value="aaron" />
+      </t>`
+    );
+
+    expect(context.renderToString("main", { obj: { value1: 123 }, aaron: "lucas" })).toBe(
+      "<span>123lucas</span>"
+    );
+  });
 });

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

@@ -3,12 +3,13 @@
 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);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['myComp'];
-    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, ctx, Comp1));
+    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -16,13 +17,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['props'].displayGrandChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -32,6 +34,7 @@ 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/>\`);
@@ -45,6 +48,7 @@ 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>\`);
@@ -62,11 +66,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -74,6 +79,7 @@ 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>\`);
@@ -87,6 +93,7 @@ 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/>\`);
@@ -100,13 +107,14 @@ 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);
   
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -115,6 +123,7 @@ 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>\`);
@@ -128,6 +137,7 @@ 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>\`);
@@ -144,13 +154,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({val: undefined}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({val: undefined}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -159,6 +170,7 @@ 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>\`);
@@ -173,6 +185,7 @@ 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\`);
   
@@ -185,6 +198,7 @@ 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>\`);
@@ -199,6 +213,7 @@ 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 = \\"\\") {
@@ -210,6 +225,7 @@ 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 = \\"\\") {
@@ -221,6 +237,7 @@ 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>\`);
@@ -234,6 +251,7 @@ 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/>\`);
@@ -250,6 +268,7 @@ 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>\`);
@@ -264,11 +283,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({value: ctx['state'].counter}, key + \`__1\`, node, ctx, null);
+    return comp1({value: ctx['state'].counter}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -276,6 +296,7 @@ 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 = \\"\\") {
@@ -287,6 +308,7 @@ 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>\`);
@@ -301,11 +323,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({value: 42}, key + \`__1\`, node, ctx, null);
+    return comp1({value: 42}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -313,6 +336,7 @@ 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>\`);
@@ -327,13 +351,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['ifVar']) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -343,6 +368,7 @@ 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/>\`);
@@ -356,12 +382,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['keyVar'];
-    return toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, ctx, null));
+    return toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -369,6 +396,7 @@ 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/>\`);
@@ -382,6 +410,7 @@ 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>\`);
@@ -396,6 +425,7 @@ 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/>\`);
@@ -409,6 +439,7 @@ 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>\`);
@@ -423,11 +454,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({child: ctx['state'].child}, key + \`__1\`, node, ctx, null);
+    return comp1({child: ctx['state'].child}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -435,6 +467,7 @@ 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);
@@ -442,9 +475,9 @@ exports[`basics higher order components parent and child 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     } else {
-      b3 = comp2({}, key + \`__2\`, node, ctx, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -454,6 +487,7 @@ 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>\`);
@@ -467,6 +501,7 @@ 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>\`);
@@ -480,6 +515,7 @@ 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);
@@ -494,8 +530,8 @@ exports[`basics list of two sub components inside other nodes 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = v_block2[i1];
       const key1 = ctx['blip'].id;
-      const b4 = comp1({}, key + \`__1__\${key1}\`, node, ctx, null);
-      const b5 = comp2({}, key + \`__2__\${key1}\`, node, ctx, null);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
+      const b5 = comp2({}, key + \`__2__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b4, b5]), key1);
     }
     const b2 = list(c_block2);
@@ -507,6 +543,7 @@ 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>\`);
@@ -520,11 +557,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -532,11 +570,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -544,6 +583,7 @@ 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>\`);
@@ -557,6 +597,7 @@ 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>\`);
@@ -570,6 +611,7 @@ 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>\`);
@@ -583,6 +625,7 @@ 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>\`);
@@ -596,6 +639,7 @@ 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);
@@ -603,9 +647,9 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     const tKey_1 = 4;
-    const b3 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, ctx, null));
+    const b3 = toggler(tKey_1, comp2({}, tKey_1 + key + \`__2\`, node, this, null));
     return block1([], [b2, b3]);
   }
 }"
@@ -614,6 +658,7 @@ 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>\`);
@@ -627,11 +672,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -639,6 +685,7 @@ 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>\`);
@@ -655,6 +702,7 @@ 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);
@@ -663,9 +711,9 @@ exports[`basics same t-keys in two different places 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = 1;
-    const b2 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, ctx, null));
+    const b2 = toggler(tKey_1, comp1({blip: '1'}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = 1;
-    const b3 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, ctx, null));
+    const b3 = toggler(tKey_2, comp2({blip: '2'}, tKey_2 + key + \`__2\`, node, this, null));
     return block1([], [b2, b3]);
   }
 }"
@@ -674,6 +722,7 @@ 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>\`);
@@ -688,6 +737,7 @@ 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>\`);
@@ -702,6 +752,7 @@ 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>\`);
@@ -716,6 +767,7 @@ 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>\`);
@@ -729,6 +781,7 @@ 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);
   
@@ -744,7 +797,7 @@ exports[`basics sub components between t-ifs 1`] = `
     } else {
       b3 = block3();
     }
-    b4 = comp1({}, key + \`__1\`, node, ctx, null);
+    b4 = comp1({}, key + \`__1\`, node, this, null);
     if (ctx['state'].flag) {
       b5 = block5();
     }
@@ -756,6 +809,7 @@ 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>\`);
@@ -769,6 +823,7 @@ 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);
   
@@ -780,7 +835,7 @@ exports[`basics t-elif works with t-component 1`] = `
     if (ctx['state'].flag) {
       b2 = block2();
     } else if (!ctx['state'].flag) {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -790,6 +845,7 @@ 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>\`);
@@ -803,6 +859,7 @@ 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);
   
@@ -814,7 +871,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
     if (ctx['state'].flag) {
       b2 = block2();
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -824,6 +881,7 @@ 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>\`);
@@ -837,6 +895,7 @@ 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);
   
@@ -848,7 +907,7 @@ exports[`basics t-else works with t-component 1`] = `
     if (ctx['state'].flag) {
       b2 = block2();
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -858,6 +917,7 @@ 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>\`);
@@ -871,6 +931,7 @@ 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);
   
@@ -879,7 +940,7 @@ exports[`basics t-if works with t-component 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -889,6 +950,7 @@ 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>\`);
@@ -902,6 +964,7 @@ 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);
@@ -912,9 +975,9 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
     let b2,b3;
     if (false) {
       const tKey_1 = 'str';
-      b2 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, ctx, null));
+      b2 = toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
     }
-    b3 = comp2({}, key + \`__2\`, node, ctx, null);
+    b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -923,6 +986,7 @@ 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>\`);
@@ -936,6 +1000,7 @@ 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);
   
@@ -944,7 +1009,7 @@ exports[`basics text after a conditional component 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     let txt1 = ctx['state'].text;
     return block1([txt1], [b2]);
@@ -955,6 +1020,7 @@ 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>\`);
@@ -968,11 +1034,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -980,11 +1047,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -992,6 +1060,7 @@ 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>\`);
@@ -1005,13 +1074,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b3 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -1020,6 +1090,7 @@ 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>\`);
@@ -1033,6 +1104,7 @@ 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);
   
@@ -1040,7 +1112,7 @@ exports[`basics update props of component without concrete own node 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['childProps'].key;
-    const b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, ctx, null));
+    const b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, this, null));
     return block1([], [b2]);
   }
 }"
@@ -1049,12 +1121,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['props'].subKey;
-    return toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, ctx, null));
+    return toggler(tKey_1, comp1({key: ctx['props'].key,subKey: ctx['props'].subKey}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -1062,6 +1135,7 @@ 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>\`);
@@ -1077,6 +1151,7 @@ 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;
   
@@ -1096,11 +1171,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, ctx, null);
+    return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1108,6 +1184,7 @@ 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>\`);
@@ -1125,6 +1202,7 @@ 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);
@@ -1142,7 +1220,7 @@ exports[`basics widget after a t-foreach 1`] = `
     }
     ctx = ctx.__proto__;
     const b2 = list(c_block2);
-    const b4 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b4 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2, b4]);
   }
 }"
@@ -1151,6 +1229,7 @@ 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/>\`);
@@ -1164,13 +1243,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -1180,6 +1260,7 @@ 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>\`);
@@ -1193,6 +1274,7 @@ 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>\`);
@@ -1206,6 +1288,7 @@ 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>\`);
@@ -1219,6 +1302,7 @@ 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>\`);
@@ -1232,6 +1316,7 @@ 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>\`);
@@ -1245,13 +1330,14 @@ 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);
   
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -1260,6 +1346,7 @@ 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>\`);
@@ -1273,6 +1360,7 @@ 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;
   
@@ -1297,6 +1385,7 @@ 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;
   
@@ -1311,6 +1400,7 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
 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__/error_handling.test.ts.snap

@@ -3,11 +3,12 @@
 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -15,13 +16,14 @@ 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);
-    return comp1(props1, key + \`__1\`, node, ctx, null);
+    return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -29,11 +31,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -41,13 +44,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({flag: ctx['state'].flag}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -56,6 +60,7 @@ 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>\`);
@@ -70,6 +75,7 @@ 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);
   
@@ -80,7 +86,7 @@ exports[`basics simple catchError 1`] = `
     if (ctx['error']) {
       b2 = text(\`Error\`);
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -90,6 +96,7 @@ 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>\`);
@@ -104,6 +111,7 @@ exports[`basics simple catchError 2`] = `
 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);
   
@@ -111,7 +119,7 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
     let b2,b3;
     b2 = text(ctx['state'].value);
     if (ctx['state'].hasChild) {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -121,6 +129,7 @@ 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>\`);
@@ -134,6 +143,7 @@ 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);
   
@@ -141,7 +151,7 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
     let b2,b3;
     b2 = text(ctx['state'].value);
     if (ctx['state'].hasChild) {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -151,6 +161,7 @@ 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>\`);
@@ -164,6 +175,7 @@ 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 = \\"\\") {
@@ -175,6 +187,7 @@ 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);
@@ -183,11 +196,11 @@ exports[`can catch errors can catch an error in a component render function 1`]
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, ctx, null);
+    return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -196,6 +209,7 @@ 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;
   
@@ -216,6 +230,7 @@ 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>\`);
@@ -230,6 +245,7 @@ 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);
@@ -238,11 +254,11 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -251,6 +267,7 @@ 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;
   
@@ -271,6 +288,7 @@ 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);
@@ -280,13 +298,13 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b4 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    const b4 = comp2({}, key + \`__2\`, node, this, null);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -295,6 +313,7 @@ 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;
   
@@ -315,6 +334,7 @@ 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>\`);
@@ -328,6 +348,7 @@ 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>\`);
@@ -341,6 +362,7 @@ 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>\`);
@@ -354,6 +376,7 @@ 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);
@@ -362,11 +385,11 @@ exports[`can catch errors can catch an error in the initial call of a component
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -375,6 +398,7 @@ 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;
   
@@ -395,6 +419,7 @@ 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>\`);
@@ -409,6 +434,7 @@ 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);
@@ -417,13 +443,13 @@ exports[`can catch errors can catch an error in the initial call of a component
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].flag) {
-      b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+      b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     }
     return block1([], [b3]);
   }
@@ -433,6 +459,7 @@ 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;
   
@@ -453,6 +480,7 @@ 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>\`);
@@ -467,11 +495,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -479,13 +508,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -494,6 +524,7 @@ 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);
   
@@ -504,7 +535,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -514,6 +545,7 @@ 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>\`);
@@ -527,6 +559,7 @@ 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);
   
@@ -537,7 +570,7 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -547,6 +580,7 @@ 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>\`);
@@ -560,6 +594,7 @@ 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);
@@ -568,11 +603,11 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -581,6 +616,7 @@ 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;
   
@@ -601,6 +637,7 @@ 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>\`);
@@ -614,6 +651,7 @@ 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);
@@ -622,12 +660,12 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
   let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({message: ctx['state'].message}, key + \`__1\`, node, ctx, null);
+    return comp1({message: ctx['state'].message}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].message;
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -636,6 +674,7 @@ 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;
   
@@ -656,6 +695,7 @@ 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>\`);
@@ -670,6 +710,7 @@ 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);
@@ -678,11 +719,11 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -691,6 +732,7 @@ 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;
   
@@ -711,6 +753,7 @@ 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>\`);
@@ -724,6 +767,7 @@ 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);
@@ -733,13 +777,13 @@ exports[`can catch errors can catch an error origination from a child's willStar
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b4 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
+    const b4 = comp2({}, key + \`__2\`, node, this, null);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -748,6 +792,7 @@ 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;
   
@@ -768,6 +813,7 @@ 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>\`);
@@ -781,6 +827,7 @@ 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>\`);
@@ -794,6 +841,7 @@ 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);
   
@@ -804,7 +852,7 @@ exports[`can catch errors catchError in catchError 1`] = `
     if (ctx['error']) {
       b2 = text(\`Error\`);
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -814,13 +862,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -829,6 +878,7 @@ 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>\`);
@@ -843,6 +893,7 @@ 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);
@@ -850,7 +901,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['cp'].Comp;
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, ctx, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -861,7 +912,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
       const key1 = ctx['cp'].id;
       const v1 = ctx['cp'];
       const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, ctx, null), key1);
+      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -871,6 +922,7 @@ 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;
   
@@ -883,11 +935,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -895,6 +948,7 @@ 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/>\`);
@@ -908,6 +962,7 @@ 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>\`);
@@ -921,6 +976,7 @@ 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);
@@ -928,7 +984,7 @@ exports[`can catch errors catching in child makes parent render 1`] = `
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['elem'][1];
-    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, ctx, Comp1));
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -939,7 +995,7 @@ exports[`can catch errors catching in child makes parent render 1`] = `
       const key1 = ctx['elem'][0];
       const v1 = ctx['elem'];
       const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, ctx, null), key1);
+      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -949,6 +1005,7 @@ 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;
   
@@ -961,6 +1018,7 @@ 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/>\`);
@@ -974,6 +1032,7 @@ 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>\`);
@@ -988,6 +1047,7 @@ 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);
@@ -997,12 +1057,12 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp2({}, key + \`__2\`, node, ctx, null);
+    return comp2({}, key + \`__2\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b2, b4]);
   }
 }"
@@ -1011,6 +1071,7 @@ 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 = \\"\\") {
@@ -1022,6 +1083,7 @@ 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;
   
@@ -1042,6 +1104,7 @@ 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>\`);
@@ -1055,11 +1118,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1067,6 +1131,7 @@ 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>\`);
@@ -1086,11 +1151,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1098,6 +1164,7 @@ 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>\`);
@@ -1117,13 +1184,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -1132,6 +1200,7 @@ 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>\`);
@@ -1146,6 +1215,7 @@ 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>\`);
@@ -1160,13 +1230,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['x'].y;
     return block1([txt1], [b2]);
   }
@@ -1176,6 +1247,7 @@ 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/>\`);
@@ -1189,6 +1261,7 @@ 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>\`);
@@ -1206,6 +1279,7 @@ 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>\`);
@@ -1219,6 +1293,7 @@ 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>\`);
@@ -1232,6 +1307,7 @@ 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>\`);
@@ -1246,6 +1322,7 @@ 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>\`);
@@ -1260,6 +1337,7 @@ 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/>\`);
@@ -1273,6 +1351,7 @@ 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>\`);
@@ -1286,6 +1365,7 @@ 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>\`);

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

@@ -3,6 +3,7 @@
 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>\`);
@@ -17,6 +18,7 @@ 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\\"/>\`);
@@ -31,6 +33,7 @@ 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);
   
@@ -38,7 +41,7 @@ exports[`event handling handler receive the event as argument 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1], [b2]);
   }
@@ -48,6 +51,7 @@ 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>\`);
@@ -61,6 +65,7 @@ exports[`event handling handler receive the event as argument 2`] = `
 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);
   
@@ -69,7 +74,7 @@ exports[`event handling input blur event is not called if component is destroyed
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].cond) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -79,6 +84,7 @@ 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\\"/>\`);
@@ -93,6 +99,7 @@ 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;
   
@@ -119,6 +126,7 @@ 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>\`);
@@ -134,6 +142,7 @@ 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,11 +3,12 @@
 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({p: 1}, key + \`__1\`, node, ctx, null);
+    return comp1({p: 1}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -15,6 +16,7 @@ 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>\`);
@@ -29,6 +31,7 @@ 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);
@@ -36,10 +39,10 @@ exports[`basics can select a sub widget  1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['env'].options.flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     if (!ctx['env'].options.flag) {
-      b3 = comp2({}, key + \`__2\`, node, ctx, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -49,6 +52,7 @@ 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>\`);
@@ -62,6 +66,7 @@ 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>\`);
@@ -75,6 +80,7 @@ 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);
@@ -82,10 +88,10 @@ exports[`basics can select a sub widget, part 2 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     if (!ctx['state'].flag) {
-      b3 = comp2({}, key + \`__2\`, node, ctx, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -95,6 +101,7 @@ 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>\`);
@@ -108,6 +115,7 @@ 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>\`);
@@ -121,11 +129,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({p: 1}, key + \`__1\`, node, ctx, null);
+    return comp1({p: 1}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -133,6 +142,7 @@ 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>\`);
@@ -148,13 +158,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -163,11 +174,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -175,6 +187,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -24,6 +25,7 @@ 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>\`);
@@ -40,11 +42,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
+    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -52,6 +55,7 @@ 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>\`);
@@ -66,6 +70,7 @@ 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/>\`);
@@ -79,6 +84,7 @@ 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>\`);
@@ -93,6 +99,7 @@ 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>\`);
@@ -107,12 +114,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -121,6 +129,7 @@ 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>\`);
@@ -139,12 +148,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -153,6 +163,7 @@ 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>\`);
@@ -167,12 +178,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['env'].val);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -181,6 +193,7 @@ 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>\`);
@@ -195,6 +208,7 @@ 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>\`);
@@ -209,6 +223,7 @@ 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>\`);
@@ -223,11 +238,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -235,6 +251,7 @@ 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>\`);
@@ -250,6 +267,7 @@ 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/>\`);
@@ -263,6 +281,7 @@ 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\\"/>\`);
@@ -282,6 +301,7 @@ 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/>\`);
@@ -295,6 +315,7 @@ 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>\`);
@@ -309,6 +330,7 @@ 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/>\`);
@@ -322,13 +344,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -338,6 +361,7 @@ 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>\`);
@@ -352,6 +376,7 @@ 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>\`);
@@ -368,6 +393,7 @@ 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>\`);
@@ -382,11 +408,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -394,6 +421,7 @@ 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,6 +3,7 @@
 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>\`);
@@ -16,6 +17,7 @@ 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);
@@ -23,8 +25,8 @@ exports[`lifecycle hooks component semantics 1`] = `
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
-    const b3 = comp2({}, key + \`__2\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
+    const b3 = comp2({}, key + \`__2\`, node, this, null);
     return block1([], [b2, b3]);
   }
 }"
@@ -33,6 +35,7 @@ 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>\`);
@@ -46,6 +49,7 @@ 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);
@@ -55,11 +59,11 @@ exports[`lifecycle hooks component semantics 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3,b4;
-    b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    b2 = comp1({}, key + \`__1\`, node, this, null);
     if (ctx['state'].flag) {
-      b3 = comp2({}, key + \`__2\`, node, ctx, null);
+      b3 = comp2({}, key + \`__2\`, node, this, null);
     } else {
-      b4 = comp3({}, key + \`__3\`, node, ctx, null);
+      b4 = comp3({}, key + \`__3\`, node, this, null);
     }
     return block1([], [b2, b3, b4]);
   }
@@ -69,6 +73,7 @@ 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>\`);
@@ -82,6 +87,7 @@ 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>\`);
@@ -95,6 +101,7 @@ 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>\`);
@@ -108,6 +115,7 @@ 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);
   
@@ -116,7 +124,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, ctx, null);
+      const b3 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
       b2 = block2([], [b3]);
     }
     return multi([b2]);
@@ -127,6 +135,7 @@ 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>\`);
@@ -141,13 +150,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].ok) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -157,6 +167,7 @@ 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/>\`);
@@ -170,6 +181,7 @@ 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);
   
@@ -177,7 +189,7 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
     let b2,b3,b4;
     b2 = text(\`before\`);
     if (ctx['state'].flag) {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     b4 = text(\`after\`);
     return multi([b2, b3, b4]);
@@ -188,6 +200,7 @@ 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 = \\"\\") {
@@ -199,13 +212,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -214,6 +228,7 @@ 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/>\`);
@@ -227,11 +242,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({rev: ctx['rev']}, key + \`__1\`, node, ctx, null);
+    return comp1({rev: ctx['rev']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -239,6 +255,7 @@ 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 = \\"\\") {
@@ -250,13 +267,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -265,6 +283,7 @@ 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/>\`);
@@ -278,13 +297,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -294,11 +314,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -306,6 +327,7 @@ 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/>\`);
@@ -319,13 +341,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -335,13 +358,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -351,11 +375,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -363,6 +388,7 @@ 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/>\`);
@@ -376,13 +402,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -392,6 +419,7 @@ 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/>\`);
@@ -405,11 +433,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null);
+    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -417,6 +446,7 @@ 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/>\`);
@@ -430,6 +460,7 @@ 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/>\`);
@@ -443,13 +474,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasChild) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -459,6 +491,7 @@ 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>\`);
@@ -472,13 +505,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -487,6 +521,7 @@ 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/>\`);
@@ -500,6 +535,7 @@ 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);
   
@@ -508,7 +544,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -518,13 +554,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -533,6 +570,7 @@ 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/>\`);
@@ -546,11 +584,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, ctx, null);
+    return comp1({someValue: ctx['state'].value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -558,6 +597,7 @@ 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>\`);
@@ -573,13 +613,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({a: ctx['state'].a}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -588,6 +629,7 @@ 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/>\`);
@@ -601,6 +643,7 @@ 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>\`);
@@ -615,6 +658,7 @@ 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>\`);
@@ -629,6 +673,7 @@ 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>\`);
@@ -643,6 +688,7 @@ 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>\`);
@@ -657,13 +703,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -673,6 +720,7 @@ 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/>\`);
@@ -686,6 +734,7 @@ 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/>\`);
@@ -699,13 +748,14 @@ 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);
-    return comp1(props1, key + \`__1\`, node, ctx, null);
+    return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -713,6 +763,7 @@ 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 = \\"\\") {
@@ -724,13 +775,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -739,13 +791,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({n: ctx['props'].n}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -754,6 +807,7 @@ 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>\`);
@@ -768,11 +822,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -780,6 +835,7 @@ 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/>\`);
@@ -793,6 +849,7 @@ 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>\`);
@@ -806,6 +863,7 @@ 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>\`);
@@ -819,6 +877,7 @@ 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);
   
@@ -828,7 +887,7 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].ok) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     } else {
       b3 = block3();
     }
@@ -840,6 +899,7 @@ 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/>\`);
@@ -853,11 +913,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({n: ctx['state'].n}, key + \`__1\`, node, ctx, null);
+    return comp1({n: ctx['state'].n}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -865,6 +926,7 @@ 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,13 +3,14 @@
 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({greetings: ctx['greetings']}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({greetings: ctx['greetings']}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -18,6 +19,7 @@ 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>\`);
@@ -32,6 +34,7 @@ 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);
@@ -44,7 +47,7 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
       const key1 = ctx['item'].val;
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
-      c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block1[i1] = withKey(comp1({onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -54,6 +57,7 @@ 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\\"/>\`);
@@ -68,13 +72,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({value: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({value: ctx['state'].val}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -83,6 +88,7 @@ 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>\`);
@@ -97,11 +103,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({'prop-name': 7}, key + \`__1\`, node, ctx, null);
+    return comp1({'prop-name': 7}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -109,6 +116,7 @@ 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>\`);
@@ -123,11 +131,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, ctx, null);
+    return comp1({'some-dashed-prop': 5}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -135,6 +144,7 @@ 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\\"/>\`);
@@ -149,6 +159,7 @@ 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);
@@ -163,8 +174,8 @@ 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, node);
-    const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, ctx, null);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
+    const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -173,6 +184,7 @@ 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;
   
@@ -189,6 +201,7 @@ 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);
@@ -199,7 +212,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"abc\\", \`42\`);
-    const b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -208,6 +221,7 @@ 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>\`);
@@ -222,6 +236,7 @@ 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);
@@ -232,7 +247,7 @@ exports[`basics t-set works  1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"val\\", 42);
-    const b2 = comp1({val: ctx['val']}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -241,6 +256,7 @@ 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>\`);
@@ -255,11 +271,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, ctx, null);
+    return comp1({propName: \`1\${ctx['someVal']}3\`}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -267,6 +284,7 @@ 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 = \\"\\") {
@@ -278,12 +296,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -291,6 +310,7 @@ 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 = \\"\\") {
@@ -302,12 +322,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, ctx, null);
+    return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -315,6 +336,7 @@ 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,13 +3,14 @@
 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].renderChild) {
-      b2 = comp1({state: ctx['state']}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -19,6 +20,7 @@ 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 = \\"\\") {
@@ -30,11 +32,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, ctx, null);
+    return comp1({obj: ctx['obj'],reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -42,6 +45,7 @@ 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 = \\"\\") {
@@ -55,6 +59,7 @@ 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>\`);
@@ -69,6 +74,7 @@ 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>\`);
@@ -83,6 +89,7 @@ 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>\`);
@@ -97,6 +104,7 @@ 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>\`);
@@ -111,6 +119,7 @@ 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);
   
@@ -119,7 +128,7 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -129,6 +138,7 @@ 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,6 +3,7 @@
 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\\"/>\`);
@@ -18,6 +19,7 @@ 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;
   
@@ -41,6 +43,7 @@ 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);
   
@@ -52,7 +55,7 @@ exports[`refs refs and recursive templates 1`] = `
     let b2;
     let txt1 = ctx['props'].tree.value;
     if (ctx['props'].tree.child) {
-      b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({tree: ctx['props'].tree.child}, key + \`__1\`, node, this, null);
     }
     return block1([ref1, txt1], [b2]);
   }
@@ -62,6 +65,7 @@ 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);
@@ -79,7 +83,7 @@ exports[`refs refs are properly bound in slots 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -88,6 +92,7 @@ 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;
   
@@ -103,6 +108,7 @@ 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,12 +3,13 @@
 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -17,6 +18,7 @@ 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 = \\"\\") {
@@ -28,11 +30,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -40,11 +43,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = text(ctx['props'].val);
     return multi([b2, b3]);
   }
@@ -54,6 +58,7 @@ 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 = \\"\\") {
@@ -65,12 +70,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -79,6 +85,7 @@ 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 = \\"\\") {
@@ -90,12 +97,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -104,6 +112,7 @@ 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 = \\"\\") {
@@ -115,11 +124,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({a: ctx['state']}, key + \`__1\`, node, ctx, null);
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -127,6 +137,7 @@ 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 = \\"\\") {
@@ -138,11 +149,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({a: ctx['state']}, key + \`__1\`, node, ctx, null);
+    return comp1({a: ctx['state']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -150,6 +162,7 @@ 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 = \\"\\") {
@@ -161,12 +174,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].value);
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -175,6 +189,7 @@ 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 = \\"\\") {
@@ -186,13 +201,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`parent\`);
     const b3 = text(ctx['state'].value);
-    const b4 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b4 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4]);
   }
 }"
@@ -201,6 +217,7 @@ 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 = \\"\\") {
@@ -214,12 +231,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(ctx['state'].obj.val);
-    const b3 = comp1({obj: ctx['state'].obj}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({obj: ctx['state'].obj}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -228,11 +246,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, ctx, null);
+    return comp1({obj: ctx['props'].obj}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -240,6 +259,7 @@ 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 = \\"\\") {
@@ -251,11 +271,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, ctx, null);
+    return comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -263,6 +284,7 @@ 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,11 +3,12 @@
 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'fromparent'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -15,6 +16,7 @@ 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>\`);
@@ -32,11 +34,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'some-class'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'some-class'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -44,6 +47,7 @@ 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>\`);
@@ -58,11 +62,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'fromparent'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'fromparent'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -70,11 +75,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -82,6 +88,7 @@ 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>\`);
@@ -96,11 +103,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'a  b'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'a  b'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -108,6 +116,7 @@ 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>\`);
@@ -122,6 +131,7 @@ 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>\`);
@@ -135,6 +145,7 @@ 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\\"/>\`);
@@ -149,11 +160,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -161,6 +173,7 @@ 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);
@@ -168,9 +181,9 @@ exports[`style and class handling class on sub component, which is switched to a
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['props'].child==='a') {
-      b2 = comp1({class: ctx['props'].class}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({class: ctx['props'].class}, key + \`__1\`, node, this, null);
     } else {
-      b3 = comp2({class: ctx['props'].class}, key + \`__2\`, node, ctx, null);
+      b3 = comp2({class: ctx['props'].class}, key + \`__2\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -180,6 +193,7 @@ 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>\`);
@@ -194,6 +208,7 @@ 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>\`);
@@ -208,13 +223,14 @@ 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);
   
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({class: 'a  b c   d'}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -223,6 +239,7 @@ 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\\"/>\`);
@@ -237,11 +254,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'a  b c   d'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'a  b c   d'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -249,6 +267,7 @@ 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\\"/>\`);
@@ -263,11 +282,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'from parent'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'from parent'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -275,6 +295,7 @@ 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>\`);
@@ -316,13 +337,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({class: undefined}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({class: undefined}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -331,6 +353,7 @@ 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\\"/>\`);
@@ -345,11 +368,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'a'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'a'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -357,6 +381,7 @@ 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>\`);
@@ -372,11 +397,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: 'hey'}, key + \`__1\`, node, ctx, null);
+    return comp1({class: 'hey'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -384,6 +410,7 @@ 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>\`);
@@ -397,11 +424,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -409,6 +437,7 @@ 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>\`);
@@ -423,11 +452,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, ctx, null);
+    return comp1({style: 'font-weight: bold;'}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -435,6 +465,7 @@ 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\\"/>\`);
@@ -449,13 +480,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({class: {b:ctx['state'].b}}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -464,6 +496,7 @@ 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\\"/>\`);
@@ -478,11 +511,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, ctx, null);
+    return comp1({class: {a:true,b:ctx['state'].b}}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -490,6 +524,7 @@ 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,6 +3,7 @@
 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);
@@ -21,6 +22,7 @@ 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>\`);
@@ -34,6 +36,7 @@ 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 = \\"\\") {
@@ -45,12 +48,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     const template1 = (ctx['sub']);
     const b3 = call(this, template1, ctx, node, key + \`__2\`);
     return multi([b2, b3]);
@@ -61,6 +65,7 @@ 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\\"/>\`);
@@ -75,11 +80,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -87,6 +93,7 @@ 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);
   
@@ -104,6 +111,7 @@ 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>\`);
@@ -118,6 +126,7 @@ 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\`);
   
@@ -134,6 +143,7 @@ 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>\`);
@@ -148,6 +158,7 @@ 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\`);
   
@@ -163,6 +174,7 @@ 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>\`);
@@ -178,6 +190,7 @@ 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\`);
   
@@ -193,11 +206,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -205,6 +219,7 @@ 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>\`);
@@ -218,6 +233,7 @@ 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\`);
   
@@ -230,11 +246,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -242,6 +259,7 @@ 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>\`);
@@ -255,6 +273,7 @@ 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\`);
@@ -276,6 +295,7 @@ 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\`);
@@ -305,6 +325,7 @@ 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\`);
@@ -327,11 +348,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -339,6 +361,7 @@ 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>\`);
@@ -353,6 +376,7 @@ 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\`);
@@ -380,11 +404,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['val']}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['val']}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -392,6 +417,7 @@ 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>\`);
@@ -402,3 +428,75 @@ 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\`);
+  
+  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 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);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = comp1({name: ctx['aab']}, key + \`__1\`, node, this, null);
+    const b3 = comp2({name: ctx['lpe']}, key + \`__2\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+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, 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\`);
+  
+  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, 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 = \\"\\") {
+    const b2 = text(ctx['aab']);
+    const b3 = text(ctx['lpe']);
+    return multi([b2, b3]);
+  }
+}"
+`;

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

@@ -3,6 +3,7 @@
 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,6 +3,7 @@
 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);
   
@@ -10,7 +11,7 @@ exports[`t-component can switch between dynamic components without the need for
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, ctx, Comp1));
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -19,6 +20,7 @@ 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>\`);
@@ -32,6 +34,7 @@ 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>\`);
@@ -45,13 +48,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, ctx, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -59,6 +63,7 @@ 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>\`);
@@ -72,6 +77,7 @@ 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>\`);
@@ -85,13 +91,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, ctx, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -99,6 +106,7 @@ 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>\`);
@@ -112,6 +120,7 @@ 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>\`);
@@ -125,6 +134,7 @@ 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);
   
@@ -132,7 +142,7 @@ exports[`t-component modifying a sub widget 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Counter'];
-    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, ctx, Comp1));
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -141,6 +151,7 @@ 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>\`);
@@ -157,12 +168,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, ctx, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -170,6 +182,7 @@ 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>\`);
@@ -183,6 +196,7 @@ 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 = \\"\\") {
@@ -194,12 +208,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, ctx, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -207,6 +222,7 @@ 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,6 +3,7 @@
 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);
@@ -16,7 +17,7 @@ exports[`list of components components in a node in a t-foreach  1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       const key1 = 'li_'+ctx['item'];
-      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx, null);
+      const b4 = comp1({item: ctx['item']}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
     const b2 = list(c_block2);
@@ -28,6 +29,7 @@ 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>\`);
@@ -42,6 +44,7 @@ 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;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -57,7 +60,7 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
       keys1.add(key1);
       const props1 = {};
       helpers.validateProps(\`Child\`, props1, ctx);
-      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -67,6 +70,7 @@ 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 = \\"\\") {
@@ -78,6 +82,7 @@ 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);
@@ -91,7 +96,7 @@ exports[`list of components list of sub components inside other nodes 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = v_block2[i1];
       const key1 = ctx['blip'].id;
-      const b4 = comp1({}, key + \`__1__\${key1}\`, node, ctx, null);
+      const b4 = comp1({}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
     const b2 = list(c_block2);
@@ -103,6 +108,7 @@ 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>\`);
@@ -116,6 +122,7 @@ 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);
@@ -135,7 +142,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
         ctx[\`blip\`] = v_block3[i2];
         ctx[\`blip_index\`] = i2;
         const key2 = ctx['blip_index'];
-        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, ctx, null), key2);
+        c_block3[i2] = withKey(comp1({blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
       }
       ctx = ctx.__proto__;
       c_block2[i1] = withKey(list(c_block3), key1);
@@ -149,6 +156,7 @@ 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>\`);
@@ -163,6 +171,7 @@ 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);
@@ -182,7 +191,7 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
       for (let i2 = 0; i2 < l_block4; i2++) {
         ctx[\`col\`] = v_block4[i2];
         const key2 = ctx['col'];
-        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx, null);
+        const b6 = comp1({row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, this, null);
         c_block4[i2] = withKey(block5([], [b6]), key2);
       }
       ctx = ctx.__proto__;
@@ -198,6 +207,7 @@ 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>\`);
@@ -212,6 +222,7 @@ 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);
@@ -222,7 +233,7 @@ exports[`list of components simple list 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'].id;
-      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block1[i1] = withKey(comp1({value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -232,6 +243,7 @@ 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>\`);
@@ -246,6 +258,7 @@ 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);
@@ -258,7 +271,7 @@ exports[`list of components sub components rendered in a loop 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
       const key1 = ctx['number'];
-      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block2[i1] = withKey(comp1({n: ctx['number']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -269,6 +282,7 @@ 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>\`);
@@ -283,6 +297,7 @@ 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);
@@ -295,7 +310,7 @@ exports[`list of components sub components with some state rendered in a loop 1`
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
       const key1 = ctx['number'];
-      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block2[i1] = withKey(comp1({}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -306,6 +321,7 @@ 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>\`);
@@ -320,6 +336,7 @@ 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);
@@ -332,7 +349,7 @@ exports[`list of components switch component position 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`c\`] = v_block2[i1];
       const key1 = ctx['c'];
-      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block2[i1] = withKey(comp1({key: ctx['c']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -343,6 +360,7 @@ 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>\`);
@@ -357,6 +375,7 @@ 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);
@@ -370,7 +389,7 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
       ctx[\`n\`] = v_block2[i1];
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
-      c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, ctx, null), key1);
+      c_block2[i1] = withKey(comp1({val: ctx['n_index']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -381,6 +400,7 @@ 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,6 +3,7 @@
 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);
@@ -16,7 +17,7 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
       ctx[\`c\`] = v_block2[i1];
       const key1 = ctx['c'];
       const tKey_1 = ctx['key1'];
-      c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, ctx, null), tKey_1 + key1);
+      c_block2[i1] = withKey(comp1({key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, this, null), tKey_1 + key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -27,6 +28,7 @@ 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>\`);
@@ -41,12 +43,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx, null));
+    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -54,6 +57,7 @@ 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>\`);
@@ -68,6 +72,7 @@ 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);
   
@@ -75,7 +80,7 @@ exports[`t-key t-key on Component as a function 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    const b2 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx, null));
+    const b2 = toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
     return block1([], [b2]);
   }
 }"
@@ -84,6 +89,7 @@ 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>\`);
@@ -98,6 +104,7 @@ 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);
@@ -106,9 +113,9 @@ exports[`t-key t-key on multiple Components 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx, null));
+    const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
-    const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx, null));
+    const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
     return block1([], [b2, b3]);
   }
 }"
@@ -117,6 +124,7 @@ 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>\`);
@@ -131,6 +139,7 @@ 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\`);
@@ -158,12 +167,13 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx, null));
+    return toggler(tKey_1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -171,6 +181,7 @@ 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>\`);
@@ -185,6 +196,7 @@ 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\`);
   
@@ -200,15 +212,16 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx, null));
+    const b2 = toggler(tKey_1, comp1({key: ctx['key1']}, tKey_1 + key + \`__1\`, node, this, null));
     const tKey_2 = ctx['key2'];
-    const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx, null));
+    const b3 = toggler(tKey_2, comp2({key: ctx['key2']}, tKey_2 + key + \`__2\`, node, this, null));
     return multi([b2, b3]);
   }
 }"
@@ -217,6 +230,7 @@ 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,6 +3,7 @@
 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;
   
@@ -22,6 +23,7 @@ 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;
   
@@ -41,6 +43,7 @@ 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;
   
@@ -60,6 +63,7 @@ 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;
   
@@ -79,6 +83,7 @@ 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;
   
@@ -98,6 +103,7 @@ 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;
   
@@ -117,6 +123,7 @@ 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;
   
@@ -136,6 +143,7 @@ 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;
   
@@ -165,6 +173,7 @@ 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;
   
@@ -186,6 +195,7 @@ 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;
   
@@ -213,6 +223,7 @@ 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;
   
@@ -241,6 +252,7 @@ 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;
   
@@ -269,6 +281,7 @@ 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;
   
@@ -288,6 +301,7 @@ 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;
   
@@ -306,6 +320,7 @@ 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;
   
@@ -325,6 +340,7 @@ 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;
   
@@ -348,6 +364,7 @@ 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;
   
@@ -370,6 +387,7 @@ 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;
   
@@ -394,6 +412,7 @@ 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;
   
@@ -413,6 +432,7 @@ 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;
   
@@ -431,6 +451,7 @@ 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;
   
@@ -452,6 +473,7 @@ 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;
   
@@ -476,6 +498,7 @@ 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;
   
@@ -499,6 +522,7 @@ 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;
   
@@ -523,6 +547,7 @@ 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;
   
@@ -553,6 +578,7 @@ 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;
   
@@ -584,6 +610,7 @@ 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,6 +3,7 @@
 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;
   
@@ -33,6 +34,7 @@ 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;
   
@@ -62,6 +64,7 @@ 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;
   
@@ -96,6 +99,7 @@ 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;
   
@@ -124,6 +128,7 @@ 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);
@@ -133,7 +138,7 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null), [hdlr1]);
+    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     let hdlr2 = [ctx['decrement'], ctx];
     return block1([hdlr2], [b2]);
   }
@@ -143,6 +148,7 @@ 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>\`);
@@ -157,6 +163,7 @@ 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);
@@ -164,7 +171,7 @@ exports[`t-on t-on on components 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
-    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null), [hdlr1]);
+    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -172,6 +179,7 @@ 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>\`);
@@ -186,6 +194,7 @@ 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);
@@ -199,7 +208,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
       const key1 = ctx['name'];
       const v1 = ctx['name'];
       const hdlr1 = [()=>this.log(v1), ctx];
-      c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, ctx, null), [hdlr1]), key1);
+      c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
     }
     return list(c_block1);
   }
@@ -209,6 +218,7 @@ 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>\`);
@@ -223,6 +233,7 @@ 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);
@@ -232,7 +243,7 @@ exports[`t-on t-on on components, variation 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null), [hdlr1]);
+    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     return block1([], [b2]);
   }
 }"
@@ -241,6 +252,7 @@ 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>\`);
@@ -255,6 +267,7 @@ 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);
@@ -262,7 +275,7 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const hdlr1 = [\\"prevent\\", ctx['increment'], ctx];
-    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, ctx, null), [hdlr1]);
+    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -270,6 +283,7 @@ 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>\`);
@@ -284,6 +298,7 @@ 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);
@@ -295,7 +310,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
     setContextValue(ctx, \\"name\\", ctx['state'].name);
     const v1 = ctx['name'];
     const hdlr1 = [()=>this.log(v1), ctx];
-    return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, ctx, null), [hdlr1]);
+    return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -303,6 +318,7 @@ 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>\`);
@@ -317,6 +333,7 @@ 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);
   
@@ -325,7 +342,7 @@ exports[`t-on t-on on destroyed components 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -335,6 +352,7 @@ 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\\"/>\`);
@@ -349,6 +367,7 @@ 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);
@@ -360,7 +379,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -368,6 +387,7 @@ 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});
@@ -382,6 +402,7 @@ 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});
@@ -402,7 +423,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
     const ctx1 = capture(ctx);
-    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx, null);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4, b8]);
   }
 }"
@@ -411,6 +432,7 @@ 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;
   
@@ -423,6 +445,7 @@ 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);
@@ -434,7 +457,7 @@ exports[`t-on t-on on t-slots 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -442,6 +465,7 @@ 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_props.test.ts.snap

@@ -3,13 +3,14 @@
 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, ctx, null);
+    const b2 = comp1(Object.assign({}, ctx['some'].obj), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -18,6 +19,7 @@ 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>\`);
@@ -32,11 +34,12 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, ctx, null);
+    return comp1(Object.assign({}, ctx['childProps']), key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -44,6 +47,7 @@ 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/>\`);
@@ -57,13 +61,14 @@ 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);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1(Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, ctx, null);
+    const b2 = comp1(Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -72,6 +77,7 @@ 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>\`);
@@ -87,13 +93,14 @@ 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);
   
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, ctx, null);
+    const b2 = comp1(Object.assign({}, ctx['state']), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -102,6 +109,7 @@ 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>\`);
@@ -116,13 +124,14 @@ 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);
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, ctx, null);
+    const b2 = comp1(Object.assign({}, ctx['childProps'], {a: 1,b: 2}), key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -131,6 +140,7 @@ 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,6 +3,7 @@
 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);
@@ -22,7 +23,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     const ctx1 = capture(ctx);
-    const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -32,6 +33,7 @@ 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;
   
@@ -51,6 +53,7 @@ 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);
@@ -59,19 +62,19 @@ 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, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = text(\` in slot \`);
     const b4 = safeOutput(ctx['v']);
     return multi([b3, b4]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -79,6 +82,7 @@ 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;
   
@@ -93,6 +97,7 @@ 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 = \\"\\") {
@@ -104,6 +109,7 @@ 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);
@@ -114,21 +120,21 @@ 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, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b5 = text(\` tea \`);
     const b6 = safeOutput(ctx['v']);
     return multi([b5, b6]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b3 = comp1({}, key + \`__1\`, node, this, null);
     const b4 = block4();
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -136,6 +142,7 @@ 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;
   
@@ -150,6 +157,7 @@ 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 = \\"\\") {
@@ -161,6 +169,7 @@ 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);
@@ -169,17 +178,17 @@ 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, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     return text(\` in slot \`);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, ctx, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -187,6 +196,7 @@ 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;
   
@@ -201,6 +211,7 @@ 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;
   
@@ -220,6 +231,7 @@ 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;
   
@@ -239,6 +251,7 @@ 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;
   
@@ -264,6 +277,7 @@ 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);
@@ -275,7 +289,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const b2 = comp1({}, key + \`__1\`, node, ctx, null);
+    const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -285,6 +299,7 @@ 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;
   
@@ -304,6 +319,7 @@ 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;
   
@@ -330,6 +346,7 @@ 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);
@@ -337,13 +354,13 @@ exports[`t-set t-set with a component in body 1`] = `
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }
@@ -353,6 +370,7 @@ 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 = \\"\\") {
@@ -364,6 +382,7 @@ 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;
   
@@ -377,7 +396,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, node);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }

tests/components/t_call.test.ts

@@ -244,4 +244,47 @@ describe("t-call", () => {
     }
     expect(clickCount).toBe(2);
   });
+
+  test("t-call with t-call-context, simple use", async () => {
+    class Root extends Component {
+      static template = xml`
+          <t t-call="someTemplate" t-call-context="subctx"/>`;
+
+      subctx = { aab: "aaron", lpe: "lucas" };
+    }
+
+    await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate"><t t-esc="aab"/><t t-esc="lpe"/></t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("aaronlucas");
+  });
+
+  test("t-call with t-call-context and subcomponent", async () => {
+    class Child extends Component {
+      static template = xml`child<t t-esc="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, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <Child name="aab"/>
+            <Child name="lpe"/>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("childaaronchildlucas");
+  });
 });

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

@@ -3,6 +3,7 @@
 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;
@@ -31,6 +32,7 @@ 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;
@@ -60,6 +62,7 @@ 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;
@@ -92,6 +95,7 @@ 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;
@@ -124,6 +128,7 @@ 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;
@@ -158,6 +163,7 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
 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);
@@ -166,11 +172,11 @@ exports[`Portal Portal composed with t-slot 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({customHandler: ctx['_handled']}, key + \`__1\`, node, ctx, null);
+    return comp1({customHandler: ctx['_handled']}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -179,6 +185,7 @@ 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;
@@ -197,6 +204,7 @@ 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>\`);
@@ -211,6 +219,7 @@ 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);
@@ -232,6 +241,7 @@ 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);
@@ -253,6 +263,7 @@ 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);
@@ -274,6 +285,7 @@ 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);
@@ -295,6 +307,7 @@ 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);
@@ -303,7 +316,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
   let block2 = createBlock(\`<span>1</span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -320,6 +333,7 @@ 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>\`);
@@ -334,6 +348,7 @@ 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);
@@ -359,13 +374,14 @@ 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);
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasPortal) {
-      b2 = comp1({}, key + \`__1\`, node, ctx, null);
+      b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
   }
@@ -375,6 +391,7 @@ 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;
@@ -405,6 +422,7 @@ 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);
   
@@ -413,7 +431,7 @@ exports[`Portal conditional use of Portal with child and div, variation 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasPortal) {
-      const b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      const b3 = comp1({}, key + \`__1\`, node, this, null);
       b2 = block2([], [b3]);
     }
     return multi([b2]);
@@ -424,6 +442,7 @@ 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;
@@ -455,6 +474,7 @@ 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);
@@ -480,6 +500,7 @@ 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);
@@ -488,7 +509,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
   let block1 = createBlock(\`<div><block-child-0/><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -504,6 +525,7 @@ 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>\`);
@@ -518,6 +540,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 2`]
 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);
@@ -544,6 +567,7 @@ 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);
@@ -552,7 +576,7 @@ exports[`Portal portal destroys on crash 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({error: ctx['state'].error}, key + \`__1\`, node, ctx, null);
+    return comp1({error: ctx['state'].error}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -565,6 +589,7 @@ 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>\`);
@@ -579,6 +604,7 @@ 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);
@@ -587,7 +613,7 @@ exports[`Portal portal with child and props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -600,6 +626,7 @@ 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>\`);
@@ -614,6 +641,7 @@ 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);
@@ -643,6 +671,7 @@ 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);
@@ -667,6 +696,7 @@ 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);
@@ -691,6 +721,7 @@ 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);
@@ -711,6 +742,7 @@ 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);
@@ -732,6 +764,7 @@ 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);
@@ -740,7 +773,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({}, key + \`__1\`, node, ctx, null);
+    return comp1({}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -753,6 +786,7 @@ 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>\`);
@@ -766,6 +800,7 @@ 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);
   
@@ -776,7 +811,7 @@ exports[`Portal simple catchError with portal 1`] = `
     if (ctx['error']) {
       b2 = text(\`Error\`);
     } else {
-      b3 = comp1({}, key + \`__1\`, node, ctx, null);
+      b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -786,6 +821,7 @@ 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);
@@ -808,6 +844,7 @@ 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);
@@ -829,6 +866,7 @@ 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);
@@ -850,6 +888,7 @@ 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);
@@ -871,6 +910,7 @@ 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);
@@ -892,6 +932,7 @@ 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);
@@ -900,7 +941,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val}, key + \`__1\`, node, ctx, null);
+    return comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -913,6 +954,7 @@ 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\\"/>\`);