From d201c12fb0b2ebe64bbe36b10cd5a49b5d33e8fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 9 Dec 2025 16:11:08 +0100
Subject: [PATCH 1/2] wip

---
 src/runtime/component_node.ts                 |   2 +-
 .../__snapshots__/t_slot.test.ts.snap         |  13 --
 .../__snapshots__/basics.test.ts.snap         |  76 +++----
 .../__snapshots__/concurrency.test.ts.snap    | 202 ++++++++---------
 tests/components/basics.test.ts               |  64 +++---
 tests/components/concurrency.test.ts          | 205 +++++++++---------
 6 files changed, 269 insertions(+), 293 deletions(-)
 delete mode 100644 tests/compiler/__snapshots__/t_slot.test.ts.snap

diff --git a/src/runtime/component_node.ts b/src/runtime/component_node.ts
index 42f6904db..13aa9be2d 100644
--- a/src/runtime/component_node.ts
+++ b/src/runtime/component_node.ts
@@ -93,7 +93,7 @@ export class ComponentNode implements VNode<ComponentNode> {
     const previousComputation = getCurrentComputation();
     setComputation(this.signalComputation);
     this.component = new C(this);
-    const ctx = Object.assign(Object.create(this.component), { this: this.component });
+    const ctx ={ this: this.component };
     this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
     this.component.setup();
     setComputation(previousComputation);
diff --git a/tests/compiler/__snapshots__/t_slot.test.ts.snap b/tests/compiler/__snapshots__/t_slot.test.ts.snap
deleted file mode 100644
index acf0eb259..000000000
--- a/tests/compiler/__snapshots__/t_slot.test.ts.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`t-slot compile t-props correctly multiple time 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = "") {
-    return callSlot(ctx, node, key, 'default', false, Object.assign({}, {a:1}));
-  }
-}"
-`;
diff --git a/tests/components/__snapshots__/basics.test.ts.snap b/tests/components/__snapshots__/basics.test.ts.snap
index 4f5e8956f..2beeaf97c 100644
--- a/tests/components/__snapshots__/basics.test.ts.snap
+++ b/tests/components/__snapshots__/basics.test.ts.snap
@@ -7,8 +7,8 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
   const comp1 = app.createComponent(null, false, false, false, ["displayGrandChild"]);
   
   return function template(ctx, node, key = "") {
-    const Comp1 = ctx['myComp'];
-    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    const Comp1 = ctx['this'].myComp;
+    return toggler(Comp1, comp1({displayGrandChild: ctx['this'].displayGrandChild}, (Comp1).name + key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -146,9 +146,9 @@ exports[`basics can be clicked on and updated 1`] = `
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1="click">Inc</button></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].counter;
-    const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let txt1 = ctx['this'].state.counter;
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.state.counter++, ctx];
     return block1([txt1, hdlr1]);
   }
 }"
@@ -203,7 +203,7 @@ exports[`basics can inject values in tagged templates 2`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].n;
+    let txt1 = ctx['this'].state.n;
     return block1([txt1]);
   }
 }"
@@ -294,7 +294,7 @@ exports[`basics child can be updated 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].counter}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.counter}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -318,7 +318,7 @@ exports[`basics class component with dynamic text 1`] = `
   let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['value'];
+    let txt1 = ctx['this'].value;
     return block1([txt1]);
   }
 }"
@@ -358,7 +358,7 @@ exports[`basics component children doesn't leak (if case) 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['ifVar']) {
+    if (ctx['this'].ifVar) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
@@ -386,7 +386,7 @@ exports[`basics component children doesn't leak (t-key case) 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, []);
   
   return function template(ctx, node, key = "") {
-    const tKey_1 = ctx['keyVar'];
+    const tKey_1 = ctx['this'].keyVar;
     return toggler(tKey_1, comp1({}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
@@ -413,7 +413,7 @@ exports[`basics component with dynamic content can be updated 1`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['value'];
+    let txt1 = ctx['this'].value;
     return block1([txt1]);
   }
 }"
@@ -440,7 +440,7 @@ exports[`basics do not remove previously rendered dom if not necessary, variatio
   let block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].value;
+    let txt1 = ctx['this'].state.value;
     return block1([txt1]);
   }
 }"
@@ -453,7 +453,7 @@ exports[`basics higher order components parent and child 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["child"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({child: ctx['state'].child}, key + \`__1\`, node, this, null);
+    return comp1({child: ctx['this'].state.child}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -516,7 +516,7 @@ exports[`basics list of two sub components inside other nodes 1`] = `
   
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['this'].state.blips);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = k_block2[i1];
       const key1 = ctx['blip'].id;
@@ -670,9 +670,9 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
   let block1 = createBlock(\`<div><block-text-0/><button block-handler-1="click">Inc</button></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].counter;
-    const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let txt1 = ctx['this'].state.counter;
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.state.counter++, ctx];
     return block1([txt1, hdlr1]);
   }
 }"
@@ -719,7 +719,7 @@ exports[`basics simple component with a dynamic text 1`] = `
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['value'];
+    let txt1 = ctx['this'].value;
     return block1([txt1]);
   }
 }"
@@ -733,7 +733,7 @@ exports[`basics simple component, proxy 1`] = `
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].value;
+    let txt1 = ctx['this'].state.value;
     return block1([txt1]);
   }
 }"
@@ -765,13 +765,13 @@ exports[`basics sub components between t-ifs 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2, b3, b4, b5;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = block2();
     } else {
       b3 = block3();
     }
     b4 = comp1({}, key + \`__1\`, node, this, null);
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b5 = block5();
     }
     return block1([], [b2, b3, b4, b5]);
@@ -803,9 +803,9 @@ exports[`basics t-elif works with t-component 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2, b3;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = block2();
-    } else if (!ctx['state'].flag) {
+    } else if (!ctx['this'].state.flag) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2, b3]);
@@ -837,7 +837,7 @@ exports[`basics t-else with empty string works with t-component 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2, b3;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = block2();
     } else {
       b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -871,7 +871,7 @@ exports[`basics t-else works with t-component 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2, b3;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = block2();
     } else {
       b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -904,7 +904,7 @@ exports[`basics t-if works with t-component 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
@@ -969,10 +969,10 @@ exports[`basics text after a conditional component 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].hasChild) {
+    if (ctx['this'].state.hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    let txt1 = ctx['state'].text;
+    let txt1 = ctx['this'].state.text;
     return block1([txt1], [b2]);
   }
 }"
@@ -1078,8 +1078,8 @@ exports[`basics update props of component without concrete own node 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   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, this, null));
+    const tKey_1 = ctx['this'].childProps.key;
+    const b2 = toggler(tKey_1, comp1(Object.assign({}, ctx['this'].childProps), tKey_1 + key + \`__1\`, node, this, null));
     return block1([], [b2]);
   }
 }"
@@ -1121,7 +1121,7 @@ exports[`basics updating a component with t-foreach as root 1`] = `
   
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['this'].items);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = k_block1[i1];
       const key1 = ctx['item'];
@@ -1139,7 +1139,7 @@ exports[`basics updating widget immediately 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["flag"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({flag: ctx['state'].flag}, key + \`__1\`, node, this, null);
+    return comp1({flag: ctx['this'].state.flag}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1208,7 +1208,7 @@ exports[`basics zero or one child components 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].hasChild) {
+    if (ctx['this'].state.hasChild) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2]);
@@ -1319,7 +1319,7 @@ exports[`t-out in components can render list of t-out  1`] = `
   
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['this'].state.items);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = k_block2[i1];
       const key1 = ctx['item'];
@@ -1340,8 +1340,8 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = "") {
-    const b2 = safeOutput(ctx['state'].a);
-    const b3 = safeOutput(ctx['state'].b);
+    const b2 = safeOutput(ctx['this'].state.a);
+    const b3 = safeOutput(ctx['this'].state.b);
     return multi([b2, b3]);
   }
 }"
@@ -1354,7 +1354,7 @@ exports[`t-out in components t-out and updating falsy values,  1`] = `
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = "") {
-    return safeOutput(ctx['state'].a);
+    return safeOutput(ctx['this'].state.a);
   }
 }"
 `;
@@ -1368,7 +1368,7 @@ exports[`t-out in components update properly on state changes 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = safeOutput(ctx['state'].value);
+    const b2 = safeOutput(ctx['this'].state.value);
     return block1([], [b2]);
   }
 }"
diff --git a/tests/components/__snapshots__/concurrency.test.ts.snap b/tests/components/__snapshots__/concurrency.test.ts.snap
index b75296ea8..87702b8fd 100644
--- a/tests/components/__snapshots__/concurrency.test.ts.snap
+++ b/tests/components/__snapshots__/concurrency.test.ts.snap
@@ -11,7 +11,7 @@ exports[`Cascading renders after microtaskTick 1`] = `
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     const b3 = text(\` _ \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['this'].state);;
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`elem\`] = k_block4[i1];
       const key1 = ctx['elem'].id;
@@ -32,7 +32,7 @@ exports[`Cascading renders after microtaskTick 2`] = `
   
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['this'].state);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = k_block1[i1];
       const key1 = ctx['elem'].id;
@@ -66,8 +66,8 @@ exports[`another scenario with delayed rendering 1`] = `
     ctx[isBoundary] = 1
     let b2, b3;
     b2 = text(\`A\`);
-    if (ctx['state'].value<15) {
-      b3 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.value<15) {
+      b3 = comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
     }
     setContextValue(ctx, "noop", ctx['this'].notify());
     return multi([b2, b3]);
@@ -98,7 +98,7 @@ exports[`another scenario with delayed rendering 3`] = `
   
   return function template(ctx, node, key = "") {
     let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     return block1([hdlr1, txt1]);
   }
 }"
@@ -125,7 +125,7 @@ exports[`calling render in destroy 1`] = `
   
   return function template(ctx, node, key = "") {
     const tKey_1 = ctx['key'];
-    return toggler(tKey_1, comp1({fromA: ctx['state']}, tKey_1 + key + \`__1\`, node, this, null));
+    return toggler(tKey_1, comp1({fromA: ctx['this'].state}, tKey_1 + key + \`__1\`, node, this, null));
   }
 }"
 `;
