[FIX] compiler: stop event handlers looking up __owl__ in render context

This is another place where we were looking up the component node in the
rendering context instead of on the component, which causes handlers to
have the wrong this when within a t-call-context.

package-lock.json

@@ -2481,14 +2481,14 @@
       }
     },
     "git-rev-sync": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/git-rev-sync/-/git-rev-sync-3.0.2.tgz",
-      "integrity": "sha512-Nd5RiYpyncjLv0j6IONy0lGzAqdRXUaBctuGBbrEA2m6Bn4iDrN/9MeQTXuiquw8AEKL9D2BW0nw5m/lQvxqnQ==",
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/git-rev-sync/-/git-rev-sync-1.12.0.tgz",
+      "integrity": "sha512-LAeWoK54irAVyq/dHjkq13bYw8vsItGVCgZZbFFJv256DIK+VkLqXBjVvwtTgVWegOy7JVwD+w2uk63x+iLB6g==",
       "dev": true,
       "requires": {
         "escape-string-regexp": "1.0.5",
-        "graceful-fs": "4.1.15",
-        "shelljs": "0.8.5"
+        "graceful-fs": "4.1.11",
+        "shelljs": "0.7.7"
       },
       "dependencies": {
         "escape-string-regexp": {
@@ -2498,9 +2498,9 @@
           "dev": true
         },
         "graceful-fs": {
-          "version": "4.1.15",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-          "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha512-9x6DLUuW+ROFdMTII9ec9t/FK8va6kYcC8/LggumssLM8kNv7IdFl3VrNUqgir2tJuBVxBga1QBoRziZacO5Zg==",
           "dev": true
         }
       }
@@ -5017,9 +5017,9 @@
       "dev": true
     },
     "shelljs": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
-      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.7.7.tgz",
+      "integrity": "sha512-5ZXTlakejjdxXAnFl23pgPDzCcyPoshqMVWYqMH8HiP1R+i4auEKHabljL6XQlhQV58jkSRTR33Fq7OlxyLLTg==",
       "dev": true,
       "requires": {
         "glob": "^7.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.6",
+  "version": "2.0.3",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",
@@ -48,7 +48,7 @@
     "chalk": "^3.0.0",
     "current-git-branch": "^1.1.0",
     "eslint": "8.31.0",
-    "git-rev-sync": "^3.0.2",
+    "git-rev-sync": "^1.12.0",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
     "jest-diff": "^27.3.1",

src/compiler/code_generator.ts

@@ -539,7 +539,7 @@ export class CodeGenerator {
     if (modifiers.length) {
       modifiersCode = `${modifiers.join(",")}, `;
     }
-    return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
+    return `[${modifiersCode}${this.captureExpression(handler)}, this]`;
   }
 
   compileTDomNode(ast: ASTDomNode, ctx: Context): string {
@@ -632,15 +632,7 @@ export class CodeGenerator {
 
       let idx: number;
       if (specialInitTargetAttr) {
-        let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
-        if (!targetExpr && ast.attrs) {
-          // look at the dynamic attribute counterpart
-          const dynamicTgExpr = ast.attrs[`t-att-${targetAttr}`];
-          if (dynamicTgExpr) {
-            targetExpr = compileExpr(dynamicTgExpr);
-          }
-        }
-        idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "attr");
+        idx = block!.insertData(`${fullExpression} === '${attrs[targetAttr]}'`, "attr");
         attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
       } else if (hasDynamicChildren) {
         const bValueId = generateId("bValue");
@@ -1223,13 +1215,6 @@ export class CodeGenerator {
       })`,
     });
 
-    if (ast.isDynamic) {
-      // If the component class changes, this can cause delayed renders to go
-      // through if the key doesn't change. Use the component name for now.
-      // This means that two component classes with the same name isn't supported
-      // in t-component. We can generate a unique id per class later if needed.
-      keyArg = `(${expr}).name + ${keyArg}`;
-    }
     let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;

src/runtime/app.ts

@@ -1,7 +1,7 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
 import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
-import { Fiber, RootFiber, MountOptions } from "./fibers";
+import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
@@ -31,22 +31,6 @@ This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };
 
-declare global {
-  interface Window {
-    __OWL_DEVTOOLS__: {
-      apps: Set<App>;
-      Fiber: typeof Fiber;
-      RootFiber: typeof RootFiber;
-    };
-  }
-}
-
-window.__OWL_DEVTOOLS__ ||= {
-  apps: new Set<App>(),
-  Fiber: Fiber,
-  RootFiber: RootFiber,
-};
-
 export class App<
   T extends abstract new (...args: any) => any = any,
   P extends object = any,
@@ -64,7 +48,6 @@ export class App<
   constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
     super(config);
     this.Root = Root;
-    window.__OWL_DEVTOOLS__.apps.add(this);
     if (config.test) {
       this.dev = true;
     }
@@ -126,7 +109,6 @@ export class App<
       this.scheduler.flush();
       this.root.destroy();
     }
-    window.__OWL_DEVTOOLS__.apps.delete(this);
   }
 
   createComponent<P extends Props>(

src/runtime/hooks.ts

@@ -117,7 +117,7 @@ export function useEffect(effect: Effect, computeDependencies: () => any[] = ()
  *  `useExternalListener(window, 'click', this._doSomething);`
  * */
 export function useExternalListener(
-  target: EventTarget,
+  target: HTMLElement | typeof window,
   eventName: string,
   handler: EventListener,
   eventParams?: AddEventListenerOptions

src/runtime/reactivity.ts

@@ -1,13 +1,8 @@
-import type { Callback } from "./utils";
+import { Callback } from "./utils";
 import { OwlError } from "./error_handling";
 
 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
-// Used to specify the absence of a callback, can be used as WeakMap key but
-// should only be used as a sentinel value and never called.
-const NO_CALLBACK = () => {
-  throw new Error("Called NO_CALLBACK. Owl is broken, please report this to the maintainers.");
-};
 
 // The following types only exist to signify places where objects are expected
 // to be reactive or not, they provide no type checking benefit over "object"
@@ -91,9 +86,6 @@ const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callbac
  * @param callback the function to call when the key changes
  */
 function observeTargetKey(target: Target, key: PropertyKey, callback: Callback): void {
-  if (callback === NO_CALLBACK) {
-    return;
-  }
   if (!targetToKeysToCallbacks.get(target)) {
     targetToKeysToCallbacks.set(target, new Map());
   }
@@ -148,11 +140,8 @@ export function clearReactivesForCallback(callback: Callback): void {
     if (!observedKeys) {
       continue;
     }
-    for (const [key, callbacks] of observedKeys.entries()) {
+    for (const callbacks of observedKeys.values()) {
       callbacks.delete(callback);
-      if (!callbacks.size) {
-        observedKeys.delete(key);
-      }
     }
   }
   targetsToClear.clear();
@@ -162,15 +151,10 @@ export function getSubscriptions(callback: Callback) {
   const targets = callbacksToTargets.get(callback) || [];
   return [...targets].map((target) => {
     const keysToCallbacks = targetToKeysToCallbacks.get(target);
-    let keys = [];
-    if (keysToCallbacks) {
-      for (const [key, cbs] of keysToCallbacks) {
-        if (cbs.has(callback)) {
-          keys.push(key);
-        }
-      }
-    }
-    return { target, keys };
+    return {
+      target,
+      keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
+    };
   });
 }
 // Maps reactive objects to the underlying target
@@ -203,7 +187,7 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>()
  *  reactive has changed
  * @returns a proxy that tracks changes to it
  */
-export function reactive<T extends Target>(target: T, callback: Callback = NO_CALLBACK): T {
+export function reactive<T extends Target>(target: T, callback: Callback = () => {}): T {
   if (!canBeMadeReactive(target)) {
     throw new OwlError(`Cannot make the given value reactive`);
   }

src/runtime/validation.ts

@@ -1,5 +1,4 @@
 import { OwlError } from "./error_handling";
-import { toRaw } from "./reactivity";
 
 type BaseType =
   | typeof String
@@ -85,7 +84,6 @@ export function validateSchema(obj: { [key: string]: any }, schema: Schema): str
   if (Array.isArray(schema)) {
     schema = toSchema(schema);
   }
-  obj = toRaw(obj);
   let errors = [];
   // check if each value in obj has correct shape
   for (let key in obj) {

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

@@ -8,7 +8,7 @@ exports[`t-on can bind event handler 1`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['add'], ctx];
+    let hdlr1 = [ctx['add'], this];
     return block1([hdlr1]);
   }
 }"
@@ -23,7 +23,7 @@ exports[`t-on can bind handlers with arguments 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['add'];
-    let hdlr1 = [()=>v1(5), ctx];
+    let hdlr1 = [()=>v1(5), this];
     return block1([hdlr1]);
   }
 }"
