[IMP] app: add a setting to share compiled templates between apps

README.md

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

doc/learning/tutorial_todoapp.md

@@ -502,10 +502,6 @@ deleteTask(task) {
 Notice that the `onDelete` prop is defined with a `.bind` suffix: this is a special
 suffix that makes sure the function callback is bound to the component.
 
-Notice also that we have two functions named `deleteTask`. The one in the Task
-component just delegates the work to the Root component that owns the task list
-via the `onDelete` property.
-
 ## 10. Using a store
 
 Looking at the code, it is apparent that all the code handling tasks is scattered
@@ -774,11 +770,10 @@ For reference, here is the final code:
     <meta charset="UTF-8" />
     <title>OWL Todo App</title>
     <link rel="stylesheet" href="app.css" />
-  </head>
-  <body>
     <script src="owl.js"></script>
     <script src="app.js"></script>
-  </body>
+  </head>
+  <body></body>
 </html>
 ```
 

doc/reference/app.md

@@ -55,6 +55,9 @@ The `config` object is an object with some of the following keys:
   [`dev` mode](#dev-mode);
 - **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
   that Owl will not log a message to warn that Owl is in `dev` mode.
+- **`shareTemplates (boolean, default=false)`**: if `true`, each compiled template
+  will be shared between instances of `App`. Useful for speeding test suites, because
+  it prevent recompiling the same templates again and again.
 - **`translatableAttributes (string[])`**: a list of additional attributes that should
   be translated (see [translations](translations.md))
 - **`translateFn (function)`**: a function that will be called by owl to translate

doc/reference/hooks.md

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

doc/reference/reactivity.md

@@ -2,102 +2,58 @@
 
 ## Content
 
-- [Introduction](#introduction)
+- [Overview](#overview)
 - [`useState`](#usestate)
 - [`reactive`](#reactive)
-- [`Escape hatches`](#escape-hatches)
-- [`Advanced usage`](#advanced-usage)
+- [`markRaw`](#markraw)
+- [`toRaw`](#toraw)
 
-## Introduction
+## Overview
 
 Reactivity is a big topic in javascript frameworks. The goal is to provide a
-simple way to manipulate state, in such a way that the interface updates automatically
-according to state changes, and to do so in a performant manner.
+simple way to manipulate state, in such a way that the interface automatically
+update accordingly to state changes. Also, we obviously want this to happen in
+a performant way.
 
-To this end, Owl provides a proxy-based reactivity system, based on the `reactive` primitive.
-The `reactive` function takes an object as a first argument, and an optional callback as its second
-argument, it will return a proxy of the object. This proxy will track what properties are read
-through the proxy, and call the provided callback whenever one of these properties is changed
-through any reactive version of the same object. It does so in depth, by returning reactive versions
-of the subobjects when they are read.
+To solve this issue, Owl provides two reactivity primitives:
+
+- `reactive`, which returns a proxy to its first argument, and tracks all read/update
+  operation going through it,
+- `useState`: a hook, that internally uses `reactive`, and is linked to its
+  owner component: any read operation will be tracked (key by key), and any
+  updates to these tracked values will cause the component to be rerendered.
+
+Most of the time, the `useState` hook is the best solution.
+
+Since version 2.0, Owl applies the fine grained reactivity at the component
+level: reactive objects received as props are automatically subscribed to by the
+component, so Owl can track which part of these props are consumed by each
+component, and is therefore able to only rerender the impacted components.
 
 ## `useState`
 
-While the `reactive` primitive is very powerful, its usage in components follow a very standard pattern:
-components want to be rerendered when part of the state which they depend on for rendering changes. To
-this end, owl provides a standard hook: `useState`. To put it simply, this hook simply calls reactive
-with the provided object, and the current component's render function as its callback. This will cause
-it to rerender whenever any part of the state object that has been read by this component is modified.
-
-Here is a simple example of how `useState` can be used:
+Let us start by an example of how `useState` could be used:
 
 ```js
 class Counter extends Component {
   static template = xml`
-    <div t-on-click="() => this.state.value++">
+    <div t-on-click="increment">
       <t t-esc="state.value"/>
     </div>`;
 
   setup() {
     this.state = useState({ value: 0 });
   }
-}
-```
 
-This component reads `state.value` when it renders, subscribing it to changes to that key. Whenever
-the value changes, Owl will update the component. Note that there is nothing special about the
-`state` property, you can name your state variables whatever you want, and you can have multiple of
-them on the same component if it makes sense to do so. This also allows `useState` to be used in custom
-hooks that may require state that is specific to that hook.
-
-### Reactive props
-
-Since version 2.0, Owl renders are no longer "deep" by default: a component is only rerendered by its
-parent if its props have changed (using a simple equality test). What if the contents of a props have
-changed in a deeper property? If that prop is reactive, owl will rerender the child components that
-need to be updated automatically, and only those components, it does so by reobserving reactive
-objects passed as props to components. Consider the following example:
-
-```js
-class Counter extends Component {
-  static template = xml`
-    <div t-on-click="() => props.state.value++">
-      <t t-esc="props.state.value"/>
-    </div>`;
-}
-
-class Parent extends Component {
-  static template = xml`
-    <Counter state="this.state"/>
-    <button t-on-click="() => this.state.value = 0">Reset counter</button>
-    <button t-on-click="() => this.state.test++" t-esc="this.state.test"/>`;
-
-  setup() {
-    this.state = useState({ value: 0, test: 1 });
+  increment() {
+    this.state.value++;
   }
 }
 ```
 
-When clicking on the counter button, only the Counter rerenders, because the Parent has never read
-the "value" key in the state. When clicking on the "Reset Counter" button, the same thing happens:
-only the Counter component rerenders. What matters is not _where_ the state is updated, but which
-parts of the state are updated, and which components depend on them. This is achieved by Owl by
-automatically calling `useState` on reactive objects passed as props to a child component.
-
-When clicking on the last button, the parent is rerendered, but the child does not care about the
-`test` key: it has not read it. The props that we give it (`this.state`) have also not changed,
-as such, the parent updates but the child doesn't.
-
-For most day-to-day operations, `useState` should cover all of your needs. If
-you are curious about more advanced use cases and technical details, read on.
-
-### Debugging subscriptions
-
-Owl provides a way to show which reactive objects and keys a component is subscribed to: you can
-look at `component.__owl__.subscriptions`. Note that this is on the internal `__owl__` field, and
-should not be used in any type of production code as the name of this property or any of its properties
-or methods are subject to change at any point, even in stable versions of Owl, and may become available
-only in debug mode in the future.
+If one were to use a simple state object, Owl would not be aware that the value
+was changed and that the component should be rerendered. With the `useState`
+hook, `this.state` is now a reactive object, so this component works as expected.
 
 ## `reactive`
 
@@ -108,288 +64,68 @@ The function will be called whenever any tracked value is updated.
 ```js
 const obj = reactive({ a: 1 }, () => console.log("changed"));
 
-obj.a = 2; // does not log anything: the 'a' key has not been read yet
-console.log(obj.a); // logs 2 and reads the 'a' key => it is now tracked
-obj.a = 3; // logs 'changed' because we updated a tracked value
+obj.a = 2; // does not log anything: the 'a' key was not read
+console.log(obj.a); // log 2, and reads the 'a' key => it is now tracked
+obj.a = 3; // log 'changed' because we updated a tracked value
 ```
 
 An important property of reactive objects is that they can be reobserved: this
-will create an independent proxy that tracks another set of keys:
+will create an independant proxy that tracks another set of keys:
 
 ```js
 const obj1 = reactive({ a: 1, b: 2 }, () => console.log("observer 1"));
 const obj2 = reactive(obj1, () => console.log("observer 2"));
 
-console.log(obj1.a); // logs 1, and reads the 'a' key => it is now tracked by observer 1
-console.log(obj2.b); // logs 2, and 'b' is now tracked by observer 2
-obj2.a = 3; // only logs 'observer1', because observer2 does not track a
-obj2.b = 3; // only logs 'observer2', because observer1 does not track b
-console.log(obj2.a, obj1.b); // logs 3 and 3, while the object is observed independently, it is still a single object
+console.log(obj1.a); // log 1, and reads the 'a' key => it is now tracked by observer 1
+console.log(obj1.b); // log 2, and 'b' is now tracked by observer 1
+console.log(obj2.b); // log 2, and 'b' is now tracked by observer 1
+obj2.a = 3; // log 'observer1', because observer2 does not track a
+obj2.b = 3; // log 'observer1' and 'observer2'
 ```
 
-Because `useState` returns a normal reactive object, it is possible to call `reactive` on the result
-of a `useState` to observe changes to that object while outside the context of a component, or to
-call `useState` on reactive objects created outside of components. In those cases, one needs to be
-careful with regards to the lifetime of those reactive objects, as holding references to these
-objects may prevent garbage collection of the component and its data even if Owl has destroyed it.
+Obviously, one can use `reactive` on the result of a `useState` if wanted, this
+is the proper way to watch for some state changes.
 
-### Subscriptions are ephemereal
+## `markRaw`
 
-Subscription to state changes are ephemereal, whenever an observer is notified that a state object
-has changed, all of its subscriptions are cleared, meaning that if it still cares about it, it
-should read the properties it cares about again. For example:
+Marks an object so that it is ignored by the reactivity system. This function returns its argument.
 
 ```js
-const obj = reactive({ a: 1 }, () => console.log("observer called"));
-
-console.log(obj.a); // logs 1, and reads the 'a' key => it is now tracked by the observer
-obj.a = 3; // logs 'observer1' and clears the subscriptions of the observer
-obj.a = 4; // doesn't log anything, the key is no longer observed
-```
-
-This may seem counter-intuitive, but it makes perfect sense in the context of components:
-
-```js
-class DoubleCounter extends Component {
-  static template = xml`
-    <t t-esc="state.selected + ': ' + state[state.selected].value"/>
-    <button t-on-click="() => this.state.count1++">increment count 1</button>
-    <button t-on-click="() => this.state.count2++">increment count 2</button>
-    <button t-on-click="changeCounter">Switch counter</button>
-  `;
-
-  setup() {
-    this.state = useState({ selected: "count1", count1: 0, count2: 0 });
-  }
-
-  changeCounter() {
-    this.state.selected = this.state.selected === "count1" ? "count2" : "count1";
-  }
-}
-```
-
-In this component, if we increment the value of the second counter, the component will not rerender,
-which makes sense as rerendering will have no effect, as the second counter is not displayed. If we
-toggle the component to display the second counter, we now no longer want the component to rerender
-when the value of the first counter changes, and this is what happens: a component only rerenders
-when there are changes to pieces of state that have been read during or after the previous render.
-If a piece of state has not been read in the last render, we know that its value won't influence the
-rendered output, and so we can ignore it.
-
-### reactive `Map` and `Set`
-
-The reactivity system has special support built-in for the standard container types `Map` and `Set`.
-They behave like one would expect: reading a key subscribes the observer to that key, adding or
-removing an item to them will notify observers that have used any of the iterators on that reactive
-object, such as `.entries()` or `.keys()`, likewise with clearing them.
-
-## Escape hatches
-
-Sometimes, it is desirable to bypass the reactivity system. Creating proxies when interacting with
-reactive objects is expensive, and while on the whole, the performance benefit that we get by
-rerendering only the parts of the interface that need it outweighs that cost, in some cases, we want
-to be able to opt out of creating them in the first place. This is the purpose of `markRaw`:
-
-### `markRaw`
-
-Marks an object so that it is ignored by the reactivity system, meaning that if this object is ever
-part of a of a reactive object, it will be returned as is, and no keys in that object will be
-observed.
-
-```js
-const someObject = markRaw({ b: 1 });
+const someObject = markRaw(...);
 const state = useState({
   a: 1,
-  obj: someObject,
+  obj: someObject
 });
-console.log(state.obj.b); // attempt to subscribe to the "b" key in someObject
-state.obj.b = 2; // No rerender will occur here
-console.log(someObject === state.obj); // true
+// here, state.obj === someObject
 ```
 
-This is useful in some rare cases. One such example would be if you want to use an array of objects
-that is potentially large to render a list, but those objects are known to be immutable:
-
-```js
-this.items = useState([
-  { label: "some text", value: 42 },
-  // ... 1000 total objects
-]);
-```
-
-in the template:
-
-```xml
-<t t-foreach="items" t-as="item" t-key="item.label" t-esc="item.label + item.value"/>
-```
-
-Here, on every render, we will go and read one thousand keys from a reactive object, which will
-cause one thousand reactive objects to be created. If we know that the content of these objects
-cannot change, this is wasted work. If instead all of these objects are marked as raw, we will avoid
-all of this work while keeping the ability to lean on the reactivity to track the presence and
-identity of these objects:
-
-```js
-this.items = useState([
-  markRaw({ label: "some text", value: 42 }),
-  // ... 1000 total objects
-]);
-```
+This is useful in some rare cases. For example, some complex and large object such
+that going through the reactivity system may cause a non trivial performance slowdown.
 
 However, use this function with caution: this is an escape hatch from the reactivity
-system, and as such, using it may cause subtle and unintended issues! For example:
+system, and as such, using it may cause subtle and unintended issues!
+
+## `toRaw`
+
+Given a reactive object, this function returns the underlying, non-reactive,
+corresponding object.
 
 ```js
-// This will cause a rerender
-this.items.push(markRaw({ label: "another label", value: 1337 }));
+// in setup
+const state = useState({ value: 1 });
 
-// THIS WILL NOT CAUSE A RENDER!
-this.items[17].value = 3;
-// The UI is now desynced from component's state until the next render caused by something else
+// later:
+const rawState = toRaw(this.state);
+rawState.value = 3; // will NOT be picked up by the reactivity system!!!
 ```
 
-In short: only use `markRaw` if your application is slowing down noticeably and profiling reveals
-that a lot of time is spent creating useless reactive objects.
+Here again, this is useful in some situations where we want to explicitely bypass
+Owl, but using this function means that the responsability of coordinating
+state update is given to the user code, instead of Owl. Subtle bugs may arise!
 
-### `toRaw`
-
-While `markRaw` marks an object so that it is never made reactive, `toRaw` takes an object and
-returns the underlying non-reactive object. It can be useful in some niche cases. In particular,
-because the reactivity system returns a proxy, the returned object does not compare equal to the
-original object:
+Also, normal (non-reactive objects) will be directly returned by `toRaw`:
 
 ```js
-const obj = {};
-const reactiveObj = reactive(obj);
-console.log(obj === reactiveObj); // false
-console.log(obj === toRaw(reactiveObj)); // true
+const obj = { a: 1 };
+console.log(toRaw(obj) === obj); // true
 ```
-
-It can also be useful during debugging, as unfolding proxies recursively in debuggers can be confusing.
-
-## Advanced usage
-
-The following is a collection of small snippets that leverage the reactivity system in
-"non-standard" ways to help you understand its power and where using it might make your code simpler.
-
-### Notification manager
-
-Showing notifications is a pretty common need in web applications, you may want to show a
-notification from any other component within the application, and the notifications should stack on
-top of one another regardless of which component spawned them, here is how we can leverage the
-reactivity to accomplish this:
-
-```js
-let notificationId = 1;
-const notifications = reactive({});
-class NotificationContainer extends Component {
-  static template = xml`
-    <t t-foreach="notifications" t-as="notification" t-key="notification_key" t-esc="notification"/>
-  `;
-  setup() {
-    this.notifications = useState(notifications);
-  }
-}
-
-export function addNotification(label) {
-  const id = notificationId++;
-  notifications[id] = label;
-  return () => {
-    delete notifications[id];
-  };
-}
-```
-
-Here, the `notifications` variable is a reactive object. Notice how we didn't give `reactive` a
-callback: this is because in this case, all we care about is that adding or removing notifications
-in the `addNotification` function goes through the reactivity system. The `NotificationContainer`
-component reobserves this object with `useState`, and will be updated whenever notifications are
-added or removed.
-
-### Store
-
-Centralizing application state is a pretty common want/need in web applications. Because of the way
-the reactivity system works, you can treat any reactive object as a store, and if you call `useState`
-on it, components will automatically observe only the part of the store that they're interested in:
-
-```js
-export const store = reactive({
-  list: [],
-  add(item) {
-    this.list.push(item);
-  },
-});
-
-export function useStore() {
-  return useState(store);
-}
-```
-
-In any component:
-
-```js
-import { useStore } from "./store";
-
-class List extends Component {
-  static template = xml`
-    <t t-foreach="store.list" t-as="item" t-key="item" t-esc="item"/>
-  `;
-  setup() {
-    this.store = useStore();
-  }
-}
-```
-
-Anywhere in the application:
-
-```js
-import { store } from "./store";
-// Will cause any instance of the List component in the app to update
-store.add("New list item!");
-```
-
-Notice how we can make objects with methods into reactive objects, and when these methods are used
-to mutate the store contents, it works as expected. And while stores are generally one-off objects,
-it is entirely possible to make class instances reactive:
-
-```js
-class Store {
-  list = [];
-  add(item) {
-    this.list.push(item);
-  }
-}
-// Essentially equivalent to the previous code
-export const store = reactive(new Store());
-```
-
-Which can be useful to unit test the class separately.
-
-### Local storage synchronization
-
-Sometimes, you want to persist some state accross reloads, you can do this by storing it in the
-`localStorage`, but what if you want to update the `localStorage` item every time the state changes,
-so that you don't have to manually synchronize the states? Well, you can use the reactivity system
-to write a custom hook that will do that for you:
-
-```js
-function useStoredState(key, initialState) {
-  const state = JSON.parse(localStorage.getItem(key)) || initialState;
-  const store = (obj) => localStorage.setItem(key, JSON.stringify(obj));
-  const reactiveState = reactive(state, () => store(reactiveState));
-  store(reactiveState);
-  return useState(state);
-}
-
-class MyComponent extends Component {
-  setup() {
-    this.state = useStoredState("MyComponent.state", { value: 1 });
-  }
-}
-```
-
-One important thing to notice is that both times we call `store`, we call it with `reactiveState`,
-not `state`: we need `store` to read the keys through a reactive object for it to correctly
-subscribe to state changes. Notice also that we call `store` the first time by hand, as otherwise it
-will not be subscribed to anything, and no amount of change in the object will cause the reactive
-callback to be invoked.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.2",
+  "version": "2.0.0-beta-15",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

roadmap.md

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

src/compiler/code_generator.ts

@@ -191,7 +191,7 @@ class CodeTarget {
     let result: string[] = [];
     result.push(`function ${this.name}(ctx, node, key = "") {`);
     if (this.hasRef) {
-      result.push(`  const refs = this.__owl__.refs;`);
+      result.push(`  const refs = ctx.__owl__.refs;`);
       for (let name in this.refInfo) {
         const [id, expr] = this.refInfo[name];
         result.push(`  const ${id} = ${expr};`);
@@ -214,14 +214,6 @@ class CodeTarget {
     result.push(`}`);
     return result.join("\n  ");
   }
-
-  currentKey(ctx: Context) {
-    let key = this.loopLevel ? `key${this.loopLevel}` : "key";
-    if (ctx.tKeyExpr) {
-      key = `${ctx.tKeyExpr} + ${key}`;
-    }
-    return key;
-  }
 }
 
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
@@ -240,7 +232,6 @@ export class CodeGenerator {
   translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
   staticDefs: { id: string; expr: string }[] = [];
-  slotNames: Set<String> = new Set();
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
@@ -373,15 +364,19 @@ export class CodeGenerator {
 
   insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
     let blockExpr = block.generateExpr(expression);
+    const tKeyExpr = ctx.tKeyExpr;
     if (block.parentVar) {
-      let key = this.target.currentKey(ctx);
+      let keyArg = `key${this.target.loopLevel}`;
+      if (tKeyExpr) {
+        keyArg = `${tKeyExpr} + ${keyArg}`;
+      }
       this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
       return;
     }
 
-    if (ctx.tKeyExpr) {
-      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
+    if (tKeyExpr) {
+      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
     }
 
     if (block.isRoot && !ctx.preventRoot) {
@@ -428,66 +423,78 @@ export class CodeGenerator {
       .join("");
   }
 
-  /**
-   * @returns the newly created block name, if any
-   */
-  compileAST(ast: AST, ctx: Context): string | null {
+  compileAST(ast: AST, ctx: Context) {
     switch (ast.type) {
       case ASTType.Comment:
-        return this.compileComment(ast, ctx);
+        this.compileComment(ast, ctx);
+        break;
       case ASTType.Text:
-        return this.compileText(ast, ctx);
+        this.compileText(ast, ctx);
+        break;
       case ASTType.DomNode:
-        return this.compileTDomNode(ast, ctx);
+        this.compileTDomNode(ast, ctx);
+        break;
       case ASTType.TEsc:
-        return this.compileTEsc(ast, ctx);
+        this.compileTEsc(ast, ctx);
+        break;
       case ASTType.TOut:
-        return this.compileTOut(ast, ctx);
+        this.compileTOut(ast, ctx);
+        break;
       case ASTType.TIf:
-        return this.compileTIf(ast, ctx);
+        this.compileTIf(ast, ctx);
+        break;
       case ASTType.TForEach:
-        return this.compileTForeach(ast, ctx);
+        this.compileTForeach(ast, ctx);
+        break;
       case ASTType.TKey:
-        return this.compileTKey(ast, ctx);
+        this.compileTKey(ast, ctx);
+        break;
       case ASTType.Multi:
-        return this.compileMulti(ast, ctx);
+        this.compileMulti(ast, ctx);
+        break;
       case ASTType.TCall:
-        return this.compileTCall(ast, ctx);
+        this.compileTCall(ast, ctx);
+        break;
       case ASTType.TCallBlock:
-        return this.compileTCallBlock(ast, ctx);
+        this.compileTCallBlock(ast, ctx);
+        break;
       case ASTType.TSet:
-        return this.compileTSet(ast, ctx);
+        this.compileTSet(ast, ctx);
+        break;
       case ASTType.TComponent:
-        return this.compileComponent(ast, ctx);
+        this.compileComponent(ast, ctx);
+        break;
       case ASTType.TDebug:
-        return this.compileDebug(ast, ctx);
+        this.compileDebug(ast, ctx);
+        break;
       case ASTType.TLog:
-        return this.compileLog(ast, ctx);
+        this.compileLog(ast, ctx);
+        break;
       case ASTType.TSlot:
-        return this.compileTSlot(ast, ctx);
+        this.compileTSlot(ast, ctx);
+        break;
       case ASTType.TTranslation:
-        return this.compileTTranslation(ast, ctx);
+        this.compileTTranslation(ast, ctx);
+        break;
       case ASTType.TPortal:
-        return this.compileTPortal(ast, ctx);
+        this.compileTPortal(ast, ctx);
     }
   }
 
-  compileDebug(ast: ASTDebug, ctx: Context): string | null {
+  compileDebug(ast: ASTDebug, ctx: Context) {
     this.addLine(`debugger;`);
     if (ast.content) {
-      return this.compileAST(ast.content, ctx);
+      this.compileAST(ast.content, ctx);
     }
-    return null;
   }
 
-  compileLog(ast: ASTLog, ctx: Context): string | null {
+  compileLog(ast: ASTLog, ctx: Context) {
     this.addLine(`console.log(${compileExpr(ast.expr)});`);
     if (ast.content) {
-      return this.compileAST(ast.content, ctx);
+      this.compileAST(ast.content, ctx);
     }
-    return null;
   }
-  compileComment(ast: ASTComment, ctx: Context): string {
+  compileComment(ast: ASTComment, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
@@ -500,10 +507,9 @@ export class CodeGenerator {
       const text = xmlDoc.createComment(ast.value);
       block!.insert(text);
     }
-    return block!.varName;
   }
 
-  compileText(ast: ASTText, ctx: Context): string {
+  compileText(ast: ASTText, ctx: Context) {
     let { block, forceNewBlock } = ctx;
 
     let value = ast.value;
@@ -522,7 +528,6 @@ export class CodeGenerator {
       const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
       block.insert(createFn.call(xmlDoc, value));
     }
-    return block.varName;
   }
 
   generateHandlerCode(rawEvent: string, handler: string): string {
@@ -542,7 +547,7 @@ export class CodeGenerator {
     return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
   }
 
-  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
+  compileTDomNode(ast: ASTDomNode, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
     let codeIdx = this.target.code.length;
@@ -579,12 +584,8 @@ export class CodeGenerator {
         expr = compileExpr(ast.attrs[key]);
         if (attrName && isProp(ast.tag, attrName)) {
           // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
-          if (attrName === "value") {
-            // When the expression is falsy, fall back to an empty string
-            expr = `new String((${expr}) || "")`;
-          } else {
-            expr = `new Boolean(${expr})`;
-          }
+          const C = attrName === "value" ? "String" : "Boolean";
+          expr = `new ${C}(${expr})`;
         }
         const idx = block!.insertData(expr, "attr");
         if (key === "t-att") {
@@ -606,6 +607,39 @@ export class CodeGenerator {
       }
     }
 
+    // event handlers
+    for (let ev in ast.on) {
+      const name = this.generateHandlerCode(ev, ast.on[ev]);
+      const idx = block!.insertData(name, "hdlr");
+      attrs[`block-handler-${idx}`] = ev;
+    }
+
+    // t-ref
+    if (ast.ref) {
+      this.target.hasRef = true;
+      const isDynamic = INTERP_REGEXP.test(ast.ref);
+      if (isDynamic) {
+        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+        const idx = block!.insertData(`(el) => refs[${str}] = el`, "ref");
+        attrs["block-ref"] = String(idx);
+      } else {
+        let name = ast.ref;
+        if (name in this.target.refInfo) {
+          // ref has already been defined
+          this.helpers.add("multiRefSetter");
+          const info = this.target.refInfo[name];
+          const index = block!.data.push(info[0]) - 1;
+          attrs["block-ref"] = String(index);
+          info[1] = `multiRefSetter(refs, \`${name}\`)`;
+        } else {
+          let id = generateId("ref");
+          this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
+          const index = block!.data.push(id) - 1;
+          attrs["block-ref"] = String(index);
+        }
+      }
+    }
+
     // t-model
     let tModelSelectedExpr;
     if (ast.model) {
@@ -652,39 +686,6 @@ export class CodeGenerator {
       attrs[`block-handler-${idx}`] = eventType;
     }
 
-    // event handlers
-    for (let ev in ast.on) {
-      const name = this.generateHandlerCode(ev, ast.on[ev]);
-      const idx = block!.insertData(name, "hdlr");
-      attrs[`block-handler-${idx}`] = ev;
-    }
-
-    // t-ref
-    if (ast.ref) {
-      this.target.hasRef = true;
-      const isDynamic = INTERP_REGEXP.test(ast.ref);
-      if (isDynamic) {
-        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-        const idx = block!.insertData(`(el) => refs[${str}] = el`, "ref");
-        attrs["block-ref"] = String(idx);
-      } else {
-        let name = ast.ref;
-        if (name in this.target.refInfo) {
-          // ref has already been defined
-          this.helpers.add("multiRefSetter");
-          const info = this.target.refInfo[name];
-          const index = block!.data.push(info[0]) - 1;
-          attrs["block-ref"] = String(index);
-          info[1] = `multiRefSetter(refs, \`${name}\`)`;
-        } else {
-          let id = generateId("ref");
-          this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
-          const index = block!.data.push(id) - 1;
-          attrs["block-ref"] = String(index);
-        }
-      }
-    }
-
     const dom = xmlDoc.createElement(ast.tag);
     for (const [attr, val] of Object.entries(attrs)) {
       if (!(attr === "class" && val === "")) {
@@ -729,10 +730,9 @@ export class CodeGenerator {
         this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
-    return block!.varName;
   }
 
-  compileTEsc(ast: ASTTEsc, ctx: Context): string {
+  compileTEsc(ast: ASTTEsc, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     let expr: string;
     if (ast.expr === "0") {
@@ -753,10 +753,9 @@ export class CodeGenerator {
       const text = xmlDoc.createElement(`block-text-${idx}`);
       block.insert(text);
     }
-    return block.varName;
   }
 
-  compileTOut(ast: ASTTOut, ctx: Context): string {
+  compileTOut(ast: ASTTOut, ctx: Context) {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -778,7 +777,6 @@ export class CodeGenerator {
       blockStr = `safeOutput(${compileExpr(ast.expr)})`;
     }
     this.insertBlock(blockStr, block, ctx);
-    return block.varName;
   }
 
   compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
@@ -792,7 +790,7 @@ export class CodeGenerator {
     this.target.indentLevel--;
   }
 
-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode): string {
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
     let { block, forceNewBlock } = ctx;
     const codeIdx = this.target.code.length;
     const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
@@ -835,10 +833,9 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
-    return block.varName;
   }
 
-  compileTForeach(ast: ASTTForEach, ctx: Context): string {
+  compileTForeach(ast: ASTTForEach, ctx: Context) {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -877,9 +874,9 @@ export class CodeGenerator {
       // Throw error on duplicate keys in dev mode
       this.helpers.add("OwlError");
       this.addLine(
-        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
-      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
+      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
     }
     let id: string;
     if (ast.memo) {
@@ -916,10 +913,9 @@ export class CodeGenerator {
       this.addLine(`ctx = ctx.__proto__;`);
     }
     this.insertBlock("l", block, ctx);
-    return block.varName;
   }
 
-  compileTKey(ast: ASTTKey, ctx: Context): string | null {
+  compileTKey(ast: ASTTKey, ctx: Context) {
     const tKeyExpr = generateId("tKey_");
     this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
@@ -927,22 +923,20 @@ export class CodeGenerator {
       block: ctx.block,
       index: ctx.index,
     });
-    return this.compileAST(ast.content, ctx);
+    this.compileAST(ast.content, ctx);
   }
 
-  compileMulti(ast: ASTMulti, ctx: Context): string | null {
+  compileMulti(ast: ASTMulti, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     let codeIdx = this.target.code.length;
     if (isNewBlock) {
       const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
-      let result: string | null = null;
       if (n <= 1) {
         for (let child of ast.content) {
-          const blockName = this.compileAST(child, ctx);
-          result = result || blockName;
+          this.compileAST(child, ctx);
         }
-        return result;
+        return;
       }
       block = this.createBlock(block, "multi", ctx);
     }
@@ -982,10 +976,9 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
-    return block!.varName;
   }
 
-  compileTCall(ast: ASTTCall, ctx: Context): string {
+  compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     let ctxVar = ctx.ctxVar || "ctx";
     if (ast.context) {
@@ -996,11 +989,12 @@ export class CodeGenerator {
       this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
       this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
+      const nextId = BlockDescription.nextBlockId;
       const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
-      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (bl) {
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = ${bl};`);
+        this.addLine(`${ctxVar}[zero] = b${nextId};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1034,10 +1028,9 @@ export class CodeGenerator {
     if (ast.body && !ctx.isLast) {
       this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
-    return block.varName;
   }
 
-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     if (block) {
       if (!forceNewBlock) {
@@ -1046,10 +1039,9 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
-    return block.varName;
   }
 
-  compileTSet(ast: ASTTSet, ctx: Context): null {
+  compileTSet(ast: ASTTSet, ctx: Context) {
     this.target.shouldProtectScope = true;
     this.helpers.add("isBoundary").add("withDefault");
     const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1057,8 +1049,7 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let key = this.target.currentKey(ctx);
-      let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
+      let value = `new LazyValue(${name}, ctx, this, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1075,7 +1066,6 @@ export class CodeGenerator {
       this.helpers.add("setContextValue");
       this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
-    return null;
   }
 
   generateComponentKey() {
@@ -1104,7 +1094,7 @@ export class CodeGenerator {
       if (suffix === "bind") {
         this.helpers.add("bind");
         name = _name;
-        value = `bind(this, ${value || undefined})`;
+        value = `bind(ctx, ${value || undefined})`;
       } else {
         throw new OwlError("Invalid prop suffix");
       }
@@ -1127,7 +1117,7 @@ export class CodeGenerator {
     return propString;
   }
 
-  compileComponent(ast: ASTComponent, ctx: Context): string {
+  compileComponent(ast: ASTComponent, ctx: Context) {
     let { block } = ctx;
     // props
     const hasSlotsProp = "slots" in (ast.props || {});
@@ -1140,7 +1130,7 @@ export class CodeGenerator {
       if (this.target.loopLevel || !this.hasSafeContext) {
         ctxStr = generateId("ctx");
         this.helpers.add("capture");
-        this.define(ctxStr, `capture(ctx, this)`);
+        this.define(ctxStr, `capture(ctx)`);
       }
       let slotStr: string[] = [];
       for (let slotName in ast.slots) {
@@ -1148,7 +1138,7 @@ export class CodeGenerator {
         const params = [];
         if (slotAst.content) {
           const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-          params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
+          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
         }
         const scope = ast.slots[slotName].scope;
         if (scope) {
@@ -1193,7 +1183,7 @@ export class CodeGenerator {
     }
 
     if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
     }
 
     if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1227,7 +1217,6 @@ export class CodeGenerator {
 
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
-    return block.varName;
   }
 
   wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1246,43 +1235,34 @@ export class CodeGenerator {
     return `${name}(${expr}, [${handlers.join(",")}])`;
   }
 
-  compileTSlot(ast: ASTSlot, ctx: Context): string {
+  compileTSlot(ast: ASTSlot, ctx: Context) {
     this.helpers.add("callSlot");
     let { block } = ctx;
     let blockString: string;
     let slotName;
     let dynamic = false;
-    let isMultiple = false;
     if (ast.name.match(INTERP_REGEXP)) {
       dynamic = true;
-      isMultiple = true;
       slotName = interpolate(ast.name);
     } else {
       slotName = "'" + ast.name + "'";
-      isMultiple = isMultiple || this.slotNames.has(ast.name);
-      this.slotNames.add(ast.name);
     }
     const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
     if (ast.attrs) {
       delete ast.attrs["t-props"];
     }
-    let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
-    if (isMultiple) {
-      key = `${key} + \`${this.generateComponentKey()}\``;
-    }
-
     const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
     const scope = this.getPropString(props, dynProps);
     if (ast.defaultContent) {
       const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
+      blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
     } else {
       if (dynamic) {
         let name = generateId("slot");
         this.define(name, slotName);
-        blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
+        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
       } else {
-        blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
+        blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
       }
     }
     // event handling
@@ -1295,16 +1275,14 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-    return block.varName;
   }
 
-  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
+  compileTTranslation(ast: ASTTranslation, ctx: Context) {
     if (ast.content) {
-      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
     }
-    return null;
   }
-  compileTPortal(ast: ASTTPortal, ctx: Context): string {
+  compileTPortal(ast: ASTTPortal, ctx: Context) {
     if (!this.staticDefs.find((d) => d.id === "Portal")) {
       this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
     }
@@ -1316,7 +1294,7 @@ export class CodeGenerator {
     if (this.target.loopLevel || !this.hasSafeContext) {
       ctxStr = generateId("ctx");
       this.helpers.add("capture");
-      this.define(ctxStr, `capture(ctx, this)`);
+      this.define(ctxStr, `capture(ctx)`);
     }
     let id = generateId("comp");
     this.staticDefs.push({
@@ -1325,12 +1303,11 @@ export class CodeGenerator {
     });
 
     const target = compileExpr(ast.target);
-    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
     if (block) {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-    return block.varName;
   }
 }

src/compiler/parser.ts

@@ -781,9 +781,8 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
 
     // default slot
     const defaultContent = parseChildNodes(clone, ctx);
-    slots = slots || {};
-    // t-set-slot="default" has priority over content
-    if (defaultContent && !slots.default) {
+    if (defaultContent) {
+      slots = slots || {};
       slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
     }
   }

src/runtime/app.ts

@@ -6,7 +6,6 @@ import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
-import { handleError } from "./error_handling";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -95,7 +94,9 @@ export class App<
         nodeErrorHandlers.set(node, handlers);
       }
       handlers.unshift((e) => {
-        if (!isResolved) {
+        if (isResolved) {
+          console.error(e);
+        } else {
           reject(e);
         }
         throw e;
@@ -151,13 +152,7 @@ export class App<
       } else {
         // new component
         if (isStatic) {
-          const components = parent.constructor.components;
-          if (!components) {
-            throw new OwlError(
-              `Cannot find the definition of component "${name}", missing static components key in parent`
-            );
-          }
-          C = components[name as any];
+          C = parent.constructor.components[name as any];
           if (!C) {
             throw new OwlError(`Cannot find the definition of component "${name}"`);
           } else if (!(C.prototype instanceof Component)) {
@@ -174,10 +169,6 @@ export class App<
       return node;
     };
   }
-
-  handleError(...args: Parameters<typeof handleError>) {
-    return handleError(...args);
-  }
 }
 
 export async function mount<

src/runtime/blockdom/block_compiler.ts

@@ -157,15 +157,6 @@ function buildTree(
           : document.createElement(tagName);
       }
       if (el instanceof Element) {
-        if (!domParentTree) {
-          // some html elements may have side effects when setting their attributes.
-          // For example, setting the src attribute of an <img/> will trigger a
-          // request to get the corresponding image. This is something that we
-          // don't want at compile time. We avoid that by putting the content of
-          // the block in a <template/> element
-          const fragment = document.createElement("template").content;
-          fragment.appendChild(el);
-        }
         for (let i = 0; i < attrs.length; i++) {
           const attrName = attrs[i].name;
           const attrValue = attrs[i].value;
@@ -517,13 +508,9 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      nodeInsertBefore.call(parent, this.el!, node);
-    }
-
-    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
-      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
+    moveBefore(other: Block | null, afterNode: Node | null) {
+      const target = other ? other.el! : afterNode;
+      nodeInsertBefore.call(this.parentEl, this.el!, target);
     }
 
     toString() {

src/runtime/blockdom/event_catcher.ts

@@ -46,7 +46,7 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
           const target = ev.target;
           let currentNode: any = self.child.firstNode();
           const afterNode = self.afterNode;
-          while (currentNode && currentNode !== afterNode) {
+          while (currentNode !== afterNode) {
             if (currentNode.contains(target)) {
               return origFn.call(this, ev);
             }
@@ -56,18 +56,8 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
       }
     }
 
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      this.child.moveBeforeDOMNode(node, parent);
-      parent!.insertBefore(this.afterNode!, node);
-    }
-
-    moveBeforeVNode(other: VCatcher | null, afterNode: Node | null) {
-      if (other) {
-        // check this with @ged-odoo for use in foreach
-        afterNode = other.firstNode() || afterNode;
-      }
-      this.child.moveBeforeVNode(other ? other.child : null, afterNode);
+    moveBefore(other: VCatcher | null, afterNode: Node | null) {
+      this.child.moveBefore(other ? other.child : null, afterNode);
       this.parentEl!.insertBefore(this.afterNode!, afterNode);
     }
 

src/runtime/blockdom/events.ts

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

src/runtime/blockdom/html.ts

@@ -29,16 +29,12 @@ class VHtml {
     }
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, node);
-    }
-  }
-
-  moveBeforeVNode(other: VHtml | null, afterNode: Node | null) {
+  moveBefore(other: VHtml | null, afterNode: Node | null) {
     const target = other ? other.content[0] : afterNode;
-    this.moveBeforeDOMNode(target);
+    const parent = this.parentEl;
+    for (let elem of this.content) {
+      nodeInsertBefore.call(parent, elem, target);
+    }
   }
 
   patch(other: VHtml) {

src/runtime/blockdom/index.ts

@@ -10,8 +10,7 @@ export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void;
-  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
+  moveBefore(other: T | null, afterNode: Node | null): void;
   patch(other: T, withBeforeRemove: boolean): void;
   beforeRemove(): void;
   remove(): void;

src/runtime/blockdom/list.ts

@@ -38,23 +38,14 @@ class VList {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeDOMNode(node, parent);
-    }
-    parent!.insertBefore(this.anchor!, node);
-  }
-
-  moveBeforeVNode(other: VList | null, afterNode: Node | null) {
+  moveBefore(other: VList | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
       afterNode = (next ? next.firstNode() : other!.anchor) || null;
     }
     const children = this.children;
     for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeVNode(null, afterNode);
+      children[i].moveBefore(null, afterNode);
     }
     this.parentEl!.insertBefore(this.anchor!, afterNode);
   }
@@ -75,7 +66,7 @@ class VList {
       patch: cPatch,
       remove: cRemove,
       beforeRemove,
-      moveBeforeVNode: cMoveBefore,
+      moveBefore: cMoveBefore,
       firstNode: cFirstNode,
     } = proto;
 

src/runtime/blockdom/multi.ts

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

src/runtime/blockdom/text.ts

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

src/runtime/blockdom/toggler.ts

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

src/runtime/component_node.ts

@@ -1,9 +1,16 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError, OwlError } from "./error_handling";
+import { fibersInError, handleError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
+import {
+  clearReactivesForCallback,
+  getSubscriptions,
+  NonReactive,
+  Reactive,
+  reactive,
+  TARGET,
+} from "./reactivity";
 import { STATUS } from "./status";
 import { batched, Callback } from "./utils";
 
@@ -45,7 +52,7 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  *  relevant changes
  * @see reactive
  */
-export function useState<T extends object>(state: T): T {
+export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
   const node = getCurrent();
   let render = batchedRenderFunctions.get(node)!;
   if (!render) {
@@ -109,7 +116,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.childEnv = env;
     for (const key in props) {
       const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
+      if (prop && typeof prop === "object" && prop[TARGET]) {
         props[key] = useState(prop);
       }
     }
@@ -134,7 +141,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     try {
       await Promise.all(this.willStart.map((f) => f.call(component)));
     } catch (e) {
-      this.app.handleError({ node: this, error: e });
+      handleError({ node: this, error: e });
       return;
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
@@ -212,7 +219,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
           cb.call(component);
         }
       } catch (e) {
-        this.app.handleError({ error: e, node: this });
+        handleError({ error: e, node: this });
       }
     }
     this.status = STATUS.DESTROYED;
@@ -233,7 +240,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     currentNode = this;
     for (const key in props) {
       const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
+      if (prop && typeof prop === "object" && prop[TARGET]) {
         props[key] = useState(prop);
       }
     }
@@ -299,12 +306,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.fiber = null;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void {
-    this.bdom!.moveBeforeDOMNode(node, parent);
-  }
-
-  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
-    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
+  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
+    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
   }
 
   patch() {

src/runtime/error_handling.ts

@@ -71,6 +71,5 @@ export function handleError(params: ErrorParams) {
     } catch (e) {
       console.error(e);
     }
-    throw error;
   }
 }

src/runtime/fibers.ts

@@ -1,6 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, OwlError } from "./error_handling";
+import { fibersInError, handleError, OwlError } from "./error_handling";
 import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -130,7 +130,7 @@ export class Fiber {
         (this.bdom as any) = true;
         this.bdom = node.renderFn();
       } catch (e) {
-        node.app.handleError({ node, error: e });
+        handleError({ node, error: e });
       }
       root.setCounter(root.counter - 1);
     }
@@ -195,7 +195,7 @@ export class RootFiber extends Fiber {
       }
     } catch (e) {
       this.locked = false;
-      node.app.handleError({ fiber: current || this, error: e });
+      handleError({ fiber: current || this, error: e });
     }
   }
 
@@ -259,7 +259,7 @@ export class MountFiber extends RootFiber {
         }
       }
     } catch (e) {
-      this.node.app.handleError({ fiber: current as Fiber, error: e });
+      handleError({ fiber: current as Fiber, error: e });
     }
   }
 }

src/runtime/index.ts

@@ -12,6 +12,7 @@ import {
   comment,
 } from "./blockdom";
 import { mainEventHandler } from "./event_handling";
+export type { Reactive } from "./reactivity";
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
@@ -35,7 +36,6 @@ export const blockDom = {
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 export { Component } from "./component";
-export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";

src/runtime/portal.ts

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

src/runtime/reactivity.ts

@@ -1,17 +1,25 @@
 import { Callback } from "./utils";
 import { OwlError } from "./error_handling";
 
+// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
+export const TARGET = Symbol("Target");
+// Escape hatch to prevent reactivity system to turn something into a reactive
+const SKIP = Symbol("Skip");
 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
 
-// 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"
 type Target = object;
-type Reactive<T extends Target> = T;
-
 type Collection = Set<any> | Map<any, any> | WeakMap<any, any>;
 type CollectionRawType = "Set" | "Map" | "WeakMap";
 
+export type Reactive<T extends Target = Target> = T & {
+  [TARGET]: any;
+};
+
+export type NonReactive<T extends Target = Target> = T & {
+  [SKIP]: any;
+};
+
 const objectToString = Object.prototype.toString;
 const objectHasOwnProperty = Object.prototype.hasOwnProperty;
 
@@ -53,16 +61,15 @@ function possiblyReactive(val: any, cb: Callback) {
   return canBeMadeReactive(val) ? reactive(val, cb) : val;
 }
 
-const skipped = new WeakSet<Target>();
 /**
  * Mark an object or array so that it is ignored by the reactivity system
  *
  * @param value the value to mark
  * @returns the object itself
  */
-export function markRaw<T extends Target>(value: T): T {
-  skipped.add(value);
-  return value;
+export function markRaw<T extends Target>(value: T): NonReactive<T> {
+  (value as any)[SKIP] = true;
+  return value as NonReactive<T>;
 }
 
 /**
@@ -71,8 +78,8 @@ export function markRaw<T extends Target>(value: T): T {
  * @param value a reactive value
  * @returns the underlying value
  */
-export function toRaw<T extends Target, U extends Reactive<T>>(value: U | T): T {
-  return targets.has(value) ? (targets.get(value) as T) : value;
+export function toRaw<T extends object>(value: Reactive<T>): T {
+  return value[TARGET] || value;
 }
 
 const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callback>>>();
@@ -157,9 +164,8 @@ export function getSubscriptions(callback: Callback) {
     };
   });
 }
-// Maps reactive objects to the underlying target
-export const targets = new WeakMap<Reactive<Target>, Target>();
-const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>();
+
+const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
 /**
  * Creates a reactive proxy for an object. Reading data on the reactive object
  * subscribes to changes to the data. Writing data on the object will cause the
@@ -174,7 +180,7 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>()
  * Subscriptions:
  * + Reading a property on an object will subscribe you to changes in the value
  *    of that property.
- * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
+ * + Accessing an object keys (eg with Object.keys or with `for..in`) will
  *    subscribe you to the creation/deletion of keys. Checking the presence of a
  *    key on the object with 'in' has the same effect.
  * - getOwnPropertyDescriptor does not currently subscribe you to the property.
@@ -187,16 +193,19 @@ 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 = () => {}): T {
+export function reactive<T extends Target>(
+  target: T,
+  callback: Callback = () => {}
+): Reactive<T> | NonReactive<T> {
   if (!canBeMadeReactive(target)) {
     throw new OwlError(`Cannot make the given value reactive`);
   }
-  if (skipped.has(target)) {
-    return target;
+  if (SKIP in target) {
+    return target as NonReactive<T>;
   }
-  if (targets.has(target)) {
-    // target is reactive, create a reactive on the underlying object instead
-    return reactive(targets.get(target) as T, callback);
+  const originalTarget = (target as Reactive)[TARGET];
+  if (originalTarget) {
+    return reactive(originalTarget, callback);
   }
   if (!reactiveCache.has(target)) {
     reactiveCache.set(target, new WeakMap());
@@ -209,7 +218,6 @@ export function reactive<T extends Target>(target: T, callback: Callback = () =>
       : basicProxyHandler<T>(callback);
     const proxy = new Proxy(target, handler as ProxyHandler<T>) as Reactive<T>;
     reactivesForTarget.set(callback, proxy);
-    targets.set(proxy, target);
   }
   return reactivesForTarget.get(callback) as Reactive<T>;
 }
@@ -221,29 +229,29 @@ export function reactive<T extends Target>(target: T, callback: Callback = () =>
  */
 function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T> {
   return {
-    get(target, key, receiver) {
+    get(target: any, key: PropertyKey, proxy: Reactive<T>) {
+      if (key === TARGET) {
+        return target;
+      }
       // non-writable non-configurable properties cannot be made reactive
       const desc = Object.getOwnPropertyDescriptor(target, key);
       if (desc && !desc.writable && !desc.configurable) {
-        return Reflect.get(target, key, receiver);
+        return Reflect.get(target, key, proxy);
       }
       observeTargetKey(target, key, callback);
-      return possiblyReactive(Reflect.get(target, key, receiver), callback);
+      return possiblyReactive(Reflect.get(target, key, proxy), callback);
     },
-    set(target, key, value, receiver) {
-      const hadKey = objectHasOwnProperty.call(target, key);
-      const originalValue = Reflect.get(target, key, receiver);
-      const ret = Reflect.set(target, key, value, receiver);
-      if (!hadKey && objectHasOwnProperty.call(target, key)) {
+    set(target, key, value, proxy) {
+      const isNewKey = !objectHasOwnProperty.call(target, key);
+      const originalValue = Reflect.get(target, key, proxy);
+      const ret = Reflect.set(target, key, value, proxy);
+      if (isNewKey) {
         notifyReactives(target, KEYCHANGES);
       }
       // While Array length may trigger the set trap, it's not actually set by this
       // method but is updated behind the scenes, and the trap is not called with the
       // new value. We disable the "same-value-optimization" for it because of that.
-      if (
-        originalValue !== Reflect.get(target, key, receiver) ||
-        (key === "length" && Array.isArray(target))
-      ) {
+      if (originalValue !== value || (Array.isArray(target) && key === "length")) {
         notifyReactives(target, key);
       }
       return ret;
@@ -436,8 +444,10 @@ function collectionsProxyHandler<T extends Collection>(
   // property is read.
   const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
   return Object.assign(basicProxyHandler(callback), {
-    // FIXME: probably broken when part of prototype chain since we ignore the receiver
     get(target: any, key: PropertyKey) {
+      if (key === TARGET) {
+        return target;
+      }
       if (objectHasOwnProperty.call(specialHandlers, key)) {
         return (specialHandlers as any)[key];
       }

src/runtime/template_helpers.ts

@@ -32,21 +32,22 @@ function callSlot(
   if (__scope) {
     slotScope[__scope] = extra;
   }
-  const slotBDom = __render ? __render(slotScope, parent, key) : null;
+  const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
   if (defaultContent) {
     let child1: BDom | undefined = undefined;
     let child2: BDom | undefined = undefined;
     if (slotBDom) {
       child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
     } else {
-      child2 = defaultContent(ctx, parent, key);
+      child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
     }
     return multi([child1, child2]);
   }
   return slotBDom || text("");
 }
 
-function capture(ctx: any, component: any): any {
+function capture(ctx: any): any {
+  const component = ctx.__owl__.component;
   const result = ObjectCreate(component);
   for (let k in ctx) {
     result[k] = ctx[k];
@@ -110,18 +111,15 @@ class LazyValue {
   ctx: any;
   component: any;
   node: any;
-  key: any;
-
-  constructor(fn: any, ctx: any, component: any, node: any, key: any) {
+  constructor(fn: any, ctx: any, component: any, node: any) {
     this.fn = fn;
-    this.ctx = capture(ctx, component);
+    this.ctx = capture(ctx);
     this.component = component;
     this.node = node;
-    this.key = key;
   }
 
   evaluate(): any {
-    return this.fn.call(this.component, this.ctx, this.node, this.key);
+    return this.fn.call(this.component, this.ctx, this.node);
   }
 
   toString() {
@@ -170,7 +168,8 @@ let boundFunctions = new WeakMap();
 const WeakMapGet = WeakMap.prototype.get;
 const WeakMapSet = WeakMap.prototype.set;
 
-function bind(component: any, fn: Function): Function {
+function bind(ctx: any, fn: Function): Function {
+  let component = ctx.__owl__.component;
   let boundFnMap = WeakMapGet.call(boundFunctions, component);
   if (!boundFnMap) {
     boundFnMap = new WeakMap();
@@ -208,11 +207,11 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
  * visit recursively the props and all the children to check if they are valid.
  * This is why it is only done in 'dev' mode.
  */
-export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, comp?: any) {
+export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
   const ComponentClass =
     typeof name !== "string"
       ? name
-      : (comp.constructor.components[name] as ComponentConstructor<P> | undefined);
+      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
 
   if (!ComponentClass) {
     // this is an error, wrong component. We silently return here instead so the
@@ -222,7 +221,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
 
   const schema = ComponentClass.props;
   if (!schema) {
-    if (comp.__owl__.app.warnIfNoStaticProps) {
+    if (parent.__owl__.app.warnIfNoStaticProps) {
       console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
     }
     return;

src/runtime/template_set.ts

@@ -37,11 +37,17 @@ function parseXML(xml: string): Document {
   return doc;
 }
 
+const sharedTemplates: Map<
+  Function | undefined,
+  { [key: string]: { [name: string]: TemplateFunction } }
+> = new Map();
+
 export interface TemplateSetConfig {
   dev?: boolean;
   translatableAttributes?: string[];
   translateFn?: (s: string) => string;
   templates?: string | Document;
+  shareTemplates?: boolean;
 }
 
 export class TemplateSet {
@@ -51,12 +57,27 @@ export class TemplateSet {
   dev: boolean;
   rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
   templates: { [name: string]: Template } = {};
+  templateFunctions: { [name: string]: TemplateFunction } = {};
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
   Portal = Portal;
 
   constructor(config: TemplateSetConfig = {}) {
     this.dev = config.dev || false;
+    if (config.shareTemplates) {
+      let cache = sharedTemplates.get(this.translateFn);
+      if (!cache) {
+        cache = {};
+        sharedTemplates.set(this.translateFn, cache);
+      }
+      let key = `${this.dev ? "d" : "p"}${(this.translatableAttributes || []).toString()}`;
+      let templates = cache[key];
+      if (!templates) {
+        cache[key] = {};
+        templates = cache[key];
+      }
+      this.templateFunctions = templates;
+    }
     this.translateFn = config.translateFn;
     this.translatableAttributes = config.translatableAttributes;
     if (config.templates) {
@@ -96,17 +117,21 @@ export class TemplateSet {
 
   getTemplate(name: string): Template {
     if (!(name in this.templates)) {
-      const rawTemplate = this.rawTemplates[name];
-      if (rawTemplate === undefined) {
-        let extraInfo = "";
-        try {
-          const componentName = getCurrent().component.constructor.name;
-          extraInfo = ` (for component "${componentName}")`;
-        } catch {}
-        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+      let templateFn = this.templateFunctions[name];
+      if (!templateFn) {
+        const rawTemplate = this.rawTemplates[name];
+        if (rawTemplate === undefined) {
+          let extraInfo = "";
+          try {
+            const componentName = getCurrent().component.constructor.name;
+            extraInfo = ` (for component "${componentName}")`;
+          } catch {}
+          throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+        }
+        const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+        templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+        this.templateFunctions[name] = templateFn;
       }
-      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
-      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
       const templates = this.templates;

src/runtime/utils.ts

@@ -28,18 +28,12 @@ export function batched(callback: Callback): Callback {
 }
 
 export function validateTarget(target: HTMLElement) {
-  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-  const document = target && target.ownerDocument;
-  if (document) {
-    const HTMLElement = document.defaultView!.HTMLElement;
-    if (target instanceof HTMLElement) {
-      if (!document.body.contains(target)) {
-        throw new OwlError("Cannot mount a component on a detached dom node");
-      }
-      return;
-    }
+  if (!(target instanceof HTMLElement)) {
+    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
+  }
+  if (!document.body.contains(target)) {
+    throw new OwlError("Cannot mount a component on a detached dom node");
   }
-  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }
 
 export class EventBus extends EventTarget {

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

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

tests/app/app.test.ts

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

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

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

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

@@ -217,7 +217,7 @@ exports[`misc other complex template 1`] = `
   let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`search_input\`] = el;
     const ref2 = (el) => refs[\`settings_menu\`] = el;
     let b2,b4,b14,b17,b22,b23,b24,b25;
@@ -277,7 +277,7 @@ exports[`misc other complex template 1`] = `
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let attr8 = new String((ctx['search'].value) || \\"\\");
+    let attr8 = new String(ctx['search'].value);
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
     let hdlr6 = [ctx['clearSearch'], ctx];

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

@@ -334,57 +334,6 @@ exports[`t-call (template calling) inherit context 2`] = `
 }"
 `;
 
-exports[`t-call (template calling) nested t-calls with magic variable 0 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { isBoundary, zero } = helpers;
-  const callTemplate_1 = app.getTemplate(\`grandchild\`);
-  const callTemplate_2 = app.getTemplate(\`child\`);
-  
-  let block1 = createBlock(\`<p>Some content...</p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1;
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1;
-    const b1 = block1();
-    ctx[zero] = b1;
-    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
-    ctx = ctx.__proto__;
-    ctx[zero] = b2;
-    return callTemplate_2.call(this, ctx, node, key + \`__2\`);
-  }
-}"
-`;
-
-exports[`t-call (template calling) nested t-calls with magic variable 0 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { zero } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`grandchild\`);
-    const b3 = ctx[zero];
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`t-call (template calling) nested t-calls with magic variable 0 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { zero } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return ctx[zero];
-  }
-}"
-`;
-
 exports[`t-call (template calling) recursive template, part 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -126,7 +126,7 @@ exports[`t-esc t-esc is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['var'];
     return block1([txt1]);
   }

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

@@ -161,7 +161,7 @@ exports[`t-out t-out bdom 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
@@ -310,7 +310,7 @@ exports[`t-out t-out switch markup on bdom 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     let b3,b5;
-    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node);
     if (ctx['hasBdom']) {
       const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);

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

@@ -8,7 +8,7 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const v1 = ctx['id'];
     let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
     return block1([ref1]);
@@ -24,7 +24,7 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const v1 = ctx['id'];
     let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
     return block1([ref1]);
@@ -40,7 +40,7 @@ exports[`t-ref can get a ref on a node 1`] = `
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`myspan\`] = el;
     return block1([ref1]);
   }
@@ -70,7 +70,7 @@ exports[`t-ref ref in a t-call 2`] = `
   let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
     return block1([ref1]);
   }
@@ -86,7 +86,7 @@ exports[`t-ref ref in a t-if 1`] = `
   let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
     let b2;
     if (ctx['condition']) {
@@ -107,7 +107,7 @@ exports[`t-ref refs in a loop 1`] = `
   let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
@@ -134,7 +134,7 @@ exports[`t-ref two refs, one in a t-if 1`] = `
   let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`name\`] = el;
     const ref2 = (el) => refs[\`p\`] = el;
     let b2;

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

@@ -106,7 +106,7 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node);
     return text(ctx['value']);
   }
 }"
@@ -142,7 +142,7 @@ exports[`t-set set from body lookup 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['stuff'];
     return block1([txt1]);
   }
@@ -206,7 +206,7 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node);
     setContextValue(ctx, \\"v1\\", 'after');
     const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
@@ -471,7 +471,7 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node);
     let txt1 = ctx['setvar'];
     return block1([txt1]);
   }
@@ -497,7 +497,7 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", false);
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
     const b3 = safeOutput(ctx['v2']);
@@ -525,7 +525,7 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v3\\", 'Truthy');
     setContextValue(ctx, \\"v1\\", 'before');
-    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
     const b3 = safeOutput(ctx['v2']);
@@ -638,7 +638,7 @@ exports[`t-set value priority (with non text body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node, key));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node));
     let txt1 = ctx['value'];
     return block1([txt1]);
   }

tests/compiler/attributes.test.ts

@@ -329,35 +329,6 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div value=""></div>');
   });
 
-  test("updating property with falsy value", async () => {
-    // render input with initial value
-    const template = `<input t-att-value="v"></input>`;
-    const bnode1 = renderToBdom(template, { v: false });
-    const fixture = makeTestFixture();
-    mount(bnode1, fixture);
-
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: false }));
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: undefined }));
-    expect(input.value).toBe("");
-
-    patch(bnode1, renderToBdom(template, { v: "owl" }));
-    expect(input.value).toBe("owl");
-
-    patch(bnode1, renderToBdom(template, { v: null }));
-    expect(input.value).toBe("");
-  });
-
   test("changing a class with t-att-class", () => {
     // render input with initial value
     const template = `<div t-att-class="v"/>`;

tests/compiler/t_call.test.ts

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

tests/compiler/t_ref.test.ts

@@ -114,8 +114,7 @@ describe("t-ref", () => {
     app.addTemplate("main", main);
     app.addTemplate("sub", sub);
 
-    const comp = { __owl__: { refs } };
-    const bdom = app.getTemplate("main").call(comp, comp, {});
+    const bdom = app.getTemplate("main")({ __owl__: { refs } }, {});
     mount(bdom, document.createElement("div"));
 
     expect(refs.name.tagName).toBe("SPAN");

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

@@ -20,7 +20,7 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -38,21 +38,6 @@ exports[`basics display a nice error if it cannot find component 1`] = `
 }"
 `;
 
-exports[`basics display a nice error if the components key is missing with subcomponents 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`MissingChild\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`basics no component catching error lead to full app destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -268,7 +253,7 @@ exports[`can catch errors can catch an error in a component render function 1`]
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -323,7 +308,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -367,7 +352,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -447,7 +432,7 @@ exports[`can catch errors can catch an error in the initial call of a component
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -504,7 +489,7 @@ exports[`can catch errors can catch an error in the initial call of a component
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].flag) {
-      b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+      b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     }
     return block1([], [b3]);
   }
@@ -653,7 +638,7 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -708,7 +693,7 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].message;
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -763,7 +748,7 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -820,7 +805,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -941,8 +926,8 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
       ctx[\`cp\`] = v_block1[i1];
       const key1 = ctx['cp'].id;
       const v1 = ctx['cp'];
-      const ctx1 = capture(ctx, this);
-      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
+      const ctx1 = capture(ctx);
+      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -1019,8 +1004,8 @@ exports[`can catch errors catching in child makes parent render 1`] = `
       ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'][0];
       const v1 = ctx['elem'];
-      const ctx1 = capture(ctx, this);
-      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
+      const ctx1 = capture(ctx);
+      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -1083,7 +1068,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b2, b4]);
   }
 }"

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

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

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

@@ -9,7 +9,7 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
   let block2 = createBlock(\`<input block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`input1\`] = el;
     const ref2 = (el) => refs[\`input2\`] = el;
     let b2;
@@ -29,7 +29,7 @@ exports[`hooks autofocus hook simple input 1`] = `
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`input1\`] = el;
     const ref2 = (el) => refs[\`input2\`] = el;
     return block1([ref1, ref2]);
@@ -268,7 +268,7 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
     let b2;
     if (ctx['state'].value) {
@@ -357,7 +357,7 @@ exports[`hooks useRef hook: basic use 1`] = `
   let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`button\`] = el;
     let txt1 = ctx['value'];
     return block1([ref1, txt1]);

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

@@ -704,7 +704,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {prop: ctx['state'].prop};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"

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

@@ -163,7 +163,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node);
     const b3 = comp1({val: ctx['abc']}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
@@ -283,7 +283,7 @@ exports[`bound functions is referentially equal after update 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val,fn: bind(this, ctx['someFunction'])}, key + \`__1\`, node, this, null);
+    return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -307,7 +307,7 @@ exports[`can bind function prop with bind suffix 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null);
+    return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;

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

@@ -8,7 +8,7 @@ exports[`default props a default prop cannot be defined on a mandatory prop 1`]
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -24,7 +24,7 @@ exports[`default props can set default boolean values 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -61,7 +61,7 @@ exports[`default props can set default values 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -92,7 +92,7 @@ exports[`default props default values are also set whenever component is updated
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -121,7 +121,7 @@ exports[`props validation can specify that additional props are allowed (array)
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -148,7 +148,7 @@ exports[`props validation can specify that additional props are allowed (object)
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -177,7 +177,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -207,7 +207,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -237,7 +237,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -254,7 +254,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -284,7 +284,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -314,7 +314,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -331,7 +331,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -348,7 +348,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -378,7 +378,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -408,7 +408,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -438,7 +438,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -455,7 +455,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -485,7 +485,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -502,7 +502,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -519,7 +519,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -536,7 +536,7 @@ exports[`props validation can validate an optional props 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -566,7 +566,7 @@ exports[`props validation can validate an optional props 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -596,7 +596,7 @@ exports[`props validation can validate an optional props 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -613,7 +613,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -643,7 +643,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -673,47 +673,13 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
 `;
 
-exports[`props validation can validate through slots 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Wrapper\`, true, true, false, true);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
-    return comp1(props1, key + \`__1\`, node, this, null);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props2 = {slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})};
-    helpers.validateProps(\`Wrapper\`, props2, this);
-    return comp2(props2, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`props validation can validate through slots 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
 exports[`props validation default values are applied before validating props at update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -724,7 +690,7 @@ exports[`props validation default values are applied before validating props at
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -755,7 +721,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -772,7 +738,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -789,7 +755,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 1};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -820,7 +786,7 @@ exports[`props validation props are validated whenever component is updated 1`]
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -851,7 +817,7 @@ exports[`props validation props: list of strings 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -868,7 +834,7 @@ exports[`props validation validate simple types 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -885,7 +851,7 @@ exports[`props validation validate simple types 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -915,7 +881,7 @@ exports[`props validation validate simple types 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -932,7 +898,7 @@ exports[`props validation validate simple types 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -949,7 +915,7 @@ exports[`props validation validate simple types 6`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -979,7 +945,7 @@ exports[`props validation validate simple types 8`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -996,7 +962,7 @@ exports[`props validation validate simple types 9`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1013,7 +979,7 @@ exports[`props validation validate simple types 10`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1043,7 +1009,7 @@ exports[`props validation validate simple types 12`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1060,7 +1026,7 @@ exports[`props validation validate simple types 13`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1077,7 +1043,7 @@ exports[`props validation validate simple types 14`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1107,7 +1073,7 @@ exports[`props validation validate simple types 16`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1124,7 +1090,7 @@ exports[`props validation validate simple types 17`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1141,7 +1107,7 @@ exports[`props validation validate simple types 18`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1171,7 +1137,7 @@ exports[`props validation validate simple types 20`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1188,7 +1154,7 @@ exports[`props validation validate simple types 21`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1205,7 +1171,7 @@ exports[`props validation validate simple types 22`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1235,7 +1201,7 @@ exports[`props validation validate simple types 24`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1252,7 +1218,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1269,7 +1235,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1299,7 +1265,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1316,7 +1282,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1333,7 +1299,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1363,7 +1329,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1380,7 +1346,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1397,7 +1363,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1427,7 +1393,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1444,7 +1410,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1461,7 +1427,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1491,7 +1457,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1508,7 +1474,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1525,7 +1491,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1555,7 +1521,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1572,7 +1538,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1589,7 +1555,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1619,7 +1585,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1636,7 +1602,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, ctx);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }

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

@@ -8,7 +8,7 @@ exports[`refs basic use 1`] = `
   let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
     return block1([ref1]);
   }
@@ -25,7 +25,7 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
     let b2,b3;
     if (ctx['state'].value) {
@@ -47,7 +47,7 @@ exports[`refs refs and recursive templates 1`] = `
   let block1 = createBlock(\`<p block-ref=\\"0\\"><block-text-1/><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`root\`] = el;
     let b2;
     let txt1 = ctx['props'].tree.value;
@@ -70,7 +70,7 @@ exports[`refs refs are properly bound in slots 1`] = `
   let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`myButton\`] = el;
     let hdlr1 = [ctx['doSomething'], ctx];
     return block2([hdlr1, ref1]);
@@ -78,8 +78,8 @@ exports[`refs refs are properly bound in slots 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -110,7 +110,7 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
     const b2 = block2([ref1]);
     const b3 = block3([ref1]);

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

@@ -28,7 +28,7 @@ exports[`slots can define a default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -54,8 +54,8 @@ exports[`slots can define and call slots 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -89,8 +89,8 @@ exports[`slots can define and call slots with bound params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'abc': {__render: slot1, __ctx: ctx1, getValue: bind(ctx, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -129,8 +129,8 @@ exports[`slots can define and call slots with params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2, __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -165,7 +165,7 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
     const b2 = block2([ref1]);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -173,7 +173,7 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -226,7 +226,7 @@ exports[`slots can use component in default-content of t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
   }
 }"
 `;
@@ -266,7 +266,7 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
   }
 }"
 `;
@@ -296,7 +296,7 @@ exports[`slots content is the default slot (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -328,7 +328,7 @@ exports[`slots content is the default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -363,8 +363,8 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -383,7 +383,7 @@ exports[`slots default content is not rendered if named slot is provided 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -403,7 +403,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -422,7 +422,7 @@ exports[`slots default content is not rendered if slot is provided 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -442,8 +442,8 @@ exports[`slots default slot next to named slot, with default content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -466,8 +466,8 @@ exports[`slots default slot next to named slot, with default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
-    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2.bind(this));
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2);
     return block1([], [b3, b5]);
   }
 }"
@@ -485,7 +485,7 @@ exports[`slots default slot with params with - in it 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -520,7 +520,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -552,7 +552,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -583,7 +583,7 @@ exports[`slots default slot work with text nodes 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -604,64 +604,6 @@ exports[`slots default slot work with text nodes 2`] = `
 }"
 `;
 
-exports[`slots dynamic slot in multiple locations 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const b2 = text(\`hello \`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots dynamic slot in multiple locations 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block2 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
-    if (ctx['props'].location===1) {
-      const slot1 = ('coffee');
-      const b3 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
-      b2 = block2([], [b3]);
-    }
-    if (ctx['props'].location===2) {
-      const slot2 = ('coffee');
-      b4 = toggler(slot2, callSlot(ctx, node, key + \`__2\`, slot2, true, {}));
-    }
-    return multi([b2, b4]);
-  }
-}"
-`;
-
-exports[`slots dynamic slot in multiple locations 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`slots dynamic t-slot call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -685,8 +627,8 @@ exports[`slots dynamic t-slot call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -703,7 +645,7 @@ exports[`slots dynamic t-slot call 2`] = `
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['toggle'], ctx];
     const slot1 = (ctx['current'].slot);
-    const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
+    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {}));
     return block1([hdlr1], [b2]);
   }
 }"
@@ -732,8 +674,8 @@ exports[`slots dynamic t-slot call with default 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -753,7 +695,7 @@ exports[`slots dynamic t-slot call with default 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['toggle'], ctx];
-    const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, (ctx['current'].slot), true, {}, defaultContent1);
     return block1([hdlr1], [b3]);
   }
 }"
@@ -771,7 +713,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -784,7 +726,7 @@ exports[`slots fun: two calls to the same slot 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = callSlot(ctx, node, key, 'default', false, {});
-    const b3 = callSlot(ctx, node, key + \`__1\`, 'default', false, {});
+    const b3 = callSlot(ctx, node, key, 'default', false, {});
     return multi([b2, b3]);
   }
 }"
@@ -865,8 +807,8 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -952,7 +894,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -991,8 +933,8 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b5 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1031,8 +973,8 @@ exports[`slots multiple slots containing components 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp3({slots: markRaw({'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}})}, key + \`__3\`, node, this, null);
   }
 }"
 `;
@@ -1085,8 +1027,8 @@ exports[`slots named slot inside slot 1`] = `
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    const ctx2 = capture(ctx, this);
-    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    const ctx2 = capture(ctx);
+    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1095,8 +1037,8 @@ exports[`slots named slot inside slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1136,8 +1078,8 @@ exports[`slots named slot inside slot, part 3 1`] = `
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    const ctx2 = capture(ctx, this);
-    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    const ctx2 = capture(ctx);
+    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1146,8 +1088,8 @@ exports[`slots named slot inside slot, part 3 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1197,7 +1139,7 @@ exports[`slots named slots can define a default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -1221,8 +1163,8 @@ exports[`slots named slots inside slot, again 1`] = `
   }
   
   function slot2(ctx, node, key = \\"\\") {
-    const ctx2 = capture(ctx, this);
-    return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    const ctx2 = capture(ctx);
+    return comp1({slots: markRaw({'brol2': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1231,8 +1173,8 @@ exports[`slots named slots inside slot, again 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1255,8 +1197,8 @@ exports[`slots named slots inside slot, again 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1.bind(this));
-    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2.bind(this));
+    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
+    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
     const b6 = callSlot(ctx, node, key, 'default', false, {});
     return block1([], [b3, b5, b6]);
   }
@@ -1275,7 +1217,7 @@ exports[`slots nested slots in same template 1`] = `
   let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -1283,7 +1225,7 @@ exports[`slots nested slots in same template 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -1345,7 +1287,7 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1362,7 +1304,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1435,7 +1377,7 @@ exports[`slots simple default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1473,7 +1415,7 @@ exports[`slots simple default slot with params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1505,7 +1447,7 @@ exports[`slots simple default slot with params and bound function 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1517,7 +1459,7 @@ exports[`slots simple default slot with params and bound function 2`] = `
   let { callSlot, bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])});
+    return callSlot(ctx, node, key, 'default', false, {fn: bind(ctx, ctx['getValue'])});
   }
 }"
 `;
@@ -1534,7 +1476,7 @@ exports[`slots simple default slot, variation 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1569,8 +1511,8 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1585,7 +1527,7 @@ exports[`slots simple dynamic slot with slot scope 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const slot1 = ('slotName');
-    const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {bool: ctx['state'].bool}));
+    const b2 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {bool: ctx['state'].bool}));
     return block1([], [b2]);
   }
 }"
@@ -1599,7 +1541,7 @@ exports[`slots simple named and empty slot -- 2 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, true, false, true);
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
+    const ctx1 = capture(ctx);
     return comp1({slots: markRaw({'myEmptySlot': {myProp: 'myProp text'}})}, key + \`__1\`, node, this, null);
   }
 }"
@@ -1618,7 +1560,7 @@ exports[`slots simple named and empty slot -- 2 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -1636,8 +1578,8 @@ exports[`slots simple named and empty slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1676,8 +1618,8 @@ exports[`slots simple slot with slot scope 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1712,8 +1654,8 @@ exports[`slots slot and (inline) t-call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1762,8 +1704,8 @@ exports[`slots slot and t-call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1811,7 +1753,7 @@ exports[`slots slot and t-esc 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1849,7 +1791,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 txt1 = ctx['state'].val;
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([hdlr1, txt1], [b3]);
   }
 }"
@@ -1897,7 +1839,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1912,7 +1854,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({parent: 'SlotDisplay'}, key + \`__1\`, node, this, null);
     const slot1 = (ctx['slotName']);
-    const b3 = toggler(slot1, callSlot(ctx, node, key + \`__2\`, slot1, true, {}));
+    const b3 = toggler(slot1, callSlot(ctx, node, key, slot1, true, {}));
     return multi([b2, b3]);
   }
 }"
@@ -1945,7 +1887,7 @@ exports[`slots slot content has different key from other content -- static slot
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1997,8 +1939,8 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2033,7 +1975,7 @@ exports[`slots slot content is bound to caller 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2053,118 +1995,6 @@ exports[`slots slot content is bound to caller 2`] = `
 }"
 `;
 
-exports[`slots slot in multiple locations 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const b2 = text(\` hello \`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots slot in multiple locations 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  let block2 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2,b4;
-    if (ctx['props'].location===1) {
-      const b3 = callSlot(ctx, node, key, 'default', false, {});
-      b2 = block2([], [b3]);
-    }
-    if (ctx['props'].location===2) {
-      b4 = callSlot(ctx, node, key + \`__1\`, 'default', false, {});
-    }
-    return multi([b2, b4]);
-  }
-}"
-`;
-
-exports[`slots slot in multiple locations 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`slots slot in t-foreach locations 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Slotter\`, true, true, false, false);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const b2 = text(\` hello \`);
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots slot in t-foreach locations 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, callSlot, withKey } = helpers;
-  
-  let block2 = createBlock(\`<p><block-text-0/><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['props'].list);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`elem\`] = v_block1[i1];
-      ctx[\`elem_index\`] = i1;
-      const key1 = ctx['elem_index'];
-      let txt1 = ctx['elem'];
-      const b3 = callSlot(ctx, node, key1, 'default', false, {});
-      c_block1[i1] = withKey(block2([txt1], [b3]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`slots slot in t-foreach locations 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div>child</div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`slots slot preserves properly parented relationship 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -2180,7 +2010,7 @@ exports[`slots slot preserves properly parented relationship 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2224,8 +2054,8 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2285,8 +2115,8 @@ exports[`slots slot with slot scope and t-props 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2315,7 +2145,7 @@ exports[`slots slots and wrapper components 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2365,7 +2195,7 @@ exports[`slots slots are properly bound to correct component 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
   }
 }"
 `;
@@ -2387,8 +2217,8 @@ exports[`slots slots are rendered with proper context 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -2431,8 +2261,8 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`user\`] = v_block2[i1];
       const key1 = ctx['user'].id;
-      const ctx1 = capture(ctx, this);
-      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
+      const ctx1 = capture(ctx);
+      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b7]), key1);
     }
     const b2 = list(c_block2);
@@ -2480,8 +2310,8 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
       ctx[\`user\`] = v_block2[i1];
       const key1 = ctx['user'].id;
       setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name);
-      const ctx1 = capture(ctx, this);
-      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
+      const ctx1 = capture(ctx);
+      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b5]), key1);
     }
     const b2 = list(c_block2);
@@ -2523,8 +2353,8 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"userdescr\\", 'User '+ctx['state'].user.name);
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2565,8 +2395,8 @@ exports[`slots slots in slots, with vars 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"test\\", ctx['state'].name);
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2586,7 +2416,7 @@ exports[`slots slots in slots, with vars 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2627,8 +2457,8 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
       ctx[\`n\`] = v_block2[i1];
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
-      const ctx1 = capture(ctx, this);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      const ctx1 = capture(ctx);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -2682,8 +2512,8 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
       for (let i2 = 0; i2 < l_block6; i2++) {
         ctx[\`node2\`] = v_block6[i2];
         const key2 = ctx['node2'].key;
-        const ctx1 = capture(ctx, this);
-        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
+        const ctx1 = capture(ctx);
+        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
       }
       ctx = ctx.__proto__;
       const b6 = list(c_block6);
@@ -2734,8 +2564,8 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
       setContextValue(ctx, \\"dummy\\", ctx['n_index']);
-      const ctx1 = capture(ctx, this);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      const ctx1 = capture(ctx);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -2774,8 +2604,8 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2813,8 +2643,8 @@ exports[`slots t-set t-value in a slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2835,36 +2665,6 @@ exports[`slots t-set t-value in a slot 2`] = `
 }"
 `;
 
-exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return text(\`some other text\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots t-set-slot=default has priority over rest of the content 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
 exports[`slots t-slot in recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -2905,8 +2705,8 @@ exports[`slots t-slot in recursive templates 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2941,7 +2741,7 @@ exports[`slots t-slot nested within another slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2958,7 +2758,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -2966,7 +2766,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b4 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -3029,7 +2829,7 @@ exports[`slots t-slot scope context 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -3050,7 +2850,7 @@ exports[`slots t-slot scope context 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -3083,8 +2883,8 @@ exports[`slots t-slot within dynamic t-call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -3148,7 +2948,7 @@ exports[`slots template can just return a slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"

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

@@ -444,51 +444,6 @@ exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 }"
 `;
 
-exports[`t-call t-call with t-call-context and subcomponent, in dev mode 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let ctx1 = ctx['subctx'];
-    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
-  }
-}"
-`;
-
-exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props1 = {name: ctx['aab']};
-    helpers.validateProps(\`Child\`, props1, this);
-    const b2 = comp1(props1, key + \`__1\`, node, this, null);
-    const props2 = {name: ctx['lpe']};
-    helpers.validateProps(\`Child\`, props2, this);
-    const b3 = comp2(props2, key + \`__2\`, node, this, null);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`t-call t-call with t-call-context and subcomponent, in dev mode 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`child\`);
-    const b3 = text(ctx['props'].name);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
 exports[`t-call t-call with t-call-context, simple use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -514,65 +469,3 @@ exports[`t-call t-call with t-call-context, simple use 2`] = `
   }
 }"
 `;
-
-exports[`t-call t-call-context: ComponentNode is not looked up in the context 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 = {method:function(){}};
-    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
-  }
-}"
-`;
-
-exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { bind, capture, isBoundary, withDefault, setContextValue, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, false);
-  
-  let block2 = createBlock(\`<div block-ref=\\"0\\">outside slot</div>\`);
-  let block4 = createBlock(\`<div block-ref=\\"0\\">I'm the default slot</div>\`);
-  let block5 = createBlock(\`<div><block-text-0/></div>\`);
-  let block6 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref2 = (el) => refs[\`myRef2\`] = el;
-    ctx = Object.create(ctx);
-    ctx[isBoundary] = 1
-    const b4 = block4([ref2]);
-    setContextValue(ctx, \\"test\\", 3);
-    let txt1 = this.__owl__.name;
-    const b5 = block5([txt1]);
-    let txt2 = ctx['test'];
-    const b6 = block6([txt2]);
-    return multi([b4, b5, b6]);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = (el) => refs[\`myRef\`] = el;
-    const b2 = block2([ref1]);
-    const ctx1 = capture(ctx, this);
-    const b7 = comp1({prop: bind(this, ctx['method']),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-    return multi([b2, b7]);
-  }
-}"
-`;
-
-exports[`t-call t-call-context: ComponentNode is not looked up in the context 3`] = `
-"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, {});
-  }
-}"
-`;

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

@@ -53,10 +53,10 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
       const key1 = 'child';
-      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(String(key1));
+      if (keys1.has(key1)) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
+      keys1.add(key1);
       const props1 = {};
-      helpers.validateProps(\`Child\`, props1, this);
+      helpers.validateProps(\`Child\`, props1, ctx);
       c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
@@ -75,42 +75,6 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 }"
 `;
 
-exports[`list of components crash when using object as keys that serialize to the same string 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, OwlError, withKey } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([{},{}]);;
-    const keys1 = new Set();
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`item\`] = v_block1[i1];
-      const key1 = ctx['item'];
-      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(String(key1));
-      const props1 = {};
-      helpers.validateProps(\`Child\`, props1, this);
-      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
-exports[`list of components crash when using object as keys that serialize to the same string 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\`);
-  }
-}"
-`;
-
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -149,58 +113,6 @@ exports[`list of components list of sub components inside other nodes 2`] = `
 }"
 `;
 
-exports[`list of components order is correct when slots are not of same type 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
-  
-  let block2 = createBlock(\`<div>A</div>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    let b2;
-    if (!ctx['state'].active) {
-      b2 = block2();
-    }
-    return multi([b2]);
-  }
-  
-  function slot2(ctx, node, key = \\"\\") {
-    return text(\`B\`);
-  }
-  
-  function slot3(ctx, node, key = \\"\\") {
-    return text(\`C\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp1({slots: markRaw({'a': {__render: slot1.bind(this), __ctx: ctx1, active: !ctx['state'].active}, 'b': {__render: slot2.bind(this), __ctx: ctx1, active: true}, 'c': {__render: slot3.bind(this), __ctx: ctx1, active: ctx['state'].active}})}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`list of components order is correct when slots are not of same type 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, callSlot, withKey } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['slotNames']);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`slotName\`] = v_block1[i1];
-      const key1 = ctx['slotName'];
-      const slot1 = (ctx['slotName']);
-      c_block1[i1] = withKey(toggler(slot1, callSlot(ctx, node, key1 + \`__1__\${key1}\`, slot1, true, {})), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;
-
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -120,15 +120,15 @@ exports[`t-model directive can also define t-on directive on same event, part 1
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onInput'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
     let attr1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onInput'], ctx];
-    return block1([attr1, hdlr1, hdlr2]);
+    let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    return block1([hdlr1, attr1, hdlr2]);
   }
 }"
 `;
@@ -139,25 +139,25 @@ exports[`t-model directive can also define t-on directive on same event, part 2
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-attribute-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onClick'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
     let attr1 = bExpr1[expr1] === 'One';
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onClick'], ctx];
+    let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    let hdlr3 = [ctx['onClick'], ctx];
     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 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
+    let hdlr5 = [ctx['onClick'], ctx];
     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];
-    return block1([attr1, hdlr1, hdlr2, attr2, hdlr3, hdlr4, attr3, hdlr5, hdlr6]);
+    let hdlr6 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
+    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
   }
 }"
 `;
@@ -410,25 +410,6 @@ exports[`t-model directive on an textarea 1`] = `
 }"
 `;
 
-exports[`t-model directive t-model is applied before t-on-input 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { toNumber } = helpers;
-  
-  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const bExpr1 = ctx['state'];
-    const expr1 = 'text';
-    let attr1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onInput'], ctx];
-    return block1([attr1, hdlr1, hdlr2]);
-  }
-}"
-`;
-
 exports[`t-model directive t-model on an input with an undefined value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -360,7 +360,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -401,8 +401,8 @@ exports[`t-on t-on on t-set-slots 1`] = `
     const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
-    const ctx1 = capture(ctx, this);
-    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4, b8]);
   }
 }"
@@ -434,7 +434,7 @@ exports[`t-on t-on on t-slots 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -456,45 +456,3 @@ exports[`t-on t-on on t-slots 2`] = `
   }
 }"
 `;
-
-exports[`t-on t-on when first component child is an empty component 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { createCatcher } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  const catcher1 = createCatcher({\\"click\\":0});
-  
-  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];
-    const b2 = catcher1(comp1({list: ctx['list']}, key + \`__1\`, node, this, null), [hdlr2]);
-    return block1([hdlr1], [b2]);
-  }
-}"
-`;
-
-exports[`t-on t-on when first component child is an empty component 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  
-  let block2 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['props'].list);;
-    for (let i1 = 0; i1 < l_block1; i1++) {
-      ctx[\`c\`] = v_block1[i1];
-      ctx[\`c_index\`] = i1;
-      const key1 = ctx['c_index'];
-      let txt1 = ctx['c'];
-      c_block1[i1] = withKey(block2([txt1]), key1);
-    }
-    return list(c_block1);
-  }
-}"
-`;

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

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

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

@@ -21,8 +21,8 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    const ctx1 = capture(ctx, this);
-    const b2 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const ctx1 = capture(ctx);
+    const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -59,7 +59,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = text(\` in slot \`);
     const b4 = safeOutput(ctx['v']);
     return multi([b3, b4]);
@@ -70,8 +70,8 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -114,7 +114,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b5 = text(\` tea \`);
     const b6 = safeOutput(ctx['v']);
     return multi([b5, b6]);
@@ -127,8 +127,8 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -169,7 +169,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     return text(\` in slot \`);
   }
   
@@ -178,8 +178,8 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx, this);
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const ctx1 = capture(ctx);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -343,7 +343,7 @@ exports[`t-set t-set with a component in body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }
@@ -377,7 +377,7 @@ exports[`t-set t-set with something in body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node);
     const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }

tests/components/basics.test.ts

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

tests/components/error_handling.test.ts

@@ -1,4 +1,4 @@
-import { App, Component, mount, onWillDestroy } from "../../src";
+import { Component, mount, onWillDestroy } from "../../src";
 import {
   onError,
   onMounted,
@@ -18,7 +18,6 @@ import {
   nextMicroTick,
   snapshotEverything,
   useLogLifecycle,
-  nextAppError,
 } from "../helpers";
 import { OwlError } from "../../src/runtime/error_handling";
 
@@ -60,10 +59,9 @@ describe("basics", () => {
     parent.state.flag = true;
 
     parent.render();
-    await expect(nextAppError(parent.__owl__.app)).resolves.toThrow(
-      "An error occured in the owl lifecycle"
-    );
+    await nextTick();
     expect(fixture.innerHTML).toBe("");
+    expect(mockConsoleError).toBeCalledTimes(1);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -73,13 +71,12 @@ describe("basics", () => {
       static template = xml`<SomeMispelledComponent />`;
       static components = { SomeComponent };
     }
-    const app = new App(Parent);
     let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
-      'Cannot find the definition of component "SomeMispelledComponent"'
-    );
-    await mountProm;
+    try {
+      await mount(Parent, fixture);
+    } catch (e) {
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
@@ -93,13 +90,12 @@ describe("basics", () => {
       static template = xml`<SomeMispelledComponent />`;
       static components = { SomeComponent };
     }
-    const app = new App(Parent, { test: true });
     let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
-      'Cannot find the definition of component "SomeMispelledComponent"'
-    );
-    await mountProm;
+    try {
+      await mount(Parent, fixture, { test: true });
+    } catch (e) {
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
@@ -113,33 +109,16 @@ describe("basics", () => {
       static template = xml`<SomeComponent />`;
       static components = { SomeComponent: notAComponentConstructor };
     }
-    const app = new App(Parent as typeof Component);
     let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
-      '"SomeComponent" is not a Component. It must inherit from the Component class'
-    );
-    await mountProm;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(
-      '"SomeComponent" is not a Component. It must inherit from the Component class'
-    );
-  });
-
-  test("display a nice error if the components key is missing with subcomponents", async () => {
-    class Parent extends Component {
-      static template = xml`<div><MissingChild /></div>`;
+    try {
+      // @ts-expect-error
+      await mount(Parent, fixture);
+    } catch (e) {
+      error = e as Error;
     }
-    const app = new App(Parent as typeof Component);
-    let error: Error;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
-      'Cannot find the definition of component "MissingChild", missing static components key in parent'
-    );
-    await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
-      'Cannot find the definition of component "MissingChild", missing static components key in parent'
+      '"SomeComponent" is not a Component. It must inherit from the Component class'
     );
   });
 
@@ -177,15 +156,16 @@ describe("basics", () => {
 describe("errors and promises", () => {
   test("a rendering error will reject the mount promise", async () => {
     // we do not catch error in willPatch anymore
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
 
-    const app = new App(Root);
     let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
+    try {
+      await mount(App, fixture);
+    } catch (e) {
+      error = e as OwlError;
+    }
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
     const regexp =
@@ -196,7 +176,7 @@ describe("errors and promises", () => {
   });
 
   test("an error in mounted call will reject the mount promise", async () => {
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onMounted(() => {
@@ -205,11 +185,12 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root);
     let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
+    try {
+      await mount(App, fixture);
+    } catch (e) {
+      error = e as OwlError;
+    }
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
     expect(error!.cause.message).toBe("boom");
@@ -219,7 +200,7 @@ describe("errors and promises", () => {
   });
 
   test("an error in onMounted callback will have the component's setup in its stack trace", async () => {
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onMounted(() => {
@@ -228,13 +209,14 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-    await mountProm;
+    let error: Error;
+    try {
+      await mount(App, fixture, { test: true });
+    } catch (e) {
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
-    expect(error!.stack).toContain("Root.setup");
+    expect(error!.stack).toContain("App.setup");
     expect(error!.stack).toContain("error_handling.test.ts");
     expect(fixture.innerHTML).toBe("");
     expect(mockConsoleError).toBeCalledTimes(0);
@@ -242,7 +224,7 @@ describe("errors and promises", () => {
   });
 
   test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
-    class Root extends Component {
+    class App extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
         onWillRender(() => {
@@ -254,11 +236,12 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
-    await mountProm;
+    let error: Error;
+    try {
+      await mount(App, fixture, { test: true });
+    } catch (e) {
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -295,11 +278,12 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    await mountProm;
+    let error: any;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (e) {
+      error = e;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
       `The following error occurred in onWillStart: "boom in onWillStart"`
@@ -358,16 +342,17 @@ describe("errors and promises", () => {
     class Child extends Component {
       static template = xml`<div><t t-esc="this.will.crash"/></div>`;
     }
-    class Parent extends Component {
+    class App extends Component {
       static template = xml`<div><Child/></div>`;
       static components = { Child };
     }
 
-    const app = new App(Parent);
     let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
+    try {
+      await mount(App, fixture);
+    } catch (e) {
+      error = e as OwlError;
+    }
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
     const regexp =
@@ -409,11 +394,12 @@ describe("errors and promises", () => {
       static components = { Child };
     }
 
-    const app = new App(Parent);
     let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
+    try {
+      await mount(Parent, fixture);
+    } catch (e) {
+      error = e as OwlError;
+    }
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
     const regexp =
@@ -439,12 +425,13 @@ describe("errors and promises", () => {
       }
     }
 
-    const app = new App(Example, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-    await mountProm;
-    expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
+    try {
+      await mount(Example, fixture, { test: true });
+    } catch (e) {
+      expect((e as Error).message).toBe(
+        `The following error occurred in onMounted: "Error in mounted"`
+      );
+    }
     // 1 additional error is logged because the destruction of the app causes
     // the onWillUnmount hook to be called and to fail
     expect(mockConsoleError).toBeCalledTimes(1);
@@ -461,10 +448,9 @@ describe("errors and promises", () => {
 
     root.state = "boom";
     root.render();
-    await expect(nextAppError(root.__owl__.app)).resolves.toThrow(
-      "error occured in the owl lifecycle"
-    );
+    await nextTick();
     expect(fixture.innerHTML).toBe("");
+    expect(mockConsoleError).toBeCalledTimes(1);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 });
@@ -514,12 +500,13 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    await app.mount(fixture).catch((e: Error) => (error = e));
-    await crashProm;
-    expect(error!.message).toBe(
+    let e: Error;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as Error;
+    }
+    expect(e!.message).toBe(
       `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
     );
   });
@@ -536,13 +523,14 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-    await mountProm;
-    expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
-    expect(error!.cause).toBe(err);
+    let e: OwlError;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(`The following error occurred in onMounted: "test error"`);
+    expect(e!.cause).toBe(err);
   });
 
   test("Errors in owl lifecycle are wrapped in dev mode: async hook", async () => {
@@ -558,13 +546,14 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    await mountProm;
-    expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
-    expect(error!.cause).toBe(err);
+    let e: OwlError;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(`The following error occurred in onWillStart: "test error"`);
+    expect(e!.cause).toBe(err);
   });
 
   test("Errors in owl lifecycle are wrapped outside dev mode: sync hook", async () => {
@@ -579,15 +568,16 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root);
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
-    expect(error!.message).toBe(
+    let e: OwlError;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
     );
-    expect(error!.cause).toBe(err);
+    expect(e!.cause).toBe(err);
   });
 
   test("Errors in owl lifecycle are wrapped out of dev mode: async hook", async () => {
@@ -603,15 +593,16 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root);
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
-    expect(error!.message).toBe(
+    let e: OwlError;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
     );
-    expect(error!.cause).toBe(err);
+    expect(e!.cause).toBe(err);
   });
 
   test("Thrown values that are not errors are wrapped in dev mode", async () => {
@@ -625,15 +616,16 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root, { test: true });
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
-    await mountProm;
-    expect(error!.message).toBe(
+    let e: OwlError;
+    try {
+      await mount(Root, fixture, { test: true });
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
       `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
     );
-    expect(error!.cause).toBe("This is not an error");
+    expect(e!.cause).toBe("This is not an error");
   });
 
   test("Thrown values that are not errors are wrapped outside dev mode", async () => {
@@ -647,15 +639,16 @@ describe("can catch errors", () => {
         });
       }
     }
-    const app = new App(Root);
-    let error: OwlError;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
-    expect(error!.message).toBe(
+    let e: OwlError;
+    try {
+      await mount(Root, fixture);
+    } catch (error) {
+      e = error as OwlError;
+    }
+    expect(e!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
     );
-    expect(error!.cause).toBe("This is not an error");
+    expect(e!.cause).toBe("This is not an error");
   });
 
   test("can catch an error in the initial call of a component render function (parent mounted)", async () => {

tests/components/event_handling.test.ts

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

tests/components/hooks.test.ts

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

tests/components/props_validation.test.ts

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

tests/components/refs.test.ts

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

tests/components/slots.test.ts

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

tests/components/style_class.test.ts

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

tests/components/t_call.test.ts

@@ -287,74 +287,4 @@ describe("t-call", () => {
     });
     expect(fixture.innerHTML).toBe("childaaronchildlucas");
   });
-
-  test("t-call with t-call-context and subcomponent, in dev mode", async () => {
-    class Child extends Component {
-      static template = xml`child<t t-esc="props.name"/>`;
-      static props = ["name"];
-    }
-
-    class Root extends Component {
-      static template = xml`
-          <t t-call="someTemplate" t-call-context="subctx"/>`;
-
-      static components = { Child };
-
-      subctx = { aab: "aaron", lpe: "lucas" };
-    }
-
-    await mount(Root, fixture, {
-      test: true,
-      templates: `
-        <templates>
-          <t t-name="someTemplate">
-            <Child name="aab"/>
-            <Child name="lpe"/>
-          </t>
-        </templates>`,
-    });
-    expect(fixture.innerHTML).toBe("childaaronchildlucas");
-  });
-
-  test.only("t-call-context: ComponentNode is not looked up in the context", async () => {
-    let child: any;
-    class Child extends Component {
-      static template = xml`<t t-slot="default"/>`;
-      static props = ["name"];
-      setup() {
-        child = this;
-      }
-    }
-
-    class Root extends Component {
-      static template = xml`
-          <t t-call="someTemplate" t-call-context="{method: function(){}}"/>`;
-      static components = { Child };
-    }
-
-    // The following things need a reference to the ComponentNode, historically
-    // we used to do this with ctx.__owl__, but this cannot work inside t-call-context
-    // - t-ref: node.refs[refName] = something
-    // - t-set: caused a call to capture, which used to use node.component
-    // - .bind: used to bind to node.component
-    const root = await mount(Root, fixture, {
-      templates: `
-        <templates>
-          <t t-name="someTemplate">
-            <div t-ref="myRef">outside slot</div>
-            <Child prop.bind="method">
-              <div t-ref="myRef2">I'm the default slot</div>
-              <t t-set="test" t-value="3"/>
-              <div t-esc="this.__owl__.name"/>
-              <div t-esc="test"/>
-            </Child>
-          </t>
-        </templates>`,
-    });
-    expect(fixture.innerHTML).toBe(
-      "<div>outside slot</div><div>I'm the default slot</div><div>Root</div><div>3</div>"
-    );
-    expect(Object.keys(child.__owl__.refs)).toEqual([]);
-    expect(Object.keys(root.__owl__.refs)).toEqual(["myRef", "myRef2"]);
-  });
 });

tests/components/t_foreach.test.ts

@@ -1,11 +1,5 @@
-import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
-import {
-  makeTestFixture,
-  nextAppError,
-  nextTick,
-  snapshotEverything,
-  useLogLifecycle,
-} from "../helpers";
+import { Component, mount, onMounted, useState, xml } from "../../src/index";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 snapshotEverything();
 
@@ -321,73 +315,10 @@ describe("list of components", () => {
       `;
       static components = { Child };
     }
-
-    const app = new App(Parent, { test: true });
-    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
-      "Got duplicate key in t-foreach: child"
-    );
-    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-foreach: child");
-    await mountProm;
+    await expect(async () => {
+      await mount(Parent, fixture, { dev: true });
+    }).rejects.toThrowError("Got duplicate key in t-foreach: child");
     console.info = consoleInfo;
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
-
-  test("crash when using object as keys that serialize to the same string", async () => {
-    const consoleInfo = console.info;
-    console.info = jest.fn();
-    class Child extends Component {
-      static template = xml``;
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <t t-foreach="[{}, {}]" t-as="item" t-key="item">
-          <Child/>
-        </t>
-      `;
-      static components = { Child };
-    }
-
-    const app = new App(Parent, { test: true });
-    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
-      "Got duplicate key in t-foreach: [object Object]"
-    );
-    await expect(nextAppError(app)).resolves.toThrow(
-      "Got duplicate key in t-foreach: [object Object]"
-    );
-    await mountProm;
-    console.info = consoleInfo;
-    expect(mockConsoleWarn).toBeCalledTimes(1);
-  });
-
-  test("order is correct when slots are not of same type", async () => {
-    class Child extends Component {
-      static template = xml`
-          <t t-slot="{{ slotName }}" t-foreach="slotNames" t-as="slotName" t-key="slotName"/>
-      `;
-      get slotNames() {
-        return Object.entries(this.props.slots)
-          .filter((entry: any) => entry[1].active)
-          .map((entry) => entry[0]);
-      }
-    }
-
-    class Parent extends Component {
-      static template = xml`
-        <Child>
-          <t t-set-slot="a" active="!state.active"><div t-if="!state.active">A</div></t>
-          <t t-set-slot="b" active="true">B</t>
-          <t t-set-slot="c" active="state.active">C</t>
-        </Child>
-      `;
-      static components = { Child };
-      state = useState({ active: false });
-    }
-
-    const parent = await mount(Parent, fixture);
-    expect(fixture.textContent).toBe("AB");
-    parent.state.active = true;
-    await nextTick();
-    expect(fixture.textContent).toBe("BC");
-  });
 });

tests/components/t_model.test.ts

@@ -625,23 +625,4 @@ describe("t-model directive", () => {
     await mount(Test, fixture);
     expect(fixture.querySelector("select")!.value).toEqual("b");
   });
-
-  test("t-model is applied before t-on-input", async () => {
-    expect.assertions(3);
-    class SomeComponent extends Component {
-      static template = xml`
-        <div>
-          <input t-model="state['text']" t-on-input="onInput"/>
-        </div>
-      `;
-      state = useState({ text: "", other: "" });
-      onInput(ev: InputEvent) {
-        expect(this.state.text).toBe("Beam me up, Scotty");
-        expect((ev.target as HTMLInputElement).value).toBe("Beam me up, Scotty");
-      }
-    }
-    await mount(SomeComponent, fixture);
-    const input = fixture.querySelector("input")!;
-    await editInput(input, "Beam me up, Scotty");
-  });
 });

tests/components/t_on.test.ts

@@ -41,30 +41,6 @@ describe("t-on", () => {
     expect(steps).toEqual(["click"]);
   });
 
-  test("t-on when first component child is an empty component", async () => {
-    class Child extends Component {
-      static template = xml`
-        <span t-foreach="props.list" t-as="c" t-key="c_index" t-esc="c"/>
-      `;
-    }
-    class Parent extends Component {
-      static template = xml`
-        <div t-on-click="push"><Child list="list" t-on-click="() => {}"/></div>
-      `;
-      static components = { Child };
-      list = useState([] as string[]);
-      push() {
-        this.list.push("foo");
-      }
-    }
-    const parent = await mount(Parent, fixture);
-    const el = elem(parent);
-    expect(el.innerHTML).toBe("");
-    el.click();
-    await nextTick();
-    expect(el.innerHTML).toBe("<span>foo</span>");
-  });
-
   test("t-on expression in t-foreach", async () => {
     class Comp extends Component {
       static template = xml`

tests/components/t_out.test.ts

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

tests/helpers.ts

@@ -96,7 +96,7 @@ export function renderToBdom(template: string, context: any = {}, node?: any): B
     createComponent() {},
     createDynamicComponent() {},
   };
-  return fn(app as any, blockDom, helpers).call(context, context, node);
+  return fn(app as any, blockDom, helpers)(context, node);
 }
 
 export function renderToString(template: string, context: any = {}, node?: any): string {
@@ -261,20 +261,6 @@ expect.extend({
   },
 });
 
-export function nextAppError(app: any) {
-  const { handleError } = app;
-  return new Promise((resolve) => {
-    app.handleError = (...args: Parameters<typeof handleError>) => {
-      try {
-        handleError.call(app, ...args);
-      } catch (e: any) {
-        app.handleError = handleError;
-        resolve(e);
-      }
-    };
-  });
-}
-
 declare global {
   namespace jest {
     interface Matchers<R> {

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

@@ -20,8 +20,8 @@ exports[`Portal Add and remove portals 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`portalId\`] = v_block1[i1];
       const key1 = ctx['portalId'];
-      const ctx1 = capture(ctx, this);
-      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      const ctx1 = capture(ctx);
+      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     return list(c_block1);
   }
@@ -49,8 +49,8 @@ exports[`Portal Add and remove portals on div 1`] = `
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`portalId\`] = v_block1[i1];
       const key1 = ctx['portalId'];
-      const ctx1 = capture(ctx, this);
-      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      const ctx1 = capture(ctx);
+      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     return list(c_block1);
   }
@@ -80,8 +80,8 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
       ctx[\`portalId\`] = v_block1[i1];
       const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
-      const ctx1 = capture(ctx, this);
-      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const ctx1 = capture(ctx);
+      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
       c_block1[i1] = withKey(block2([txt1], [b6]), key1);
     }
     return list(c_block1);
@@ -112,8 +112,8 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
       ctx[\`portalId\`] = v_block1[i1];
       const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
-      const ctx1 = capture(ctx, this);
-      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const ctx1 = capture(ctx);
+      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
       c_block1[i1] = withKey(block2([txt1], [b6]), key1);
     }
     return list(c_block1);
@@ -145,8 +145,8 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
       ctx[\`portalId\`] = v_block2[i1];
       const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
-      const ctx1 = capture(ctx, this);
-      const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const ctx1 = capture(ctx);
+      const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
       c_block2[i1] = withKey(block3([txt1], [b7]), key1);
     }
     const b2 = list(c_block2);
@@ -155,44 +155,6 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
 }"
 `;
 
-exports[`Portal Child and Portal 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block3 = createBlock(\`<div class=\\"portal\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = block3();
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`Portal Child and Portal 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false, false);
-  
-  let block2 = createBlock(\`<span>child</span>\`);
-  let block3 = createBlock(\`<span>portal</span>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return block3();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = block2();
-    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
-    return multi([b2, b4]);
-  }
-}"
-`;
-
 exports[`Portal Portal composed with t-slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -208,7 +170,7 @@ exports[`Portal Portal composed with t-slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -227,7 +189,7 @@ exports[`Portal Portal composed with t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    return comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
   }
 }"
 `;
@@ -261,7 +223,7 @@ exports[`Portal basic use of portal 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -282,7 +244,7 @@ exports[`Portal basic use of portal in dev mode 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -303,7 +265,7 @@ exports[`Portal basic use of portal on div 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -324,7 +286,7 @@ exports[`Portal basic use of portal, variation 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -348,7 +310,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+      b4 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     }
     return multi([b2, b4]);
   }
@@ -387,7 +349,7 @@ exports[`Portal conditional use of Portal 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+      b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     }
     return multi([b2, b4]);
   }
@@ -431,8 +393,8 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`elem\`] = v_block2[i1];
       const key1 = ctx['elem'];
-      const ctx1 = capture(ctx, this);
-      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      const ctx1 = capture(ctx);
+      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -481,8 +443,8 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
     for (let i1 = 0; i1 < l_block3; i1++) {
       ctx[\`elem\`] = v_block3[i1];
       const key1 = ctx['elem'];
-      const ctx1 = capture(ctx, this);
-      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      const ctx1 = capture(ctx);
+      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     const b3 = list(c_block3);
     return multi([b2, b3]);
@@ -507,7 +469,7 @@ exports[`Portal conditional use of Portal with div 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasPortal) {
-      const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+      const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
       b2 = block2([], [b4]);
     }
     return multi([b2]);
@@ -532,7 +494,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].hasChild) {
-      b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+      b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     }
     return block1([], [b3]);
   }
@@ -553,44 +515,6 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 2`]
 }"
 `;
 
-exports[`Portal portal and Child 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block2 = createBlock(\`<div class=\\"portal\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = block2();
-    const b3 = comp1({}, key + \`__1\`, node, this, null);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`Portal portal and Child 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const Portal = app.Portal;
-  const comp1 = app.createComponent(null, false, true, false, false);
-  
-  let block2 = createBlock(\`<span>child</span>\`);
-  let block3 = createBlock(\`<span>portal</span>\`);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return block3();
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = block2();
-    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
-    return multi([b2, b4]);
-  }
-}"
-`;
-
 exports[`Portal portal could have dynamically no content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -611,7 +535,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b4]);
   }
 }"
@@ -632,7 +556,7 @@ exports[`Portal portal destroys on crash 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -667,7 +591,7 @@ exports[`Portal portal with child and props 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -710,7 +634,7 @@ exports[`Portal portal with dynamic body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b5]);
   }
 }"
@@ -734,7 +658,7 @@ exports[`Portal portal with many children 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b5]);
   }
 }"
@@ -758,7 +682,7 @@ exports[`Portal portal with no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b4]);
   }
 }"
@@ -778,7 +702,7 @@ exports[`Portal portal with only text as content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -799,7 +723,7 @@ exports[`Portal portal with target not in dom 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -820,7 +744,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -875,7 +799,7 @@ exports[`Portal simple catchError with portal 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -896,7 +820,7 @@ exports[`Portal with target in template (after portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -917,7 +841,7 @@ exports[`Portal with target in template (before portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -938,7 +862,7 @@ exports[`Portal: Props validation target must be a valid selector 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: ' ',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: ' ',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -959,7 +883,7 @@ exports[`Portal: Props validation target must be a valid selector 2 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -980,7 +904,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"

tests/misc/portal.test.ts

@@ -12,7 +12,7 @@ import {
 } from "../../src";
 import { xml } from "../../src/";
 import { DEV_MSG } from "../../src/runtime/app";
-import { elem, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
 
 let fixture: HTMLElement;
 let originalconsoleWarn = console.warn;
@@ -269,14 +269,15 @@ describe("Portal", () => {
     }
 
     let error: Error;
-    const app = new App(Parent);
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
-    await mountProm;
+    try {
+      await mount(Parent, fixture);
+    } catch (e) {
+      error = e as Error;
+    }
 
     expect(error!).toBeDefined();
     expect(error!.message).toBe("invalid portal target");
-    expect(fixture.innerHTML).toBe(``);
+    expect(fixture.innerHTML).toBe(`<div></div>`);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -874,48 +875,6 @@ describe("Portal", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe('<div id="outside"></div><div></div>');
   });
-
-  test("Child and Portal", async () => {
-    class Child extends Component {
-      static template = xml`
-        <span>child</span>
-        <t t-portal="'.portal'"><span>portal</span></t>`;
-    }
-    class Parent extends Component {
-      static template = xml`
-        <t>
-          <Child/>
-          <div class="portal"></div>
-        </t>`;
-
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      '<span>child</span><div class="portal"><span>portal</span></div>'
-    );
-  });
-
-  test("portal and Child", async () => {
-    class Child extends Component {
-      static template = xml`
-        <span>child</span>
-        <t t-portal="'.portal'"><span>portal</span></t>`;
-    }
-    class Parent extends Component {
-      static template = xml`
-        <t>
-          <div class="portal"></div>
-          <Child/>
-        </t>`;
-
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      '<div class="portal"><span>portal</span></div><span>child</span>'
-    );
-  });
 });
 
 describe("Portal: UI/UX", () => {
@@ -1001,10 +960,11 @@ describe("Portal: Props validation", () => {
         </div>`;
     }
     let error: OwlError;
-    const app = new App(Parent);
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-    await mountProm;
+    try {
+      await mount(Parent, fixture, { dev: true });
+    } catch (e) {
+      error = e as OwlError;
+    }
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
     expect(error!.cause.message).toBe(`' ' is not a valid selector`);
@@ -1020,10 +980,11 @@ describe("Portal: Props validation", () => {
         </div>`;
     }
     let error: Error;
-    const app = new App(Parent);
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
-    await mountProm;
+    try {
+      await mount(Parent, fixture, { dev: true });
+    } catch (e) {
+      error = e as Error;
+    }
     expect(error!).toBeDefined();
     expect(error!.message).toBe(`invalid portal target`);
   });

tests/reactivity.test.ts

@@ -9,7 +9,7 @@ import {
   markRaw,
   toRaw,
 } from "../src";
-import { reactive } from "../src/runtime/reactivity";
+import { reactive, Reactive } from "../src/runtime/reactivity";
 import { batched } from "../src/runtime/utils";
 import {
   makeDeferred,
@@ -1142,46 +1142,6 @@ describe("Reactivity", () => {
     expect(() => state.a).not.toThrow();
     expect(state.a).toBe(obj.a);
   });
-
-  test("writing on object with reactive in prototype chain doesn't notify", async () => {
-    let n = 0;
-    const state = createReactive({ val: 0 }, () => n++);
-    const nonReactive = Object.create(state);
-    nonReactive.val++;
-    expect(n).toBe(0);
-    expect(toRaw(state)).toEqual({ val: 0 });
-    expect(toRaw(nonReactive)).toEqual({ val: 1 });
-    state.val++;
-    expect(n).toBe(1);
-    expect(toRaw(state)).toEqual({ val: 1 });
-    expect(toRaw(nonReactive)).toEqual({ val: 1 });
-  });
-
-  test("creating key on object with reactive in prototype chain doesn't notify", async () => {
-    let n = 0;
-    const parent = createReactive({}, () => n++);
-    const child = Object.create(parent);
-    Object.keys(parent); // Subscribe to key changes
-    child.val = 0;
-    expect(n).toBe(0);
-  });
-
-  test("reactive of object with reactive in prototype chain is not the object from the prototype chain", async () => {
-    const cb = () => {};
-    const parent = createReactive({ val: 0 }, cb);
-    const child = createReactive(Object.create(parent), cb);
-    expect(child).not.toBe(parent);
-  });
-
-  test("can create reactive of object with non-reactive in prototype chain", async () => {
-    let n = 0;
-    const parent = markRaw({ val: 0 });
-    const child = createReactive(Object.create(parent), () => n++);
-    child.val++;
-    expect(n).toBe(1);
-    expect(parent).toEqual({ val: 0 });
-    expect(child).toEqual({ val: 1 });
-  });
 });
 
 describe("Collections", () => {
@@ -1739,12 +1699,12 @@ describe("toRaw", () => {
     const obj = { value: 1 };
     const reactiveObj = reactive(obj);
     expect(reactiveObj).not.toBe(obj);
-    expect(toRaw(reactiveObj)).toBe(obj);
+    expect(toRaw(reactiveObj as Reactive<typeof obj>)).toBe(obj);
   });
 
   test("giving a non reactive to toRaw return the object itself", () => {
     const obj = { value: 1 };
-    expect(toRaw(obj)).toBe(obj);
+    expect(toRaw(obj as Reactive<typeof obj>)).toBe(obj);
   });
 });
 

tools/release.js

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