[REL] v2.0.6

# v2.0.6 - [IMP] devtools: provide access to Fiber and RootFiber - Bump shelljs and git-rev-sync - [FIX] props validation: do not subscribe to props keys - [FIX] reactivity: only show key in subscription if observed by callback - [FIX] components: stop rendering stale t-component when delayed
[IMP] devtools: provide access to Fiber and RootFiber
2025-10-06 19:59:41 +07:00 · 2023-02-17 14:31:18 +01:00 · 2023-02-17 14:20:03 +01:00 · 2023-02-17 11:42:38 +01:00 · 2023-02-09 13:34:07 +01:00 · 2023-02-09 10:13:41 +01:00
89 changed files with 8957 additions and 997 deletions
@@ -0,0 +1,47 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "es2022": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "root": true,
+    "rules": {
+        "no-restricted-globals": ["error", "event", "self"],
+        "no-const-assign": ["error"],
+        "no-debugger": ["error"],
+        "no-dupe-class-members": ["error"],
+        "no-dupe-keys": ["error"],
+        "no-dupe-args": ["error"],
+        "no-dupe-else-if": ["error"],
+        "no-unsafe-negation": ["error"],
+        "no-duplicate-imports": ["error"],
+        "valid-typeof": ["error"],
+        "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": false, "caughtErrors": "all" }],
+        "no-restricted-syntax": [
+            "error",
+            {
+                "selector": "MemberExpression[object.name='test'][property.name='only']",
+                "message": "test.only(...) is forbidden",
+            },
+            {
+                "selector": "MemberExpression[object.name='describe'][property.name='only']",
+                "message": "describe.only(...) is forbidden",
+            }
+        ],
+    },
+    "globals": {
+        "describe": true,
+        "expect": true,
+        "test": true,
+        "beforeEach": true,
+        "beforeAll": true,
+        "afterEach": true,
+        "afterAll": true,
+        "jest": true,
+    },
+}
@@ -22,7 +22,8 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: npm install
+    - run: npm ci
    - run: npm run test
    - run: npm run check-formatting
+    - run: npm run lint
    - run: npm run build
@@ -14,9 +14,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

-package-lock.json
-yarn.lock
-
 #ide's
 .vscode
 .idea
@@ -124,5 +124,5 @@ npm install @odoo/owl

 If you want to use a simple `<script>` tag, the last release can be downloaded here:

- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
+- [owl](https://github.com/odoo/owl/releases/latest)

@@ -174,9 +174,9 @@ class Root extends Component {
 ```

 The template contains a [`t-foreach`](../reference/templates.md#loops) loop to iterate
-through the tasks. It can find the `tasks` list from the component, since the
-component is the rendering context. Note that we use the `id` of each task as a
-`t-key`, which is very common. There are two css classes: `task-list` and `task`,
+through the tasks. It can find the `tasks` list from the component, since the rendering
+context contains the properties of the component. Note that we use the `id` of each task
+as a `t-key`, which is very common. There are two css classes: `task-list` and `task`,
 that we will use in the next section.

 Finally, notice the use of the `t-att-checked` attribute:
@@ -502,6 +502,10 @@ 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
@@ -770,10 +774,11 @@ For reference, here is the final code:
    <meta charset="UTF-8" />
    <title>OWL Todo App</title>
    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
    <script src="owl.js"></script>
    <script src="app.js"></script>
-  </head>
-  <body></body>
+  </body>
 </html>
 ```

@@ -234,7 +234,8 @@ are defined by a function instead of just the dependencies.

 The `useEffect` hook takes two function: the effect function and the dependency
 function. The effect function perform some task and return (optionally) a cleanup
-function. The dependency function returns a list of dependencies. If any of these
+function. The dependency function returns a list of dependencies, these dependencies
+are passed as parameters in the effect function . If any of these
 dependencies changes, then the current effect will be cleaned up and reexecuted.

 Here is an example without any dependencies:
@@ -2,130 +2,394 @@

 ## Content

- [Overview](#overview)
+- [Introduction](#introduction)
 - [`useState`](#usestate)
 - [`reactive`](#reactive)
- [`markRaw`](#markraw)
- [`toRaw`](#toraw)
+- [`Escape hatches`](#escape-hatches)
+- [`Advanced usage`](#advanced-usage)

-## Overview
+## Introduction

 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 automatically
-update accordingly to state changes. Also, we obviously want this to happen in
-a performant way.
+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.

-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.
+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 returns a proxy of the object. This proxy tracks what properties are read
+through the proxy, and calls 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.

 ## `useState`

-Let us start by an example of how `useState` could be used:
+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:

 ```js
 class Counter extends Component {
  static template = xml`
-    <div t-on-click="increment">
+    <div t-on-click="() => this.state.value++">
      <t t-esc="state.value"/>
    </div>`;

  setup() {
    this.state = useState({ value: 0 });
  }
+}
+```

-  increment() {
-    this.state.value++;
+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 });
  }
 }
 ```

-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.
+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.

 ## `reactive`

 The `reactive` function is the basic reactivity primitive. It takes an object
 or an array as first argument, and optionally, a function as the second argument.
-The function will be called whenever any tracked value is updated.
+The function is 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 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
+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
 ```

 An important property of reactive objects is that they can be reobserved: this
-will create an independant proxy that tracks another set of keys:
+will create an independent 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); // 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'
+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
 ```

-Obviously, one can use `reactive` on the result of a `useState` if wanted, this
-is the proper way to watch for some state changes.
+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.

-## `markRaw`
+### Subscriptions are ephemereal

-Marks an object so that it is ignored by the reactivity system. This function returns its argument.
+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:

 ```js
-const someObject = markRaw(...);
+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 notifies 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 state = useState({
  a: 1,
-  obj: someObject
+  obj: someObject,
 });
-// here, state.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
 ```

-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.
+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 go and read one thousand keys from a reactive object, which causes
+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 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
+]);
+```

 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!
-
-## `toRaw`
-
-Given a reactive object, this function returns the underlying, non-reactive,
-corresponding object.
+system, and as such, using it may cause subtle and unintended issues! For example:

 ```js
-// in setup
-const state = useState({ value: 1 });
+// This will cause a rerender
+this.items.push(markRaw({ label: "another label", value: 1337 }));

-// later:
-const rawState = toRaw(this.state);
-rawState.value = 3; // will NOT be picked up by the reactivity system!!!
+// 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
 ```

-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!
+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.

-Also, normal (non-reactive objects) will be directly returned by `toRaw`:
+### `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:

 ```js
-const obj = { a: 1 };
-console.log(toRaw(obj) === obj); // true
+const obj = {};
+const reactiveObj = reactive(obj);
+console.log(obj === reactiveObj); // false
+console.log(obj === toRaw(reactiveObj)); // 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 is 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 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.
@@ -115,7 +115,7 @@ It is useful to explain the various rules that apply on these expressions:
   <div><p t-if="console.log(1)">NOT valid</p></div>
   ```

-2. it can use anything in the rendering context (typically, the component):
+2. it can use anything in the rendering context (which typically contains the properties of the component):

   ```xml
   <p t-if="user.birthday === today()">Happy bithday!</p>
@@ -541,9 +541,8 @@ This can be used to define variables scoped to a sub template:
 ```

 Note: by default, the rendering context for a sub template is simply the current
-rendering context (so, the current component). However, it may be useful to be
-able to specify a specific object as context. This can be done by using the
-`t-call-context` directive:
+rendering context. However, it may be useful to be able to specify a specific
+object as context. This can be done by using the `t-call-context` directive:

 ```xml
 <t t-call="other-template" t-call-context="obj"/>
@@ -1,6 +1,6 @@
 {
  "name": "@odoo/owl",
-  "version": "2.0.0-beta-15",
+  "version": "2.0.6",
  "description": "Odoo Web Library (OWL)",
  "main": "dist/owl.cjs.js",
  "module": "dist/owl.es.js",
@@ -25,6 +25,7 @@
    "playground:watch": "npm-run-all  --parallel playground:serve \"build:* -- --watch\"",
    "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
    "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --check",
+    "lint": "eslint src/**/*.ts tests/**/*.ts",
    "publish": "npm run build && npm publish",
    "release": "node tools/release.js",
    "compile_templates": "node tools/compile_xml.js"
@@ -42,26 +43,25 @@
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/node": "^14.11.8",
+    "@typescript-eslint/eslint-plugin": "5.48.1",
+    "@typescript-eslint/parser": "5.48.1",
    "chalk": "^3.0.0",
-    "cpx": "^1.5.0",
    "current-git-branch": "^1.1.0",
-    "git-rev-sync": "^1.12.0",
+    "eslint": "8.31.0",
+    "git-rev-sync": "^3.0.2",
    "github-api": "^3.3.0",
    "jest": "^27.1.0",
    "jest-diff": "^27.3.1",
    "jest-environment-jsdom": "^27.1.0",
-    "live-server": "^1.2.1",
    "npm-run-all": "^4.1.5",
    "prettier": "2.4.1",
    "rollup": "^2.56.3",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.1",
-    "sass": "^1.16.1",
    "source-map-support": "^0.5.10",
    "ts-jest": "^27.0.5",
-    "typescript": "4.5.2",
-    "uglify-es": "^3.3.9"
+    "typescript": "4.5.2"
  },
  "jest": {
    "testEnvironment": "jsdom",
@@ -1,28 +1,9 @@
 # 🦉 OWL Roadmap 🦉

- Current version: 1.4.10
+- Current version: 2.X
 - Status: stable

-This roadmap is only an attempt at predicting Owl's future.  Everything may
-change!
-
-
-### 1.x
-
- add chrome and firefox devtools,
- fix every bugs,
- improve documentation,
- small backward compatible improvements.
-
-### 2.x (2020? 2021? 2022?)
-
- stop support for `t-set` directive to define the content of a slot
-
-Maybe:
-
- reimplement vdom to use *block* system, like Vue 3, which should make Owl
-  much faster
- refactor `QWeb` to use an intermediate representation (some kind of AST) to
-  allow additional optimisations.
-
+Owl is currently stable. No (large) improvements is expected in the near future.

+Note that we intend to keep maintaining owl, and as such, improvements and/or
+breaking changes may require a version bump in the future.
@@ -191,7 +191,7 @@ class CodeTarget {
    let result: string[] = [];
    result.push(`function ${this.name}(ctx, node, key = "") {`);
    if (this.hasRef) {
-      result.push(`  const refs = ctx.__owl__.refs;`);
+      result.push(`  const refs = this.__owl__.refs;`);
      for (let name in this.refInfo) {
        const [id, expr] = this.refInfo[name];
        result.push(`  const ${id} = ${expr};`);
@@ -214,6 +214,14 @@ class CodeTarget {
    result.push(`}`);
    return result.join("\n  ");
  }
+
+  currentKey(ctx: Context) {
+    let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+    if (ctx.tKeyExpr) {
+      key = `${ctx.tKeyExpr} + ${key}`;
+    }
+    return key;
+  }
 }

 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
@@ -232,6 +240,7 @@ export class CodeGenerator {
  translatableAttributes: string[] = TRANSLATABLE_ATTRS;
  ast: AST;
  staticDefs: { id: string; expr: string }[] = [];
+  slotNames: Set<String> = new Set();
  helpers: Set<string> = new Set();

  constructor(ast: AST, options: CodeGenOptions) {
@@ -285,7 +294,7 @@ export class CodeGenerator {
      for (let block of this.blocks) {
        if (block.dom) {
          let xmlString = block.asXmlString();
-          xmlString = xmlString.replace(/`/g, "\\`");
+          xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
          if (block.dynamicTagName) {
            xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
            xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -364,19 +373,15 @@ export class CodeGenerator {

  insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
    let blockExpr = block.generateExpr(expression);
-    const tKeyExpr = ctx.tKeyExpr;
    if (block.parentVar) {
-      let keyArg = `key${this.target.loopLevel}`;
-      if (tKeyExpr) {
-        keyArg = `${tKeyExpr} + ${keyArg}`;
-      }
+      let key = this.target.currentKey(ctx);
      this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
      return;
    }

-    if (tKeyExpr) {
-      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+    if (ctx.tKeyExpr) {
+      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
    }

    if (block.isRoot && !ctx.preventRoot) {
@@ -423,78 +428,66 @@ export class CodeGenerator {
      .join("");
  }

-  compileAST(ast: AST, ctx: Context) {
+  /**
+   * @returns the newly created block name, if any
+   */
+  compileAST(ast: AST, ctx: Context): string | null {
    switch (ast.type) {
      case ASTType.Comment:
-        this.compileComment(ast, ctx);
-        break;
+        return this.compileComment(ast, ctx);
      case ASTType.Text:
-        this.compileText(ast, ctx);
-        break;
+        return this.compileText(ast, ctx);
      case ASTType.DomNode:
-        this.compileTDomNode(ast, ctx);
-        break;
+        return this.compileTDomNode(ast, ctx);
      case ASTType.TEsc:
-        this.compileTEsc(ast, ctx);
-        break;
+        return this.compileTEsc(ast, ctx);
      case ASTType.TOut:
-        this.compileTOut(ast, ctx);
-        break;
+        return this.compileTOut(ast, ctx);
      case ASTType.TIf:
-        this.compileTIf(ast, ctx);
-        break;
+        return this.compileTIf(ast, ctx);
      case ASTType.TForEach:
-        this.compileTForeach(ast, ctx);
-        break;
+        return this.compileTForeach(ast, ctx);
      case ASTType.TKey:
-        this.compileTKey(ast, ctx);
-        break;
+        return this.compileTKey(ast, ctx);
      case ASTType.Multi:
-        this.compileMulti(ast, ctx);
-        break;
+        return this.compileMulti(ast, ctx);
      case ASTType.TCall:
-        this.compileTCall(ast, ctx);
-        break;
+        return this.compileTCall(ast, ctx);
      case ASTType.TCallBlock:
-        this.compileTCallBlock(ast, ctx);
-        break;
+        return this.compileTCallBlock(ast, ctx);
      case ASTType.TSet:
-        this.compileTSet(ast, ctx);
-        break;
+        return this.compileTSet(ast, ctx);
      case ASTType.TComponent:
-        this.compileComponent(ast, ctx);
-        break;
+        return this.compileComponent(ast, ctx);
      case ASTType.TDebug:
-        this.compileDebug(ast, ctx);
-        break;
+        return this.compileDebug(ast, ctx);
      case ASTType.TLog:
-        this.compileLog(ast, ctx);
-        break;
+        return this.compileLog(ast, ctx);
      case ASTType.TSlot:
-        this.compileTSlot(ast, ctx);
-        break;
+        return this.compileTSlot(ast, ctx);
      case ASTType.TTranslation:
-        this.compileTTranslation(ast, ctx);
-        break;
+        return this.compileTTranslation(ast, ctx);
      case ASTType.TPortal:
-        this.compileTPortal(ast, ctx);
+        return this.compileTPortal(ast, ctx);
    }
  }

-  compileDebug(ast: ASTDebug, ctx: Context) {
+  compileDebug(ast: ASTDebug, ctx: Context): string | null {
    this.addLine(`debugger;`);
    if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
    }
+    return null;
  }

-  compileLog(ast: ASTLog, ctx: Context) {
+  compileLog(ast: ASTLog, ctx: Context): string | null {
    this.addLine(`console.log(${compileExpr(ast.expr)});`);
    if (ast.content) {
-      this.compileAST(ast.content, ctx);
+      return this.compileAST(ast.content, ctx);
    }
+    return null;
  }
-  compileComment(ast: ASTComment, ctx: Context) {
+  compileComment(ast: ASTComment, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    const isNewBlock = !block || forceNewBlock;
    if (isNewBlock) {
@@ -507,9 +500,10 @@ export class CodeGenerator {
      const text = xmlDoc.createComment(ast.value);
      block!.insert(text);
    }
+    return block!.varName;
  }

-  compileText(ast: ASTText, ctx: Context) {
+  compileText(ast: ASTText, ctx: Context): string {
    let { block, forceNewBlock } = ctx;

    let value = ast.value;
@@ -528,6 +522,7 @@ export class CodeGenerator {
      const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
      block.insert(createFn.call(xmlDoc, value));
    }
+    return block.varName;
  }

  generateHandlerCode(rawEvent: string, handler: string): string {
@@ -547,7 +542,7 @@ export class CodeGenerator {
    return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
  }

-  compileTDomNode(ast: ASTDomNode, ctx: Context) {
+  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
    let codeIdx = this.target.code.length;
@@ -584,8 +579,12 @@ 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
-          const C = attrName === "value" ? "String" : "Boolean";
-          expr = `new ${C}(${expr})`;
+          if (attrName === "value") {
+            // When the expression is falsy, fall back to an empty string
+            expr = `new String((${expr}) || "")`;
+          } else {
+            expr = `new Boolean(${expr})`;
+          }
        }
        const idx = block!.insertData(expr, "attr");
        if (key === "t-att") {
@@ -607,6 +606,60 @@ export class CodeGenerator {
      }
    }

+    // t-model
+    let tModelSelectedExpr;
+    if (ast.model) {
+      const {
+        hasDynamicChildren,
+        baseExpr,
+        expr,
+        eventType,
+        shouldNumberize,
+        shouldTrim,
+        targetAttr,
+        specialInitTargetAttr,
+      } = ast.model;
+
+      const baseExpression = compileExpr(baseExpr);
+      const bExprId = generateId("bExpr");
+      this.define(bExprId, baseExpression);
+
+      const expression = compileExpr(expr);
+      const exprId = generateId("expr");
+      this.define(exprId, expression);
+
+      const fullExpression = `${bExprId}[${exprId}]`;
+
+      let idx: number;
+      if (specialInitTargetAttr) {
+        let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
+        if (!targetExpr && ast.attrs) {
+          // look at the dynamic attribute counterpart
+          const dynamicTgExpr = ast.attrs[`t-att-${targetAttr}`];
+          if (dynamicTgExpr) {
+            targetExpr = compileExpr(dynamicTgExpr);
+          }
+        }
+        idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "attr");
+        attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
+      } else if (hasDynamicChildren) {
+        const bValueId = generateId("bValue");
+        tModelSelectedExpr = `${bValueId}`;
+        this.define(tModelSelectedExpr, fullExpression);
+      } else {
+        idx = block!.insertData(`${fullExpression}`, "attr");
+        attrs[`block-attribute-${idx}`] = targetAttr;
+      }
+      this.helpers.add("toNumber");
+      let valueCode = `ev.target.${targetAttr}`;
+      valueCode = shouldTrim ? `${valueCode}.trim()` : valueCode;
+      valueCode = shouldNumberize ? `toNumber(${valueCode})` : valueCode;
+
+      const handler = `[(ev) => { ${fullExpression} = ${valueCode}; }]`;
+      idx = block!.insertData(handler, "hdlr");
+      attrs[`block-handler-${idx}`] = eventType;
+    }
+
    // event handlers
    for (let ev in ast.on) {
      const name = this.generateHandlerCode(ev, ast.on[ev]);
@@ -640,52 +693,6 @@ export class CodeGenerator {
      }
    }

-    // t-model
-    let tModelSelectedExpr;
-    if (ast.model) {
-      const {
-        hasDynamicChildren,
-        baseExpr,
-        expr,
-        eventType,
-        shouldNumberize,
-        shouldTrim,
-        targetAttr,
-        specialInitTargetAttr,
-      } = ast.model;
-
-      const baseExpression = compileExpr(baseExpr);
-      const bExprId = generateId("bExpr");
-      this.define(bExprId, baseExpression);
-
-      const expression = compileExpr(expr);
-      const exprId = generateId("expr");
-      this.define(exprId, expression);
-
-      const fullExpression = `${bExprId}[${exprId}]`;
-
-      let idx: number;
-      if (specialInitTargetAttr) {
-        idx = block!.insertData(`${fullExpression} === '${attrs[targetAttr]}'`, "attr");
-        attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
-      } else if (hasDynamicChildren) {
-        const bValueId = generateId("bValue");
-        tModelSelectedExpr = `${bValueId}`;
-        this.define(tModelSelectedExpr, fullExpression);
-      } else {
-        idx = block!.insertData(`${fullExpression}`, "attr");
-        attrs[`block-attribute-${idx}`] = targetAttr;
-      }
-      this.helpers.add("toNumber");
-      let valueCode = `ev.target.${targetAttr}`;
-      valueCode = shouldTrim ? `${valueCode}.trim()` : valueCode;
-      valueCode = shouldNumberize ? `toNumber(${valueCode})` : valueCode;
-
-      const handler = `[(ev) => { ${fullExpression} = ${valueCode}; }]`;
-      idx = block!.insertData(handler, "hdlr");
-      attrs[`block-handler-${idx}`] = eventType;
-    }
-
    const dom = xmlDoc.createElement(ast.tag);
    for (const [attr, val] of Object.entries(attrs)) {
      if (!(attr === "class" && val === "")) {
@@ -730,9 +737,10 @@ export class CodeGenerator {
        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
      }
    }
+    return block!.varName;
  }

-  compileTEsc(ast: ASTTEsc, ctx: Context) {
+  compileTEsc(ast: ASTTEsc, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    let expr: string;
    if (ast.expr === "0") {
@@ -753,9 +761,10 @@ export class CodeGenerator {
      const text = xmlDoc.createElement(`block-text-${idx}`);
      block.insert(text);
    }
+    return block.varName;
  }

-  compileTOut(ast: ASTTOut, ctx: Context) {
+  compileTOut(ast: ASTTOut, ctx: Context): string {
    let { block } = ctx;
    if (block) {
      this.insertAnchor(block);
@@ -777,6 +786,7 @@ export class CodeGenerator {
      blockStr = `safeOutput(${compileExpr(ast.expr)})`;
    }
    this.insertBlock(blockStr, block, ctx);
+    return block.varName;
  }

  compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
@@ -790,7 +800,7 @@ export class CodeGenerator {
    this.target.indentLevel--;
  }

-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode): string {
    let { block, forceNewBlock } = ctx;
    const codeIdx = this.target.code.length;
    const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
@@ -833,9 +843,10 @@ export class CodeGenerator {
      const args = block!.children.map((c) => c.varName).join(", ");
      this.insertBlock(`multi([${args}])`, block!, ctx)!;
    }
+    return block.varName;
  }

-  compileTForeach(ast: ASTTForEach, ctx: Context) {
+  compileTForeach(ast: ASTTForEach, ctx: Context): string {
    let { block } = ctx;
    if (block) {
      this.insertAnchor(block);
@@ -874,9 +885,9 @@ export class CodeGenerator {
      // Throw error on duplicate keys in dev mode
      this.helpers.add("OwlError");
      this.addLine(
-        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
      );
-      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
+      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
    }
    let id: string;
    if (ast.memo) {
@@ -913,9 +924,10 @@ export class CodeGenerator {
      this.addLine(`ctx = ctx.__proto__;`);
    }
    this.insertBlock("l", block, ctx);
+    return block.varName;
  }

-  compileTKey(ast: ASTTKey, ctx: Context) {
+  compileTKey(ast: ASTTKey, ctx: Context): string | null {
    const tKeyExpr = generateId("tKey_");
    this.define(tKeyExpr, compileExpr(ast.expr));
    ctx = createContext(ctx, {
@@ -923,20 +935,22 @@ export class CodeGenerator {
      block: ctx.block,
      index: ctx.index,
    });
-    this.compileAST(ast.content, ctx);
+    return this.compileAST(ast.content, ctx);
  }

-  compileMulti(ast: ASTMulti, ctx: Context) {
+  compileMulti(ast: ASTMulti, ctx: Context): string | null {
    let { block, forceNewBlock } = ctx;
    const isNewBlock = !block || forceNewBlock;
    let codeIdx = this.target.code.length;
    if (isNewBlock) {
      const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
+      let result: string | null = null;
      if (n <= 1) {
        for (let child of ast.content) {
-          this.compileAST(child, ctx);
+          const blockName = this.compileAST(child, ctx);
+          result = result || blockName;
        }
-        return;
+        return result;
      }
      block = this.createBlock(block, "multi", ctx);
    }
@@ -976,9 +990,10 @@ export class CodeGenerator {
      const args = block!.children.map((c) => c.varName).join(", ");
      this.insertBlock(`multi([${args}])`, block!, ctx)!;
    }
+    return block!.varName;
  }

-  compileTCall(ast: ASTTCall, ctx: Context) {
+  compileTCall(ast: ASTTCall, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    let ctxVar = ctx.ctxVar || "ctx";
    if (ast.context) {
@@ -989,12 +1004,11 @@ export class CodeGenerator {
      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
      this.addLine(`${ctxVar}[isBoundary] = 1;`);
      this.helpers.add("isBoundary");
-      const nextId = BlockDescription.nextBlockId;
      const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
-      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (nextId !== BlockDescription.nextBlockId) {
+      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (bl) {
        this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = ${bl};`);
      }
    }
    const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1028,9 +1042,10 @@ export class CodeGenerator {
    if (ast.body && !ctx.isLast) {
      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
    }
+    return block.varName;
  }

-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
    let { block, forceNewBlock } = ctx;
    if (block) {
      if (!forceNewBlock) {
@@ -1039,9 +1054,10 @@ export class CodeGenerator {
    }
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+    return block.varName;
  }

-  compileTSet(ast: ASTTSet, ctx: Context) {
+  compileTSet(ast: ASTTSet, ctx: Context): null {
    this.target.shouldProtectScope = true;
    this.helpers.add("isBoundary").add("withDefault");
    const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1049,7 +1065,8 @@ export class CodeGenerator {
      this.helpers.add("LazyValue");
      const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
      const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let value = `new LazyValue(${name}, ctx, this, node)`;
+      let key = this.target.currentKey(ctx);
+      let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
      value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
      this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
    } else {
@@ -1066,6 +1083,7 @@ export class CodeGenerator {
      this.helpers.add("setContextValue");
      this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
    }
+    return null;
  }

  generateComponentKey() {
@@ -1094,7 +1112,7 @@ export class CodeGenerator {
      if (suffix === "bind") {
        this.helpers.add("bind");
        name = _name;
-        value = `bind(ctx, ${value || undefined})`;
+        value = `bind(this, ${value || undefined})`;
      } else {
        throw new OwlError("Invalid prop suffix");
      }
@@ -1117,7 +1135,7 @@ export class CodeGenerator {
    return propString;
  }

-  compileComponent(ast: ASTComponent, ctx: Context) {
+  compileComponent(ast: ASTComponent, ctx: Context): string {
    let { block } = ctx;
    // props
    const hasSlotsProp = "slots" in (ast.props || {});
@@ -1138,7 +1156,7 @@ export class CodeGenerator {
        const params = [];
        if (slotAst.content) {
          const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+          params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
        }
        const scope = ast.slots[slotName].scope;
        if (scope) {
@@ -1183,7 +1201,7 @@ export class CodeGenerator {
    }

    if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, ctx);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
    }

    if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1205,6 +1223,13 @@ export class CodeGenerator {
      })`,
    });

+    if (ast.isDynamic) {
+      // If the component class changes, this can cause delayed renders to go
+      // through if the key doesn't change. Use the component name for now.
+      // This means that two component classes with the same name isn't supported
+      // in t-component. We can generate a unique id per class later if needed.
+      keyArg = `(${expr}).name + ${keyArg}`;
+    }
    let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
    if (ast.isDynamic) {
      blockExpr = `toggler(${expr}, ${blockExpr})`;
@@ -1217,6 +1242,7 @@ export class CodeGenerator {

    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(blockExpr, block, ctx);
+    return block.varName;
  }

  wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1235,34 +1261,43 @@ export class CodeGenerator {
    return `${name}(${expr}, [${handlers.join(",")}])`;
  }

-  compileTSlot(ast: ASTSlot, ctx: Context) {
+  compileTSlot(ast: ASTSlot, ctx: Context): string {
    this.helpers.add("callSlot");
    let { block } = ctx;
    let blockString: string;
    let slotName;
    let dynamic = false;
+    let isMultiple = false;
    if (ast.name.match(INTERP_REGEXP)) {
      dynamic = true;
+      isMultiple = true;
      slotName = interpolate(ast.name);
    } else {
      slotName = "'" + ast.name + "'";
+      isMultiple = isMultiple || this.slotNames.has(ast.name);
+      this.slotNames.add(ast.name);
    }
    const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
    if (ast.attrs) {
      delete ast.attrs["t-props"];
    }
+    let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+    if (isMultiple) {
+      key = `${key} + \`${this.generateComponentKey()}\``;
+    }
+
    const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
    const scope = this.getPropString(props, dynProps);
    if (ast.defaultContent) {
      const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-      blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
+      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
    } 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
@@ -1275,14 +1310,16 @@ export class CodeGenerator {
    }
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+    return block.varName;
  }

-  compileTTranslation(ast: ASTTranslation, ctx: Context) {
+  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
    if (ast.content) {
-      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
    }
+    return null;
  }
-  compileTPortal(ast: ASTTPortal, ctx: Context) {
+  compileTPortal(ast: ASTTPortal, ctx: Context): string {
    if (!this.staticDefs.find((d) => d.id === "Portal")) {
      this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
    }
@@ -1303,11 +1340,12 @@ export class CodeGenerator {
    });

    const target = compileExpr(ast.target);
-    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __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;
  }
 }
@@ -28,7 +28,7 @@ import { OwlError } from "../runtime/error_handling";
 //------------------------------------------------------------------------------

 const RESERVED_WORDS =
-  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(
+  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date".split(
    ","
  );

@@ -781,8 +781,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {

    // default slot
    const defaultContent = parseChildNodes(clone, ctx);
-    if (defaultContent) {
-      slots = slots || {};
+    slots = slots || {};
+    // t-set-slot="default" has priority over content
+    if (defaultContent && !slots.default) {
      slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
    }
  }
@@ -1,7 +1,7 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
-import { Fiber, MountOptions } from "./fibers";
+import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
+import { Fiber, RootFiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
@@ -31,6 +31,22 @@ This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };

+declare global {
+  interface Window {
+    __OWL_DEVTOOLS__: {
+      apps: Set<App>;
+      Fiber: typeof Fiber;
+      RootFiber: typeof RootFiber;
+    };
+  }
+}
+
+window.__OWL_DEVTOOLS__ ||= {
+  apps: new Set<App>(),
+  Fiber: Fiber,
+  RootFiber: RootFiber,
+};
+
 export class App<
  T extends abstract new (...args: any) => any = any,
  P extends object = any,
@@ -48,6 +64,7 @@ export class App<
  constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
    super(config);
    this.Root = Root;
+    window.__OWL_DEVTOOLS__.apps.add(this);
    if (config.test) {
      this.dev = true;
    }
@@ -94,9 +111,7 @@ export class App<
        nodeErrorHandlers.set(node, handlers);
      }
      handlers.unshift((e) => {
-        if (isResolved) {
-          console.error(e);
-        } else {
+        if (!isResolved) {
          reject(e);
        }
        throw e;
@@ -111,6 +126,7 @@ export class App<
      this.scheduler.flush();
      this.root.destroy();
    }
+    window.__OWL_DEVTOOLS__.apps.delete(this);
  }

  createComponent<P extends Props>(
@@ -152,7 +168,13 @@ export class App<
      } else {
        // new component
        if (isStatic) {
-          C = parent.constructor.components[name as any];
+          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];
          if (!C) {
            throw new OwlError(`Cannot find the definition of component "${name}"`);
          } else if (!(C.prototype instanceof Component)) {
@@ -169,6 +191,10 @@ export class App<
      return node;
    };
  }
+
+  handleError(...args: Parameters<typeof handleError>) {
+    return handleError(...args);
+  }
 }

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

-    moveBefore(other: Block | null, afterNode: Node | null) {
-      const target = other ? other.el! : afterNode;
-      nodeInsertBefore.call(this.parentEl, this.el!, target);
+    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);
    }

    toString() {
@@ -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 !== afterNode) {
+          while (currentNode && currentNode !== afterNode) {
            if (currentNode.contains(target)) {
              return origFn.call(this, ev);
            }
@@ -56,8 +56,18 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
      }
    }

-    moveBefore(other: VCatcher | null, afterNode: Node | null) {
-      this.child.moveBefore(other ? other.child : null, afterNode);
+    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);
      this.parentEl!.insertBefore(this.afterNode!, afterNode);
    }

@@ -27,8 +27,8 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
  }

  function listener(ev: Event) {
-    const currentTarget = ev.currentTarget;
-    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
+    const currentTarget = ev.currentTarget as HTMLElement;
+    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
    const data = (currentTarget as any)[eventKey];
    if (!data) return;
    config.mainEventHandler(data, ev, currentTarget);
@@ -29,14 +29,18 @@ class VHtml {
    }
  }

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

+  moveBeforeVNode(other: VHtml | null, afterNode: Node | null) {
+    const target = other ? other.content[0] : afterNode;
+    this.moveBeforeDOMNode(target);
+  }
+
  patch(other: VHtml) {
    if (this === other) {
      return;
@@ -10,7 +10,8 @@ export { createCatcher } from "./event_catcher";

 export interface VNode<T = any> {
  mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBefore(other: T | null, afterNode: Node | null): void;
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void;
+  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
  patch(other: T, withBeforeRemove: boolean): void;
  beforeRemove(): void;
  remove(): void;
@@ -38,14 +38,23 @@ class VList {
    this.parentEl = parent;
  }

-  moveBefore(other: VList | null, afterNode: Node | null) {
+  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) {
    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].moveBefore(null, afterNode);
+      children[i].moveBeforeVNode(null, afterNode);
    }
    this.parentEl!.insertBefore(this.anchor!, afterNode);
  }
@@ -66,7 +75,7 @@ class VList {
      patch: cPatch,
      remove: cRemove,
      beforeRemove,
-      moveBefore: cMoveBefore,
+      moveBeforeVNode: cMoveBefore,
      firstNode: cFirstNode,
    } = proto;

@@ -38,7 +38,22 @@ export class VMulti {
    this.parentEl = parent;
  }

-  moveBefore(other: VMulti | null, afterNode: Node | null) {
+  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) {
    if (other) {
      const next = other!.children[0];
      afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
@@ -49,7 +64,7 @@ export class VMulti {
    for (let i = 0, l = children.length; i < l; i++) {
      let child = children[i];
      if (child) {
-        child.moveBefore(null, afterNode);
+        child.moveBeforeVNode(null, afterNode);
      } else {
        const anchor = anchors![i];
        nodeInsertBefore.call(parent, anchor, afterNode);
@@ -23,9 +23,13 @@ abstract class VSimpleNode {
    this.el = node;
  }

-  moveBefore(other: VText | null, afterNode: Node | null) {
-    const target = other ? other.el! : afterNode;
-    nodeInsertBefore.call(this.parentEl, this.el!, target);
+  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);
  }

  beforeRemove() {}
@@ -20,8 +20,12 @@ class VToggler {
    this.child.mount(parent, afterNode);
  }

-  moveBefore(other: VToggler | null, afterNode: Node | null) {
-    this.child.moveBefore(other ? other.child : null, 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);
  }

  patch(other: VToggler, withBeforeRemove: boolean) {
@@ -1,16 +1,9 @@
 import type { App, Env } from "./app";
 import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError, handleError, OwlError } from "./error_handling";
+import { fibersInError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import {
-  clearReactivesForCallback,
-  getSubscriptions,
-  NonReactive,
-  Reactive,
-  reactive,
-  TARGET,
-} from "./reactivity";
+import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
 import { STATUS } from "./status";
 import { batched, Callback } from "./utils";

@@ -52,7 +45,7 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
 *  relevant changes
 * @see reactive
 */
-export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
+export function useState<T extends object>(state: T): T {
  const node = getCurrent();
  let render = batchedRenderFunctions.get(node)!;
  if (!render) {
@@ -116,12 +109,13 @@ 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" && prop[TARGET]) {
+      if (prop && typeof prop === "object" && targets.has(prop)) {
        props[key] = useState(prop);
      }
    }
    this.component = new C(props, env, this);
-    this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
+    const ctx = Object.assign(Object.create(this.component), { this: this.component });
+    this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
    this.component.setup();
    currentNode = null;
  }
@@ -141,7 +135,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    try {
      await Promise.all(this.willStart.map((f) => f.call(component)));
    } catch (e) {
-      handleError({ node: this, error: e });
+      this.app.handleError({ node: this, error: e });
      return;
    }
    if (this.status === STATUS.NEW && this.fiber === fiber) {
@@ -219,7 +213,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
          cb.call(component);
        }
      } catch (e) {
-        handleError({ error: e, node: this });
+        this.app.handleError({ error: e, node: this });
      }
    }
    this.status = STATUS.DESTROYED;
@@ -240,7 +234,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" && prop[TARGET]) {
+      if (prop && typeof prop === "object" && targets.has(prop)) {
        props[key] = useState(prop);
      }
    }
@@ -306,8 +300,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    this.fiber = null;
  }

-  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
-    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+  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);
  }

  patch() {
@@ -320,6 +318,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
  }
  _patch() {
    let hasChildren = false;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    for (let _k in this.children) {
      hasChildren = true;
      break;
@@ -45,7 +45,10 @@ export function handleError(params: ErrorParams) {
  let { error } = params;
  // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
  if (!(error instanceof OwlError)) {
-    error = Object.assign(new OwlError("An error occured in the owl lifecycle"), { cause: error });
+    error = Object.assign(
+      new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`),
+      { cause: error }
+    );
  }
  const node = "node" in params ? params.node : params.fiber.node;
  const fiber = "fiber" in params ? params.fiber : node.fiber!;
@@ -68,5 +71,6 @@ export function handleError(params: ErrorParams) {
    } catch (e) {
      console.error(e);
    }
+    throw error;
  }
 }
@@ -1,6 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, handleError, OwlError } from "./error_handling";
+import { fibersInError, 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) {
-        handleError({ node, error: e });
+        node.app.handleError({ node, error: e });
      }
      root.setCounter(root.counter - 1);
    }
@@ -195,7 +195,7 @@ export class RootFiber extends Fiber {
      }
    } catch (e) {
      this.locked = false;
-      handleError({ fiber: current || this, error: e });
+      node.app.handleError({ fiber: current || this, error: e });
    }
  }

@@ -259,7 +259,7 @@ export class MountFiber extends RootFiber {
        }
      }
    } catch (e) {
-      handleError({ fiber: current as Fiber, error: e });
+      this.node.app.handleError({ fiber: current as Fiber, error: e });
    }
  }
 }
@@ -117,7 +117,7 @@ export function useEffect(effect: Effect, computeDependencies: () => any[] = ()
 *  `useExternalListener(window, 'click', this._doSomething);`
 * */
 export function useExternalListener(
-  target: HTMLElement | typeof window,
+  target: EventTarget,
  eventName: string,
  handler: EventListener,
  eventParams?: AddEventListenerOptions
@@ -12,7 +12,6 @@ import {
  comment,
 } from "./blockdom";
 import { mainEventHandler } from "./event_handling";
-export type { Reactive } from "./reactivity";

 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
@@ -36,6 +35,7 @@ export const blockDom = {
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 export { Component } from "./component";
+export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";
@@ -10,9 +10,11 @@ function wrapError(fn: (...args: any[]) => any, hookName: string) {
  const node = getCurrent();
  return (...args: any[]) => {
    const onError = (cause: any) => {
+      error.cause = cause;
      if (cause instanceof Error) {
-        error.cause = cause;
        error.message += `"${cause.message}"`;
+      } else {
+        error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
      }
      throw error;
    };
@@ -1,4 +1,4 @@
-import { onWillUnmount } from "./lifecycle_hooks";
+import { onMounted, onWillUnmount } from "./lifecycle_hooks";
 import { BDom, text, VNode } from "./blockdom";
 import { Component } from "./component";
 import { OwlError } from "./error_handling";
@@ -6,60 +6,55 @@ import { OwlError } from "./error_handling";
 const VText: any = text("").constructor;

 class VPortal extends VText implements Partial<VNode<VPortal>> {
-  //   selector: string;
-  realBDom: BDom | null;
+  content: BDom | null;
+  selector: string;
  target: HTMLElement | null = null;

-  constructor(selector: string, realBDom: BDom) {
+  constructor(selector: string, content: BDom) {
    super("");
    this.selector = selector;
-    this.realBDom = realBDom;
+    this.content = content;
  }
+
  mount(parent: HTMLElement, anchor: ChildNode) {
    super.mount(parent, anchor);
    this.target = document.querySelector(this.selector) as any;
-    if (!this.target) {
-      let el: any = this.el;
-      while (el && el.parentElement instanceof HTMLElement) {
-        el = el.parentElement;
-      }
-      this.target = el && el.querySelector(this.selector);
-      if (!this.target) {
-        throw new OwlError("invalid portal target");
-      }
+    if (this.target) {
+      this.content!.mount(this.target!, null);
+    } else {
+      this.content!.mount(parent, anchor);
    }
-    this.realBDom!.mount(this.target!, null);
  }

  beforeRemove() {
-    this.realBDom!.beforeRemove();
+    this.content!.beforeRemove();
  }
  remove() {
-    if (this.realBDom) {
+    if (this.content) {
      super.remove();
-      this.realBDom!.remove();
-      this.realBDom = null;
+      this.content!.remove();
+      this.content = null;
    }
  }

  patch(other: VPortal) {
    super.patch(other);
-    if (this.realBDom) {
-      this.realBDom.patch(other.realBDom!, true);
+    if (this.content) {
+      this.content.patch(other.content!, true);
    } else {
-      this.realBDom = other.realBDom;
-      this.realBDom!.mount(this.target!, null);
+      this.content = other.content;
+      this.content!.mount(this.target!, null);
    }
  }
 }

 /**
- * <t t-slot="default"/>
+ * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
 */
 export function portalTemplate(app: any, bdom: any, helpers: any) {
  let { callSlot } = helpers;
-  return function template(ctx: any, node: any, key = "") {
-    return callSlot(ctx, node, key, "default", false, null);
+  return function template(ctx: any, node: any, key = ""): any {
+    return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
  };
 }

@@ -73,13 +68,23 @@ export class Portal extends Component {
  };

  setup() {
-    const node = this.__owl__;
-    const renderFn = node.renderFn;
-    node.renderFn = () => new VPortal(this.props.target, renderFn());
-    onWillUnmount(() => {
-      if (node.bdom) {
-        node.bdom.remove();
+    const node: any = this.__owl__;
+
+    onMounted(() => {
+      const portal: VPortal = node.bdom;
+      if (!portal.target) {
+        const target: HTMLElement = document.querySelector(this.props.target);
+        if (target) {
+          portal.content!.moveBeforeDOMNode(target.firstChild, target);
+        } else {
+          throw new OwlError("invalid portal target");
+        }
      }
    });
+
+    onWillUnmount(() => {
+      const portal: VPortal = node.bdom;
+      portal.remove();
+    });
  }
 }
@@ -1,25 +1,22 @@
-import { Callback } from "./utils";
+import type { 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");
+// Used to specify the absence of a callback, can be used as WeakMap key but
+// should only be used as a sentinel value and never called.
+const NO_CALLBACK = () => {
+  throw new Error("Called NO_CALLBACK. Owl is broken, please report this to the maintainers.");
+};

+// The following types only exist to signify places where objects are expected
+// to be reactive or not, they provide no type checking benefit over "object"
 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;

@@ -36,7 +33,7 @@ const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
 * @returns the raw type of the object
 */
 function rawType(obj: any) {
-  return objectToString.call(obj).slice(8, -1);
+  return objectToString.call(toRaw(obj)).slice(8, -1);
 }
 /**
 * Checks whether a given value can be made into a reactive object.
@@ -61,15 +58,16 @@ 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): NonReactive<T> {
-  (value as any)[SKIP] = true;
-  return value as NonReactive<T>;
+export function markRaw<T extends Target>(value: T): T {
+  skipped.add(value);
+  return value;
 }

 /**
@@ -78,8 +76,8 @@ export function markRaw<T extends Target>(value: T): NonReactive<T> {
 * @param value a reactive value
 * @returns the underlying value
 */
-export function toRaw<T extends object>(value: Reactive<T>): T {
-  return value[TARGET] || 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;
 }

 const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callback>>>();
@@ -93,6 +91,9 @@ const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callbac
 * @param callback the function to call when the key changes
 */
 function observeTargetKey(target: Target, key: PropertyKey, callback: Callback): void {
+  if (callback === NO_CALLBACK) {
+    return;
+  }
  if (!targetToKeysToCallbacks.get(target)) {
    targetToKeysToCallbacks.set(target, new Map());
  }
@@ -147,8 +148,11 @@ export function clearReactivesForCallback(callback: Callback): void {
    if (!observedKeys) {
      continue;
    }
-    for (const callbacks of observedKeys.values()) {
+    for (const [key, callbacks] of observedKeys.entries()) {
      callbacks.delete(callback);
+      if (!callbacks.size) {
+        observedKeys.delete(key);
+      }
    }
  }
  targetsToClear.clear();
@@ -158,14 +162,20 @@ export function getSubscriptions(callback: Callback) {
  const targets = callbacksToTargets.get(callback) || [];
  return [...targets].map((target) => {
    const keysToCallbacks = targetToKeysToCallbacks.get(target);
-    return {
-      target,
-      keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
-    };
+    let keys = [];
+    if (keysToCallbacks) {
+      for (const [key, cbs] of keysToCallbacks) {
+        if (cbs.has(callback)) {
+          keys.push(key);
+        }
+      }
+    }
+    return { target, keys };
  });
 }
-
-const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
+// Maps reactive objects to the underlying target
+export const targets = new WeakMap<Reactive<Target>, Target>();
+const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>();
 /**
 * 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
@@ -180,7 +190,7 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
 * Subscriptions:
 * + Reading a property on an object will subscribe you to changes in the value
 *    of that property.
- * + Accessing an object keys (eg with Object.keys or with `for..in`) will
+ * + Accessing an object's 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.
@@ -193,19 +203,16 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
 *  reactive has changed
 * @returns a proxy that tracks changes to it
 */
-export function reactive<T extends Target>(
-  target: T,
-  callback: Callback = () => {}
-): Reactive<T> | NonReactive<T> {
+export function reactive<T extends Target>(target: T, callback: Callback = NO_CALLBACK): T {
  if (!canBeMadeReactive(target)) {
    throw new OwlError(`Cannot make the given value reactive`);
  }
-  if (SKIP in target) {
-    return target as NonReactive<T>;
+  if (skipped.has(target)) {
+    return target;
  }
-  const originalTarget = (target as Reactive)[TARGET];
-  if (originalTarget) {
-    return reactive(originalTarget, callback);
+  if (targets.has(target)) {
+    // target is reactive, create a reactive on the underlying object instead
+    return reactive(targets.get(target) as T, callback);
  }
  if (!reactiveCache.has(target)) {
    reactiveCache.set(target, new WeakMap());
@@ -218,6 +225,7 @@ export function reactive<T extends Target>(
      : 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>;
 }
@@ -229,29 +237,29 @@ export function reactive<T extends Target>(
 */
 function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T> {
  return {
-    get(target: any, key: PropertyKey, proxy: Reactive<T>) {
-      if (key === TARGET) {
-        return target;
-      }
+    get(target, key, receiver) {
      // 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, proxy);
+        return Reflect.get(target, key, receiver);
      }
      observeTargetKey(target, key, callback);
-      return possiblyReactive(Reflect.get(target, key, proxy), callback);
+      return possiblyReactive(Reflect.get(target, key, receiver), callback);
    },
-    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) {
+    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)) {
        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 !== value || (Array.isArray(target) && key === "length")) {
+      if (
+        originalValue !== Reflect.get(target, key, receiver) ||
+        (key === "length" && Array.isArray(target))
+      ) {
        notifyReactives(target, key);
      }
      return ret;
@@ -444,10 +452,8 @@ 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];
      }
@@ -32,14 +32,14 @@ function callSlot(
  if (__scope) {
    slotScope[__scope] = extra;
  }
-  const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+  const slotBDom = __render ? __render(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.call(ctx.__owl__.component, ctx, parent, key);
+      child2 = defaultContent(ctx, parent, key);
    }
    return multi([child1, child2]);
  }
@@ -47,8 +47,7 @@ function callSlot(
 }

 function capture(ctx: any): any {
-  const component = ctx.__owl__.component;
-  const result = ObjectCreate(component);
+  const result = ObjectCreate(ctx);
  for (let k in ctx) {
    result[k] = ctx[k];
  }
@@ -111,15 +110,18 @@ class LazyValue {
  ctx: any;
  component: any;
  node: any;
-  constructor(fn: any, ctx: any, component: any, node: any) {
+  key: any;
+
+  constructor(fn: any, ctx: any, component: any, node: any, key: any) {
    this.fn = fn;
    this.ctx = capture(ctx);
    this.component = component;
    this.node = node;
+    this.key = key;
  }

  evaluate(): any {
-    return this.fn.call(this.component, this.ctx, this.node);
+    return this.fn.call(this.component, this.ctx, this.node, this.key);
  }

  toString() {
@@ -168,8 +170,7 @@ let boundFunctions = new WeakMap();
 const WeakMapGet = WeakMap.prototype.get;
 const WeakMapSet = WeakMap.prototype.set;

-function bind(ctx: any, fn: Function): Function {
-  let component = ctx.__owl__.component;
+function bind(component: any, fn: Function): Function {
  let boundFnMap = WeakMapGet.call(boundFunctions, component);
  if (!boundFnMap) {
    boundFnMap = new WeakMap();
@@ -207,11 +208,11 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
 * visit recursively the props and all the children to check if they are valid.
 * This is why it is only done in 'dev' mode.
 */
-export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
+export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, comp?: any) {
  const ComponentClass =
    typeof name !== "string"
      ? name
-      : (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
+      : (comp.constructor.components[name] as ComponentConstructor<P> | undefined);

  if (!ComponentClass) {
    // this is an error, wrong component. We silently return here instead so the
@@ -221,7 +222,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:

  const schema = ComponentClass.props;
  if (!schema) {
-    if (parent.__owl__.app.warnIfNoStaticProps) {
+    if (comp.__owl__.app.warnIfNoStaticProps) {
      console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
    }
    return;
@@ -28,12 +28,18 @@ export function batched(callback: Callback): Callback {
 }

 export function validateTarget(target: HTMLElement) {
-  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");
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+  const document = target && target.ownerDocument;
+  if (document) {
+    const HTMLElement = document.defaultView!.HTMLElement;
+    if (target instanceof HTMLElement) {
+      if (!document.body.contains(target)) {
+        throw new OwlError("Cannot mount a component on a detached dom node");
+      }
+      return;
+    }
  }
+  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }

 export class EventBus extends EventTarget {
@@ -1,4 +1,5 @@
 import { OwlError } from "./error_handling";
+import { toRaw } from "./reactivity";

 type BaseType =
  | typeof String
@@ -84,6 +85,7 @@ export function validateSchema(obj: { [key: string]: any }, schema: Schema): str
  if (Array.isArray(schema)) {
    schema = toSchema(schema);
  }
+  obj = toRaw(obj);
  let errors = [];
  // check if each value in obj has correct shape
  for (let key in obj) {
@@ -29,6 +29,19 @@ 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
 ) {
@@ -76,4 +76,22 @@ describe("app", () => {
      "Component 'Root' does not have a static props description"
    );
  });
+
+  test("can mount app in an iframe", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div class="my-div"/>`;
+    }
+
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const app = new App(SomeComponent);
+    const iframeDoc = iframe.contentDocument!;
+    const comp = await app.mount(iframeDoc.body);
+    const div = iframeDoc.querySelector(".my-div");
+    expect(div).not.toBe(null);
+    expect(iframeDoc.contains(div)).toBe(true);
+    app.destroy();
+    expect(iframeDoc.contains(div)).toBe(false);
+    expect(status(comp)).toBe("destroyed");
+  });
 });
@@ -430,6 +430,19 @@ exports[`attributes static attributes on void elements 1`] = `
 }"
 `;

+exports[`attributes static attributes with backslash or backtick 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div foo=\\"\\\\\\\\a\\" bar=\\"\\\\\\\\n\\" baz=\\"\\\\\`\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`attributes static attributes with backticks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -708,6 +721,20 @@ 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
 ) {
@@ -773,7 +800,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]);
  }
 }"
@@ -787,7 +814,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]);
  }
 }"
@@ -815,7 +842,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]);
  }
 }"
@@ -829,7 +856,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]);
  }
 }"
@@ -519,8 +519,9 @@ exports[`t-on t-on, with arguments and t-call 2`] = `
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['value'];
-    let hdlr1 = [()=>this.update(v1), ctx];
+    const v1 = ctx['this'];
+    const v2 = ctx['value'];
+    let hdlr1 = [()=>v1.update(v2), ctx];
    return block1([hdlr1]);
  }
 }"
@@ -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 = ctx.__owl__.refs;
+    const refs = this.__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];
@@ -334,6 +334,57 @@ 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
 ) {
@@ -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);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
    let txt1 = ctx['var'];
    return block1([txt1]);
  }
@@ -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);
+    ctx[\`var\`] = new LazyValue(value1, ctx, this, node, key);
    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);
+    ctx[\`bdom\`] = new LazyValue(value1, ctx, this, node, key);
    if (ctx['hasBdom']) {
      const b4 = safeOutput(ctx['bdom']);
      b3 = block3([], [b4]);
@@ -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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__owl__.refs;
    const ref1 = (el) => refs[\`name\`] = el;
    const ref2 = (el) => refs[\`p\`] = el;
    let b2;
@@ -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);
+    ctx[\`value\`] = new LazyValue(value1, ctx, this, node, key);
    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);
+    ctx[\`stuff\`] = new LazyValue(value1, ctx, this, node, key);
    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);
+    ctx[\`v2\`] = new LazyValue(value1, ctx, this, node, key);
    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);
+    ctx[\`setvar\`] = new LazyValue(value1, ctx, this, node, key);
    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));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
    setContextValue(ctx, \\"v1\\", 'after');
    setContextValue(ctx, \\"v3\\", true);
    const b3 = safeOutput(ctx['v2']);
@@ -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));
+    ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, this, node, key));
    setContextValue(ctx, \\"v1\\", 'after');
    setContextValue(ctx, \\"v3\\", false);
    const b3 = safeOutput(ctx['v2']);
@@ -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));
+    ctx[\`value\`] = withDefault(1, new LazyValue(value1, ctx, this, node, key));
    let txt1 = ctx['value'];
    return block1([txt1]);
  }
@@ -12,6 +12,11 @@ describe("attributes", () => {
    expect(renderToString(template)).toBe(`<div foo="a" bar="b" baz="c"></div>`);
  });

+  test("static attributes with backslash or backtick", () => {
+    const template = `<div foo="\\a" bar="\\n" baz="\`"/>`;
+    expect(renderToString(template)).toBe(`<div foo="\\a" bar="\\n" baz="\`"></div>`);
+  });
+
  test("two classes", () => {
    const template = `<div class="a b"/>`;
    expect(renderToString(template)).toBe(`<div class="a b"></div>`);
@@ -329,6 +334,35 @@ describe("attributes", () => {
    expect(fixture.innerHTML).toBe('<div value=""></div>');
  });

+  test("updating property with falsy value", async () => {
+    // render input with initial value
+    const template = `<input t-att-value="v"></input>`;
+    const bnode1 = renderToBdom(template, { v: false });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: false }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: undefined }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: null }));
+    expect(input.value).toBe("");
+  });
+
  test("changing a class with t-att-class", () => {
    // render input with initial value
    const template = `<div t-att-class="v"/>`;
@@ -284,6 +284,9 @@ describe("t-on", () => {
        expect(this).toBe(owner);
        expect(val).toBe(444);
      },
+      get this() {
+        return owner;
+      },
      value: 444,
    };

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

-    const bdom = app.getTemplate("main")({ __owl__: { refs } }, {});
+    const comp = { __owl__: { refs } };
+    const bdom = app.getTemplate("main").call(comp, comp, {});
    mount(bdom, document.createElement("div"));

    expect(refs.name.tagName).toBe("SPAN");
@@ -8,7 +8,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['myComp'];
-    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, (Comp1).name + key + \`__1\`, node, this, Comp1));
  }
 }"
 `;
@@ -1213,6 +1213,45 @@ exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 }"
 `;

+exports[`delayed render does not go through when t-component value changed 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(null, false, false, false, true);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`A\`);
+    const Comp1 = ctx['state'].component;
+    const b3 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed render does not go through when t-component value changed 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`B\`);
+    const b3 = text(ctx['state'].val);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed render does not go through when t-component value changed 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`C\`);
+  }
+}"
+`;
+
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1776,7 +1815,7 @@ exports[`t-foreach with dynamic async component 1`] = `
      let b3;
      if (ctx['arr']) {
        const Comp1 = ctx['myComp'];
-        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, this, Comp1));
+        b3 = toggler(Comp1, comp1({key: ctx['arr'][0]}, (Comp1).name + key + \`__1__\${key1}\`, node, this, Comp1));
      }
      c_block1[i1] = withKey(multi([b3]), key1);
    }
@@ -1810,7 +1849,7 @@ exports[`t-key on dom node having a component 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['key'];
    const Comp1 = ctx['myComp'];
-    const b2 = toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    const b2 = toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
    return toggler(tKey_1, block1([], [b2]));
  }
 }"
@@ -1836,7 +1875,7 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['key'];
    const Comp1 = ctx['myComp'];
-    return toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({key: ctx['key']}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
  }
 }"
 `;
@@ -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, ctx);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -38,6 +38,21 @@ 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
 ) {
@@ -101,7 +116,7 @@ exports[`basics simple catchError 2`] = `
 }"
 `;

-exports[`can catch errors Errors in owl lifecycle are wrapped in dev mode: async hook 1`] = `
+exports[`can catch errors Errors have the right cause 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -112,7 +127,7 @@ exports[`can catch errors Errors in owl lifecycle are wrapped in dev mode: async
 }"
 `;

-exports[`can catch errors Errors in owl lifecycle are wrapped in dev mode: sync hook 1`] = `
+exports[`can catch errors Errors in owl lifecycle are wrapped in dev mode: async hook 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -145,6 +160,28 @@ exports[`can catch errors Errors in owl lifecycle are wrapped outside dev mode:
 }"
 `;

+exports[`can catch errors Thrown values that are not errors are wrapped in dev mode 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
+exports[`can catch errors Thrown values that are not errors are wrapped outside dev mode 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].value);
+  }
+}"
+`;
+
 exports[`can catch errors an error in onWillDestroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -231,7 +268,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -286,7 +323,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -330,7 +367,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, __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -410,7 +447,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -467,7 +504,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+      b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    }
    return block1([], [b3]);
  }
@@ -616,7 +653,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -671,7 +708,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([txt1], [b3]);
  }
 }"
@@ -726,7 +763,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -783,7 +820,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, __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -894,7 +931,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
  
  function slot1(ctx, node, key = \\"\\") {
    const Comp1 = ctx['cp'].Comp;
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
  }
  
  return function template(ctx, node, key = \\"\\") {
@@ -903,9 +940,10 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`cp\`] = v_block1[i1];
      const key1 = ctx['cp'].id;
-      const v1 = ctx['cp'];
+      const v1 = ctx['this'];
+      const v2 = ctx['cp'];
      const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
+      c_block1[i1] = withKey(comp2({onError: ()=>v1.cleanUp(v2.id),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
  }
@@ -972,18 +1010,19 @@ exports[`can catch errors catching in child makes parent render 1`] = `
  
  function slot1(ctx, node, key = \\"\\") {
    const Comp1 = ctx['elem'][1];
-    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, (Comp1).name + key + \`__1\`, node, this, Comp1));
  }
  
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(ctx['this'].elements));;
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`elem\`] = v_block1[i1];
      const key1 = ctx['elem'][0];
-      const v1 = ctx['elem'];
+      const v1 = ctx['this'];
+      const v2 = ctx['elem'];
      const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
+      c_block1[i1] = withKey(comp2({onError: (_error)=>v1.onError(v2[0],_error),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
  }
@@ -1046,7 +1085,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, __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
    return block1([], [b2, b4]);
  }
 }"
@@ -1118,7 +1157,7 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
  return function template(ctx, node, key = \\"\\") {
    let b2,b3;
    if (!ctx['state'].error) {
-      b2 = text(this.will.crash);
+      b2 = text(ctx['this'].will.crash);
    } else {
      b3 = text(ctx['state'].error);
    }
@@ -1149,7 +1188,7 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
  return function template(ctx, node, key = \\"\\") {
    let b2,b3;
    if (!ctx['state'].error) {
-      b2 = text(this.will.crash);
+      b2 = text(ctx['this'].will.crash);
    } else {
      b3 = text(ctx['state'].error);
    }
@@ -1181,7 +1220,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
    return block1([txt1]);
  }
 }"
@@ -1195,7 +1234,7 @@ exports[`errors and promises a rendering error will reject the mount promise 1`]
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
    return block1([txt1]);
  }
 }"
@@ -1240,7 +1279,7 @@ exports[`errors and promises a rendering error will reject the render promise 1`
  return function template(ctx, node, key = \\"\\") {
    let b2;
    if (ctx['flag']) {
-      b2 = text(this.will.crash);
+      b2 = text(ctx['this'].will.crash);
    }
    return block1([], [b2]);
  }
@@ -58,6 +58,20 @@ 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
 ) {
@@ -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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__owl__.refs;
    const ref1 = (el) => refs[\`button\`] = el;
    let txt1 = ctx['value'];
    return block1([ref1, txt1]);
@@ -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, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -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);
+    ctx[\`abc\`] = new LazyValue(value1, ctx, this, node, key);
    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(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null);
+    return comp1({val: ctx['state'].val,fn: bind(this, 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(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null);
+    return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -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, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -673,13 +673,47 @@ 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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    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
 ) {
@@ -690,7 +724,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -721,7 +755,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -738,7 +772,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -755,7 +789,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, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -786,7 +820,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -807,6 +841,33 @@ exports[`props validation props are validated whenever component is updated 2`]
 }"
 `;

+exports[`props validation props validation does not cause additional subscription 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {obj: ctx['obj']};
+    helpers.validateProps(\`Child\`, props1, this);
+    const b2 = comp1(props1, key + \`__1\`, node, this, null);
+    const b3 = text(ctx['obj'].otherValue);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`props validation props validation does not cause additional subscription 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].obj.value);
+  }
+}"
+`;
+
 exports[`props validation props: list of strings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -817,7 +878,7 @@ exports[`props validation props: list of strings 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -834,7 +895,7 @@ exports[`props validation validate simple types 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -851,7 +912,7 @@ exports[`props validation validate simple types 2`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -881,7 +942,7 @@ exports[`props validation validate simple types 4`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -898,7 +959,7 @@ exports[`props validation validate simple types 5`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -915,7 +976,7 @@ exports[`props validation validate simple types 6`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -945,7 +1006,7 @@ exports[`props validation validate simple types 8`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -962,7 +1023,7 @@ exports[`props validation validate simple types 9`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -979,7 +1040,7 @@ exports[`props validation validate simple types 10`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1009,7 +1070,7 @@ exports[`props validation validate simple types 12`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1026,7 +1087,7 @@ exports[`props validation validate simple types 13`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1043,7 +1104,7 @@ exports[`props validation validate simple types 14`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1073,7 +1134,7 @@ exports[`props validation validate simple types 16`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1090,7 +1151,7 @@ exports[`props validation validate simple types 17`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1107,7 +1168,7 @@ exports[`props validation validate simple types 18`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1137,7 +1198,7 @@ exports[`props validation validate simple types 20`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1154,7 +1215,7 @@ exports[`props validation validate simple types 21`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1171,7 +1232,7 @@ exports[`props validation validate simple types 22`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1201,7 +1262,7 @@ exports[`props validation validate simple types 24`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1218,7 +1279,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1235,7 +1296,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1265,7 +1326,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1282,7 +1343,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1299,7 +1360,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1329,7 +1390,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1346,7 +1407,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1363,7 +1424,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1393,7 +1454,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1410,7 +1471,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1427,7 +1488,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1457,7 +1518,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1474,7 +1535,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1491,7 +1552,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1521,7 +1582,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1538,7 +1599,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1555,7 +1616,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1585,7 +1646,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, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -1602,7 +1663,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, ctx);
+    helpers.validateProps(\`SubComp\`, props1, this);
    const b2 = comp1(props1, key + \`__1\`, node, this, null);
    return block1([], [b2]);
  }
@@ -140,3 +140,39 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
  }
 }"
 `;
+
+exports[`subscriptions subscriptions returns the keys and targets observed by the component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].a);
+  }
+}"
+`;
+
+exports[`subscriptions subscriptions returns the keys observed by the component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['state'].a);
+    const b3 = comp1({state: ctx['state']}, key + \`__1\`, node, this, null);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`subscriptions subscriptions returns the keys observed by the component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].state.b);
+  }
+}"
+`;
@@ -8,7 +8,7 @@ exports[`refs basic use 1`] = `
  let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const refs = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__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 = ctx.__owl__.refs;
+    const refs = this.__owl__.refs;
    const ref1 = (el) => refs[\`myButton\`] = el;
    let hdlr1 = [ctx['doSomething'], ctx];
    return block2([hdlr1, ref1]);
@@ -79,7 +79,7 @@ exports[`refs refs are properly bound in slots 1`] = `
  return function template(ctx, node, key = \\"\\") {
    let txt1 = ctx['state'].val;
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __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 = ctx.__owl__.refs;
+    const refs = this.__owl__.refs;
    const ref1 = multiRefSetter(refs, \`coucou\`);
    const b2 = block2([ref1]);
    const b3 = block3([ref1]);
@@ -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);
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
    return block1([], [b3]);
  }
 }"
@@ -55,7 +55,7 @@ exports[`slots can define and call slots 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b4]);
  }
 }"
@@ -90,7 +90,7 @@ exports[`slots can define and call slots with bound params 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'abc': {__render: slot1, __ctx: ctx1, getValue: bind(ctx, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -130,7 +130,7 @@ exports[`slots can define and call slots with params 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    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);
+    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);
    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 = ctx.__owl__.refs;
+    const refs = this.__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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __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);
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
  }
 }"
 `;
@@ -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);
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
  }
 }"
 `;
@@ -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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -364,7 +364,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __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);
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
    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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __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);
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
    return block1([], [b3]);
  }
 }"
@@ -443,7 +443,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __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);
-    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2);
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2.bind(this));
    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, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __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, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -604,6 +604,64 @@ 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);
+    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
 ) {
@@ -628,7 +686,7 @@ exports[`slots dynamic t-slot call 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b6]);
  }
 }"
@@ -645,7 +703,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, slot1, true, {}));
+    const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {}));
    return block1([hdlr1], [b2]);
  }
 }"
@@ -675,7 +733,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b6]);
  }
 }"
@@ -695,7 +753,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, (ctx['current'].slot), true, {}, defaultContent1);
+    const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1.bind(this));
    return block1([hdlr1], [b3]);
  }
 }"
@@ -713,7 +771,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -726,7 +784,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, 'default', false, {});
+    const b3 = callSlot(ctx, node, key + \`__1\`, 'default', false, {});
    return multi([b2, b3]);
  }
 }"
@@ -808,7 +866,7 @@ 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);
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -894,7 +952,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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -934,7 +992,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b5 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -974,7 +1032,7 @@ exports[`slots multiple slots containing components 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp3({slots: markRaw({'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}})}, key + \`__3\`, node, this, null);
+    return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null);
  }
 }"
 `;
@@ -1028,7 +1086,7 @@ exports[`slots named slot inside slot 1`] = `
  
  function slot2(ctx, node, key = \\"\\") {
    const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
  }
  
  function slot3(ctx, node, key = \\"\\") {
@@ -1038,7 +1096,7 @@ exports[`slots named slot inside slot 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -1079,7 +1137,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
  
  function slot2(ctx, node, key = \\"\\") {
    const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
  }
  
  function slot3(ctx, node, key = \\"\\") {
@@ -1089,7 +1147,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -1139,7 +1197,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);
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
    return block1([], [b3]);
  }
 }"
@@ -1164,7 +1222,7 @@ exports[`slots named slots inside slot, again 1`] = `
  
  function slot2(ctx, node, key = \\"\\") {
    const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol2': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
  }
  
  function slot3(ctx, node, key = \\"\\") {
@@ -1174,7 +1232,7 @@ exports[`slots named slots inside slot, again 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b5]);
  }
 }"
@@ -1197,8 +1255,8 @@ exports[`slots named slots inside slot, again 2`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
-    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
+    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1.bind(this));
+    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2.bind(this));
    const b6 = callSlot(ctx, node, key, 'default', false, {});
    return block1([], [b3, b5, b6]);
  }
@@ -1217,7 +1275,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
  }
  
  function slot2(ctx, node, key = \\"\\") {
@@ -1225,7 +1283,7 @@ exports[`slots nested slots in same template 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
    return block1([], [b4]);
  }
 }"
@@ -1287,7 +1345,7 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -1304,7 +1362,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1377,7 +1435,7 @@ exports[`slots simple default slot 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1415,7 +1473,7 @@ exports[`slots simple default slot with params 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1447,7 +1505,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, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1459,7 +1517,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(ctx, ctx['getValue'])});
+    return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])});
  }
 }"
 `;
@@ -1476,7 +1534,7 @@ exports[`slots simple default slot, variation 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1512,7 +1570,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1527,7 +1585,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, slot1, true, {bool: ctx['state'].bool}));
+    const b2 = toggler(slot1, callSlot(ctx, node, key + \`__1\`, slot1, true, {bool: ctx['state'].bool}));
    return block1([], [b2]);
  }
 }"
@@ -1560,7 +1618,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);
+    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1.bind(this));
    return block1([], [b3]);
  }
 }"
@@ -1579,7 +1637,7 @@ exports[`slots simple named and empty slot 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1619,7 +1677,7 @@ exports[`slots simple slot with slot scope 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1655,7 +1713,7 @@ exports[`slots slot and (inline) t-call 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -1705,7 +1763,7 @@ exports[`slots slot and t-call 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -1753,7 +1811,7 @@ exports[`slots slot and t-esc 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -1791,7 +1849,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([hdlr1, txt1], [b3]);
  }
 }"
@@ -1839,7 +1897,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -1854,7 +1912,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, slot1, true, {}));
+    const b3 = toggler(slot1, callSlot(ctx, node, key + \`__2\`, slot1, true, {}));
    return multi([b2, b3]);
  }
 }"
@@ -1887,7 +1945,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -1934,13 +1992,14 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"var\\", 1);
-    let hdlr1 = [()=>this.inc(), ctx];
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.inc(), ctx];
    return block1([hdlr1]);
  }
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1975,7 +2034,7 @@ exports[`slots slot content is bound to caller 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -1995,6 +2054,118 @@ 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
 ) {
@@ -2010,7 +2181,7 @@ exports[`slots slot preserves properly parented relationship 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2055,7 +2226,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2116,7 +2287,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -2145,7 +2316,7 @@ exports[`slots slots and wrapper components 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -2189,13 +2360,14 @@ exports[`slots slots are properly bound to correct component 2`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"var\\", 1);
-    let hdlr1 = [()=>this.increment(), ctx];
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.increment(), ctx];
    let txt1 = ctx['state'].value;
    return block1([hdlr1, txt1]);
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
  }
 }"
 `;
@@ -2218,7 +2390,7 @@ exports[`slots slots are rendered with proper context 1`] = `
  return function template(ctx, node, key = \\"\\") {
    let txt1 = ctx['state'].val;
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([txt1], [b3]);
  }
 }"
@@ -2262,7 +2434,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
      ctx[\`user\`] = v_block2[i1];
      const key1 = ctx['user'].id;
      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);
+      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b7]), key1);
    }
    const b2 = list(c_block2);
@@ -2311,7 +2483,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
      const key1 = ctx['user'].id;
      setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name);
      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);
+      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
      c_block2[i1] = withKey(block3([], [b5]), key1);
    }
    const b2 = list(c_block2);
@@ -2354,7 +2526,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"userdescr\\", 'User '+ctx['state'].user.name);
    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);
+    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2396,7 +2568,7 @@ exports[`slots slots in slots, with vars 1`] = `
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"test\\", ctx['state'].name);
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2416,7 +2588,7 @@ exports[`slots slots in slots, with vars 2`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2458,7 +2630,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
      ctx[\`n_index\`] = i1;
      const key1 = ctx['n_index'];
      const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -2513,7 +2685,7 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
        ctx[\`node2\`] = v_block6[i2];
        const key2 = ctx['node2'].key;
        const ctx1 = capture(ctx);
-        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
+        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
      }
      ctx = ctx.__proto__;
      const b6 = list(c_block6);
@@ -2565,7 +2737,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
      const key1 = ctx['n_index'];
      setContextValue(ctx, \\"dummy\\", ctx['n_index']);
      const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -2605,7 +2777,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2644,7 +2816,7 @@ exports[`slots t-set t-value in a slot 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2665,6 +2837,36 @@ 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);
+    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
 ) {
@@ -2706,7 +2908,7 @@ exports[`slots t-slot in recursive templates 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
  }
 }"
 `;
@@ -2741,7 +2943,7 @@ exports[`slots t-slot nested within another slot 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2758,7 +2960,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, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
  
  function slot2(ctx, node, key = \\"\\") {
@@ -2766,7 +2968,7 @@ exports[`slots t-slot nested within another slot 2`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b4 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b4 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b4]);
  }
 }"
@@ -2829,7 +3031,7 @@ exports[`slots t-slot scope context 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -2850,7 +3052,7 @@ exports[`slots t-slot scope context 2`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -2884,7 +3086,7 @@ exports[`slots t-slot within dynamic t-call 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -2948,7 +3150,7 @@ exports[`slots template can just return a slot 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -363,7 +363,7 @@ exports[`style and class handling error in subcomponent with class 2`] = `
  
  return function template(ctx, node, key = \\"\\") {
    let attr1 = ctx['props'].class;
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
    return block1([attr1, txt1]);
  }
 }"
@@ -109,7 +109,8 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [()=>this.update(), ctx];
+    const v1 = ctx['this'];
+    let hdlr1 = [()=>v1.update(), ctx];
    return block1([hdlr1]);
  }
 }"
@@ -168,8 +169,9 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['a'];
-    let hdlr1 = [()=>this.update(v1), ctx];
+    const v1 = ctx['this'];
+    const v2 = ctx['a'];
+    let hdlr1 = [()=>v1.update(v2), ctx];
    return block1([hdlr1]);
  }
 }"
@@ -287,7 +289,7 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
    ctx[isBoundary] = 1
    let b2;
    if (ctx['level']<2) {
-      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
+      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(ctx['this']), ctx];
      let txt1 = ctx['level'];
      const b3 = block3([hdlr1, txt1]);
      ctx = Object.create(ctx);
@@ -444,6 +446,51 @@ 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
 ) {
@@ -469,3 +516,134 @@ 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>\`);
+  
+  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 = ctx['test'];
+    const b5 = block5([txt1]);
+    return multi([b4, b5]);
+  }
+  
+  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);
+    const b6 = comp1({prop: bind(this, ctx['method']),slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return multi([b2, b6]);
+  }
+}"
+`;
+
+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, {});
+  }
+}"
+`;
+
+exports[`t-call t-call-context: slots don't make component available again when context is captured 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`template\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let ctx1 = {};
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call-context: slots don't make component available again when context is captured 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(ctx['someValue']);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"dummy\\", 0);
+    const ctx1 = capture(ctx);
+    const props1 = {slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})};
+    helpers.validateProps(\`Child\`, props1, this);
+    return comp1(props1, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`t-call t-call-context: slots don't make component available again when context is captured 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, {});
+  }
+}"
+`;
+
+exports[`t-call t-call-context: this is not available inside t-call-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 = {};
+    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call t-call-context: this is not available inside t-call-context 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['this']);
+  }
+}"
+`;
@@ -10,7 +10,7 @@ exports[`t-component can switch between dynamic components without the need for
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['constructor'].components[ctx['state'].child];
-    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
    return block1([], [b2]);
  }
 }"