@@ -38,7 +38,7 @@ exports[`t-on can bind handlers with empty  object 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['doSomething'];
-    let hdlr1 = [()=>v1({}), ctx];
+    let hdlr1 = [()=>v1({}), this];
     return block1([hdlr1]);
   }
 }"
@@ -53,7 +53,7 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['doSomething'];
-    let hdlr1 = [()=>v1({}), ctx];
+    let hdlr1 = [()=>v1({}), this];
     return block1([hdlr1]);
   }
 }"
@@ -77,7 +77,7 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
       const key1 = ctx['action_index'];
       const v1 = ctx['activate'];
       const v2 = ctx['action'];
-      let hdlr1 = [()=>v1(v2), ctx];
+      let hdlr1 = [()=>v1(v2), this];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -95,7 +95,7 @@ exports[`t-on can bind handlers with object arguments 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['add'];
-    let hdlr1 = [()=>v1({val:5}), ctx];
+    let hdlr1 = [()=>v1({val:5}), this];
     return block1([hdlr1]);
   }
 }"
@@ -109,8 +109,8 @@ exports[`t-on can bind two event handlers 1`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['handleClick'], ctx];
-    let hdlr2 = [ctx['handleDblClick'], ctx];
+    let hdlr1 = [ctx['handleClick'], this];
+    let hdlr2 = [ctx['handleDblClick'], this];
     return block1([hdlr1, hdlr2]);
   }
 }"
@@ -124,7 +124,7 @@ exports[`t-on handler is bound to proper owner 1`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['add'], ctx];
+    let hdlr1 = [ctx['add'], this];
     return block1([hdlr1]);
   }
 }"
@@ -144,7 +144,7 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`value\`] = v_block1[i1];
       const key1 = ctx['value'];
-      let hdlr1 = [ctx['add'], ctx];
+      let hdlr1 = [ctx['add'], this];
       c_block1[i1] = withKey(block2([hdlr1]), key1);
     }
     return list(c_block1);
@@ -172,7 +172,7 @@ exports[`t-on handler is bound to proper owner, part 3 2`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['add'], ctx];
+    let hdlr1 = [ctx['add'], this];
     return block1([hdlr1]);
   }
 }"
@@ -210,7 +210,7 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['add'], ctx];
+    let hdlr1 = [ctx['add'], this];
     return block1([hdlr1]);
   }
 }"
@@ -224,7 +224,7 @@ exports[`t-on receive event in first argument 1`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['add'], ctx];
+    let hdlr1 = [ctx['add'], this];
     return block1([hdlr1]);
   }
 }"
@@ -238,8 +238,8 @@ exports[`t-on t-on modifiers (native listener) basic support for native listener
   let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['divClicked'], ctx];
-    let hdlr2 = [ctx['btnClicked'], ctx];
+    let hdlr1 = [ctx['divClicked'], this];
+    let hdlr2 = [ctx['btnClicked'], this];
     return block1([hdlr1, hdlr2]);
   }
 }"
@@ -253,7 +253,7 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['onClick'], ctx];
+    let hdlr1 = [ctx['onClick'], this];
     let txt1 = ctx['text'];
     return block1([hdlr1, txt1]);
   }
@@ -269,7 +269,7 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-child-0/></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['onClick'], ctx];
+    let hdlr1 = [ctx['onClick'], this];
     const b2 = safeOutput(ctx['html']);
     return block1([hdlr1], [b2]);
   }
@@ -284,8 +284,8 @@ exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] =
   let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [\\"capture\\", ctx['onCapture'], ctx];
-    let hdlr2 = [ctx['doSomething'], ctx];
+    let hdlr1 = [\\"capture\\", ctx['onCapture'], this];
+    let hdlr2 = [ctx['doSomething'], this];
     return block1([hdlr1, hdlr2]);
   }
 }"