@@ -180,7 +180,7 @@ exports[`changing state before first render does not trigger a render (with pare
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
@@ -235,7 +235,7 @@ exports[`component destroyed just after render 2`] = `
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`B\`);
-    const b3 = text(ctx['state'].value);
+    const b3 = text(ctx['this'].state.value);
     return multi([b2, b3]);
   }
 }"
@@ -250,7 +250,7 @@ exports[`components are not destroyed between animation frame 1`] = `
   return function template(ctx, node, key = "") {
     let b2, b3;
     b2 = text(\`A\`);
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3]);
@@ -292,7 +292,7 @@ exports[`concurrent renderings scenario 1 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -307,7 +307,7 @@ exports[`concurrent renderings scenario 1 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['this'].props.fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].props.fromA,fromB: ctx['this'].state.fromB}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -322,7 +322,7 @@ exports[`concurrent renderings scenario 1 3`] = `
   
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
-    let txt2 = ctx['someValue']();
+    let txt2 = ctx['this'].someValue();
     return block1([txt1, txt2]);
   }
 }"
@@ -337,8 +337,8 @@ exports[`concurrent renderings scenario 2 1`] = `
   let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].fromA;
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    let txt1 = ctx['this'].state.fromA;
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([txt1], [b2]);
   }
 }"
@@ -353,7 +353,7 @@ exports[`concurrent renderings scenario 2 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['this'].props.fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].props.fromA,fromB: ctx['this'].state.fromB}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -383,7 +383,7 @@ exports[`concurrent renderings scenario 2bis 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -398,7 +398,7 @@ exports[`concurrent renderings scenario 2bis 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['this'].props.fromA,fromB: ctx['state'].fromB}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].props.fromA,fromB: ctx['this'].state.fromB}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -428,7 +428,7 @@ exports[`concurrent renderings scenario 3 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -458,7 +458,7 @@ exports[`concurrent renderings scenario 3 3`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['this'].props.fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].props.fromA,fromC: ctx['this'].state.fromC}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -473,7 +473,7 @@ exports[`concurrent renderings scenario 3 4`] = `
   
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
-    let txt2 = ctx['someValue']();
+    let txt2 = ctx['this'].someValue();
     return block1([txt1, txt2]);
   }
 }"
@@ -488,7 +488,7 @@ exports[`concurrent renderings scenario 4 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -518,7 +518,7 @@ exports[`concurrent renderings scenario 4 3`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['this'].props.fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].props.fromA,fromC: ctx['this'].state.fromC}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -533,7 +533,7 @@ exports[`concurrent renderings scenario 4 4`] = `
   
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
-    let txt2 = ctx['someValue']();
+    let txt2 = ctx['this'].someValue();
     return block1([txt1, txt2]);
   }
 }"
@@ -548,7 +548,7 @@ exports[`concurrent renderings scenario 5 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -562,7 +562,7 @@ exports[`concurrent renderings scenario 5 2`] = `
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['someValue']();
+    let txt1 = ctx['this'].someValue();
     return block1([txt1]);
   }
 }"