@@ -51,7 +51,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['state'].child;
    const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
  }
 }"
 `;
@@ -91,7 +91,7 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
  return function template(ctx, node, key = \\"\\") {
    const tKey_1 = ctx['state'].child;
    const Comp1 = ctx['myComponent'];
-    return toggler(tKey_1, toggler(Comp1, comp1({}, tKey_1 + key + \`__1\`, node, this, Comp1)));
+    return toggler(tKey_1, toggler(Comp1, comp1({}, (Comp1).name + tKey_1 + key + \`__1\`, node, this, Comp1)));
  }
 }"
 `;
@@ -132,7 +132,7 @@ exports[`t-component modifying a sub widget 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['Counter'];
-    const b2 = toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    const b2 = toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
    return block1([], [b2]);
  }
 }"
@@ -162,7 +162,7 @@ exports[`t-component switching dynamic component 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
  }
 }"
 `;
@@ -199,7 +199,7 @@ exports[`t-component t-component works in simple case 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const Comp1 = ctx['Child'];
-    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
  }
 }"
 `;
@@ -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(key1)) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(key1);
+      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, ctx);
+      helpers.validateProps(\`Child\`, props1, this);
      c_block1[i1] = withKey(comp1(props1, key + \`__1__\${key1}\`, node, this, null), key1);
    }
    return list(c_block1);
@@ -75,6 +75,42 @@ 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
 ) {
@@ -113,6 +149,58 @@ 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);
+    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
 ) {
@@ -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-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\" 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 hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([hdlr1, attr1, hdlr2]);
+    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    let hdlr2 = [ctx['onInput'], ctx];
+    return block1([attr1, hdlr1, 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-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>\`);
+  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>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [ctx['onClick'], ctx];
    const bExpr1 = ctx['state'];
    const expr1 = 'choice';
    let attr1 = bExpr1[expr1] === 'One';
-    let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr3 = [ctx['onClick'], ctx];
+    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    let hdlr2 = [ctx['onClick'], ctx];
    const bExpr2 = ctx['state'];
    const expr2 = 'choice';
    let attr2 = bExpr2[expr2] === 'Two';
-    let hdlr4 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-    let hdlr5 = [ctx['onClick'], ctx];
+    let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
+    let hdlr4 = [ctx['onClick'], ctx];
    const bExpr3 = ctx['state'];
    const expr3 = 'choice';
    let attr3 = bExpr3[expr3] === 'Three';
-    let hdlr6 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
-    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
+    let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
+    let hdlr6 = [ctx['onClick'], ctx];
+    return block1([attr1, hdlr1, hdlr2, attr2, hdlr3, hdlr4, attr3, hdlr5, hdlr6]);
  }
 }"
 `;