@@ -299,7 +299,7 @@ exports[`t-on t-on modifiers (native listener) t-on with empty handler (only mod
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [\\"prevent\\", , ctx];
+    let hdlr1 = [\\"prevent\\", , this];
     return block1([hdlr1]);
   }
 }"
@@ -313,7 +313,7 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifi
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [\\"prevent\\",\\"self\\", ctx['onClick'], ctx];
+    let hdlr1 = [\\"prevent\\",\\"self\\", ctx['onClick'], this];
     return block1([hdlr1]);
   }
 }"
@@ -327,9 +327,9 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop mod
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [\\"prevent\\", ctx['onClickPrevented'], ctx];
-    let hdlr2 = [\\"stop\\", ctx['onClickStopped'], ctx];
-    let hdlr3 = [\\"prevent\\",\\"stop\\", ctx['onClickPreventedAndStopped'], ctx];
+    let hdlr1 = [\\"prevent\\", ctx['onClickPrevented'], this];
+    let hdlr2 = [\\"stop\\", ctx['onClickStopped'], this];
+    let hdlr3 = [\\"prevent\\",\\"stop\\", ctx['onClickPreventedAndStopped'], this];
     return block1([hdlr1, hdlr2, hdlr3]);
   }
 }"
@@ -352,7 +352,7 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
       const key1 = ctx['project'];
       const v1 = ctx['onEdit'];
       const v2 = ctx['project'];
-      let hdlr1 = [\\"prevent\\", _ev=>v1(v2.id,_ev), ctx];
+      let hdlr1 = [\\"prevent\\", _ev=>v1(v2.id,_ev), this];
       let txt1 = ctx['project'].name;
       c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
     }
@@ -370,7 +370,7 @@ exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifi
   let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [\\"self\\",\\"prevent\\", ctx['onClick'], ctx];
+    let hdlr1 = [\\"self\\",\\"prevent\\", ctx['onClick'], this];
     return block1([hdlr1]);
   }
 }"
@@ -384,8 +384,8 @@ exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
   let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['onClick'], ctx];
-    let hdlr2 = [\\"self\\", ctx['onClickSelf'], ctx];
+    let hdlr1 = [ctx['onClick'], this];
+    let hdlr2 = [\\"self\\", ctx['onClickSelf'], this];
     return block1([hdlr1, hdlr2]);
   }
 }"
@@ -399,8 +399,8 @@ exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`
   let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [\\"synthetic\\", ctx['divClicked'], ctx];
-    let hdlr2 = [\\"synthetic\\", ctx['btnClicked'], ctx];
+    let hdlr1 = [\\"synthetic\\", ctx['divClicked'], this];
+    let hdlr2 = [\\"synthetic\\", ctx['btnClicked'], this];
     return block1([hdlr1, hdlr2]);
   }
 }"
@@ -415,7 +415,7 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.incrementCounter(2), ctx];
+    let hdlr1 = [()=>v1.incrementCounter(2), this];
     return block1([hdlr1]);
   }
 }"
@@ -430,7 +430,7 @@ exports[`t-on t-on with inline statement 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let hdlr1 = [()=>v1.counter++, this];
     return block1([hdlr1]);
   }
 }"
@@ -445,7 +445,7 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.flag=!v1.flag, ctx];
+    let hdlr1 = [()=>v1.flag=!v1.flag, this];
     return block1([hdlr1]);
   }
 }"
@@ -461,7 +461,7 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['state'];
     const v2 = ctx['someFunction'];
-    let hdlr1 = [()=>v1.n=v2(3), ctx];
+    let hdlr1 = [()=>v1.n=v2(3), this];
     return block1([hdlr1]);
   }
 }"
@@ -490,7 +490,7 @@ exports[`t-on t-on with t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['update'], ctx];
+    let hdlr1 = [ctx['update'], this];
     return block1([hdlr1]);
   }
 }"
@@ -521,7 +521,7 @@ exports[`t-on t-on, with arguments and t-call 2`] = `
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
     const v2 = ctx['value'];
-    let hdlr1 = [()=>v1.update(v2), ctx];
+    let hdlr1 = [()=>v1.update(v2), this];
     return block1([hdlr1]);
   }
 }"

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

@@ -228,7 +228,7 @@ exports[`misc other complex template 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`project\`] = v_block2[i1];
       const key1 = ctx['project'].id;
-      let hdlr1 = [ctx['selectProject'](ctx['project']), ctx];
+      let hdlr1 = [ctx['selectProject'](ctx['project']), this];
       let txt2 = ctx['project'].name;
       c_block2[i1] = withKey(block3([hdlr1, txt2]), key1);
     }
@@ -260,8 +260,8 @@ exports[`misc other complex template 1`] = `
       }
       b4 = multi([b5, b6]);
     }
-    let hdlr2 = [ctx['toggleSettingsMenu'], ctx];
-    let hdlr3 = [ctx['toggleMore'], ctx];
+    let hdlr2 = [ctx['toggleSettingsMenu'], this];
+    let hdlr3 = [ctx['toggleMore'], this];
     if (ctx['categories']&&ctx['categories'].length>1) {
       ctx = Object.create(ctx);
       const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);;
@@ -278,9 +278,9 @@ exports[`misc other complex template 1`] = `
       b14 = block14([], [b15]);
     }
     let attr8 = new String((ctx['search'].value) || \\"\\");
-    let hdlr4 = [ctx['updateFilter'], ctx];
-    let hdlr5 = [ctx['updateFilter'], ctx];
-    let hdlr6 = [ctx['clearSearch'], ctx];
+    let hdlr4 = [ctx['updateFilter'], this];
+    let hdlr5 = [ctx['updateFilter'], this];
+    let hdlr6 = [ctx['clearSearch'], this];
     if (ctx['triggers']) {
       ctx = Object.create(ctx);
       const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
@@ -293,7 +293,7 @@ exports[`misc other complex template 1`] = `
           let attr10 = \`trigger_\${ctx['trigger'].id}\`;
           let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
           let attr12 = ctx['trigger'].id;
-          let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
+          let hdlr7 = [ctx['updateTriggerDisplay'], this];
           let attr13 = \`trigger_\${ctx['trigger'].id}\`;
           let txt6 = ctx['trigger'].name;
           b20 = block20([attr9, attr10, attr11, attr12, hdlr7, attr13, txt6]);
@@ -302,10 +302,10 @@ exports[`misc other complex template 1`] = `
       }
       ctx = ctx.__proto__;
       const b18 = list(c_block18);