@@ -577,7 +577,7 @@ exports[`concurrent renderings scenario 6 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -591,7 +591,7 @@ exports[`concurrent renderings scenario 6 2`] = `
   let block1 = createBlock(\`<p><block-text-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['someValue']();
+    let txt1 = ctx['this'].someValue();
     return block1([txt1]);
   }
 }"
@@ -606,7 +606,7 @@ exports[`concurrent renderings scenario 7 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -621,7 +621,7 @@ exports[`concurrent renderings scenario 7 2`] = `
   
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
-    let txt2 = ctx['someValue']();
+    let txt2 = ctx['this'].someValue();
     return block1([txt1, txt2]);
   }
 }"
@@ -636,7 +636,7 @@ exports[`concurrent renderings scenario 8 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -651,7 +651,7 @@ exports[`concurrent renderings scenario 8 2`] = `
   
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
-    let txt2 = ctx['state'].fromB;
+    let txt2 = ctx['this'].state.fromB;
     return block1([txt1, txt2]);
   }
 }"
@@ -667,9 +667,9 @@ exports[`concurrent renderings scenario 9 1`] = `
   let block1 = createBlock(\`<div><block-text-0/><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].fromA;
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
-    const b3 = comp2({fromA: ctx['state'].fromA}, key + \`__2\`, node, this, null);
+    let txt1 = ctx['this'].state.fromA;
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
+    const b3 = comp2({fromA: ctx['this'].state.fromA}, key + \`__2\`, node, this, null);
     return block1([txt1], [b2, b3]);
   }
 }"
@@ -698,7 +698,7 @@ exports[`concurrent renderings scenario 9 3`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['this'].props.fromA,fromC: ctx['state'].fromC}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].props.fromA,fromC: ctx['this'].state.fromC}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -728,7 +728,7 @@ exports[`concurrent renderings scenario 10 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    const b2 = comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -744,7 +744,7 @@ exports[`concurrent renderings scenario 10 2`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].hasChild) {
+    if (ctx['this'].state.hasChild) {
       b2 = comp1({value: ctx['this'].props.value}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
@@ -775,7 +775,7 @@ exports[`concurrent renderings scenario 11 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({val: ctx['this'].state.valA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -837,7 +837,7 @@ exports[`concurrent renderings scenario 13 1`] = `
   return function template(ctx, node, key = "") {
     let b2, b3;
     b2 = comp1({}, key + \`__1\`, node, this, null);
-    if (ctx['state'].bool) {
+    if (ctx['this'].state.bool) {
       b3 = comp2({}, key + \`__2\`, node, this, null);
     }
     return block1([], [b2, b3]);
@@ -853,7 +853,7 @@ exports[`concurrent renderings scenario 13 2`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     return block1([txt1]);
   }
 }"
@@ -868,7 +868,7 @@ exports[`concurrent renderings scenario 14 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -883,7 +883,7 @@ exports[`concurrent renderings scenario 14 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromB: ctx['state'].fromB,fromA: ctx['this'].props.fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromB: ctx['this'].state.fromB,fromA: ctx['this'].props.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -899,7 +899,7 @@ exports[`concurrent renderings scenario 14 3`] = `
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
     let txt2 = ctx['this'].props.fromB;
-    let txt3 = ctx['state'].fromC;
+    let txt3 = ctx['this'].state.fromC;
     return block1([txt1, txt2, txt3]);
   }
 }"
@@ -914,7 +914,7 @@ exports[`concurrent renderings scenario 15 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -929,7 +929,7 @@ exports[`concurrent renderings scenario 15 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({fromB: ctx['state'].fromB,fromA: ctx['this'].props.fromA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({fromB: ctx['this'].state.fromB,fromA: ctx['this'].props.fromA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -945,7 +945,7 @@ exports[`concurrent renderings scenario 15 3`] = `
   return function template(ctx, node, key = "") {
     let txt1 = ctx['this'].props.fromA;
     let txt2 = ctx['this'].props.fromB;
-    let txt3 = ctx['state'].fromC;
+    let txt3 = ctx['this'].state.fromC;
     return block1([txt1, txt2, txt3]);
   }
 }"
@@ -958,7 +958,7 @@ exports[`concurrent renderings scenario 16 1`] = `
   const comp1 = app.createComponent(\`B\`, true, false, false, ["fromA"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({fromA: ctx['state'].fromA}, key + \`__1\`, node, this, null);
+    return comp1({fromA: ctx['this'].state.fromA}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -970,7 +970,7 @@ exports[`concurrent renderings scenario 16 2`] = `
   const comp1 = app.createComponent(\`C\`, true, false, false, ["fromB","fromA"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({fromB: ctx['state'].fromB,fromA: ctx['this'].props.fromA}, key + \`__1\`, node, this, null);
+    return comp1({fromB: ctx['this'].state.fromB,fromA: ctx['this'].props.fromA}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -987,9 +987,9 @@ exports[`concurrent renderings scenario 16 3`] = `
     b3 = text(\`:\`);
     b4 = text(ctx['this'].props.fromB);
     b5 = text(\`:\`);
-    b6 = text(ctx['state'].fromC);
+    b6 = text(ctx['this'].state.fromC);
     b7 = text(\`: \`);
-    if (ctx['state'].fromC===13) {
+    if (ctx['this'].state.fromC===13) {
       b8 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3, b4, b5, b6, b7, b8]);
@@ -1017,10 +1017,10 @@ exports[`creating two async components, scenario 1 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2, b3;
-    if (ctx['state'].flagA) {
+    if (ctx['this'].state.flagA) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
-    if (ctx['state'].flagB) {
+    if (ctx['this'].state.flagB) {
       b3 = comp2({}, key + \`__2\`, node, this, null);
     }
     return multi([b2, b3]);
@@ -1036,7 +1036,7 @@ exports[`creating two async components, scenario 1 3`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['getValue']();
+    let txt1 = ctx['this'].getValue();
     return block1([txt1]);
   }
 }"
@@ -1066,9 +1066,9 @@ exports[`creating two async components, scenario 2 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2, b3;
-    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
-    if (ctx['state'].flagB) {
-      b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
+    b2 = comp1({val: ctx['this'].state.valA}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.flagB) {
+      b3 = comp2({val: ctx['this'].state.valB}, key + \`__2\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -1114,9 +1114,9 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
   
   return function template(ctx, node, key = "") {
     let b2, b3;
-    b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
-    if (ctx['state'].flagB) {
-      b3 = comp2({val: ctx['state'].valB}, key + \`__2\`, node, this, null);
+    b2 = comp1({val: ctx['this'].state.valA}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.flagB) {
+      b3 = comp2({val: ctx['this'].state.valB}, key + \`__2\`, node, this, null);
     }
     return block1([], [b2, b3]);
   }
@@ -1158,7 +1158,7 @@ exports[`delay willUpdateProps 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1171,7 +1171,7 @@ exports[`delay willUpdateProps 2`] = `
   return function template(ctx, node, key = "") {
     const b2 = text(ctx['this'].props.value);
     const b3 = text(\`_\`);
-    const b4 = text(ctx['state'].int);
+    const b4 = text(ctx['this'].state.int);
     return multi([b2, b3, b4]);
   }
 }"
@@ -1184,7 +1184,7 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
   const comp1 = app.createComponent(\`Parent\`, true, false, false, ["state"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
+    return comp1({state: ctx['this'].state}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1212,7 +1212,7 @@ exports[`delay willUpdateProps with rendering grandchild 3`] = `
   return function template(ctx, node, key = "") {
     const b2 = text(ctx['this'].props.value);
     const b3 = text(\`_\`);
-    const b4 = text(ctx['state'].int);
+    const b4 = text(ctx['this'].state.int);
     return multi([b2, b3, b4]);
   }
 }"
@@ -1292,7 +1292,7 @@ exports[`delayed render does not go through when t-component value changed 1`] =
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`A\`);
-    const Comp1 = ctx['state'].component;
+    const Comp1 = ctx['this'].state.component;
     const b3 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
     return multi([b2, b3]);
   }
@@ -1306,7 +1306,7 @@ exports[`delayed render does not go through when t-component value changed 2`] =
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`B\`);
-    const b3 = text(ctx['state'].val);
+    const b3 = text(ctx['this'].state.val);
     return multi([b2, b3]);
   }
 }"
@@ -1355,7 +1355,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
   const comp1 = app.createComponent(\`B\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1367,7 +1367,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
   const comp1 = app.createComponent(\`C\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].someValue+ctx['this'].props.value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.someValue+ctx['this'].props.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1398,7 +1398,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
   
   return function template(ctx, node, key = "") {
     let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     return block1([hdlr1, txt1]);
   }
 }"
@@ -1412,7 +1412,7 @@ exports[`delayed rendering, destruction, stuff happens 1`] = `
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`A\`);
-    const b3 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    const b3 = comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
 }"
@@ -1427,8 +1427,8 @@ exports[`delayed rendering, destruction, stuff happens 2`] = `
   return function template(ctx, node, key = "") {
     let b2, b3;
     b2 = text(\`B\`);
-    if (ctx['state'].hasChild) {
-      b3 = comp1({value: ctx['state'].someValue+ctx['this'].props.value}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.hasChild) {
+      b3 = comp1({value: ctx['this'].state.someValue+ctx['this'].props.value}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -1463,7 +1463,7 @@ exports[`delayed rendering, destruction, stuff happens 4`] = `
   return function template(ctx, node, key = "") {
     const b2 = text(\`D\`);
     let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     const b3 = block3([hdlr1, txt1]);
     return multi([b2, b3]);
   }
@@ -1477,7 +1477,7 @@ exports[`delayed rendering, reusing fiber and stuff 1`] = `
   const comp1 = app.createComponent(\`B\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1509,7 +1509,7 @@ exports[`delayed rendering, reusing fiber and stuff 3`] = `
   
   return function template(ctx, node, key = "") {
     let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     return block1([hdlr1, txt1]);
   }
 }"
@@ -1524,8 +1524,8 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
   return function template(ctx, node, key = "") {
     let b2, b3;
     b2 = text(\`A\`);
-    if (ctx['state'].value<15) {
-      b3 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.value<15) {
+      b3 = comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3]);
   }
@@ -1555,7 +1555,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
   
   return function template(ctx, node, key = "") {
     let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     return block1([hdlr1, txt1]);
   }
 }"
@@ -1568,7 +1568,7 @@ exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
   const comp1 = app.createComponent(\`B\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1599,7 +1599,7 @@ exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
   
   return function template(ctx, node, key = "") {
     let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let txt1 = ctx['this'].state.val;
     return block1([hdlr1, txt1]);
   }
 }"
@@ -1615,9 +1615,9 @@ exports[`destroyed component causes other soon to be destroyed component to rere
   return function template(ctx, node, key = "") {
     let b2, b3;
     b2 = text(\` A \`);
-    if (ctx['state'].flag) {
-      const b4 = comp1({value: ctx['state'].valueB}, key + \`__1\`, node, this, null);
-      const b5 = comp2({value: ctx['state'].valueC}, key + \`__2\`, node, this, null);
+    if (ctx['this'].state.flag) {
+      const b4 = comp1({value: ctx['this'].state.valueB}, key + \`__1\`, node, this, null);
+      const b5 = comp2({value: ctx['this'].state.valueC}, key + \`__2\`, node, this, null);
       b3 = multi([b4, b5]);
     }
     return multi([b2, b3]);
@@ -1646,7 +1646,7 @@ exports[`destroyed component causes other soon to be destroyed component to rere
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
   return function template(ctx, node, key = "") {
-    return text(ctx['state'].val+ctx['this'].props.value);
+    return text(ctx['this'].state.val+ctx['this'].props.value);
   }
 }"
 `;
@@ -1660,7 +1660,7 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
   return function template(ctx, node, key = "") {
     let b2, b3;
     b2 = text(\`parent\`);
-    if (ctx['state'].hasChild) {
+    if (ctx['this'].state.hasChild) {
       b3 = comp1({}, key + \`__1\`, node, this, null);
     }
     return multi([b2, b3]);
@@ -1689,8 +1689,8 @@ exports[`destroying/recreating a subwidget with different props (if start is not
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].val>1) {
-      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.val>1) {
+      b2 = comp1({val: ctx['this'].state.val}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -1718,7 +1718,7 @@ exports[`parent and child rendered at exact same time 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1744,8 +1744,8 @@ exports[`properly behave when destroyed/unmounted while rendering  1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].flag) {
-      b2 = comp1({val: ctx['state'].val}, key + \`__1\`, node, this, null);
+    if (ctx['this'].state.flag) {
+      b2 = comp1({val: ctx['this'].state.val}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
   }
@@ -1819,7 +1819,7 @@ exports[`rendering parent twice, with different props on child and stuff 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1844,7 +1844,7 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] =
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`A\`);
-    const b3 = comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    const b3 = comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
     const b4 = comp2({}, key + \`__2\`, node, this, null);
     return multi([b2, b3, b4]);
   }
@@ -1877,8 +1877,8 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] =
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`D\`);
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let hdlr1 = [ctx['this'].increment, ctx];
+    let txt1 = ctx['this'].state.val;
     const b3 = block3([hdlr1, txt1]);
     return multi([b2, b3]);
   }
@@ -1894,8 +1894,8 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] =
   
   return function template(ctx, node, key = "") {
     const b2 = text(\`C\`);
-    let hdlr1 = [ctx['increment'], ctx];
-    let txt1 = ctx['state'].val;
+    let hdlr1 = [ctx['this'].increment, ctx];
+    let txt1 = ctx['this'].state.val;
     const b3 = block3([hdlr1, txt1]);
     return multi([b2, b3]);
   }
@@ -2008,9 +2008,9 @@ exports[`two renderings initiated between willPatch and patched 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       const tKey_1 = 'panel_'+ctx['state'].panel;
-      b2 = toggler(tKey_1, comp1({val: ctx['state'].panel}, tKey_1 + key + \`__1\`, node, this, null));
+      b2 = toggler(tKey_1, comp1({val: ctx['this'].state.panel}, tKey_1 + key + \`__1\`, node, this, null));
     }
     return block1([], [b2]);
   }
@@ -2039,7 +2039,7 @@ exports[`two sequential renderings before an animation frame 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, ["value"]);
   
   return function template(ctx, node, key = "") {
-    return comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null);
+    return comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2064,7 +2064,7 @@ exports[`update a sub-component twice in the same frame 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({val: ctx['this'].state.valA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -2093,7 +2093,7 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const b2 = comp1({val: ctx['state'].valA}, key + \`__1\`, node, this, null);
+    const b2 = comp1({val: ctx['this'].state.valA}, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
@@ -2107,7 +2107,7 @@ exports[`update a sub-component twice in the same frame, 2 2`] = `
   let block1 = createBlock(\`<span><block-text-0/></span>\`);
   
   return function template(ctx, node, key = "") {
-    let txt1 = ctx['val']();
+    let txt1 = ctx['this'].val();
     return block1([txt1]);
   }
 }"
diff --git a/tests/components/basics.test.ts b/tests/components/basics.test.ts
index 16df51b66..3145a7f28 100644
--- a/tests/components/basics.test.ts
+++ b/tests/components/basics.test.ts
@@ -91,7 +91,7 @@ describe("basics", () => {
 
   test("component with dynamic content can be updated", async () => {
     class Test extends Component {
-      static template = xml`<span><t t-esc="value"/></span>`;
+      static template = xml`<span><t t-esc="this.value"/></span>`;
       value = 1;
     }
 
@@ -108,7 +108,7 @@ describe("basics", () => {
   test("updating a component with t-foreach as root", async () => {
     class Test extends Component {
       static template = xml`
-        <t t-foreach="items" t-as="item" t-key="item">
+        <t t-foreach="this.items" t-as="item" t-key="item">
           <t t-esc="item"/>
         </t>`;
       items = ["one", "two", "three"];
@@ -250,7 +250,7 @@ describe("basics", () => {
 
   test("class component with dynamic text", async () => {
     class Test extends Component {
-      static template = xml`<span>My value: <t t-esc="value"/></span>`;
+      static template = xml`<span>My value: <t t-esc="this.value"/></span>`;
 
       value = 42;
     }
@@ -300,7 +300,7 @@ describe("basics", () => {
 
   test("simple component with a dynamic text", async () => {
     class Test extends Component {
-      static template = xml`<div><t t-esc="value" /></div>`;
+      static template = xml`<div><t t-esc="this.value" /></div>`;
       value = 3;
     }
 
@@ -314,7 +314,7 @@ describe("basics", () => {
 
   test("simple component, proxy", async () => {
     class Test extends Component {
-      static template = xml`<div><t t-esc="state.value" /></div>`;
+      static template = xml`<div><t t-esc="this.state.value" /></div>`;
       state = proxy({ value: 3 });
     }
 
@@ -379,7 +379,7 @@ describe("basics", () => {
     }
 
     class Parent extends Component {
-      static template = xml`<Child t-if="state.hasChild"/>`;
+      static template = xml`<Child t-if="this.state.hasChild"/>`;
       static components = { Child };
       state = proxy({ hasChild: false });
     }
@@ -399,8 +399,8 @@ describe("basics", () => {
     class Parent extends Component {
       static template = xml`
         <div>
-          <Child t-if="state.hasChild"/>
-          <span t-esc="state.text"/>
+          <Child t-if="this.state.hasChild"/>
+          <span t-esc="this.state.text"/>
         </div>`;
       static components = { Child };
       state = proxy({ hasChild: false, text: "1" });
@@ -422,7 +422,7 @@ describe("basics", () => {
   test("can be clicked on and updated", async () => {
     class Counter extends Component {
       static template = xml`
-      <div><t t-esc="state.counter"/><button t-on-click="() => state.counter++">Inc</button></div>`;
+      <div><t t-esc="this.state.counter"/><button t-on-click="() => this.state.counter++">Inc</button></div>`;
       state = proxy({
         counter: 0,
       });
@@ -440,7 +440,7 @@ describe("basics", () => {
   test("rerendering a widget with a sub widget", async () => {
     class Counter extends Component {
       static template = xml`
-      <div><t t-esc="state.counter"/><button t-on-click="() => state.counter++">Inc</button></div>`;
+      <div><t t-esc="this.state.counter"/><button t-on-click="() => this.state.counter++">Inc</button></div>`;
       state = proxy({
         counter: 0,
       });
@@ -479,7 +479,7 @@ describe("basics", () => {
     }
 
     class Parent extends Component {
-      static template = xml`<Child value="state.counter"/>`;
+      static template = xml`<Child value="this.state.counter"/>`;
       static components = { Child };
       state = proxy({
         counter: 0,
@@ -508,7 +508,7 @@ describe("basics", () => {
     }
 
     class Parent extends Component {
-      static template = xml`<Child child="state.child" />`;
+      static template = xml`<Child child="this.state.child" />`;
       static components = { Child };
 
       state = proxy({ child: "a" });
@@ -553,7 +553,7 @@ describe("basics", () => {
 
   test("do not remove previously rendered dom if not necessary, variation", async () => {
     class SomeComponent extends Component {
-      static template = xml`<div><h1>h1</h1><span><t t-esc="state.value"/></span></div>`;
+      static template = xml`<div><h1>h1</h1><span><t t-esc="this.state.value"/></span></div>`;
       state = proxy({ value: 1 });
     }
     const comp = await mount(SomeComponent, fixture);
@@ -643,7 +643,7 @@ describe("basics", () => {
       static template = xml`<span>hey</span>`;
     }
     class Parent extends Component {
-      static template = xml`<div><Child t-if="state.flag"/></div>`;
+      static template = xml`<div><Child t-if="this.state.flag"/></div>`;
       static components = { Child };
       state = proxy({ flag: true });
     }
@@ -669,7 +669,7 @@ describe("basics", () => {
     class Parent extends Component {
       static template = xml`
         <div>
-          <div t-if="state.flag">somediv</div>
+          <div t-if="this.state.flag">somediv</div>
           <Child t-else=""/>
         </div>`;
       static components = { Child };
@@ -693,8 +693,8 @@ describe("basics", () => {
     class Parent extends Component {
       static template = xml`
         <div>
-          <div t-if="state.flag">somediv</div>
-          <Child t-elif="!state.flag" />
+          <div t-if="this.state.flag">somediv</div>
+          <Child t-elif="!this.state.flag" />
         </div>`;
       static components = { Child };
       state = proxy({ flag: true });
@@ -717,7 +717,7 @@ describe("basics", () => {
     class Parent extends Component {
       static template = xml`
         <div>
-          <div t-if="state.flag">somediv</div>
+          <div t-if="this.state.flag">somediv</div>
           <Child t-else="" />
         </div>`;
       static components = { Child };
@@ -742,10 +742,10 @@ describe("basics", () => {
     class Parent extends Component {
       static template = xml`
         <div>
-          <h1 t-if="state.flag">hey</h1>
+          <h1 t-if="this.state.flag">hey</h1>
           <h2 t-else="">noo</h2>
           <span><Child/></span>
-          <t t-if="state.flag"><span>test</span></t>
+          <t t-if="this.state.flag"><span>test</span></t>
         </div>`;
       static components = { Child };
       state = proxy({ flag: false });
@@ -770,7 +770,7 @@ describe("basics", () => {
     class Parent extends Component {
       static template = xml`
       <div>
-          <div t-foreach="state.blips" t-as="blip" t-key="blip.id">
+          <div t-foreach="this.state.blips" t-as="blip" t-key="blip.id">
               <SubWidget />
               <SubWidget />
           </div>
@@ -791,7 +791,7 @@ describe("basics", () => {
       props = props();
     }
     class Parent extends Component {
-      static template = xml`<Child flag="state.flag"/>`;
+      static template = xml`<Child flag="this.state.flag"/>`;
       static components = { Child };
       state = proxy({ flag: false });
     }
@@ -804,7 +804,7 @@ describe("basics", () => {
   });
 
   test("can inject values in tagged templates", async () => {
-    const SUBTEMPLATE = xml`<span><t t-esc="state.n"/></span>`;
+    const SUBTEMPLATE = xml`<span><t t-esc="this.state.n"/></span>`;
     class Parent extends Component {
       static template = xml`<t t-call="${SUBTEMPLATE}"/>`;
       state = proxy({ n: 42 });
@@ -837,7 +837,7 @@ describe("basics", () => {
       static components = { Child };
       static template = xml`
         <div>
-          <Child t-key="childProps.key" t-props="childProps"/>
+          <Child t-key="this.childProps.key" t-props="this.childProps"/>
         </div>`;
       childProps = {
         key: 1,
@@ -874,7 +874,7 @@ describe("basics", () => {
     }
     class Parent extends Component {
       static components = { Child };
-      static template = xml`<Child t-if="ifVar" />`;
+      static template = xml`<Child t-if="this.ifVar" />`;
       ifVar = true;
     }
 
@@ -910,7 +910,7 @@ describe("basics", () => {
     }
     class Parent extends Component {
       static components = { Child };
-      static template = xml`<Child t-key="keyVar" />`;
+      static template = xml`<Child t-key="this.keyVar" />`;
       keyVar = 1;
     }
 
@@ -954,7 +954,7 @@ describe("basics", () => {
     }
 
     class Parent extends Component {
-      static template = xml`<t t-component="myComp" displayGrandChild="displayGrandChild"/>`;
+      static template = xml`<t t-component="this.myComp" displayGrandChild="this.displayGrandChild"/>`;
       myComp = Child;
       displayGrandChild = true;
     }
@@ -1052,7 +1052,7 @@ describe("support svg components", () => {
 describe("t-out in components", () => {
   test("update properly on state changes", async () => {
     class Test extends Component {
-      static template = xml`<div><t t-out="state.value"/></div>`;
+      static template = xml`<div><t t-out="this.state.value"/></div>`;
       state = proxy({ value: markup("<b>content</b>") });
     }
     const component = await mount(Test, fixture);
@@ -1069,7 +1069,7 @@ describe("t-out in components", () => {
     class Test extends Component {
       static template = xml`
         <div>
-            <t t-foreach="state.items" t-as="item" t-key="item">
+            <t t-foreach="this.state.items" t-as="item" t-key="item">
             <t t-esc="item"/>
             <t t-out="item"/>
             </t>
@@ -1088,8 +1088,8 @@ describe("t-out in components", () => {
   test("can switch the contents of two t-out repeatedly", async () => {
     class Test extends Component {
       static template = xml`
-        <t t-out="state.a"/>
-        <t t-out="state.b"/>
+        <t t-out="this.state.a"/>
+        <t t-out="this.state.b"/>
       `;
       state = proxy({
         a: markup("<div>1</div>"),
@@ -1114,7 +1114,7 @@ describe("t-out in components", () => {
 
   test("t-out and updating falsy values, ", async () => {
     class Test extends Component {
-      static template = xml`<t t-out="state.a"/>`;
+      static template = xml`<t t-out="this.state.a"/>`;
       state: any = proxy({ a: 0 });
     }
 
diff --git a/tests/components/concurrency.test.ts b/tests/components/concurrency.test.ts
index 78cb72e1a..380f3ebbe 100644
--- a/tests/components/concurrency.test.ts
+++ b/tests/components/concurrency.test.ts
@@ -96,7 +96,7 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   class W extends Component {
     static template = xml`
         <div>
-            <t t-if="state.val > 1"><Child val="state.val"/></t>
+            <t t-if="this.state.val > 1"><Child val="this.state.val"/></t>
         </div>`;
     static components = { Child };
     state = proxy({ val: 1 });
@@ -170,7 +170,7 @@ test("destroying/recreating a subcomponent, other scenario", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`parent<Child t-if="state.hasChild"/>`;
+    static template = xml`parent<Child t-if="this.state.hasChild"/>`;
     static components = { Child };
     state = proxy({ hasChild: false });
     setup() {
@@ -214,7 +214,7 @@ test("creating two async components, scenario 1", async () => {
   let nbRenderings: number = 0;
 
   class ChildA extends Component {
-    static template = xml`<span><t t-esc="getValue()"/></span>`;
+    static template = xml`<span><t t-esc="this.getValue()"/></span>`;
 
     setup() {
       useLogLifecycle();
@@ -237,8 +237,8 @@ test("creating two async components, scenario 1", async () => {
 
   class Parent extends Component {
     static template = xml`
-        <t t-if="state.flagA"><ChildA /></t>
-        <t t-if="state.flagB"><ChildB /></t>`;
+        <t t-if="this.state.flagA"><ChildA /></t>
+        <t t-if="this.state.flagB"><ChildB /></t>`;
 
     static components = { ChildA, ChildB };
     state = proxy({ flagA: false, flagB: false });
@@ -325,8 +325,8 @@ test("creating two async components, scenario 2", async () => {
   class Parent extends Component {
     static template = xml`
           <div>
-            <ChildA val="state.valA"/>
-            <t t-if="state.flagB"><ChildB val="state.valB"/></t>
+            <ChildA val="this.state.valA"/>
+            <t t-if="this.state.flagB"><ChildB val="this.state.valB"/></t>
           </div>`;
     static components = { ChildA, ChildB };
     state = proxy({ valA: 1, valB: 2, flagB: false });
@@ -410,8 +410,8 @@ test("creating two async components, scenario 3 (patching in the same frame)", a
   class Parent extends Component {
     static template = xml`
           <div>
-            <ChildA val="state.valA"/>
-            <t t-if="state.flagB"><ChildB val="state.valB"/></t>
+            <ChildA val="this.state.valA"/>
+            <t t-if="this.state.flagB"><ChildB val="this.state.valB"/></t>
           </div>`;
     static components = { ChildA, ChildB };
     state = proxy({ valA: 1, valB: 2, flagB: false });
@@ -483,7 +483,7 @@ test("update a sub-component twice in the same frame", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`<div><ChildA val="state.valA"/></div>`;
+    static template = xml`<div><ChildA val="this.state.valA"/></div>`;
     static components = { ChildA };
     state = proxy({ valA: 1 });
     setup() {
@@ -538,7 +538,7 @@ test("update a sub-component twice in the same frame", async () => {
 
 test("update a sub-component twice in the same frame, 2", async () => {
   class ChildA extends Component {
-    static template = xml`<span><t t-esc="val()"/></span>`;
+    static template = xml`<span><t t-esc="this.val()"/></span>`;
     props = props();
 
     setup() {
@@ -551,7 +551,7 @@ test("update a sub-component twice in the same frame, 2", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`<div><ChildA val="state.valA"/></div>`;
+    static template = xml`<div><ChildA val="this.state.valA"/></div>`;
     static components = { ChildA };
     state = proxy({ valA: 1 });
     setup() {
@@ -639,7 +639,7 @@ test("properly behave when destroyed/unmounted while rendering ", async () => {
 
   class Parent extends Component {
     static template = xml`
-        <div><t t-if="state.flag"><Child val="state.val"/></t></div>`;
+        <div><t t-if="this.state.flag"><Child val="this.state.val"/></t></div>`;
     static components = { Child };
     state = proxy({ flag: true, val: "Framboise Lindemans" });
     setup() {
@@ -759,7 +759,7 @@ test("concurrent renderings scenario 1", async () => {
   let stateB: any = null;
 
   class ComponentC extends Component {
-    static template = xml`<span><t t-esc="this.props.fromA"/><t t-esc="someValue()"/></span>`;
+    static template = xml`<span><t t-esc="this.props.fromA"/><t t-esc="this.someValue()"/></span>`;
     props = props();
     setup() {
       useLogLifecycle();
@@ -772,7 +772,7 @@ test("concurrent renderings scenario 1", async () => {
   ComponentC.prototype.someValue = jest.fn(ComponentC.prototype.someValue);
 
   class ComponentB extends Component {
-    static template = xml`<p><ComponentC fromA="this.props.fromA" fromB="state.fromB" /></p>`;
+    static template = xml`<p><ComponentC fromA="this.props.fromA" fromB="this.state.fromB" /></p>`;
     static components = { ComponentC };
     props = props();
     state = proxy({ fromB: "b" });
@@ -784,7 +784,7 @@ test("concurrent renderings scenario 1", async () => {
   }
 
   class ComponentA extends Component {
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     static components = { ComponentB };
     state = proxy({ fromA: 1 });
     setup() {
@@ -861,7 +861,7 @@ test("concurrent renderings scenario 2", async () => {
   }
 
   class ComponentB extends Component {
-    static template = xml`<p><ComponentC fromA="this.props.fromA" fromB="state.fromB" /></p>`;
+    static template = xml`<p><ComponentC fromA="this.props.fromA" fromB="this.state.fromB" /></p>`;
     static components = { ComponentC };
     props = props();
     state = proxy({ fromB: "b" });
@@ -873,7 +873,7 @@ test("concurrent renderings scenario 2", async () => {
   }
 
   class ComponentA extends Component {
-    static template = xml`<div><t t-esc="state.fromA"/><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><t t-esc="this.state.fromA"/><ComponentB fromA="this.state.fromA"/></div>`;
     static components = { ComponentB };
     state = proxy({ fromA: 1 });
     setup() {
@@ -951,7 +951,7 @@ test("concurrent renderings scenario 2bis", async () => {
   }
 
   class ComponentB extends Component {
-    static template = xml`<p><ComponentC fromA="this.props.fromA" fromB="state.fromB" /></p>`;
+    static template = xml`<p><ComponentC fromA="this.props.fromA" fromB="this.state.fromB" /></p>`;
     static components = { ComponentC };
     props = props();
     state = proxy({ fromB: "b" });
@@ -963,7 +963,7 @@ test("concurrent renderings scenario 2bis", async () => {
   }
 
   class ComponentA extends Component {
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     static components = { ComponentB };
     state = proxy({ fromA: 1 });
 
@@ -1034,7 +1034,7 @@ test("concurrent renderings scenario 3", async () => {
   let stateC: any = null;
 
   class ComponentD extends Component {
-    static template = xml`<i><t t-esc="this.props.fromA"/><t t-esc="someValue()"/></i>`;
+    static template = xml`<i><t t-esc="this.props.fromA"/><t t-esc="this.someValue()"/></i>`;
     props = props();
 
     setup() {
@@ -1048,7 +1048,7 @@ test("concurrent renderings scenario 3", async () => {
   ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue);
 
   class ComponentC extends Component {
-    static template = xml`<span><ComponentD fromA="this.props.fromA" fromC="state.fromC" /></span>`;
+    static template = xml`<span><ComponentD fromA="this.props.fromA" fromC="this.state.fromC" /></span>`;
     static components = { ComponentD };
     props = props();
     state = proxy({ fromC: "c" });
@@ -1071,7 +1071,7 @@ test("concurrent renderings scenario 3", async () => {
 
   class ComponentA extends Component {
     static components = { ComponentB };
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     props = props();
     state = proxy({ fromA: 1 });
 
@@ -1148,7 +1148,7 @@ test("concurrent renderings scenario 4", async () => {
   let stateC: any = null;
 
   class ComponentD extends Component {
-    static template = xml`<i><t t-esc="this.props.fromA"/><t t-esc="someValue()"/></i>`;
+    static template = xml`<i><t t-esc="this.props.fromA"/><t t-esc="this.someValue()"/></i>`;
     props = props();
 
     setup() {
@@ -1162,7 +1162,7 @@ test("concurrent renderings scenario 4", async () => {
   ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue);
 
   class ComponentC extends Component {
-    static template = xml`<span><ComponentD fromA="this.props.fromA" fromC="state.fromC" /></span>`;
+    static template = xml`<span><ComponentD fromA="this.props.fromA" fromC="this.state.fromC" /></span>`;
     static components = { ComponentD };
     props = props();
     state = proxy({ fromC: "c" });
@@ -1185,7 +1185,7 @@ test("concurrent renderings scenario 4", async () => {
 
   class ComponentA extends Component {
     static components = { ComponentB };
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     state = proxy({ fromA: 1 });
 
     setup() {
@@ -1265,7 +1265,7 @@ test("concurrent renderings scenario 5", async () => {
   let index = 0;
 
   class ComponentB extends Component {
-    static template = xml`<p><t t-esc="someValue()" /></p>`;
+    static template = xml`<p><t t-esc="this.someValue()" /></p>`;
     props = props();
 
     setup() {
@@ -1280,7 +1280,7 @@ test("concurrent renderings scenario 5", async () => {
 
   class ComponentA extends Component {
     static components = { ComponentB };
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     state = proxy({ fromA: 1 });
     setup() {
       useLogLifecycle();
@@ -1343,7 +1343,7 @@ test("concurrent renderings scenario 6", async () => {
   let index = 0;
 
   class ComponentB extends Component {
-    static template = xml`<p><t t-esc="someValue()" /></p>`;
+    static template = xml`<p><t t-esc="this.someValue()" /></p>`;
     props = props();
 
     setup() {
@@ -1358,7 +1358,7 @@ test("concurrent renderings scenario 6", async () => {
 
   class ComponentA extends Component {
     static components = { ComponentB };
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     state = proxy({ fromA: 1 });
 
     setup() {
@@ -1419,7 +1419,7 @@ test("concurrent renderings scenario 6", async () => {
 
 test("concurrent renderings scenario 7", async () => {
   class ComponentB extends Component {
-    static template = xml`<p><t t-esc="this.props.fromA" /><t t-esc="someValue()" /></p>`;
+    static template = xml`<p><t t-esc="this.props.fromA" /><t t-esc="this.someValue()" /></p>`;
     props = props();
     state = proxy({ fromB: "b" });
 
@@ -1437,7 +1437,7 @@ test("concurrent renderings scenario 7", async () => {
 
   class ComponentA extends Component {
     static components = { ComponentB };
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     state = proxy({ fromA: 1 });
     setup() {
       useLogLifecycle();
@@ -1477,7 +1477,7 @@ test("concurrent renderings scenario 8", async () => {
   const def = makeDeferred();
   let stateB: any = null;
   class ComponentB extends Component {
-    static template = xml`<p><t t-esc="this.props.fromA" /><t t-esc="state.fromB" /></p>`;
+    static template = xml`<p><t t-esc="this.props.fromA" /><t t-esc="this.state.fromB" /></p>`;
     props = props();
     state = proxy({ fromB: "b" });
     setup() {
@@ -1489,7 +1489,7 @@ test("concurrent renderings scenario 8", async () => {
 
   class ComponentA extends Component {
     static components = { ComponentB };
-    static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
+    static template = xml`<div><ComponentB fromA="this.state.fromA"/></div>`;
     state = proxy({ fromA: 1 });
     setup() {
       useLogLifecycle();
@@ -1561,7 +1561,7 @@ test("concurrent renderings scenario 9", async () => {
   }
 
   class ComponentC extends Component {
-    static template = xml`<p><ComponentD fromA="this.props.fromA" fromC="state.fromC" /></p>`;
+    static template = xml`<p><ComponentD fromA="this.props.fromA" fromC="this.state.fromC" /></p>`;
     static components = { ComponentD };
     props = props();
     state = proxy({ fromC: "b1" });
@@ -1583,9 +1583,9 @@ test("concurrent renderings scenario 9", async () => {
   class ComponentA extends Component {
     static template = xml`
           <div>
-            <t t-esc="state.fromA"/>
-            <ComponentB fromA="state.fromA"/>
-            <ComponentC fromA="state.fromA"/>
+            <t t-esc="this.state.fromA"/>
+            <ComponentB fromA="this.state.fromA"/>
+            <ComponentC fromA="this.state.fromA"/>
           </div>`;
     static components = { ComponentB, ComponentC };
     state = proxy({ fromA: "a1" });
@@ -1684,7 +1684,7 @@ test("concurrent renderings scenario 10", async () => {
   }
 
   class ComponentB extends Component {
-    static template = xml`<p><ComponentC t-if="state.hasChild" value="this.props.value"/></p>`;
+    static template = xml`<p><ComponentC t-if="this.state.hasChild" value="this.props.value"/></p>`;
     static components = { ComponentC };
     props = props();
     state = proxy({ hasChild: false });
@@ -1696,7 +1696,7 @@ test("concurrent renderings scenario 10", async () => {
   }
 
   class ComponentA extends Component {
-    static template = xml`<div><ComponentB value="state.value"/></div>`;
+    static template = xml`<div><ComponentB value="this.state.value"/></div>`;
     static components = { ComponentB };
     state = proxy({ value: 1 });
 
@@ -1779,7 +1779,7 @@ test("concurrent renderings scenario 11", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`<div><Child val="state.valA"/></div>`;
+    static template = xml`<div><Child val="this.state.valA"/></div>`;
     static components = { Child };
     state = proxy({ valA: 1 });
     setup() {
@@ -1907,7 +1907,7 @@ test("concurrent renderings scenario 13", async () => {
   let lastChild: any = null;
 
   class Child extends Component {
-    static template = xml`<span><t t-esc="state.val"/></span>`;
+    static template = xml`<span><t t-esc="this.state.val"/></span>`;
     state = proxy({ val: 0 });
     setup() {
       useLogLifecycle();
@@ -1925,7 +1925,7 @@ test("concurrent renderings scenario 13", async () => {
     static template = xml`
           <div>
             <Child/>
-            <Child t-if="state.bool"/>
+            <Child t-if="this.state.bool"/>
           </div>`;
     static components = { Child };
     state = proxy({ bool: false });
@@ -1988,7 +1988,7 @@ test("concurrent renderings scenario 14", async () => {
        <p>
         <span t-esc="this.props.fromA"/>
         <span t-esc="this.props.fromB"/>
-        <span t-esc="state.fromC"/>
+        <span t-esc="this.state.fromC"/>
        </p>`;
 
     props = props();
@@ -1999,7 +1999,7 @@ test("concurrent renderings scenario 14", async () => {
     }
   }
   class B extends Component {
-    static template = xml`<p><C fromB="state.fromB" fromA="this.props.fromA"/></p>`;
+    static template = xml`<p><C fromB="this.state.fromB" fromA="this.props.fromA"/></p>`;
     static components = { C };
     setup() {
       useLogLifecycle();
@@ -2010,7 +2010,7 @@ test("concurrent renderings scenario 14", async () => {
   }
 
   class A extends Component {
-    static template = xml`<p><B fromA="state.fromA"/></p>`;
+    static template = xml`<p><B fromA="this.state.fromA"/></p>`;
     static components = { B };
     state = proxy({ fromA: 1 });
 
@@ -2082,7 +2082,7 @@ test("concurrent renderings scenario 15", async () => {
        <p>
         <span t-esc="this.props.fromA"/>
         <span t-esc="this.props.fromB"/>
-        <span t-esc="state.fromC"/>
+        <span t-esc="this.state.fromC"/>
        </p>`;
 
     props = props();
@@ -2093,7 +2093,7 @@ test("concurrent renderings scenario 15", async () => {
     }
   }
   class B extends Component {
-    static template = xml`<p><C fromB="state.fromB" fromA="this.props.fromA"/></p>`;
+    static template = xml`<p><C fromB="this.state.fromB" fromA="this.props.fromA"/></p>`;
     static components = { C };
     setup() {
       useLogLifecycle();
@@ -2103,7 +2103,7 @@ test("concurrent renderings scenario 15", async () => {
     state = proxy({ fromB: 2 });
   }
   class A extends Component {
-    static template = xml`<p><B fromA="state.fromA"/></p>`;
+    static template = xml`<p><B fromA="this.state.fromA"/></p>`;
     static components = { B };
     state = proxy({ fromA: 1 });
     setup() {
@@ -2193,8 +2193,8 @@ test("concurrent renderings scenario 16", async () => {
   }
   class C extends Component {
     static template = xml`
-        <t t-esc="this.props.fromA"/>:<t t-esc="this.props.fromB"/>:<t t-esc="state.fromC"/>:
-        <D t-if="state.fromC === 13"/>`;
+        <t t-esc="this.props.fromA"/>:<t t-esc="this.props.fromB"/>:<t t-esc="this.state.fromC"/>:
+        <D t-if="this.state.fromC === 13"/>`;
     static components = { D };
     props = props();
     state = { fromC: 3 }; // not proxy
@@ -2204,7 +2204,7 @@ test("concurrent renderings scenario 16", async () => {
     }
   }
   class B extends Component {
-    static template = xml`<C fromB="state.fromB" fromA="this.props.fromA"/>`;
+    static template = xml`<C fromB="this.state.fromB" fromA="this.props.fromA"/>`;
     static components = { C };
     setup() {
       useLogLifecycle();
@@ -2214,7 +2214,7 @@ test("concurrent renderings scenario 16", async () => {
     state = { fromB: 2 };
   }
   class A extends Component {
-    static template = xml`<B fromA="state.fromA"/>`;
+    static template = xml`<B fromA="this.state.fromA"/>`;
     static components = { B };
     state = proxy({ fromA: 1 });
 
@@ -2329,7 +2329,7 @@ test("calling render in destroy", async () => {
   }
 
   class A extends Component {
-    static template = xml`<B t-key="key" fromA="state"/>`;
+    static template = xml`<B t-key="key" fromA="this.state"/>`;
     static components = { B };
     state = "a";
     key = 1;
@@ -2357,11 +2357,7 @@ test("calling render in destroy", async () => {
   await nextTick();
   expect(steps.splice(0)).toMatchInlineSnapshot(`
     [
-      "B:setup",
-      "B:willStart",
-      "B:willUnmount",
-      "B:willDestroy",
-      "B:mounted",
+      "B:willUpdateProps",
       "B:willPatch",
       "B:patched",
     ]
@@ -2463,7 +2459,7 @@ test("changing state before first render does not trigger a render (with parent)
 
   class Parent extends Component {
     static components = { TestW };
-    static template = xml`<div><TestW t-if="state.flag"/></div>`;
+    static template = xml`<div><TestW t-if="this.state.flag"/></div>`;
     setup() {
       useLogLifecycle();
     }
@@ -2514,7 +2510,7 @@ test("two renderings initiated between willPatch and patched", async () => {
 
   // Main root component
   class Parent extends Component {
-    static template = xml`<div><Panel t-key="'panel_' + state.panel" val="state.panel" t-if="state.flag"/></div>`;
+    static template = xml`<div><Panel t-key="'panel_' + state.panel" val="this.state.panel" t-if="this.state.flag"/></div>`;
     static components = { Panel };
     state = proxy({ panel: "Panel1", flag: true });
     setup() {
@@ -2613,7 +2609,7 @@ test("parent and child rendered at exact same time", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`<Child value="state.value"/>`;
+    static template = xml`<Child value="this.state.value"/>`;
     static components = { Child };
     state = { value: 0 };
     setup() {
@@ -2655,7 +2651,7 @@ test("delay willUpdateProps", async () => {
   let child: any;
 
   class Child extends Component {
-    static template = xml`<t t-esc="this.props.value"/>_<t t-esc="state.int" />`;
+    static template = xml`<t t-esc="this.props.value"/>_<t t-esc="this.state.int" />`;
     props = props();
     state: any;
     setup() {
@@ -2670,7 +2666,7 @@ test("delay willUpdateProps", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`<Child value="state.value"/>`;
+    static template = xml`<Child value="this.state.value"/>`;
     static components = { Child };
     state = { value: 0 };
     setup() {
@@ -2747,7 +2743,7 @@ test("delay willUpdateProps with rendering grandchild", async () => {
 
   // Delayed willUpdateProps
   class DelayedChild extends Component {
-    static template = xml`<t t-esc="this.props.value"/>_<t t-esc="state.int" />`;
+    static template = xml`<t t-esc="this.props.value"/>_<t t-esc="this.state.int" />`;
     props = props();
     state: any;
     setup() {
@@ -2781,7 +2777,7 @@ test("delay willUpdateProps with rendering grandchild", async () => {
   }
 
   class GrandParent extends Component {
-    static template = xml`<Parent state="state"/>`;
+    static template = xml`<Parent state="this.state"/>`;
     static components = { Parent };
     state = { value: 0 };
     setup() {
@@ -2877,7 +2873,7 @@ test("two sequential renderings before an animation frame", async () => {
   }
 
   class Parent extends Component {
-    static template = xml`<Child value="state.value"/>`;
+    static template = xml`<Child value="this.state.value"/>`;
     static components = { Child };
     state = proxy({ value: 0 });
     setup() {
@@ -3127,7 +3123,7 @@ test("Cascading renders after microtaskTick", async () => {
   class Child extends Component {
     static components = { Element };
     static template = xml`
-      <t t-foreach="state" t-as="elem" t-key="elem.id">
+      <t t-foreach="this.state" t-as="elem" t-key="elem.id">
         <Element id="elem.id"/>
       </t>`;
     state = state;
@@ -3138,7 +3134,7 @@ test("Cascading renders after microtaskTick", async () => {
 
   class Parent extends Component {
     static components = { Child };
-    static template = xml`<Child /> _ <t t-foreach="state" t-as="elem" t-key="elem.id" t-esc="elem.id"/>`;
+    static template = xml`<Child /> _ <t t-foreach="this.state" t-as="elem" t-key="elem.id" t-esc="elem.id"/>`;
     state = state;
     setup() {
       parent = this;
@@ -3172,7 +3168,7 @@ test("rendering parent twice, with different props on child and stuff", async ()
   }
 
   class Parent extends Component {
-    static template = xml`<Child value="state.value"/>`;
+    static template = xml`<Child value="this.state.value"/>`;
     static components = { Child };
     state = proxy({ value: 1 });
     setup() {
@@ -3226,7 +3222,7 @@ test("delayed rendering, but then initial rendering is cancelled by yet another
   let stateB: any = null;
 
   class D extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    static template = xml`<button t-on-click="increment"><t t-esc="this.state.val"/></button>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3247,7 +3243,7 @@ test("delayed rendering, but then initial rendering is cancelled by yet another
   }
 
   class B extends Component {
-    static template = xml`<C value="state.someValue + this.props.value"/>`;
+    static template = xml`<C value="this.state.someValue + this.props.value"/>`;
     static components = { C };
     props = props();
     state = proxy({ someValue: 3 });
@@ -3258,7 +3254,7 @@ test("delayed rendering, but then initial rendering is cancelled by yet another
   }
 
   class A extends Component {
-    static template = xml`<B value="state.value"/>`;
+    static template = xml`<B value="this.state.value"/>`;
     static components = { B };
     state = proxy({ value: 33 });
     setup() {
@@ -3313,8 +3309,6 @@ test("delayed rendering, but then initial rendering is cancelled by yet another
   await nextTick();
   expect(steps.splice(0)).toMatchInlineSnapshot(`
     [
-      "D:willPatch",
-      "D:patched",
       "A:willPatch",
       "B:willPatch",
       "C:willPatch",
@@ -3331,7 +3325,7 @@ test("delayed rendering, reusing fiber and stuff", async () => {
   let prom2 = makeDeferred();
 
   class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    static template = xml`<button t-on-click="increment"><t t-esc="this.state.val"/></button>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3364,7 +3358,7 @@ test("delayed rendering, reusing fiber and stuff", async () => {
   }
 
   class A extends Component {
-    static template = xml`<B value="state.value"/>`;
+    static template = xml`<B value="this.state.value"/>`;
     static components = { B };
     state = proxy({ value: 33 });
     setup() {
@@ -3428,7 +3422,7 @@ test("delayed rendering, then component is destroyed and  stuff", async () => {
   let prom1 = makeDeferred();
 
   class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    static template = xml`<button t-on-click="increment"><t t-esc="this.state.val"/></button>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3449,7 +3443,7 @@ test("delayed rendering, then component is destroyed and  stuff", async () => {
   }
 
   class A extends Component {
-    static template = xml`<B value="state.value"/>`;
+    static template = xml`<B value="this.state.value"/>`;
     static components = { B };
     state = proxy({ value: 3 });
     setup() {
@@ -3507,7 +3501,7 @@ test("delayed rendering, reusing fiber then component is destroyed and  stuff",
   let prom1 = makeDeferred();
 
   class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    static template = xml`<button t-on-click="increment"><t t-esc="this.state.val"/></button>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3528,7 +3522,7 @@ test("delayed rendering, reusing fiber then component is destroyed and  stuff",
   }
 
   class A extends Component {
-    static template = xml`A<t t-if="state.value lt 15"><B value="state.value"/></t>`;
+    static template = xml`A<t t-if="this.state.value lt 15"><B value="this.state.value"/></t>`;
     static components = { B };
     state = proxy({ value: 3 });
     setup() {
@@ -3587,7 +3581,7 @@ test("another scenario with delayed rendering", async () => {
   let onSecondRenderA = makeDeferred();
 
   class C extends Component {
-    static template = xml`<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    static template = xml`<button t-on-click="increment"><t t-esc="this.state.val"/></button>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3608,7 +3602,7 @@ test("another scenario with delayed rendering", async () => {
   }
 
   class A extends Component {
-    static template = xml`A<t t-if="state.value lt 15"><B value="state.value"/></t><t t-set="noop" t-value="this.notify()"/>`;
+    static template = xml`A<t t-if="this.state.value lt 15"><B value="this.state.value"/></t><t t-set="noop" t-value="this.notify()"/>`;
     static components = { B };
     state = proxy({ value: 3 });
     notify: any;
@@ -3775,7 +3769,7 @@ test("destroyed component causes other soon to be destroyed component to rerende
     }
   }
   class C extends Component {
-    static template = xml`<t t-esc="state.val + this.props.value"/>`;
+    static template = xml`<t t-esc="this.state.val + this.props.value"/>`;
     props = props();
     state = proxy({ val: 0 });
     setup() {
@@ -3787,9 +3781,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
   class A extends Component {
     static template = xml`
       A
-      <t t-if="state.flag">
-        <B value="state.valueB"/>
-        <C value="state.valueC"/>
+      <t t-if="this.state.flag">
+        <B value="this.state.valueB"/>
+        <C value="this.state.valueC"/>
       </t>`;
     static components = { B, C };
     state = proxy({ flag: false, valueB: 1, valueC: 2 });
@@ -3848,7 +3842,7 @@ test("delayed rendering, destruction, stuff happens", async () => {
   let stateB: any = null;
 
   class D extends Component {
-    static template = xml`D<button t-on-click="increment"><t t-esc="state.val"/></button>`;
+    static template = xml`D<button t-on-click="increment"><t t-esc="this.state.val"/></button>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3869,7 +3863,7 @@ test("delayed rendering, destruction, stuff happens", async () => {
   }
 
   class B extends Component {
-    static template = xml`B<t t-if="state.hasChild"><C value="state.someValue + this.props.value"/></t>`;
+    static template = xml`B<t t-if="this.state.hasChild"><C value="this.state.someValue + this.props.value"/></t>`;
     static components = { C };
     props = props();
     state = proxy({ someValue: 3, hasChild: true });
@@ -3880,7 +3874,7 @@ test("delayed rendering, destruction, stuff happens", async () => {
   }
 
   class A extends Component {
-    static template = xml`A<B value="state.value"/>`;
+    static template = xml`A<B value="this.state.value"/>`;
     static components = { B };
     state = proxy({ value: 33 });
     setup() {
@@ -3941,7 +3935,7 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
   const promB = makeDeferred();
 
   class D extends Component {
-    static template = xml`D<p t-on-click="increment"><t t-esc="state.val"/></p>`;
+    static template = xml`D<p t-on-click="this.increment"><t t-esc="this.state.val"/></p>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3953,7 +3947,7 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
 
   // almost the same as D
   class C extends Component {
-    static template = xml`C<span t-on-click="increment"><t t-esc="state.val"/></span>`;
+    static template = xml`C<span t-on-click="this.increment"><t t-esc="this.state.val"/></span>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle();
@@ -3974,7 +3968,7 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
   }
 
   class A extends Component {
-    static template = xml`A<B value="state.value"/><D/>`;
+    static template = xml`A<B value="this.state.value"/><D/>`;
     static components = { B, D };
     state = proxy({ value: 33 });
     setup() {
@@ -4033,12 +4027,7 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
   // update D => should just render completely independently
   fixture.querySelector("p")!.click();
   await nextTick();
-  expect(steps.splice(0)).toMatchInlineSnapshot(`
-    [
-      "D:willPatch",
-      "D:patched",
-    ]
-  `);
+  expect(steps.splice(0)).toMatchInlineSnapshot(`[]`);
   expect(fixture.innerHTML).toBe("ABD<p>2</p>");
 });
 
@@ -4051,7 +4040,7 @@ test("delayed render does not go through when t-component value changed", async
   }
 
   class B extends Component {
-    static template = xml`B<t t-esc="state.val"/>`;
+    static template = xml`B<t t-esc="this.state.val"/>`;
     state = proxy({ val: 1 });
     setup() {
       useLogLifecycle("", true);
@@ -4061,7 +4050,7 @@ test("delayed render does not go through when t-component value changed", async
   let b: B;
 
   class A extends Component {
-    static template = xml`A<t t-component="state.component"/>`;
+    static template = xml`A<t t-component="this.state.component"/>`;
     state: { component: ComponentConstructor } = proxy({ component: B });
     setup() {
       useLogLifecycle("", true);
@@ -4114,7 +4103,7 @@ test.skip("delayed render is not cancelled by upcoming render", async () => {
 
   class A extends Component {
     static components = { B };
-    static template = xml`<B state="state" isEmpty="state.groups.length === 0"/>`;
+    static template = xml`<B state="this.state" isEmpty="this.state.groups.length === 0"/>`;
 
     state = proxy({ groups: [], config: { test: "initial" } });
     setup() {
@@ -4197,7 +4186,7 @@ test("components are not destroyed between animation frame", async () => {
     }
   }
   class A extends Component {
-    static template = xml`A<B t-if="state.flag"/>`;
+    static template = xml`A<B t-if="this.state.flag"/>`;
     static components = { B };
 
     state = proxy({ flag: false });
@@ -4256,7 +4245,7 @@ test("component destroyed just after render", async () => {
   let stateB: any;
 
   class B extends Component {
-    static template = xml`B<t t-esc="state.value"/>`;
+    static template = xml`B<t t-esc="this.state.value"/>`;
     state = proxy({ value: 1 });
     setup() {
       stateB = this.state;
@@ -4305,7 +4294,7 @@ test("component destroyed just after render", async () => {
 //     class ChildChild extends Component {
 //       static template = xml`
 //         <div>
-//           child child: <t t-esc="state.cc"/>
+//           child child: <t t-esc="this.state.cc"/>
 //         </div>`;
 //       state = state;
 //       shouldUpdate() {
@@ -4331,7 +4320,7 @@ test("component destroyed just after render", async () => {
 //       static components = { Child };
 //       static template = xml`
 //         <div>
-//           parent: <t t-esc="state.p"/>
+//           parent: <t t-esc="this.state.p"/>
 //           <Child/>
 //         </div>`;
 
@@ -4383,7 +4372,7 @@ test("component destroyed just after render", async () => {
 //     class ChildChild extends Component {
 //       static template = xml`
 //         <div>
-//           child child: <t t-esc="state.cc"/>
+//           child child: <t t-esc="this.state.cc"/>
 //         </div>`;
 //       state = state;
 //       shouldUpdate() {
@@ -4409,7 +4398,7 @@ test("component destroyed just after render", async () => {
 //       static components = { Child };
 //       static template = xml`
 //         <div>
-//           parent: <t t-esc="state.p"/>
+//           parent: <t t-esc="this.state.p"/>
 //           <Child/>
 //         </div>`;
 

From ed9f1d6f16bff678f0741fb509f9f5e559093e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 9 Dec 2025 21:11:02 +0100
Subject: [PATCH 2/2] wip

---
 .../__snapshots__/t_on.test.ts.snap           | 52 +++++++++----------
 tests/components/t_on.test.ts                 | 38 +++++++-------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/tests/components/__snapshots__/t_on.test.ts.snap b/tests/components/__snapshots__/t_on.test.ts.snap
index 0763f6e9e..beb5ecd36 100644
--- a/tests/components/__snapshots__/t_on.test.ts.snap
+++ b/tests/components/__snapshots__/t_on.test.ts.snap
@@ -14,13 +14,13 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, "iter", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['this'].arr);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = k_block2[i1];
       const key1 = ctx['val'];
-      const v1 = ctx['otherState'];
+      const v1 = ctx['this'];
       const v2 = ctx['iter'];
-      let hdlr1 = [()=>v1.vals.push(v2+'_'+v2), ctx];
+      let hdlr1 = [()=>v1.otherState.vals.push(v2+'_'+v2), ctx];
       setContextValue(ctx, "iter", ctx['iter']+1);
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
@@ -41,16 +41,16 @@ exports[`t-on t-on expression in t-foreach 1`] = `
   
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['this'].state.values);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = k_block2[i1];
       ctx[\`val_index\`] = i1;
       const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
-      const v1 = ctx['otherState'];
+      const v1 = ctx['this'];
       const v2 = ctx['val'];
-      let hdlr1 = [()=>v1.vals.push(v2), ctx];
+      let hdlr1 = [()=>v1.otherState.vals.push(v2), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -73,7 +73,7 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, "bossa", 'nova');
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['this'].state.values);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = k_block2[i1];
       ctx[\`val_index\`] = i1;
@@ -81,10 +81,10 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
       setContextValue(ctx, "bossa", ctx['bossa']+'_'+ctx['val_index']);
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
-      const v1 = ctx['otherState'];
+      const v1 = ctx['this'];
       const v2 = ctx['val'];
       const v3 = ctx['bossa'];
-      let hdlr1 = [()=>v1.vals.push(v2+'_'+v3), ctx];
+      let hdlr1 = [()=>v1.otherState.vals.push(v2+'_'+v3), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -104,7 +104,7 @@ exports[`t-on t-on method call in t-foreach 1`] = `
   
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['this'].state.values);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = k_block2[i1];
       ctx[\`val_index\`] = i1;
@@ -134,7 +134,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, this, null), [hdlr1]);
+    const b2 = catcher1(comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null), [hdlr1]);
     let hdlr2 = [ctx['decrement'], ctx];
     return block1([hdlr2], [b2]);
   }
@@ -164,8 +164,8 @@ exports[`t-on t-on on components 1`] = `
   const catcher1 = createCatcher({"click":0});
   
   return function template(ctx, node, key = "") {
-    const hdlr1 = [ctx['increment'], ctx];
-    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
+    const hdlr1 = [ctx['this'].increment, ctx];
+    return catcher1(comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -233,8 +233,8 @@ exports[`t-on t-on on components, variation 1`] = `
   let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
   
   return function template(ctx, node, key = "") {
-    const hdlr1 = [ctx['increment'], ctx];
-    const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
+    const hdlr1 = [ctx['this'].increment, ctx];
+    const b2 = catcher1(comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null), [hdlr1]);
     return block1([], [b2]);
   }
 }"
@@ -263,8 +263,8 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
   const catcher1 = createCatcher({"click.prevent":0});
   
   return function template(ctx, node, key = "") {
-    const hdlr1 = ["prevent", ctx['increment'], ctx];
-    return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
+    const hdlr1 = ["prevent", ctx['this'].increment, ctx];
+    return catcher1(comp1({value: ctx['this'].state.value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
 `;
@@ -294,7 +294,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    setContextValue(ctx, "name", ctx['state'].name);
+    setContextValue(ctx, "name", ctx['this'].state.name);
     const v1 = ctx['this'];
     const v2 = ctx['name'];
     const hdlr1 = [()=>v1.log(v2), ctx];
@@ -327,7 +327,7 @@ exports[`t-on t-on on destroyed components 1`] = `
   
   return function template(ctx, node, key = "") {
     let b2;
-    if (ctx['state'].flag) {
+    if (ctx['this'].state.flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
     return block1([], [b2]);
@@ -343,7 +343,7 @@ exports[`t-on t-on on destroyed components 2`] = `
   let block1 = createBlock(\`<div block-handler-0="click"/>\`);
   
   return function template(ctx, node, key = "") {
-    let hdlr1 = [ctx['onClick'], ctx];
+    let hdlr1 = [ctx['this'].onClick, ctx];
     return block1([hdlr1]);
   }
 }"
@@ -376,7 +376,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
   const catcher1 = createCatcher({"click.prevent":0});
   
   return function template(ctx, node, key = "") {
-    const hdlr1 = ["prevent", ctx['doSomething'], ctx];
+    const hdlr1 = ["prevent", ctx['this'].doSomething, ctx];
     return catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
   }
 }"
@@ -410,7 +410,7 @@ exports[`t-on t-on on t-call-slots 2`] = `
   
   return function template(ctx, node, key = "") {
     const b2 = text(\` [\`);
-    const b3 = text(ctx['state'].count);
+    const b3 = text(ctx['this'].state.count);
     const b4 = text(\`] \`);
     const v1 = ctx['this'];
     const hdlr1 = [()=>v1.state.count++, ctx];
@@ -441,7 +441,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
   
   return function template(ctx, node, key = "") {
     const b2 = text(\` [\`);
-    const b3 = text(ctx['state'].count);
+    const b3 = text(ctx['this'].state.count);
     const b4 = text(\`] \`);
     const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4, b8]);
@@ -472,9 +472,9 @@ exports[`t-on t-on when first component child is an empty component 1`] = `
   let block1 = createBlock(\`<div block-handler-0="click"><block-child-0/></div>\`);
   
   return function template(ctx, node, key = "") {
-    let hdlr1 = [ctx['push'], ctx];
+    let hdlr1 = [ctx['this'].push, ctx];
     const hdlr2 = [()=>{}, ctx];
-    const b2 = catcher1(comp1({list: ctx['list']}, key + \`__1\`, node, this, null), [hdlr2]);
+    const b2 = catcher1(comp1({list: ctx['this'].list}, key + \`__1\`, node, this, null), [hdlr2]);
     return block1([hdlr1], [b2]);
   }
 }"
@@ -495,7 +495,7 @@ exports[`t-on t-on when first component child is an empty component 2`] = `
       ctx[\`c\`] = k_block1[i1];
       ctx[\`c_index\`] = i1;
       const key1 = ctx['c_index'];
-      let txt1 = ctx['c'];
+      let txt1 = ctx['this'].c;
       c_block1[i1] = withKey(block2([txt1]), key1);
     }
     return list(c_block1);
diff --git a/tests/components/t_on.test.ts b/tests/components/t_on.test.ts
index fbe431ee8..6490ba36a 100644
--- a/tests/components/t_on.test.ts
+++ b/tests/components/t_on.test.ts
@@ -15,7 +15,7 @@ describe("t-on", () => {
     const steps: string[] = [];
     let child: any;
     class Child extends Component {
-      static template = xml`<div t-on-click="onClick"/>`;
+      static template = xml`<div t-on-click="this.onClick"/>`;
       setup() {
         onMounted(() => {
           child = this;
@@ -26,7 +26,7 @@ describe("t-on", () => {
       }
     }
     class Parent extends Component {
-      static template = xml`<div><Child t-if="state.flag"/></div>`;
+      static template = xml`<div><Child t-if="this.state.flag"/></div>`;
       static components = { Child };
       state = proxy({ flag: true });
     }
@@ -44,13 +44,13 @@ describe("t-on", () => {
   test("t-on when first component child is an empty component", async () => {
     class Child extends Component {
       static template = xml`
-        <span t-foreach="this.props.list" t-as="c" t-key="c_index" t-esc="c"/>
+        <span t-foreach="this.props.list" t-as="c" t-key="c_index" t-esc="this.c"/>
       `;
       props = props();
     }
     class Parent extends Component {
       static template = xml`
-        <div t-on-click="push"><Child list="list" t-on-click="() => {}"/></div>
+        <div t-on-click="this.push"><Child list="this.list" t-on-click="() => {}"/></div>
       `;
       static components = { Child };
       list = proxy([] as string[]);
@@ -70,9 +70,9 @@ describe("t-on", () => {
     class Comp extends Component {
       static template = xml`
           <div>
-            <div t-foreach="state.values" t-as="val" t-key="val">
+            <div t-foreach="this.state.values" t-as="val" t-key="val">
               <t t-esc="val_index"/>: <t t-esc="val + ''"/>
-              <button t-on-click="() => otherState.vals.push(val)">Expr</button>
+              <button t-on-click="() => this.otherState.vals.push(val)">Expr</button>
             </div>
           </div>
         `;
@@ -95,10 +95,10 @@ describe("t-on", () => {
       static template = xml`
           <div>
             <t t-set="bossa" t-value="'nova'"/>
-            <div t-foreach="state.values" t-as="val" t-key="val">
+            <div t-foreach="this.state.values" t-as="val" t-key="val">
               <t t-set="bossa" t-value="bossa + '_' + val_index" />
               <t t-esc="val_index"/>: <t t-esc="val + ''"/>
-              <button t-on-click="() => otherState.vals.push(val + '_' + bossa)">Expr</button>
+              <button t-on-click="() => this.otherState.vals.push(val + '_' + bossa)">Expr</button>
             </div>
           </div>
         `;
@@ -120,7 +120,7 @@ describe("t-on", () => {
     class Comp extends Component {
       static template = xml`
           <div>
-            <div t-foreach="state.values" t-as="val" t-key="val">
+            <div t-foreach="this.state.values" t-as="val" t-key="val">
               <t t-esc="val_index"/>: <t t-esc="val + ''"/>
               <button t-on-click="() => this.addVal(val)">meth call</button>
             </div>
@@ -148,8 +148,8 @@ describe("t-on", () => {
       static template = xml`
           <div>
             <t t-set="iter" t-value="0" />
-            <div t-foreach="arr" t-as="val" t-key="val">
-              <button t-on-click="() => otherState.vals.push(iter + '_' + iter)">expr</button>
+            <div t-foreach="this.arr" t-as="val" t-key="val">
+              <button t-on-click="() => this.otherState.vals.push(iter + '_' + iter)">expr</button>
               <t t-set="iter" t-value="iter + 1" />
             </div>
           </div>
@@ -175,7 +175,7 @@ describe("t-on", () => {
     }
 
     class Parent extends Component {
-      static template = xml`<Child t-on-click="increment" value="state.value"/>`;
+      static template = xml`<Child t-on-click="this.increment" value="this.state.value"/>`;
       static components = { Child };
       state = proxy({ value: 1 });
       increment() {
@@ -199,7 +199,7 @@ describe("t-on", () => {
       static template = xml`
         <div>
           <span/>
-          <Child t-on-click="increment" value="state.value"/>
+          <Child t-on-click="this.increment" value="this.state.value"/>
           <p/>
         </div>`;
       static components = { Child };
@@ -233,7 +233,7 @@ describe("t-on", () => {
     class Parent extends Component {
       static template = xml`
         <div>
-          <Child t-on-click="increment" value="state.value"/>
+          <Child t-on-click="increment" value="this.state.value"/>
           <p t-on-click="decrement">dec</p>
         </div>`;
       static components = { Child };
@@ -258,7 +258,7 @@ describe("t-on", () => {
   test("t-on on t-call-slots", async () => {
     class Child extends Component {
       static template = xml`
-        [<t t-esc="state.count"/>]
+        [<t t-esc="this.state.count"/>]
         <t t-call-slot="default" t-on-click="() => this.state.count++"/>`;
       props = props();
       state = proxy({ count: 0 });
@@ -287,7 +287,7 @@ describe("t-on", () => {
 
     class Parent extends Component {
       static template = xml`
-        [<t t-esc="state.count"/>]
+        [<t t-esc="this.state.count"/>]
         <Child>
           <t t-set-slot="myslot" t-on-click="() => this.state.count++">
             <p>something</p>
@@ -313,7 +313,7 @@ describe("t-on", () => {
     }
 
     class Parent extends Component {
-      static template = xml`<Child t-on-click.prevent="increment" value="state.value"/>`;
+      static template = xml`<Child t-on-click.prevent="this.increment" value="this.state.value"/>`;
       static components = { Child };
       state = proxy({ value: 1 });
       increment(ev: MouseEvent) {
@@ -329,7 +329,7 @@ describe("t-on", () => {
 
   test("t-on on slot, with 'prevent' modifier", async () => {
     class Child extends Component {
-      static template = xml`<t t-call-slot="default" t-on-click.prevent="doSomething"/>`;
+      static template = xml`<t t-call-slot="default" t-on-click.prevent="this.doSomething"/>`;
       props = props();
       doSomething(ev: MouseEvent) {
         expect(ev.defaultPrevented).toBe(true);
@@ -391,7 +391,7 @@ describe("t-on", () => {
 
     class Parent extends Component {
       static template = xml`
-          <t t-set="name" t-value="state.name"/>
+          <t t-set="name" t-value="this.state.name"/>
           <Child value="name" t-on-click="() => this.log(name)"
         />`;
       static components = { Child };