@@ -410,6 +410,25 @@ 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
 ) {
@@ -550,6 +569,36 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 }"
 `;

+exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, toNumber, withKey } = helpers;
+  
+  let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`);
+  let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-attribute-0=\\"value\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['getData'], ctx];
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`opt\`] = v_block2[i1];
+      const key1 = ctx['opt'];
+      let attr1 = new String((ctx['opt']) || \\"\\");
+      let attr2 = ctx['opt'];
+      const bExpr1 = ctx['state'];
+      const expr1 = 'group';
+      let attr3 = bExpr1[expr1] === ctx['opt'];
+      let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+      c_block2[i1] = withKey(block3([attr1, attr2, attr3, hdlr2]), key1);
+    }
+    const b2 = list(c_block2);
+    return block1([hdlr1], [b2]);
+  }
+}"
+`;
+
 exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -111,8 +111,9 @@ exports[`t-on t-on method call in t-foreach 1`] = `
      const key1 = ctx['val'];
      let txt1 = ctx['val_index'];
      let txt2 = ctx['val']+'';
-      const v1 = ctx['val'];
-      let hdlr1 = [()=>this.addVal(v1), ctx];
+      const v1 = ctx['this'];
+      const v2 = ctx['val'];
+      let hdlr1 = [()=>v1.addVal(v2), ctx];
      c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
    }
    const b2 = list(c_block2);
@@ -197,8 +198,9 @@ exports[`t-on t-on on components and t-foreach 1`] = `
    for (let i1 = 0; i1 < l_block1; i1++) {
      ctx[\`name\`] = v_block1[i1];
      const key1 = ctx['name'];
-      const v1 = ctx['name'];
-      const hdlr1 = [()=>this.log(v1), ctx];
+      const v1 = ctx['this'];
+      const v2 = ctx['name'];
+      const hdlr1 = [()=>v1.log(v2), ctx];
      c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
    }
    return list(c_block1);
@@ -293,8 +295,9 @@ exports[`t-on t-on on components, with a handler update 1`] = `
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    setContextValue(ctx, \\"name\\", ctx['state'].name);
-    const v1 = ctx['name'];
-    const hdlr1 = [()=>this.log(v1), ctx];
+    const v1 = ctx['this'];
+    const v2 = ctx['name'];
+    const hdlr1 = [()=>v1.log(v2), ctx];
    return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
  }
 }"