-      let hdlr8 = [ctx['triggerAll'], ctx];
-      let hdlr9 = [ctx['triggerNone'], ctx];
-      let hdlr10 = [ctx['triggerDefault'], ctx];
-      let hdlr11 = [ctx['toggleSettingsMenu'], ctx];
+      let hdlr8 = [ctx['triggerAll'], this];
+      let hdlr9 = [ctx['triggerNone'], this];
+      let hdlr10 = [ctx['triggerDefault'], this];
+      let hdlr11 = [ctx['toggleSettingsMenu'], this];
       const b21 = block21([hdlr8, hdlr9, hdlr10, hdlr11]);
       b17 = multi([b18, b21]);
     }

tests/compiler/event_handling.test.ts

@@ -161,7 +161,9 @@ describe("t-on", () => {
     owner.__owl__ = node;
     const fixture = makeTestFixture();
     const render = context.getTemplate("main");
-    const bdom = render(owner, node);
+    const ctx = Object.create(owner);
+    ctx.this = owner;
+    const bdom = render.call(owner, ctx, node);
     mount(bdom, fixture);
     fixture.querySelector("button")!.click();
   });
@@ -186,7 +188,9 @@ describe("t-on", () => {
     owner.__owl__ = node;
     const fixture = makeTestFixture();
     const render = context.getTemplate("main");
-    const bdom = render(owner, node);
+    const ctx = Object.create(owner);
+    ctx.this = owner;
+    const bdom = render.call(owner, ctx, node);
     mount(bdom, fixture);
     fixture.querySelector("button")!.click();
   });
@@ -266,7 +270,9 @@ describe("t-on", () => {
 
     const fixture = makeTestFixture();
     const render = app.getTemplate("main");
-    const bdom = render(owner, node);
+    const ctx = Object.create(owner);
+    ctx.this = owner;
+    const bdom = render.call(owner, ctx, node);
     mount(bdom, fixture);
     fixture.querySelector("p")!.click();
   });

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

@@ -8,7 +8,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['myComp'];
-    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -135,7 +135,7 @@ exports[`basics can be clicked on and updated 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let hdlr1 = [()=>v1.counter++, this];
     return block1([txt1, hdlr1]);
   }
 }"
@@ -646,7 +646,7 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let hdlr1 = [()=>v1.counter++, this];
     return block1([txt1, hdlr1]);
   }
 }"

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

@@ -93,7 +93,7 @@ exports[`another scenario with delayed rendering 3`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
   }
@@ -1213,45 +1213,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 }"
 `;
 
-exports[`delayed render does not go through when t-component value changed 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(null, false, false, false, true);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`A\`);
-    const Comp1 = ctx['state'].component;
-    const b3 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed render does not go through when t-component value changed 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`B\`);
-    const b3 = text(ctx['state'].val);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`delayed render does not go through when t-component value changed 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`C\`);
-  }
-}"
-`;
-
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1301,7 +1262,7 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
   }
@@ -1366,7 +1327,7 @@ exports[`delayed rendering, destruction, stuff happens 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = text(\`D\`);
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
     return multi([b2, b3]);
@@ -1408,7 +1369,7 @@ exports[`delayed rendering, reusing fiber and stuff 3`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
   }
@@ -1454,7 +1415,7 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
   }
@@ -1498,7 +1459,7 @@ exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
   }
@@ -1686,7 +1647,7 @@ exports[`rendering component again in next microtick 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let b2;
-    let hdlr1 = [ctx['onClick'], ctx];
+    let hdlr1 = [ctx['onClick'], this];
     if (ctx['env'].config.flag) {
       b2 = comp1({}, key + \`__1\`, node, this, null);
     }
@@ -1773,7 +1734,7 @@ 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 hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
     return multi([b2, b3]);
@@ -1790,7 +1751,7 @@ 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 hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
     return multi([b2, b3]);
@@ -1815,7 +1776,7 @@ exports[`t-foreach with dynamic async component 1`] = `
       let b3;
       if (ctx['arr']) {
         const Comp1 = ctx['myComp'];
-        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, (Comp1).name + key + \`__1__\${key1}\`, node, this, Comp1));
+        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
       }
       c_block1[i1] = withKey(multi([b3]), key1);
     }
@@ -1849,7 +1810,7 @@ exports[`t-key on dom node having a component 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     const Comp1 = ctx['myComp'];
-    const b2 = toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
+    const b2 = toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, Comp1)));
     return toggler(tKey_1, block1([], [b2]));
   }
 }"
@@ -1875,7 +1836,7 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
     const Comp1 = ctx['myComp'];
-    return toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;

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

@@ -931,7 +931,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['cp'].Comp;
-    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -1010,7 +1010,7 @@ exports[`can catch errors catching in child makes parent render 1`] = `
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['elem'][1];
-    return toggler(Comp1, comp1({id: ctx['elem'][0]}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {

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

@@ -8,7 +8,7 @@ exports[`event handling Invalid handler throws an error 1`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">click</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['dosomething'], ctx];
+    let hdlr1 = [ctx['dosomething'], this];
     return block1([hdlr1]);
   }
 }"
@@ -22,7 +22,7 @@ exports[`event handling handler is not called if component is destroyed 1`] = `
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['click'], ctx];
+    let hdlr1 = [ctx['click'], this];
     return block1([hdlr1]);
   }
 }"