@@ -360,7 +363,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -393,7 +396,8 @@ exports[`t-on t-on on t-set-slots 1`] = `
  function slot1(ctx, node, key = \\"\\") {
    const b6 = block6();
    const b7 = block7();
-    const hdlr1 = [()=>this.state.count++, ctx];
+    const v1 = ctx['this'];
+    const hdlr1 = [()=>v1.state.count++, ctx];
    return catcher1(multi([b6, b7]), [hdlr1]);
  }
  
@@ -402,7 +406,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
    const b3 = text(ctx['state'].count);
    const b4 = text(\`] \`);
    const ctx1 = capture(ctx);
-    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
    return multi([b2, b3, b4, b8]);
  }
 }"
@@ -434,7 +438,7 @@ exports[`t-on t-on on t-slots 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -450,9 +454,52 @@ exports[`t-on t-on on t-slots 2`] = `
    const b2 = text(\` [\`);
    const b3 = text(ctx['state'].count);
    const b4 = text(\`] \`);
-    const hdlr1 = [()=>this.state.count++, ctx];
+    const v1 = ctx['this'];
+    const hdlr1 = [()=>v1.state.count++, ctx];
    const b5 = catcher1(callSlot(ctx, node, key, 'default', false, {}), [hdlr1]);
    return multi([b2, b3, b4, b5]);
  }
 }"
 `;
+
+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);
+  }
+}"
+`;
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components in t-out simple list 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, isBoundary, withDefault, LazyValue, safeOutput, withKey } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
+  
+  function value1(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`n\`] = v_block1[i1];
+      const key1 = ctx['n'];
+      ctx[\`blabla\`] = new LazyValue(value1, ctx, this, node, key1);
+      c_block1[i1] = withKey(safeOutput(ctx['blabla']), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`components in t-out simple list 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
@@ -22,7 +22,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
    setContextValue(ctx, \\"iter\\", 'source');
    let txt1 = ctx['iter'];
    const ctx1 = capture(ctx);
-    const b2 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b2 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
    const b3 = text(\` in slot \`);
    const b4 = safeOutput(ctx['v']);
    return multi([b3, b4]);
@@ -71,7 +71,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
    const b5 = text(\` tea \`);
    const b6 = safeOutput(ctx['v']);
    return multi([b5, b6]);
@@ -128,7 +128,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
  
  return function template(ctx, node, key = \\"\\") {
    const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
    return text(\` in slot \`);
  }
  
@@ -179,7 +179,7 @@ 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);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
    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);
+    ctx[\`v\`] = new LazyValue(value1, ctx, this, node, key);
    const b3 = safeOutput(ctx['v']);
    return block1([], [b3]);
  }
@@ -1,5 +1,12 @@
 import { App, Component, mount, status, toRaw, useState, xml } from "../../src";
-import { elem, makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import {
+  elem,
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
+} from "../helpers";
 import { markup } from "../../src/runtime/utils";

 let fixture: HTMLElement;
@@ -208,14 +215,14 @@ describe("basics", () => {
      static template = xml`<div/>`;
    }
    let error: Error;
-    const prom = mount(Test, fixture);
+    const app = new App(Test);
+    const prom = app.mount(fixture);
    await Promise.resolve();
    fixture.remove();
-    try {
-      await prom;
-    } catch (e) {
-      error = e as Error;
-    }
+    prom.catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Cannot mount a component on a detached dom node"
+    );
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Cannot mount a component on a detached dom node");
    expect(console.warn).toBeCalledTimes(1);
@@ -1,6 +1,7 @@
 import {
  App,
  Component,
+  ComponentConstructor,
  mount,
  onMounted,
  onRendered,
@@ -4067,6 +4068,64 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
  expect(fixture.innerHTML).toBe("ABD<p>2</p>");
 });

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

@@ -1,4 +1,4 @@
-import { Component, mount, onWillDestroy } from "../../src";
+import { App, Component, mount, onWillDestroy } from "../../src";
 import {
  onError,
  onMounted,
@@ -18,6 +18,7 @@ import {
  nextMicroTick,
  snapshotEverything,
  useLogLifecycle,
+  nextAppError,
 } from "../helpers";
 import { OwlError } from "../../src/runtime/error_handling";

@@ -59,9 +60,10 @@ describe("basics", () => {
    parent.state.flag = true;

    parent.render();
-    await nextTick();
+    await expect(nextAppError(parent.__owl__.app)).resolves.toThrow(
+      "An error occured in the owl lifecycle"
+    );
    expect(fixture.innerHTML).toBe("");
-    expect(mockConsoleError).toBeCalledTimes(1);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });

@@ -71,12 +73,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
+    const app = new App(Parent);
    let error: Error;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      'Cannot find the definition of component "SomeMispelledComponent"'
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -90,12 +93,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
+    const app = new App(Parent, { test: true });
    let error: Error;
-    try {
-      await mount(Parent, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      'Cannot find the definition of component "SomeMispelledComponent"'
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -109,19 +113,36 @@ describe("basics", () => {
      static template = xml`<SomeComponent />`;
      static components = { SomeComponent: notAComponentConstructor };
    }
+    const app = new App(Parent as typeof Component);
    let error: Error;
-    try {
-      // @ts-expect-error
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      '"SomeComponent" is not a Component. It must inherit from the Component class'
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      '"SomeComponent" is not a Component. It must inherit from the Component class'
    );
  });

+  test("display a nice error if the components key is missing with subcomponents", async () => {
+    class Parent extends Component {
+      static template = xml`<div><MissingChild /></div>`;
+    }
+    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'
+    );
+  });
+
  test("simple catchError", async () => {
    class Boom extends Component {
      static template = xml`<div t-esc="a.b.c"/>`;
@@ -156,16 +177,15 @@ describe("basics", () => {
 describe("errors and promises", () => {
  test("a rendering error will reject the mount promise", async () => {
    // we do not catch error in willPatch anymore
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
    }

+    const app = new App(Root);
    let error: OwlError;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as OwlError;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
@@ -176,7 +196,7 @@ describe("errors and promises", () => {
  });

  test("an error in mounted call will reject the mount promise", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onMounted(() => {
@@ -185,12 +205,11 @@ describe("errors and promises", () => {
      }
    }

+    const app = new App(Root);
    let error: OwlError;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as OwlError;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    expect(error!.cause.message).toBe("boom");
@@ -200,7 +219,7 @@ describe("errors and promises", () => {
  });

  test("an error in onMounted callback will have the component's setup in its stack trace", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onMounted(() => {
@@ -209,14 +228,13 @@ describe("errors and promises", () => {
      }
    }

-    let error: Error;
-    try {
-      await mount(App, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await mountProm;
    expect(error!).toBeDefined();
-    expect(error!.stack).toContain("App.setup");
+    expect(error!.stack).toContain("Root.setup");
    expect(error!.stack).toContain("error_handling.test.ts");
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(0);
@@ -224,7 +242,7 @@ describe("errors and promises", () => {
  });

  test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
-    class App extends Component {
+    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onWillRender(() => {
@@ -236,12 +254,11 @@ describe("errors and promises", () => {
      }
    }

-    let error: Error;
-    try {
-      await mount(App, fixture, { test: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -278,12 +295,11 @@ describe("errors and promises", () => {
      }
    }

-    let error: any;
-    try {
-      await mount(Root, fixture, { test: true });
-    } catch (e) {
-      error = e;
-    }
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      `The following error occurred in onWillStart: "boom in onWillStart"`
@@ -342,17 +358,16 @@ describe("errors and promises", () => {
    class Child extends Component {
      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
    }
-    class App extends Component {
+    class Parent extends Component {
      static template = xml`<div><Child/></div>`;
      static components = { Child };
    }

+    const app = new App(Parent);
    let error: OwlError;
-    try {
-      await mount(App, fixture);
-    } catch (e) {
-      error = e as OwlError;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
@@ -394,12 +409,11 @@ describe("errors and promises", () => {
      static components = { Child };
    }

+    const app = new App(Parent);
    let error: OwlError;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as OwlError;
-    }
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
@@ -425,13 +439,12 @@ describe("errors and promises", () => {
      }
    }

-    try {
-      await mount(Example, fixture, { test: true });
-    } catch (e) {
-      expect((e as Error).message).toBe(
-        `The following error occurred in onMounted: "Error in mounted"`
-      );
-    }
+    const app = new App(Example, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await mountProm;
+    expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
    // 1 additional error is logged because the destruction of the app causes
    // the onWillUnmount hook to be called and to fail
    expect(mockConsoleError).toBeCalledTimes(1);
@@ -448,9 +461,10 @@ describe("errors and promises", () => {

    root.state = "boom";
    root.render();
-    await nextTick();
+    await expect(nextAppError(root.__owl__.app)).resolves.toThrow(
+      "error occured in the owl lifecycle"
+    );
    expect(fixture.innerHTML).toBe("");
-    expect(mockConsoleError).toBeCalledTimes(1);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
 });
@@ -500,18 +514,17 @@ describe("can catch errors", () => {
        });
      }
    }
-    let e: Error;
-    try {
-      await mount(Root, fixture, { test: true });
-    } catch (error) {
-      e = error as Error;
-    }
-    expect(e!.message).toBe(
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await app.mount(fixture).catch((e: Error) => (error = e));
+    await crashProm;
+    expect(error!.message).toBe(
      `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
    );
  });