@@ -37,7 +37,7 @@ exports[`event handling handler receive the event as argument 1`] = `
   let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
+    let hdlr1 = [ctx['inc'], this];
     const b2 = comp1({}, key + \`__1\`, node, this, null);
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1], [b2]);
@@ -66,7 +66,7 @@ exports[`event handling handler works when app is mounted in an iframe 1`] = `
   let block1 = createBlock(\`<span block-handler-0=\\"click\\">click me</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
+    let hdlr1 = [ctx['inc'], this];
     return block1([hdlr1]);
   }
 }"
@@ -98,7 +98,7 @@ exports[`event handling input blur event is not called if component is destroyed
   let block1 = createBlock(\`<input block-handler-0=\\"blur\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['blur'], ctx];
+    let hdlr1 = [ctx['blur'], this];
     return block1([hdlr1]);
   }
 }"
@@ -121,7 +121,7 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
       const key1 = ctx['item'];
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
-      let hdlr1 = [_ev=>v1(v2.val,_ev), ctx];
+      let hdlr1 = [_ev=>v1(v2.val,_ev), this];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -139,7 +139,7 @@ exports[`event handling support for callable expression in event handler 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].value;
-    let hdlr1 = [ctx['obj'].onInput, ctx];
+    let hdlr1 = [ctx['obj'].onInput, this];
     return block1([txt1, hdlr1]);
   }
 }"
@@ -162,7 +162,7 @@ exports[`event handling t-on with handler bound to dynamic argument on a t-forea
       const key1 = ctx['item'];
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
-      let hdlr1 = [_ev=>v1(v2,_ev), ctx];
+      let hdlr1 = [_ev=>v1(v2,_ev), this];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
     const b2 = list(c_block2);

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

@@ -138,7 +138,7 @@ exports[`basics sub widget is interactive 2`] = `
   let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
+    let hdlr1 = [ctx['inc'], this];
     let txt1 = ctx['state'].val;
     return block1([hdlr1, txt1]);
   }

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

@@ -563,7 +563,7 @@ exports[`lifecycle hooks onWillRender 2`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['increment'], ctx];
+    let hdlr1 = [ctx['increment'], this];
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1]);
   }

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

@@ -59,7 +59,7 @@ exports[`basics arrow functions as prop correctly capture their scope 2`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['props'].onClick, ctx];
+    let hdlr1 = [ctx['props'].onClick, this];
     return block1([hdlr1]);
   }
 }"
@@ -140,7 +140,7 @@ exports[`basics support prop names that aren't valid bare object property names
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['props'].onClick, ctx];
+    let hdlr1 = [ctx['props'].onClick, this];
     return block1([hdlr1]);
   }
 }"

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

@@ -841,33 +841,6 @@ exports[`props validation props are validated whenever component is updated 2`]
 }"
 `;
 
-exports[`props validation props validation does not cause additional subscription 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props1 = {obj: ctx['obj']};
-    helpers.validateProps(\`Child\`, props1, this);
-    const b2 = comp1(props1, key + \`__1\`, node, this, null);
-    const b3 = text(ctx['obj'].otherValue);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`props validation props validation does not cause additional subscription 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].obj.value);
-  }
-}"
-`;
-
 exports[`props validation props: list of strings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -140,39 +140,3 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
   }
 }"
 `;
-
-exports[`subscriptions subscriptions returns the keys and targets observed by the component 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['state'].a);
-  }
-}"
-`;
-
-exports[`subscriptions subscriptions returns the keys observed by the component 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(ctx['state'].a);
-    const b3 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`subscriptions subscriptions returns the keys observed by the component 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].state.b);
-  }
-}"
-`;

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

@@ -72,7 +72,7 @@ exports[`refs refs are properly bound in slots 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     const refs = this.__owl__.refs;
     const ref1 = (el) => refs[\`myButton\`] = el;
-    let hdlr1 = [ctx['doSomething'], ctx];
+    let hdlr1 = [ctx['doSomething'], this];
     return block2([hdlr1, ref1]);
   }
   

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

@@ -701,7 +701,7 @@ exports[`slots dynamic t-slot call 2`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-child-0/></button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['toggle'], ctx];
+    let hdlr1 = [ctx['toggle'], this];
     const slot1 = (ctx['current'].slot);
     const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
     return block1([hdlr1], [b2]);
@@ -752,7 +752,7 @@ exports[`slots dynamic t-slot call with default 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['toggle'], ctx];
+    let hdlr1 = [ctx['toggle'], this];
     const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1.bind(this));
     return block1([hdlr1], [b3]);
   }
@@ -842,7 +842,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
   let block2 = createBlock(\`<button block-handler-0=\\"click\\">inc</button>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
+    let hdlr1 = [ctx['inc'], this];
     const b2 = block2([hdlr1]);
     const b3 = comp1({number: ctx['state'].number}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
@@ -1847,7 +1847,7 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
+    let hdlr1 = [ctx['inc'], this];
     let txt1 = ctx['state'].val;
     const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([hdlr1, txt1], [b3]);
@@ -1993,7 +1993,7 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"var\\", 1);
     const v1 = ctx['this'];
-    let hdlr1 = [()=>v1.inc(), ctx];
+    let hdlr1 = [()=>v1.inc(), this];
     return block1([hdlr1]);
   }
   
@@ -2029,7 +2029,7 @@ exports[`slots slot content is bound to caller 1`] = `
   let block1 = createBlock(\`<button block-handler-0=\\"click\\">some text</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['inc'], ctx];
+    let hdlr1 = [ctx['inc'], this];
     return block1([hdlr1]);
   }
   
@@ -2361,7 +2361,7 @@ exports[`slots slots are properly bound to correct component 2`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"var\\", 1);
     const v1 = ctx['this'];
-    let hdlr1 = [()=>v1.increment(), ctx];
+    let hdlr1 = [()=>v1.increment(), this];
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1]);
   }
@@ -2383,7 +2383,7 @@ exports[`slots slots are rendered with proper context 1`] = `
   let block2 = createBlock(\`<button block-handler-0=\\"click\\">do something</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['doSomething'], ctx];
+    let hdlr1 = [ctx['doSomething'], this];
     return block2([hdlr1]);
   }
   
@@ -3046,7 +3046,7 @@ exports[`slots t-slot scope context 2`] = `
   let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['onClick'], ctx];
+    let hdlr1 = [ctx['onClick'], this];
     const b2 = callSlot(ctx, node, key, 'default', false, {});
     return block1([hdlr1], [b2]);
   }

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

@@ -110,7 +110,7 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
-    let hdlr1 = [()=>v1.update(), ctx];
+    let hdlr1 = [()=>v1.update(), this];
     return block1([hdlr1]);
   }
 }"