-  test("Errors in owl lifecycle are wrapped in dev mode: sync hook", async () => {
+  test("Errors have the right cause", async () => {
    const err = new Error("test error");
    class Root extends Component {
      static template = xml`<t t-esc="state.value"/>`;
@@ -523,14 +536,13 @@ describe("can catch errors", () => {
        });
      }
    }
-    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);
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await mountProm;
+    expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
+    expect(error!.cause).toBe(err);
  });

  test("Errors in owl lifecycle are wrapped in dev mode: async hook", async () => {
@@ -546,14 +558,13 @@ describe("can catch errors", () => {
        });
      }
    }
-    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);
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await mountProm;
+    expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
+    expect(error!.cause).toBe(err);
  });

  test("Errors in owl lifecycle are wrapped outside dev mode: sync hook", async () => {
@@ -568,14 +579,15 @@ describe("can catch errors", () => {
        });
      }
    }
-    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");
-    expect(e!.cause).toBe(err);
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe(err);
  });

  test("Errors in owl lifecycle are wrapped out of dev mode: async hook", async () => {
@@ -591,14 +603,59 @@ describe("can catch errors", () => {
        });
      }
    }
-    let e: OwlError;
-    try {
-      await mount(Root, fixture);
-    } catch (error) {
-      e = error as OwlError;
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe(err);
+  });
+
+  test("Thrown values that are not errors are wrapped in dev mode", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw "This is not an error";
+        });
+      }
    }
-    expect(e!.message).toBe("An error occured in the owl lifecycle");
-    expect(e!.cause).toBe(err);
+    const app = new App(Root, { test: true });
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
+    await mountProm;
+    expect(error!.message).toBe(
+      `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe("This is not an error");
+  });
+
+  test("Thrown values that are not errors are wrapped outside dev mode", async () => {
+    class Root extends Component {
+      static template = xml`<t t-esc="state.value"/>`;
+      state = useState({ value: 1 });
+
+      setup() {
+        onMounted(() => {
+          throw "This is not an error";
+        });
+      }
+    }
+    const app = new App(Root);
+    let error: OwlError;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!.message).toBe(
+      `An error occured in the owl lifecycle (see this Error's "cause" property)`
+    );
+    expect(error!.cause).toBe("This is not an error");
  });

  test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
@@ -171,4 +171,22 @@ describe("event handling", () => {
    // input is removed when component is destroyed => nothing should happen
    expect([]).toBeLogged();
  });
+
+  test("handler works when app is mounted in an iframe", async () => {
+    let clickCount = 0;
+
+    class Parent extends Component {
+      static template = xml`<span t-on-click="inc">click me</span>`;
+      inc() {
+        clickCount++;
+      }
+    }
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const iframeDoc = iframe.contentDocument!;
+    await mount(Parent, iframeDoc.body);
+    expect(clickCount).toBe(0);
+    iframeDoc.querySelector("span")!.click();
+    expect(clickCount).toBe(1);
+  });
 });
@@ -17,8 +17,16 @@ import {
  useChildSubEnv,
  useSubEnv,
  xml,
+  OwlError,
 } from "../../src/index";
-import { elem, logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import {
+  elem,
+  logStep,
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+} from "../helpers";

 let fixture: HTMLElement;

@@ -650,11 +658,12 @@ describe("hooks", () => {
        }
      }

-      try {
-        await mount(MyComponent, fixture);
-      } catch (e: any) {
-        expect(e.cause.message).toBe("Intentional error");
-      }
+      let error: OwlError;
+      const app = new App(MyComponent);
+      const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+      await mountProm;
+      expect(error!.cause.message).toBe("Intentional error");
      // no console.error because the error has been caught in this test
      expect(console.error).toHaveBeenCalledTimes(0);
      console.error = originalconsoleError;
@@ -1,6 +1,6 @@
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount } from "../../src";
-import { DEV_MSG } from "../../src/runtime/app";
+import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { Component, onError, xml, mount, OwlError, useState } from "../../src";
+import { App, DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";

@@ -48,13 +48,14 @@ describe("props validation", () => {
      static components = { SubComp };
      static template = xml`<div><SubComp /></div>`;
    }
-    let error: Error | undefined;

-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    let error: OwlError | undefined;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Invalid props for component 'SubComp': 'message' is missing"
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
    error = undefined;
@@ -77,12 +78,13 @@ describe("props validation", () => {
      static template = xml`<div><SubComp /></div>`;
    }

-    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    let error: OwlError | undefined;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Invalid props for component 'SubComp': 'message' is missing"
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'message' is missing");
  });
@@ -126,14 +128,12 @@ describe("props validation", () => {
      };
      (Parent as any).components = { SubComp };

-      let error: Error | undefined;
      props = {};
-
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      let app = new App(Parent, { test: true });
+      let error: OwlError | undefined;
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -147,11 +147,10 @@ describe("props validation", () => {
      }
      expect(error!).toBeUndefined();
      props = { p: test.ko };
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      app = new App(Parent, { test: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -181,13 +180,12 @@ describe("props validation", () => {
        static template = xml`<div>hey</div>`;
      };
      (Parent as any).components = { SubComp };
-      let error: Error | undefined;
      props = {};
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      let app = new App(Parent, { test: true });
+      let error: OwlError | undefined;
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is undefined (should be a ${test.type.name.toLowerCase()})`
@@ -201,11 +199,10 @@ describe("props validation", () => {
      }
      expect(error!).toBeUndefined();
      props = { p: test.ko };
-      try {
-        await mount(Parent, fixture, { dev: true });
-      } catch (e) {
-        error = e as Error;
-      }
+      app = new App(Parent, { test: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await mountProm;
      expect(error!).toBeDefined();
      expect(error!.message).toBe(
        `Invalid props for component '_a': 'p' is not a ${test.type.name.toLowerCase()}`
@@ -227,26 +224,25 @@ describe("props validation", () => {
    }
    let error: Error;
    let props: { p?: any };
+    props = { p: "string" };
    try {
-      props = { p: "string" };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
+    props = { p: true };
    try {
-      props = { p: true };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: 1 };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: 1 };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' is not a string or boolean"
@@ -267,26 +263,25 @@ describe("props validation", () => {
    }
    let error: Error;
    let props: { p?: any };
+    props = { p: "key" };
    try {
-      props = { p: "key" };
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
+    props = {};
    try {
-      props = {};
      await mount(Parent, fixture, { dev: true });
    } catch (e) {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: 1 };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: 1 };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is not a string");
  });
@@ -319,20 +314,18 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: [1] };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: [1] };
+    let app = new App(Parent, { test: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    error = undefined;
-    try {
-      props = { p: ["string", 1] };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    app = new App(Parent, { test: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
+    expect(error!).toBeDefined();
  });

  test("can validate an array with multiple sub element types", async () => {
@@ -370,12 +363,11 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: [true, 1] };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: [true, 1] };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p[1]' is not a string or boolean"
@@ -405,33 +397,30 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: { id: 1, url: "url", extra: true } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: 1, url: "url", extra: true } };
+    let app = new App(Parent, { test: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape (unknown key 'extra')"
    );
-    try {
-      props = { p: { id: "1", url: "url" } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: "1", url: "url" } };
+    app = new App(Parent, { test: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('id' is not a number)"
    );
    error = undefined;
-    try {
-      props = { p: { id: 1 } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: 1 } };
+    app = new App(Parent, { test: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is missing (should be a string))"
@@ -474,12 +463,11 @@ describe("props validation", () => {
      error = e as Error;
    }
    expect(error!).toBeUndefined();
-    try {
-      props = { p: { id: 1, url: [12, true] } };
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    props = { p: { id: 1, url: [12, true] } };
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'SubComp': 'p' has not the correct shape ('url' is not a boolean or list of numbers)"
@@ -686,15 +674,37 @@ describe("props validation", () => {
      static components = { SubComp };
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
  });

+  test("props validation does not cause additional subscription", async () => {
+    let obj = {
+      value: 1,
+      otherValue: 2,
+    };
+    class Child extends Component {
+      static props = {
+        obj: { type: Object, shape: { value: Number, otherValue: Number } },
+      };
+      static template = xml`<t t-esc="props.obj.value"/>`;
+    }
+    class Parent extends Component {
+      static template = xml`<Child obj="obj"/><t t-esc="obj.otherValue"/>`;
+      static components = { Child };
+
+      obj = useState(obj);
+    }
+    const app = new App(Parent, { test: true });
+    await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("12");
+    expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
+  });
+
  test("props are validated whenever component is updated", async () => {
    let error: Error;
    class SubComp extends Component {
@@ -754,11 +764,10 @@ describe("props validation", () => {
      static template = xml`<div><Child/></div>`;
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'Child': 'mandatory' is missing (should be a number)"
@@ -794,6 +803,32 @@ describe("props validation", () => {
    // we just check that it doesn't throw
    await expect(mount(Parent, fixture, { dev: true })).resolves.toEqual(expect.anything());
  });
+
+  test("can validate through slots", async () => {
+    class Child extends Component {
+      static props = ["message"];
+      static template = xml`<div>hey</div>`;
+    }
+
+    class Wrapper extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Wrapper };
+      static template = xml`<Wrapper><Child /></Wrapper>`;
+    }
+
+    const app = new App(Parent, { test: true });
+    let error: OwlError | undefined;
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "Invalid props for component 'Child': 'message' is missing"
+    );
+    await mountProm;
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe("Invalid props for component 'Child': 'message' is missing");
+  });
 });

 //------------------------------------------------------------------------------
@@ -859,11 +894,12 @@ describe("default props", () => {
      static template = xml`<Child/>`;
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow(
+      "default value cannot be defined for a mandatory prop"
+    );
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "A default value cannot be defined for a mandatory prop (name: 'mandatory', component: Child)"
@@ -7,6 +7,7 @@ import {
  onWillUnmount,
  useState,
  xml,
+  toRaw,
 } from "../../src";
 import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";

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

 snapshotEverything();
 let fixture: HTMLElement;
@@ -94,9 +93,14 @@ describe("refs", () => {
      ref = useRef("coucou");
    }

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

 snapshotEverything();
 let originalconsoleWarn = console.warn;
@@ -45,6 +45,23 @@ 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 {
@@ -204,13 +221,12 @@ describe("slots", () => {
      static components = { Child };
    }

-    let error = null;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).not.toBeNull();
+    let error: Error;
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
+    expect(error!).not.toBeNull();
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });

@@ -1819,4 +1835,102 @@ describe("slots", () => {
    await nextTick();
    expect(fixture.innerHTML).toBe("<button>inc</button>[B][C][A][sub1] [sub2334]");
  });
+
+  test("slot in multiple locations", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Slotter extends Component {
+      static components = { Child };
+      static template = xml`
+          <t t-if="props.location === 1">
+            <p><t t-slot="default"/></p>
+          </t>
+          <t t-if="props.location === 2">
+            <t t-slot="default"/>
+          </t>
+      `;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Slotter };
+      static template = xml`
+         <Slotter location="state.location">
+          hello <Child/>
+         </Slotter>`;
+      state = useState({ location: 1 });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<p> hello <div>child</div></p>");
+    parent.state.location = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe(" hello <div>child</div>");
+  });
+
+  test("dynamic slot in multiple locations", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Slotter extends Component {
+      static components = { Child };
+      static template = xml`
+          <t t-if="props.location === 1">
+            <p><t t-slot="{{'coffee'}}"/></p>
+          </t>
+          <t t-if="props.location === 2">
+            <t t-slot="{{'coffee'}}"/>
+          </t>
+      `;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Slotter };
+      static template = xml`
+         <Slotter location="state.location">
+          <t t-set-slot="coffee">hello <Child/></t>
+         </Slotter>`;
+      state = useState({ location: 1 });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<p>hello <div>child</div></p>");
+    parent.state.location = 2;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("hello <div>child</div>");
+  });
+
+  test("slot in t-foreach locations", async () => {
+    class Child extends Component {
+      static template = xml`<div>child</div>`;
+    }
+
+    class Slotter extends Component {
+      static components = { Child };
+      static template = xml`
+          <t t-foreach="props.list" t-as="elem" t-key="elem_index">
+            <p><t t-esc="elem"/><t t-slot="default"/></p>
+          </t>
+      `;
+    }
+
+    class Parent extends Component {
+      static components = { Child, Slotter };
+      static template = xml`
+         <Slotter list="state.list">
+          hello <Child/>
+         </Slotter>`;
+      state = useState({ list: [1] });
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<p>1 hello <div>child</div></p>");
+    parent.state.list.push(2);
+    await nextTick();
+    expect(fixture.innerHTML).toBe(
+      "<p>1 hello <div>child</div></p><p>2 hello <div>child</div></p>"
+    );
+  });
 });
@@ -1,6 +1,6 @@
 import { OwlError } from "../../src/runtime/error_handling";
-import { Component, mount, onMounted, useState, xml } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { App, Component, mount, onMounted, useState, xml } from "../../src";
+import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";

 snapshotEverything();
 let fixture: HTMLElement;
@@ -343,16 +343,15 @@ describe("style and class handling", () => {
    class Child extends Component {
      static template = xml`<div t-att-class="props.class" t-esc="this.will.crash"/>`;
    }
-    class ParentWidget extends Component {
+    class Parent extends Component {
      static template = xml`<Child class="'a'"/>`;
      static components = { Child };
    }
    let error: OwlError;
-    try {
-      await mount(ParentWidget, fixture);
-    } catch (e) {
-      error = e as OwlError;
-    }
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
@@ -287,4 +287,115 @@ 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("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="test"/>
+            </Child>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe(
+      "<div>outside slot</div><div>I'm the default slot</div><div>3</div>"
+    );
+    expect(Object.keys(child.__owl__.refs)).toEqual([]);
+    expect(Object.keys(root.__owl__.refs)).toEqual(["myRef", "myRef2"]);
+  });
+
+  test("t-call-context: slots don't make component available again when context is captured", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Root extends Component {
+      static template = xml`<t t-call="template" t-call-context="{}"/>`;
+      static components = { Child };
+      someValue = "Hello";
+    }
+
+    await mount(Root, fixture, {
+      test: true,
+      templates: `
+        <templates>
+          <t t-name="template">
+            <t t-set="dummy" t-value="0"/>
+            <Child>
+              <t t-esc="someValue"/>
+            </Child>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("");
+  });
+
+  test("t-call-context: this is not available inside t-call-context", async () => {
+    class Root extends Component {
+      static template = xml`<t t-call="someTemplate" t-call-context="{}"/>`;
+    }
+
+    await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="someTemplate">
+            <t t-esc="this"/>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("");
+  });
 });
@@ -1,5 +1,11 @@
-import { Component, mount, onMounted, useState, xml } from "../../src/index";
-import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
+import { App, Component, mount, onMounted, useState, xml } from "../../src/index";
+import {
+  makeTestFixture,
+  nextAppError,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
+} from "../helpers";

 snapshotEverything();

@@ -315,10 +321,73 @@ describe("list of components", () => {
      `;
      static components = { Child };
    }
-    await expect(async () => {
-      await mount(Parent, fixture, { dev: true });
-    }).rejects.toThrowError("Got duplicate key in t-foreach: child");
+
+    const app = new App(Parent, { test: true });
+    const mountProm = expect(app.mount(fixture)).rejects.toThrow(
+      "Got duplicate key in t-foreach: child"
+    );
+    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-foreach: child");
+    await mountProm;
    console.info = consoleInfo;
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
+
+  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");
+  });
 });
@@ -625,4 +625,54 @@ 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");
+  });
+
+  test("t-model with radio button group in t-foreach", async () => {
+    expect.assertions(6);
+    const steps: string[] = [];
+    class SomeComponent extends Component {
+      static template = xml`
+        <div t-on-click="getData" id="get_data">
+          <t t-foreach="options" t-as="opt" t-key="opt">
+            <input type="radio" name="radio_group" t-model="state.group" t-att-value="opt" t-att-id="opt"/>
+          </t>
+        </div>
+      `;
+      state = useState({ group: "scotty" });
+      options = ["beam", "scotty"];
+
+      getData() {
+        steps.push(`group: ${this.state.group}`);
+      }
+    }
+    await mount(SomeComponent, fixture);
+    const divEl = fixture.querySelector("#get_data") as HTMLElement;
+    expect(fixture.querySelector("input:checked")!.getAttribute("id")).toBe("scotty");
+    divEl.click();
+    expect(steps).toEqual(["group: scotty"]);
+    fixture.querySelector("input")!.click();
+    expect(steps).toEqual(["group: scotty", "group: beam"]);
+    await nextTick();
+    expect(fixture.querySelector("input:checked")!.getAttribute("id")).toBe("beam");
+    divEl.click();
+    expect(steps).toEqual(["group: scotty", "group: beam", "group: beam"]);
+  });
 });
@@ -41,6 +41,30 @@ 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`
@@ -0,0 +1,36 @@
+import { Component, mount, xml } from "../../src/index";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+snapshotEverything();
+
+// -----------------------------------------------------------------------------
+// t-out
+// -----------------------------------------------------------------------------
+
+describe("components in t-out", () => {
+  let fixture: HTMLElement;
+
+  beforeEach(() => {
+    fixture = makeTestFixture();
+  });
+
+  test("simple list", async () => {
+    class Child extends Component {
+      static template = xml`child`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+                <t t-foreach="[1,2]" t-as="n" t-key="n">
+                  <t t-set="blabla">
+                    <Child />
+                  </t>
+                  <t t-out="blabla"/>
+                </t>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("childchild");
+  });
+});
@@ -96,7 +96,7 @@ export function renderToBdom(template: string, context: any = {}, node?: any): B
    createComponent() {},
    createDynamicComponent() {},
  };
-  return fn(app as any, blockDom, helpers)(context, node);
+  return fn(app as any, blockDom, helpers).call(context, context, node);
 }

 export function renderToString(template: string, context: any = {}, node?: any): string {
@@ -261,6 +261,20 @@ expect.extend({
  },
 });

+export function nextAppError(app: any) {
+  const { handleError } = app;
+  return new Promise((resolve) => {
+    app.handleError = (...args: Parameters<typeof handleError>) => {
+      try {
+        handleError.call(app, ...args);
+      } catch (e: any) {
+        app.handleError = handleError;
+        resolve(e);
+      }
+    };
+  });
+}
+
 declare global {
  namespace jest {
    interface Matchers<R> {
@@ -21,7 +21,7 @@ exports[`Portal Add and remove portals 1`] = `
      ctx[\`portalId\`] = v_block1[i1];
      const key1 = ctx['portalId'];
      const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
    }
    return list(c_block1);
  }
@@ -50,7 +50,7 @@ exports[`Portal Add and remove portals on div 1`] = `
      ctx[\`portalId\`] = v_block1[i1];
      const key1 = ctx['portalId'];
      const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
    }
    return list(c_block1);
  }
@@ -81,7 +81,7 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
      const key1 = ctx['portalId'];
      let txt1 = ctx['portalId'];
      const ctx1 = capture(ctx);
-      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
      c_block1[i1] = withKey(block2([txt1], [b6]), key1);
    }
    return list(c_block1);
@@ -113,7 +113,7 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
      const key1 = ctx['portalId'];
      let txt1 = ctx['portalId'];
      const ctx1 = capture(ctx);
-      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
      c_block1[i1] = withKey(block2([txt1], [b6]), key1);
    }
    return list(c_block1);
@@ -146,7 +146,7 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
      const key1 = ctx['portalId'];
      let txt1 = ctx['portalId'];
      const ctx1 = capture(ctx);
-      const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
      c_block2[i1] = withKey(block3([txt1], [b7]), key1);
    }
    const b2 = list(c_block2);
@@ -155,6 +155,44 @@ 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
 ) {
@@ -170,7 +208,7 @@ exports[`Portal Portal composed with t-slot 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
    return block1([], [b3]);
  }
 }"
@@ -189,7 +227,7 @@ exports[`Portal Portal composed with t-slot 2`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    return comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    return comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
  }
 }"
 `;
@@ -223,7 +261,7 @@ exports[`Portal basic use of portal 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -244,7 +282,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -265,7 +303,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -286,7 +324,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -310,7 +348,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, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+      b4 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
    }
    return multi([b2, b4]);
  }
@@ -349,7 +387,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+      b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    }
    return multi([b2, b4]);
  }
@@ -394,7 +432,7 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
      ctx[\`elem\`] = v_block2[i1];
      const key1 = ctx['elem'];
      const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
    }
    const b2 = list(c_block2);
    return block1([], [b2]);
@@ -444,7 +482,7 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
      ctx[\`elem\`] = v_block3[i1];
      const key1 = ctx['elem'];
      const ctx1 = capture(ctx);
-      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
    }
    const b3 = list(c_block3);
    return multi([b2, b3]);
@@ -469,7 +507,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+      const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
      b2 = block2([], [b4]);
    }
    return multi([b2]);
@@ -494,7 +532,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, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+      b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
    }
    return block1([], [b3]);
  }
@@ -515,6 +553,44 @@ 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
 ) {
@@ -535,7 +611,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b4]);
  }
 }"
@@ -556,7 +632,7 @@ exports[`Portal portal destroys on crash 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -570,7 +646,7 @@ exports[`Portal portal destroys on crash 2`] = `
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
  
  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].error&&this.will.crash;
+    let txt1 = ctx['props'].error&&ctx['this'].will.crash;
    return block1([txt1]);
  }
 }"
@@ -591,7 +667,7 @@ exports[`Portal portal with child and props 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -634,7 +710,7 @@ exports[`Portal portal with dynamic body 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b5]);
  }
 }"
@@ -658,7 +734,7 @@ exports[`Portal portal with many children 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b5]);
  }
 }"
@@ -682,7 +758,7 @@ exports[`Portal portal with no content 1`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b4]);
  }
 }"
@@ -702,7 +778,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -723,7 +799,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -744,7 +820,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, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -799,7 +875,7 @@ exports[`Portal simple catchError with portal 2`] = `
  }
  
  return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -820,7 +896,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -841,7 +917,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -862,7 +938,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: ' ',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -883,7 +959,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, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -904,7 +980,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, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
    return block1([], [b3]);
  }
 }"
@@ -12,7 +12,7 @@ import {
 } from "../../src";
 import { xml } from "../../src/";
 import { DEV_MSG } from "../../src/runtime/app";
-import { elem, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { elem, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";

 let fixture: HTMLElement;
 let originalconsoleWarn = console.warn;
@@ -269,15 +269,14 @@ describe("Portal", () => {
    }

    let error: Error;
-    try {
-      await mount(Parent, fixture);
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
+    await mountProm;

    expect(error!).toBeDefined();
    expect(error!.message).toBe("invalid portal target");
-    expect(fixture.innerHTML).toBe(`<div></div>`);
+    expect(fixture.innerHTML).toBe(``);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });

@@ -875,6 +874,48 @@ describe("Portal", () => {
    await nextTick();
    expect(fixture.innerHTML).toBe('<div id="outside"></div><div></div>');
  });
+
+  test("Child and Portal", async () => {
+    class Child extends Component {
+      static template = xml`
+        <span>child</span>
+        <t t-portal="'.portal'"><span>portal</span></t>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <t>
+          <Child/>
+          <div class="portal"></div>
+        </t>`;
+
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(
+      '<span>child</span><div class="portal"><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", () => {
@@ -960,11 +1001,10 @@ describe("Portal: Props validation", () => {
        </div>`;
    }
    let error: OwlError;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as OwlError;
-    }
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    expect(error!.cause.message).toBe(`' ' is not a valid selector`);
@@ -980,11 +1020,10 @@ describe("Portal: Props validation", () => {
        </div>`;
    }
    let error: Error;
-    try {
-      await mount(Parent, fixture, { dev: true });
-    } catch (e) {
-      error = e as Error;
-    }
+    const app = new App(Parent);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
+    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe(`invalid portal target`);
  });
@@ -9,7 +9,7 @@ import {
  markRaw,
  toRaw,
 } from "../src";
-import { reactive, Reactive } from "../src/runtime/reactivity";
+import { reactive, getSubscriptions } from "../src/runtime/reactivity";
 import { batched } from "../src/runtime/utils";
 import {
  makeDeferred,
@@ -1020,6 +1020,32 @@ describe("Reactivity", () => {
    expect(n3).toBe(2);
  });

+  test("reactive inside other: reading the inner reactive from outer doesn't affect the inner's subscriptions", async () => {
+    const getObservedKeys = (obj: any) => getSubscriptions(obj).flatMap(({ keys }) => keys);
+    let n1 = 0;
+    let n2 = 0;
+    const innerCb = () => n1++;
+    const outerCb = () => n2++;
+    const inner = createReactive({ a: 1 }, innerCb);
+    const outer = createReactive({ b: inner }, outerCb);
+    expect(n1).toBe(0);
+    expect(n2).toBe(0);
+    expect(getObservedKeys(innerCb)).toEqual([]);
+    expect(getObservedKeys(outerCb)).toEqual([]);
+
+    outer.b.a;
+    expect(getObservedKeys(innerCb)).toEqual([]);
+    expect(getObservedKeys(outerCb)).toEqual(["b", "a"]);
+    expect(n1).toBe(0);
+    expect(n2).toBe(0);
+
+    outer.b.a = 2;
+    expect(getObservedKeys(innerCb)).toEqual([]);
+    expect(getObservedKeys(outerCb)).toEqual([]);
+    expect(n1).toBe(0);
+    expect(n2).toBe(1);
+  });
+
  // test("notification is not done after unregistration", async () => {
  //   let n = 0;
  //   const observer = () => n++;
@@ -1142,6 +1168,46 @@ 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", () => {
@@ -1699,12 +1765,12 @@ describe("toRaw", () => {
    const obj = { value: 1 };
    const reactiveObj = reactive(obj);
    expect(reactiveObj).not.toBe(obj);
-    expect(toRaw(reactiveObj as Reactive<typeof obj>)).toBe(obj);
+    expect(toRaw(reactiveObj)).toBe(obj);
  });

  test("giving a non reactive to toRaw return the object itself", () => {
    const obj = { value: 1 };
-    expect(toRaw(obj as Reactive<typeof obj>)).toBe(obj);
+    expect(toRaw(obj)).toBe(obj);
  });
 });

@@ -48,7 +48,7 @@ function writeToFile(filepath, data) {
 }

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

 function slugify(str) {
@@ -47,6 +47,18 @@ async function startRelease() {
  let file = await ask(`Release notes (${REL_NOTES_FILE}): `);
  file = file || REL_NOTES_FILE;
  let content;
+  if (!fs.existsSync(`./${file}`)) {
+    let lastRelease = await getOutput("git log --grep='\\[REL\\]' -n 1 --pretty=%H");
+    const commitsSinceLastRelease = await getOutput(`git log ${lastRelease.trim()}..HEAD --pretty=%s`);
+    const commitsAsMdList = commitsSinceLastRelease.trim().split("\n").map(l => " - " + l).join("\n");
+    log(`${file} did not exist, created a template containing all commits since last release.`)
+    fs.writeFileSync(file, `# v${next}\n\n${commitsAsMdList}`);
+    const shouldContinue = await ask(`Check that the contents of ${file} is correct, then press y to continue: `);
+    if (shouldContinue.toLowerCase() !== "y") {
+      log("aborted");
+      return;
+    }
+  }
  try {
    content = await readFile("./" + file);
  } catch (e) {
@@ -72,10 +84,8 @@ async function startRelease() {
  }

  // ---------------------------------------------------------------------------
-  log(`Step 3/${STEPS}: updating package.json, readme.md and roadmap.md...`);
+  log(`Step 3/${STEPS}: updating package.json...`);
  await replaceInFile("./package.json", current, next);
-  await replaceInFile("./README.md", current, next);
-  await replaceInFile("./roadmap.md", current, next);

  // ---------------------------------------------------------------------------
  log(`Step 4/${STEPS}: creating git commit...`);
@@ -106,7 +116,7 @@ async function startRelease() {
  // ---------------------------------------------------------------------------

  log(`Step 7/${STEPS}: Creating the release...`);
-  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${REL_NOTES_FILE}`);
+  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F ${file}`);
  if (relaseResult !== 0) {
    logError("github release failed. Aborting.");
    return;
@@ -122,7 +132,7 @@ async function startRelease() {
  if (shouldUploadPlayground) {
    log(`Bonus step: publishing new release on playground...`);
    let owl_code = null;
-    status = 0
+    let status = 0

    try {
      owl_code = await readFile("dist/owl.iife.js");
@@ -132,7 +142,8 @@ async function startRelease() {
      return;
    }

-    status += await execCommand("git checkout gh-pages");
+    status |= await execCommand("git checkout gh-pages");
+    status |= await execCommand("git pull --rebase");
    
    if (status !== 0) {
      logError("Couldn't switch to gh-pages branch")
@@ -146,9 +157,9 @@ async function startRelease() {
      return;
    }
    
-    status += await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
-    status += await execCommand(`git push origin gh-pages`);
-    status += await execCommand("git checkout -");
+    status |= await execCommand(`git commit -am "[IMP] update owl to v${next}"`);
+    status |= await execCommand(`git push origin gh-pages`);
+    status |= await execCommand("git checkout -");
    if (status !== 0) {
      logError("Something went wrong for the playground update.")
    }
@@ -233,3 +244,19 @@ async function replaceInFile(file, from, to) {
    });
  });
 }
+
+async function getOutput(command) {
+  return new Promise((resolve, reject) => {
+    const childProcess = exec(command, (err, stdout, stderr) => {
+      if (err) {
+        reject(err);
+      }
+      resolve(stdout);
+    });
+    childProcess.on("exit", code => {
+      if (code !== 0) {
+        reject(code);
+      }
+    });
+  });
+}