@@ -140,7 +140,7 @@ exports[`t-call handlers are properly bound through a t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['update'], ctx];
+    let hdlr1 = [ctx['update'], this];
     return block1([hdlr1]);
   }
 }"
@@ -171,7 +171,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
   return function template(ctx, node, key = \\"\\") {
     const v1 = ctx['this'];
     const v2 = ctx['a'];
-    let hdlr1 = [()=>v1.update(v2), ctx];
+    let hdlr1 = [()=>v1.update(v2), this];
     return block1([hdlr1]);
   }
 }"
@@ -289,7 +289,7 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
     ctx[isBoundary] = 1
     let b2;
     if (ctx['level']<2) {
-      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(ctx['this']), ctx];
+      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(ctx['this']), this];
       let txt1 = ctx['level'];
       const b3 = block3([hdlr1, txt1]);
       ctx = Object.create(ctx);
@@ -576,6 +576,33 @@ exports[`t-call t-call-context: ComponentNode is not looked up in the context 3`
 }"
 `;
 
+exports[`t-call t-call-context: handlers have the correct this 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = {handler:ctx['handler']};
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call-context: handlers have the correct this 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"click_me\\" block-handler-0=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['handler'], this];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
 exports[`t-call t-call-context: slots don't make component available again when context is captured 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -10,7 +10,7 @@ exports[`t-component can switch between dynamic components without the need for
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -51,7 +51,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -91,7 +91,7 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
     const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
   }
 }"
 `;
@@ -132,7 +132,7 @@ exports[`t-component modifying a sub widget 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Counter'];
-    const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
     return block1([], [b2]);
   }
 }"
@@ -148,7 +148,7 @@ exports[`t-component modifying a sub widget 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].counter;
     const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let hdlr1 = [()=>v1.counter++, this];
     return block1([txt1, hdlr1]);
   }
 }"
@@ -162,7 +162,7 @@ exports[`t-component switching dynamic component 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;
@@ -199,7 +199,7 @@ exports[`t-component t-component works in simple case 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;

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

@@ -127,7 +127,7 @@ exports[`t-model directive can also define t-on directive on same event, part 1
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onInput'], ctx];
+    let hdlr2 = [ctx['onInput'], this];
     return block1([attr1, hdlr1, hdlr2]);
   }
 }"
@@ -146,17 +146,17 @@ exports[`t-model directive can also define t-on directive on same event, part 2
     const expr1 = 'choice';
     let attr1 = bExpr1[expr1] === 'One';
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onClick'], ctx];
+    let hdlr2 = [ctx['onClick'], this];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
     let attr2 = bExpr2[expr2] === 'Two';
     let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-    let hdlr4 = [ctx['onClick'], ctx];
+    let hdlr4 = [ctx['onClick'], this];
     const bExpr3 = ctx['state'];
     const expr3 = 'choice';
     let attr3 = bExpr3[expr3] === 'Three';
     let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
-    let hdlr6 = [ctx['onClick'], ctx];
+    let hdlr6 = [ctx['onClick'], this];
     return block1([attr1, hdlr1, hdlr2, attr2, hdlr3, hdlr4, attr3, hdlr5, hdlr6]);
   }
 }"
@@ -423,7 +423,7 @@ exports[`t-model directive t-model is applied before t-on-input 1`] = `
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onInput'], ctx];
+    let hdlr2 = [ctx['onInput'], this];
     return block1([attr1, hdlr1, hdlr2]);
   }
 }"
@@ -569,36 +569,6 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 }"
 `;
 
-exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, toNumber, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-attribute-0=\\"value\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['getData'], ctx];
-    ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`opt\`] = v_block2[i1];
-      const key1 = ctx['opt'];
-      let attr1 = new String((ctx['opt']) || \\"\\");
-      let attr2 = ctx['opt'];
-      const bExpr1 = ctx['state'];
-      const expr1 = 'group';
-      let attr3 = bExpr1[expr1] === ctx['opt'];
-      let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      c_block2[i1] = withKey(block3([attr1, attr2, attr3, hdlr2]), key1);
-    }
-    const b2 = list(c_block2);
-    return block1([hdlr1], [b2]);
-  }
-}"
-`;
-
 exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -20,7 +20,7 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
       const key1 = ctx['val'];
       const v1 = ctx['otherState'];
       const v2 = ctx['iter'];
-      let hdlr1 = [()=>v1.vals.push(v2+'_'+v2), ctx];
+      let hdlr1 = [()=>v1.vals.push(v2+'_'+v2), this];
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
@@ -50,7 +50,7 @@ exports[`t-on t-on expression in t-foreach 1`] = `
       let txt2 = ctx['val']+'';
       const v1 = ctx['otherState'];
       const v2 = ctx['val'];
-      let hdlr1 = [()=>v1.vals.push(v2), ctx];
+      let hdlr1 = [()=>v1.vals.push(v2), this];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -84,7 +84,7 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
       const v1 = ctx['otherState'];
       const v2 = ctx['val'];
       const v3 = ctx['bossa'];
-      let hdlr1 = [()=>v1.vals.push(v2+'_'+v3), ctx];
+      let hdlr1 = [()=>v1.vals.push(v2+'_'+v3), this];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -113,7 +113,7 @@ exports[`t-on t-on method call in t-foreach 1`] = `
       let txt2 = ctx['val']+'';
       const v1 = ctx['this'];
       const v2 = ctx['val'];
-      let hdlr1 = [()=>v1.addVal(v2), ctx];
+      let hdlr1 = [()=>v1.addVal(v2), this];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -133,9 +133,9 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><p block-handler-0=\\"click\\">dec</p></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const hdlr1 = [ctx['increment'], ctx];
+    const hdlr1 = [ctx['increment'], this];
     const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
-    let hdlr2 = [ctx['decrement'], ctx];
+    let hdlr2 = [ctx['decrement'], this];
     return block1([hdlr2], [b2]);
   }
 }"
@@ -164,7 +164,7 @@ exports[`t-on t-on on components 1`] = `
   const catcher1 = createCatcher({\\"click\\":0});
   
   return function template(ctx, node, key = \\"\\") {
-    const hdlr1 = [ctx['increment'], ctx];
+    const hdlr1 = [ctx['increment'], this];
     return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
@@ -200,7 +200,7 @@ exports[`t-on t-on on components and t-foreach 1`] = `
       const key1 = ctx['name'];
       const v1 = ctx['this'];
       const v2 = ctx['name'];
-      const hdlr1 = [()=>v1.log(v2), ctx];
+      const hdlr1 = [()=>v1.log(v2), this];
       c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
     }
     return list(c_block1);
@@ -233,7 +233,7 @@ 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 hdlr1 = [ctx['increment'], this];
     const b2 = catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
     return block1([], [b2]);
   }
@@ -263,7 +263,7 @@ 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];
+    const hdlr1 = [\\"prevent\\", ctx['increment'], this];
     return catcher1(comp1({value: ctx['state'].value}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
@@ -297,7 +297,7 @@ exports[`t-on t-on on components, with a handler update 1`] = `
     setContextValue(ctx, \\"name\\", ctx['state'].name);
     const v1 = ctx['this'];
     const v2 = ctx['name'];
-    const hdlr1 = [()=>v1.log(v2), ctx];
+    const hdlr1 = [()=>v1.log(v2), this];
     return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
@@ -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['onClick'], this];
     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['doSomething'], this];
     return catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
   }
 }"
@@ -397,7 +397,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
     const b6 = block6();
     const b7 = block7();
     const v1 = ctx['this'];
-    const hdlr1 = [()=>v1.state.count++, ctx];
+    const hdlr1 = [()=>v1.state.count++, this];
     return catcher1(multi([b6, b7]), [hdlr1]);
   }
   
@@ -455,7 +455,7 @@ exports[`t-on t-on on t-slots 2`] = `
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
     const v1 = ctx['this'];
-    const hdlr1 = [()=>v1.state.count++, ctx];
+    const hdlr1 = [()=>v1.state.count++, this];
     const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
     return multi([b2, b3, b4, b5]);
   }
@@ -473,8 +473,8 @@ 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];
-    const hdlr2 = [()=>{}, ctx];
+    let hdlr1 = [ctx['push'], this];
+    const hdlr2 = [()=>{}, this];
     const b2 = catcher1(comp1({list: ctx['list']}, key + \`__1\`, node, this, null), [hdlr2]);
     return block1([hdlr1], [b2]);
   }

tests/components/concurrency.test.ts

@@ -1,7 +1,6 @@
 import {
   App,
   Component,
-  ComponentConstructor,
   mount,
   onMounted,
   onRendered,
@@ -4068,64 +4067,6 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
   expect(fixture.innerHTML).toBe("ABD<p>2</p>");
 });
 
-test("delayed render does not go through when t-component value changed", async () => {
-  class C extends Component {
-    static template = xml`C`;
-    setup() {
-      useLogLifecycle("", true);
-    }
-  }
-
-  class B extends Component {
-    static template = xml`B<t t-esc="state.val"/>`;
-    state = useState({ val: 1 });
-    setup() {
-      useLogLifecycle("", true);
-      b = this;
-    }
-  }
-  let b: B;
-
-  class A extends Component {
-    static template = xml`A<t t-component="state.component"/>`;
-    state: { component: ComponentConstructor } = useState({ component: B });
-    setup() {
-      useLogLifecycle("", true);
-    }
-  }
-
-  const a = await mount(A, fixture);
-  expect(fixture.innerHTML).toBe("AB1");
-  expect([
-    "A:setup",
-    "A:willRender",
-    "B:setup",
-    "A:rendered",
-    "B:willRender",
-    "B:rendered",
-    "B:mounted",
-    "A:mounted",
-  ]).toBeLogged();
-  // start a render in B
-  b!.state.val = 2;
-  // start a render in A, invalidating the scheduled render of B, which could crash if executed.
-  a.state.component = C;
-  await nextTick();
-  expect(fixture.innerHTML).toBe("AC");
-  expect([
-    "A:willRender",
-    "C:setup",
-    "A:rendered",
-    "C:willRender",
-    "C:rendered",
-    "A:willPatch",
-    "B:willUnmount",
-    "B:willDestroy",
-    "C:mounted",
-    "A:patched",
-  ]).toBeLogged();
-});
-
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };
 

tests/components/props_validation.test.ts

@@ -1,5 +1,5 @@
 import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount, OwlError, useState } from "../../src";
+import { Component, onError, xml, mount, OwlError } from "../../src";
 import { App, DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";
@@ -682,29 +682,6 @@ describe("props validation", () => {
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
   });
 
-  test("props validation does not cause additional subscription", async () => {
-    let obj = {
-      value: 1,
-      otherValue: 2,
-    };
-    class Child extends Component {
-      static props = {
-        obj: { type: Object, shape: { value: Number, otherValue: Number } },
-      };
-      static template = xml`<t t-esc="props.obj.value"/>`;
-    }
-    class Parent extends Component {
-      static template = xml`<Child obj="obj"/><t t-esc="obj.otherValue"/>`;
-      static components = { Child };
-
-      obj = useState(obj);
-    }
-    const app = new App(Parent, { test: true });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("12");
-    expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
-  });
-
   test("props are validated whenever component is updated", async () => {
     let error: Error;
     class SubComp extends Component {

tests/components/reactivity.test.ts

@@ -7,7 +7,6 @@ import {
   onWillUnmount,
   useState,
   xml,
-  toRaw,
 } from "../../src";
 import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
@@ -233,34 +232,3 @@ describe("reactivity in lifecycle", () => {
     expect(fixture.innerHTML).toBe("34");
   });
 });
-
-describe("subscriptions", () => {
-  test("subscriptions returns the keys and targets observed by the component", async () => {
-    class Comp extends Component {
-      static template = xml`<t t-esc="state.a"/>`;
-      state = useState({ a: 1, b: 2 });
-    }
-    const comp = await mount(Comp, fixture);
-    expect(fixture.innerHTML).toBe("1");
-    expect(comp.__owl__.subscriptions).toEqual([{ keys: ["a"], target: toRaw(comp.state) }]);
-  });
-
-  test("subscriptions returns the keys observed by the component", async () => {
-    class Child extends Component {
-      static template = xml`<t t-esc="props.state.b"/>`;
-      setup() {
-        child = this;
-      }
-    }
-    let child: Child;
-    class Parent extends Component {
-      static template = xml`<t t-esc="state.a"/><Child state="state"/>`;
-      static components = { Child };
-      state = useState({ a: 1, b: 2 });
-    }
-    const parent = await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("12");
-    expect(parent.__owl__.subscriptions).toEqual([{ keys: ["a"], target: toRaw(parent.state) }]);
-    expect(child!.__owl__.subscriptions).toEqual([{ keys: ["b"], target: toRaw(parent.state) }]);
-  });
-});

tests/components/t_call.test.ts

@@ -398,4 +398,30 @@ describe("t-call", () => {
     });
     expect(fixture.innerHTML).toBe("");
   });
+
+  test("t-call-context: handlers have the correct this", async () => {
+    class Root extends Component {
+      static template = xml`<t t-call="someTemplate" t-call-context="{ handler: handler }"/>`;
+      setup() {
+        root = this;
+      }
+      handler() {
+        handlerThis = this;
+      }
+    }
+    let root: Root | null = null;
+    let handlerThis: Root | null = null;
+
+    await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <div class="click_me" t-on-click="handler"/>
+          </t>
+        </templates>`,
+    });
+    const toClick: HTMLDivElement = fixture.querySelector(".click_me")!;
+    toClick.click();
+    expect(handlerThis).toBe(root);
+  });
 });

tests/components/t_model.test.ts

@@ -644,35 +644,4 @@ describe("t-model directive", () => {
     const input = fixture.querySelector("input")!;
     await editInput(input, "Beam me up, Scotty");
   });
-
-  test("t-model with radio button group in t-foreach", async () => {
-    expect.assertions(6);
-    const steps: string[] = [];
-    class SomeComponent extends Component {
-      static template = xml`
-        <div t-on-click="getData" id="get_data">
-          <t t-foreach="options" t-as="opt" t-key="opt">
-            <input type="radio" name="radio_group" t-model="state.group" t-att-value="opt" t-att-id="opt"/>
-          </t>
-        </div>
-      `;
-      state = useState({ group: "scotty" });
-      options = ["beam", "scotty"];
-
-      getData() {
-        steps.push(`group: ${this.state.group}`);
-      }
-    }
-    await mount(SomeComponent, fixture);
-    const divEl = fixture.querySelector("#get_data") as HTMLElement;
-    expect(fixture.querySelector("input:checked")!.getAttribute("id")).toBe("scotty");
-    divEl.click();
-    expect(steps).toEqual(["group: scotty"]);
-    fixture.querySelector("input")!.click();
-    expect(steps).toEqual(["group: scotty", "group: beam"]);
-    await nextTick();
-    expect(fixture.querySelector("input:checked")!.getAttribute("id")).toBe("beam");
-    divEl.click();
-    expect(steps).toEqual(["group: scotty", "group: beam", "group: beam"]);
-  });
 });

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

@@ -240,7 +240,7 @@ exports[`Portal Portal composed with t-slot 3`] = `
   let block1 = createBlock(\`<div block-handler-0=\\"custom\\"><span id=\\"childSpan\\">child2</span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['onCustom'], ctx];
+    let hdlr1 = [ctx['onCustom'], this];
     return block1([hdlr1]);
   }
 }"

tools/compile_xml.js

@@ -48,7 +48,7 @@ function writeToFile(filepath, data) {
 }
 
 // adapted from https://medium.com/@mhagemann/the-ultimate-way-to-slugify-a-url-string-in-javascript-b8e4a0d849e1
-const a = "·-_,:;";
+const a = "·_,:;";
 const p = new RegExp(a.split("").join("|"), "g");
 
 function slugify(str) {

tools/release.js

@@ -47,18 +47,6 @@ async function startRelease() {
   let file = await ask(`Release notes (${REL_NOTES_FILE}): `);
   file = file || REL_NOTES_FILE;
   let content;
-  if (!fs.existsSync(`./${file}`)) {
-    let lastRelease = await getOutput("git log --grep='\\[REL\\]' -n 1 --pretty=%H");
-    const commitsSinceLastRelease = await getOutput(`git log ${lastRelease.trim()}..HEAD --pretty=%s`);
-    const commitsAsMdList = commitsSinceLastRelease.trim().split("\n").map(l => " - " + l).join("\n");
-    log(`${file} did not exist, created a template containing all commits since last release.`)
-    fs.writeFileSync(file, `# v${next}\n\n${commitsAsMdList}`);
-    const shouldContinue = await ask(`Check that the contents of ${file} is correct, then press y to continue: `);
-    if (shouldContinue.toLowerCase() !== "y") {
-      log("aborted");
-      return;
-    }
-  }
   try {
     content = await readFile("./" + file);
   } catch (e) {
@@ -116,7 +104,7 @@ async function startRelease() {
   // ---------------------------------------------------------------------------
 
   log(`Step 7/${STEPS}: Creating the release...`);
-  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${file}`);
+  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${REL_NOTES_FILE}`);
   if (relaseResult !== 0) {
     logError("github release failed. Aborting.");
     return;
@@ -132,7 +120,7 @@ async function startRelease() {
   if (shouldUploadPlayground) {
     log(`Bonus step: publishing new release on playground...`);
     let owl_code = null;
-    let status = 0
+    status = 0
 
     try {
       owl_code = await readFile("dist/owl.iife.js");
@@ -142,8 +130,7 @@ async function startRelease() {
       return;
     }
 
-    status |= await execCommand("git checkout gh-pages");
-    status |= await execCommand("git pull --rebase");
+    status += await execCommand("git checkout gh-pages");
     
     if (status !== 0) {
       logError("Couldn't switch to gh-pages branch")
@@ -157,9 +144,9 @@ async function startRelease() {
       return;
     }
     
-    status |= await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
-    status |= await execCommand(`git push origin gh-pages`);
-    status |= await execCommand("git checkout -");
+    status += await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
+    status += await execCommand(`git push origin gh-pages`);
+    status += await execCommand("git checkout -");
     if (status !== 0) {
       logError("Something went wrong for the playground update.")
     }
@@ -244,19 +231,3 @@ async function replaceInFile(file, from, to) {
     });
   });
 }
-
-async function getOutput(command) {
-  return new Promise((resolve, reject) => {
-    const childProcess = exec(command, (err, stdout, stderr) => {
-      if (err) {
-        reject(err);
-      }
-      resolve(stdout);
-    });
-    childProcess.on("exit", code => {
-      if (code !== 0) {
-        reject(code);
-      }
-    });
-  });
-}