[REL] v2.0.5

# v2.0.5 - [FIX] reactivity: improve performance for long-lived reactives
[FIX] reactivity: improve performance for long-lived reactives
2025-10-06 19:59:41 +07:00 · 2023-01-27 15:29:07 +01:00 · 2023-01-27 09:34:55 +01:00 · 2023-01-25 07:56:30 +01:00 · 2023-01-23 12:39:50 +01:00 · 2023-01-23 12:21:13 +01:00
112 changed files with 9271 additions and 2447 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
+through the tasks. It can find the `tasks` list from the component, since the rendering
-component is the rendering context. Note that we use the `id` of each task as a
+context contains the properties of the component. Note that we use the `id` of each task
-`t-key`, which is very common. There are two css classes: `task-list` and `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)
+- [`Escape hatches`](#escape-hatches)
- [`toRaw`](#toraw)
+- [`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
+simple way to manipulate state, in such a way that the interface updates automatically
-update accordingly to state changes. Also, we obviously want this to happen in
+according to state changes, and to do so in a performant manner.
 a performant way.
-To solve this issue, Owl provides two reactivity primitives:
+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
- `reactive`, which returns a proxy to its first argument, and tracks all read/update
+argument, it returns a proxy of the object. This proxy tracks what properties are read
-  operation going through it,
+through the proxy, and calls the provided callback whenever one of these properties is changed
- `useState`: a hook, that internally uses `reactive`, and is linked to its
+through any reactive version of the same object. It does so in depth, by returning reactive versions
-  owner component: any read operation will be tracked (key by key), and any
+of the subobjects when they are read.
  updates to these tracked values will cause the component to be rerendered.
 Most of the time, the `useState` hook is the best solution.
 Since version 2.0, Owl applies the fine grained reactivity at the component
 level: reactive objects received as props are automatically subscribed to by the
 component, so Owl can track which part of these props are consumed by each
 component, and is therefore able to only rerender the impacted components.
 ## `useState`
-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 component reads `state.value` when it renders, subscribing it to changes to that key. Whenever
-    this.state.value++;
+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
+When clicking on the counter button, only the Counter rerenders, because the Parent has never read
-was changed and that the component should be rerendered. With the `useState`
+the "value" key in the state. When clicking on the "Reset Counter" button, the same thing happens:
-hook, `this.state` is now a reactive object, so this component works as expected.
+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
+obj.a = 2; // does not log anything: the 'a' key has not been read yet
-console.log(obj.a); // log 2, and reads the 'a' key => it is now tracked
+console.log(obj.a); // logs 2 and reads the 'a' key => it is now tracked
-obj.a = 3; // log 'changed' because we updated a tracked value
+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.a); // logs 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); // logs 2, and 'b' is now tracked by observer 2
-console.log(obj2.b); // log 2, and 'b' is now tracked by observer 1
+obj2.a = 3; // only logs 'observer1', because observer2 does not track a
-obj2.a = 3; // log 'observer1', because observer2 does not track a
+obj2.b = 3; // only logs 'observer2', because observer1 does not track b
-obj2.b = 3; // log 'observer1' and 'observer2'
+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
+Because `useState` returns a normal reactive object, it is possible to call `reactive` on the result
-is the proper way to watch for some state changes.
+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
+This is useful in some rare cases. One such example would be if you want to use an array of objects
-that going through the reactivity system may cause a non trivial performance slowdown.
+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!
+system, and as such, using it may cause subtle and unintended issues! For example:
 ## `toRaw`
 Given a reactive object, this function returns the underlying, non-reactive,
 corresponding object.
 ```js
-// in setup
+// This will cause a rerender
-const state = useState({ value: 1 });
+this.items.push(markRaw({ label: "another label", value: 1337 }));
-// later:
+// THIS WILL NOT CAUSE A RENDER!
-const rawState = toRaw(this.state);
+this.items[17].value = 3;
-rawState.value = 3; // will NOT be picked up by the reactivity system!!!
+// 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
+In short: only use `markRaw` if your application is slowing down noticeably and profiling reveals
-Owl, but using this function means that the responsability of coordinating
+that a lot of time is spent creating useless reactive objects.
 state update is given to the user code, instead of Owl. Subtle bugs may arise!
-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 };
+const obj = {};
-console.log(toRaw(obj) === obj); // true
+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
+rendering context. However, it may be useful to be able to specify a specific
-able to specify a specific object as context. This can be done by using the
+object as context. This can be done by using the `t-call-context` directive:
 `t-call-context` directive:
 ```xml
 <t t-call="other-template" t-call-context="obj"/>
@@ -1,9 +1,8 @@
 {
  "name": "@odoo/owl",
-  "version": "2.0.0-beta-10",
+  "version": "2.0.5",
  "description": "Odoo Web Library (OWL)",
  "main": "dist/owl.cjs.js",
  "browser": "dist/owl.iife.js",
  "module": "dist/owl.es.js",
  "types": "dist/types/owl.d.ts",
  "files": [
@@ -26,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"
@@ -43,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",
    "eslint": "8.31.0",
    "git-rev-sync": "^1.12.0",
    "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",
+    "typescript": "4.5.2"
    "uglify-es": "^3.3.9"
  },
  "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
+Owl is currently stable. No (large) improvements is expected in the near future.
 change!
 ### 1.x
 - add chrome and firefox devtools,
 - fix every bugs,
 - improve documentation,
 - small backward compatible improvements.
 ### 2.x (2020? 2021? 2022?)
 - stop support for `t-set` directive to define the content of a slot
 Maybe:
 - reimplement vdom to use *block* system, like Vue 3, which should make Owl
  much faster
 - refactor `QWeb` to use an intermediate representation (some kind of AST) to
  allow additional optimisations.
 Note that we intend to keep maintaining owl, and as such, improvements and/or
 breaking changes may require a version bump in the future.
@@ -6,6 +6,14 @@ import dts from "rollup-plugin-dts";
 let input, output;
 const IIFE_FILENAME = "dist/owl.iife.js";
 const CJS_FILENAME = "dist/owl.cjs.js";
 const ES_FILENAME = "dist/owl.es.js";
 if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
  throw new Error("package.json has been modified. Build script should be updated accordingly");
 }  
 const outro = `
 __info__.version = '${pkg.version}';
 __info__.date = '${new Date().toISOString()}';
@@ -23,19 +31,19 @@ switch (process.argv[4]) {
  case "runtime":
    input = "src/runtime/index.ts";
    output = [
-      getConfigForFormat('esm', addSuffix(pkg.module,  'runtime'), outro),
+      getConfigForFormat('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(pkg.main,  'runtime'), outro),
+      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(pkg.browser,  'runtime'), outro, true),
+      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
    ]
    break;
  default:
    input = "src/index.ts",
    output = [
-      getConfigForFormat('esm', pkg.module, outro),
+      getConfigForFormat('esm', ES_FILENAME, outro),
-      getConfigForFormat('cjs', pkg.main, outro),
+      getConfigForFormat('cjs', CJS_FILENAME, outro),
-      getConfigForFormat('iife', pkg.browser, outro),
+      getConfigForFormat('iife', IIFE_FILENAME, outro),
-      getConfigForFormat('iife', pkg.browser, outro, true),
+      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
    ]
  }
@@ -1,3 +1,4 @@
 import { isProp } from "../runtime/blockdom/attributes";
 import {
  compileExpr,
  compileExprToArray,
@@ -22,13 +23,14 @@ import {
  ASTTif,
  ASTTKey,
  ASTTOut,
  ASTTSet,
  ASTTranslation,
  ASTType,
  ASTTPortal,
-  EventHandlers,
+  ASTTranslation,
  ASTTSet,
  ASTType,
  Attrs,
  EventHandlers,
 } from "./parser";
 import { OwlError } from "../runtime/error_handling";
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
@@ -143,7 +145,7 @@ interface Context {
  ctxVar?: string;
 }
-function createContext(parentCtx: Context, params?: Partial<Context>) {
+function createContext(parentCtx: Context, params?: Partial<Context>): Context {
  return Object.assign(
    {
      block: null,
@@ -189,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};`);
@@ -212,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"];
@@ -230,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) {
@@ -265,10 +276,7 @@ export class CodeGenerator {
      tKeyExpr: null,
    });
    // define blocks and utility functions
-    let mainCode = [
+    let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
      `  "use strict";`,
      `let { text, createBlock, list, multi, html, toggler, comment } = bdom;`,
    ];
    if (this.helpers.size) {
      mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
    }
@@ -286,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}'}>`);
@@ -337,8 +345,8 @@ export class CodeGenerator {
    this.addLine(`const ${varName} = ${expr};`);
  }
-  insertAnchor(block: BlockDescription) {
+  insertAnchor(block: BlockDescription, index: number = block.children.length) {
-    const tag = `block-child-${block.children.length}`;
+    const tag = `block-child-${index}`;
    const anchor = xmlDoc.createElement(tag);
    block.insert(anchor);
  }
@@ -365,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}`;
+      let key = this.target.currentKey(ctx);
      if (tKeyExpr) {
        keyArg = `${tKeyExpr} + ${keyArg}`;
      }
      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) {
+    if (ctx.tKeyExpr) {
-      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
    }
    if (block.isRoot && !ctx.preventRoot) {
@@ -424,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);
+        return this.compileComment(ast, ctx);
        break;
      case ASTType.Text:
-        this.compileText(ast, ctx);
+        return this.compileText(ast, ctx);
        break;
      case ASTType.DomNode:
-        this.compileTDomNode(ast, ctx);
+        return this.compileTDomNode(ast, ctx);
        break;
      case ASTType.TEsc:
-        this.compileTEsc(ast, ctx);
+        return this.compileTEsc(ast, ctx);
        break;
      case ASTType.TOut:
-        this.compileTOut(ast, ctx);
+        return this.compileTOut(ast, ctx);
        break;
      case ASTType.TIf:
-        this.compileTIf(ast, ctx);
+        return this.compileTIf(ast, ctx);
        break;
      case ASTType.TForEach:
-        this.compileTForeach(ast, ctx);
+        return this.compileTForeach(ast, ctx);
        break;
      case ASTType.TKey:
-        this.compileTKey(ast, ctx);
+        return this.compileTKey(ast, ctx);
        break;
      case ASTType.Multi:
-        this.compileMulti(ast, ctx);
+        return this.compileMulti(ast, ctx);
        break;
      case ASTType.TCall:
-        this.compileTCall(ast, ctx);
+        return this.compileTCall(ast, ctx);
        break;
      case ASTType.TCallBlock:
-        this.compileTCallBlock(ast, ctx);
+        return this.compileTCallBlock(ast, ctx);
        break;
      case ASTType.TSet:
-        this.compileTSet(ast, ctx);
+        return this.compileTSet(ast, ctx);
        break;
      case ASTType.TComponent:
-        this.compileComponent(ast, ctx);
+        return this.compileComponent(ast, ctx);
        break;
      case ASTType.TDebug:
-        this.compileDebug(ast, ctx);
+        return this.compileDebug(ast, ctx);
        break;
      case ASTType.TLog:
-        this.compileLog(ast, ctx);
+        return this.compileLog(ast, ctx);
        break;
      case ASTType.TSlot:
-        this.compileTSlot(ast, ctx);
+        return this.compileTSlot(ast, ctx);
        break;
      case ASTType.TTranslation:
-        this.compileTTranslation(ast, ctx);
+        return this.compileTTranslation(ast, ctx);
        break;
      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) {
@@ -508,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;
@@ -529,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 {
@@ -537,7 +531,7 @@ export class CodeGenerator {
      .slice(1)
      .map((m) => {
        if (!MODS.has(m)) {
-          throw new Error(`Unknown event modifier: '${m}'`);
+          throw new OwlError(`Unknown event modifier: '${m}'`);
        }
        return `"${m}"`;
      });
@@ -548,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;
@@ -581,13 +575,22 @@ export class CodeGenerator {
        attrName = key.slice(7);
        attrs["block-attribute-" + idx] = attrName;
      } else if (key.startsWith("t-att")) {
        attrName = key === "t-att" ? null : key.slice(6);
        expr = compileExpr(ast.attrs[key]);
        if (attrName && isProp(ast.tag, attrName)) {
          // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
          if (attrName === "value") {
            // When the expression is falsy, fall back to an empty string
            expr = `new String((${expr}) || "")`;
          } else {
            expr = `new Boolean(${expr})`;
          }
        }
        const idx = block!.insertData(expr, "attr");
        if (key === "t-att") {
          attrs[`block-attributes`] = String(idx);
        } else {
-          attrName = key.slice(6);
+          attrs[`block-attribute-${idx}`] = attrName!;
          attrs[`block-attribute-${idx}`] = attrName;
        }
      } else if (this.translatableAttributes.includes(key)) {
        attrs[key] = this.translateFn(ast.attrs[key]);
@@ -603,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]);
@@ -636,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 === "")) {
@@ -695,7 +706,7 @@ export class CodeGenerator {
      const children = ast.content;
      for (let i = 0; i < children.length; i++) {
        const child = ast.content[i];
-        const subCtx: Context = createContext(ctx, {
+        const subCtx = createContext(ctx, {
          block,
          index: block!.childNumber,
          forceNewBlock: false,
@@ -726,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") {
@@ -749,29 +761,47 @@ 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);
    }
    block = this.createBlock(block, "html", ctx);
-    this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
+    let blockStr;
-    let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
+    if (ast.expr === "0") {
-    if (ast.body) {
+      this.helpers.add("zero");
-      const nextId = BlockDescription.nextBlockId;
+      blockStr = `ctx[zero]`;
-      const subCtx: Context = createContext(ctx);
+    } else if (ast.body) {
      let bodyValue = null;
      bodyValue = BlockDescription.nextBlockId;
      const subCtx = createContext(ctx);
      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
-      this.helpers.add("withDefault");
+      this.helpers.add("safeOutput");
-      expr = `withDefault(${expr}, b${nextId})`;
+      blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
    } else {
      this.helpers.add("safeOutput");
      blockStr = `safeOutput(${compileExpr(ast.expr)})`;
    }
-    this.insertBlock(`${expr}`, block, ctx);
+    this.insertBlock(blockStr, block, ctx);
    return block.varName;
  }
-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
+  compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
-    let { block, forceNewBlock, index } = ctx;
+    this.target.indentLevel++;
-    let currentIndex = index;
+    let childN = block.children.length;
    this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
    if (block.children.length > childN) {
      // we have some content => need to insert an anchor at correct index
      this.insertAnchor(block!, childN);
    }
    this.target.indentLevel--;
  }
  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);
    if (block) {
@@ -781,28 +811,16 @@ export class CodeGenerator {
      block = this.createBlock(block, "multi", ctx);
    }
    this.addLine(`if (${compileExpr(ast.condition)}) {`);
-    this.target.indentLevel++;
+    this.compileTIfBranch(ast.content, block, ctx);
    this.insertAnchor(block!);
    const subCtx: Context = createContext(ctx, { block, index: currentIndex });
    this.compileAST(ast.content, subCtx);
    this.target.indentLevel--;
    if (ast.tElif) {
      for (let clause of ast.tElif) {
        this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
-        this.target.indentLevel++;
+        this.compileTIfBranch(clause.content, block, ctx);
        this.insertAnchor(block);
        const subCtx: Context = createContext(ctx, { block, index: currentIndex });
        this.compileAST(clause.content, subCtx);
        this.target.indentLevel--;
      }
    }
    if (ast.tElse) {
      this.addLine(`} else {`);
-      this.target.indentLevel++;
+      this.compileTIfBranch(ast.tElse, block, ctx);
      this.insertAnchor(block);
      const subCtx: Context = createContext(ctx, { block, index: currentIndex });
      this.compileAST(ast.tElse, subCtx);
      this.target.indentLevel--;
    }
    this.addLine("}");
    if (isNewBlock) {
@@ -825,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);
@@ -864,10 +883,11 @@ export class CodeGenerator {
    this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
    if (this.dev) {
      // 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 Error(\`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) {
@@ -888,7 +908,7 @@ export class CodeGenerator {
      this.addLine("}");
    }
-    const subCtx: Context = createContext(ctx, { block, index: loopVar });
+    const subCtx = createContext(ctx, { block, index: loopVar });
    this.compileAST(ast.body, subCtx);
    if (ast.memo) {
      this.addLine(
@@ -904,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, {
@@ -914,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);
    }
@@ -935,7 +958,7 @@ export class CodeGenerator {
    for (let i = 0, l = ast.content.length; i < l; i++) {
      const child = ast.content[i];
      const isTSet = child.type === ASTType.TSet;
-      const subCtx: Context = createContext(ctx, {
+      const subCtx = createContext(ctx, {
        block,
        index,
        forceNewBlock: !isTSet,
@@ -967,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) {
@@ -980,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 });
-      const subCtx: Context = createContext(ctx, { preventRoot: true, ctxVar });
+      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
-      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (bl) {
      if (nextId !== BlockDescription.nextBlockId) {
        this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = b${nextId};`);
+        this.addLine(`${ctxVar}[zero] = ${bl};`);
      }
    }
    const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1019,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) {
@@ -1030,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";
@@ -1040,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 {
@@ -1057,6 +1083,7 @@ export class CodeGenerator {
      this.helpers.add("setContextValue");
      this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
    }
    return null;
  }
  generateComponentKey() {
@@ -1085,9 +1112,9 @@ 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 Error("Invalid prop suffix");
+        throw new OwlError("Invalid prop suffix");
      }
    }
    name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -1108,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 || {});
@@ -1129,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) {
@@ -1174,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)) {
@@ -1208,6 +1235,7 @@ export class CodeGenerator {
    block = this.createBlock(block, "multi", ctx);
    this.insertBlock(blockExpr, block, ctx);
    return block.varName;
  }
  wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1226,34 +1254,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
@@ -1266,14 +1303,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` });
    }
@@ -1294,11 +1333,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;
  }
 }
@@ -1,3 +1,5 @@
 import { OwlError } from "../runtime/error_handling";
 /**
 * Owl QWeb Expression Parser
 *
@@ -26,7 +28,7 @@
 //------------------------------------------------------------------------------
 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(
    ","
  );
@@ -106,14 +108,14 @@ let tokenizeString: Tokenizer = function (expr) {
      i++;
      cur = expr[i];
      if (!cur) {
-        throw new Error("Invalid expression");
+        throw new OwlError("Invalid expression");
      }
      s += cur;
    }
    i++;
  }
  if (expr[i] !== start) {
-    throw new Error("Invalid expression");
+    throw new OwlError("Invalid expression");
  }
  s += start;
  if (start === "`") {
@@ -223,7 +225,7 @@ export function tokenize(expr: string): Token[] {
    error = e; // Silence all errors and throw a generic error below
  }
  if (current.length || error) {
-    throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+    throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
  }
  return result;
 }
@@ -1,3 +1,5 @@
 import { OwlError } from "../runtime/error_handling";
 // -----------------------------------------------------------------------------
 // AST Type definition
 // -----------------------------------------------------------------------------
@@ -319,7 +321,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
    return null;
  }
  if (tagName.startsWith("block-")) {
-    throw new Error(`Invalid tag name: '${tagName}'`);
+    throw new OwlError(`Invalid tag name: '${tagName}'`);
  }
  ctx = Object.assign({}, ctx);
  if (tagName === "pre") {
@@ -340,13 +342,15 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
    const value = node.getAttribute(attr)!;
    if (attr.startsWith("t-on")) {
      if (attr === "t-on") {
-        throw new Error("Missing event name with t-on directive");
+        throw new OwlError("Missing event name with t-on directive");
      }
      on = on || {};
      on[attr.slice(5)] = value;
    } else if (attr.startsWith("t-model")) {
      if (!["input", "select", "textarea"].includes(tagName)) {
-        throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
+        throw new OwlError(
          "The t-model directive only works with <input>, <textarea> and <select>"
        );
      }
      let baseExpr, expr;
@@ -359,7 +363,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
        baseExpr = value.slice(0, index);
        expr = value.slice(index + 1, -1);
      } else {
-        throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+        throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
      }
      const typeAttr = node.getAttribute("type");
@@ -390,10 +394,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
        ctx.tModelInfo = model;
      }
    } else if (attr.startsWith("block-")) {
-      throw new Error(`Invalid attribute: '${attr}'`);
+      throw new OwlError(`Invalid attribute: '${attr}'`);
    } else if (attr !== "t-name") {
      if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-        throw new Error(`Unknown QWeb directive: '${attr}'`);
+        throw new OwlError(`Unknown QWeb directive: '${attr}'`);
      }
      const tModel = ctx.tModelInfo;
      if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
@@ -447,7 +451,7 @@ function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
    };
  }
  if (ast.type === ASTType.TComponent) {
-    throw new Error("t-esc is not supported on Component nodes");
+    throw new OwlError("t-esc is not supported on Component nodes");
  }
  return tesc;
 }
@@ -503,7 +507,7 @@ function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
  node.removeAttribute("t-as");
  const key = node.getAttribute("t-key");
  if (!key) {
-    throw new Error(
+    throw new OwlError(
      `"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`
    );
  }
@@ -686,7 +690,9 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
  let isDynamic = node.hasAttribute("t-component");
  if (isDynamic && name !== "t") {
-    throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
+    throw new OwlError(
      `Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`
    );
  }
  if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
@@ -713,7 +719,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
        on[name.slice(5)] = value;
      } else {
        const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-        throw new Error(message || `unsupported directive on Component: ${name}`);
+        throw new OwlError(message || `unsupported directive on Component: ${name}`);
      }
    } else {
      props = props || {};
@@ -729,7 +735,7 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
    const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
    for (let slotNode of slotNodes) {
      if (slotNode.tagName !== "t") {
-        throw new Error(
+        throw new OwlError(
          `Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`
        );
      }
@@ -775,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 };
    }
  }
@@ -904,7 +911,7 @@ function normalizeTIf(el: Element) {
    let nattr = (name: string) => +!!node.getAttribute(name);
    if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
      if (pattr("t-foreach")) {
-        throw new Error(
+        throw new OwlError(
          "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
        );
      }
@@ -913,19 +920,19 @@ function normalizeTIf(el: Element) {
          return a + b;
        }) > 1
      ) {
-        throw new Error("Only one conditional branching directive is allowed per node");
+        throw new OwlError("Only one conditional branching directive is allowed per node");
      }
      // All text (with only spaces) and comment nodes (nodeType 8) between
      // branch nodes are removed
      let textNode;
      while ((textNode = node.previousSibling) !== prevElem) {
        if (textNode!.nodeValue!.trim().length && textNode!.nodeType !== 8) {
-          throw new Error("text is not allowed between branching directives");
+          throw new OwlError("text is not allowed between branching directives");
        }
        textNode!.remove();
      }
    } else {
-      throw new Error(
+      throw new OwlError(
        "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
      );
    }
@@ -946,7 +953,7 @@ function normalizeTEsc(el: Element) {
  );
  for (const el of elements) {
    if (el.childNodes.length) {
-      throw new Error("Cannot have t-esc on a component that already has content");
+      throw new OwlError("Cannot have t-esc on a component that already has content");
    }
    const value = el.getAttribute("t-esc");
    el.removeAttribute("t-esc");
@@ -1000,7 +1007,7 @@ function parseXML(xml: string): XMLDocument {
        }
      }
    }
-    throw new Error(msg);
+    throw new OwlError(msg);
  }
  return doc;
@@ -1,9 +1,8 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
+import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
 import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { STATUS } from "./status";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
@@ -32,6 +31,18 @@ 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>;
    };
  }
 }
 window.__OWL_DEVTOOLS__ ||= {
  apps: new Set<App>(),
 };
 export class App<
  T extends abstract new (...args: any) => any = any,
  P extends object = any,
@@ -49,6 +60,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;
    }
@@ -95,9 +107,7 @@ export class App<
        nodeErrorHandlers.set(node, handlers);
      }
      handlers.unshift((e) => {
-        if (isResolved) {
+        if (!isResolved) {
          console.error(e);
        } else {
          reject(e);
        }
        throw e;
@@ -112,6 +122,7 @@ export class App<
      this.scheduler.flush();
      this.root.destroy();
    }
    window.__OWL_DEVTOOLS__.apps.delete(this);
  }
  createComponent<P extends Props>(
@@ -141,10 +152,7 @@ export class App<
    return (props: P, key: string, ctx: ComponentNode, parent: any, C: any) => {
      let children = ctx.children;
      let node: any = children[key];
-      if (
+      if (isDynamic && node && node.component.constructor !== C) {
        node &&
        (node.status === STATUS.DESTROYED || (isDynamic && node.component.constructor !== C))
      ) {
        node = undefined;
      }
      const parentFiber = ctx.fiber!;
@@ -156,11 +164,17 @@ 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 Error(`Cannot find the definition of component "${name}"`);
+            throw new OwlError(`Cannot find the definition of component "${name}"`);
          } else if (!(C.prototype instanceof Component)) {
-            throw new Error(
+            throw new OwlError(
              `"${name}" is not a Component. It must inherit from the Component class`
            );
          }
@@ -173,6 +187,10 @@ export class App<
      return node;
    };
  }
  handleError(...args: Parameters<typeof handleError>) {
    return handleError(...args);
  }
 }
 export async function mount<
@@ -144,7 +144,7 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 export function makePropSetter(name: string): Setter<HTMLElement> {
  return function setProp(this: HTMLElement, value: any) {
    // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value || "";
+    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
  };
 }
@@ -1,3 +1,4 @@
 import { OwlError } from "../error_handling";
 import {
  attrsSetter,
  attrsUpdater,
@@ -156,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;
@@ -245,7 +255,7 @@ function buildTree(
      };
    }
  }
-  throw new Error("boom");
+  throw new OwlError("boom");
 }
 function addRef(tree: IntermediateTree) {
@@ -507,9 +517,13 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
      return this.el!;
    }
-    moveBefore(other: Block | null, afterNode: Node | null) {
+    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      const target = other ? other.el! : afterNode;
+      this.parentEl = parent;
-      nodeInsertBefore.call(this.parentEl, this.el!, target);
+      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) {
+    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.child.moveBefore(other ? other.child : null, afterNode);
+      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;
+    const currentTarget = ev.currentTarget as HTMLElement;
-    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
+    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) {
+  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    const target = other ? other.content[0] : afterNode;
+    this.parentEl = parent;
    const parent = this.parentEl;
    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) {
+  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    const target = other ? other.el! : afterNode;
+    this.parentEl = parent;
-    nodeInsertBefore.call(this.parentEl, this.el!, target);
+    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) {
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement) {
-    this.child.moveBefore(other ? other.child : null, afterNode);
+    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 } from "./error_handling";
+import { fibersInError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import {
+import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
  clearReactivesForCallback,
  getSubscriptions,
  NonReactive,
  Reactive,
  reactive,
  TARGET,
 } from "./reactivity";
 import { STATUS } from "./status";
 import { batched, Callback } from "./utils";
@@ -18,7 +11,7 @@ let currentNode: ComponentNode | null = null;
 export function getCurrent(): ComponentNode {
  if (!currentNode) {
-    throw new Error("No active component (a hook function should only be called in 'setup')");
+    throw new OwlError("No active component (a hook function should only be called in 'setup')");
  }
  return currentNode;
 }
@@ -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) {
@@ -83,7 +76,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
  renderFn: Function;
  parent: ComponentNode | null;
  level: number;
  childEnv: Env;
  children: { [key: string]: ComponentNode } = Object.create(null);
  refs: any = {};
@@ -108,7 +100,6 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
    this.parent = parent;
    this.props = props;
    this.parentKey = parentKey;
    this.level = parent ? parent.level + 1 : 0;
    const defaultProps = C.defaultProps;
    props = Object.assign({}, props);
    if (defaultProps) {
@@ -118,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;
  }
@@ -143,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) {
@@ -221,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;
@@ -242,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);
      }
    }
@@ -308,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) {
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void {
-    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+    this.bdom!.moveBeforeDOMNode(node, parent);
  }
  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
  }
  patch() {
@@ -322,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;
@@ -1,6 +1,11 @@
 import type { ComponentNode } from "./component_node";
 import type { Fiber } from "./fibers";
 // Custom error class that wraps error that happen in the owl lifecycle
 export class OwlError extends Error {
  cause?: any;
 }
 // Maps fibers to thrown errors
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
@@ -37,7 +42,14 @@ function _handleError(node: ComponentNode | null, error: any): boolean {
 type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
 export function handleError(params: ErrorParams) {
-  const error = params.error;
+  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 (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!;
@@ -59,5 +71,6 @@ export function handleError(params: ErrorParams) {
    } catch (e) {
      console.error(e);
    }
    throw error;
  }
 }
@@ -1,5 +1,6 @@
 import { filterOutModifiersFromData } from "./blockdom/config";
 import { STATUS } from "./status";
 import { OwlError } from "./error_handling";
 export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
  const { data: _data, modifiers } = filterOutModifiersFromData(data);
@@ -33,7 +34,7 @@ export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarg
  if (Object.hasOwnProperty.call(data, 0)) {
    const handler = data[0];
    if (typeof handler !== "function") {
-      throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
+      throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
    }
    let node = data[1] ? data[1].__owl__ : null;
    if (node ? node.status === STATUS.MOUNTED : true) {
@@ -1,6 +1,6 @@
 import { BDom, mount } from "./blockdom";
 import type { ComponentNode } from "./component_node";
-import { fibersInError, handleError } from "./error_handling";
+import { fibersInError, OwlError } from "./error_handling";
 import { STATUS } from "./status";
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
@@ -43,7 +43,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
 }
 function throwOnRender() {
-  throw new Error("Attempted to render cancelled fiber");
+  throw new OwlError("Attempted to render cancelled fiber");
 }
 /**
@@ -56,6 +56,7 @@ function cancelFibers(fibers: Fiber[]): number {
    fiber.render = throwOnRender;
    if (node.status === STATUS.NEW) {
      node.destroy();
      delete node.parent!.children[node.parentKey!];
    }
    node.fiber = null;
    if (fiber.bdom) {
@@ -129,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);
    }
@@ -194,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 });
    }
  }
@@ -258,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";
@@ -54,5 +54,6 @@ export {
  onError,
 } from "./lifecycle_hooks";
 export { validate } from "./validation";
 export { OwlError } from "./error_handling";
 export const __info__ = {};
@@ -1,21 +1,30 @@
 import { getCurrent } from "./component_node";
-import { nodeErrorHandlers } from "./error_handling";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
 const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
-  const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
+  const error = new OwlError(`The following error occurred in ${hookName}: `) as Error & {
    cause: any;
  };
-  const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+  const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
  const node = getCurrent();
  return (...args: any[]) => {
    const onError = (cause: any) => {
      error.cause = cause;
      if (cause instanceof Error) {
        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;
    };
    try {
      const result = fn(...args);
      if (result instanceof Promise) {
        if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
          const fiber = node.fiber;
          Promise.race([
-            result,
+            result.catch(() => {}),
            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
          ]).then((res) => {
            if (res === TIMEOUT && node.fiber === fiber) {
@@ -23,20 +32,11 @@ function wrapError(fn: (...args: any[]) => any, hookName: string) {
            }
          });
        }
-        return result.catch((cause) => {
+        return result.catch(onError);
          error.cause = cause;
          if (cause instanceof Error) {
            error.message += `"${cause.message}"`;
          }
          throw error;
        });
      }
      return result;
    } catch (cause) {
-      if (cause instanceof Error) {
+      onError(cause);
        error.message += `"${cause.message}"`;
      }
      throw error;
    }
  };
 }
@@ -1,64 +1,60 @@
-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";
 const VText: any = text("").constructor;
 class VPortal extends VText implements Partial<VNode<VPortal>> {
-  //   selector: string;
+  content: BDom | null;
-  realBDom: 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) {
+    if (this.target) {
-      let el: any = this.el;
+      this.content!.mount(this.target!, null);
-      while (el && el.parentElement instanceof HTMLElement) {
+    } else {
-        el = el.parentElement;
+      this.content!.mount(parent, anchor);
      }
      this.target = el && el.querySelector(this.selector);
      if (!this.target) {
        throw new Error("invalid portal target");
      }
    }
    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.content!.remove();
-      this.realBDom = null;
+      this.content = null;
    }
  }
  patch(other: VPortal) {
    super.patch(other);
-    if (this.realBDom) {
+    if (this.content) {
-      this.realBDom.patch(other.realBDom!, true);
+      this.content.patch(other.content!, true);
    } else {
-      this.realBDom = other.realBDom;
+      this.content = other.content;
-      this.realBDom!.mount(this.target!, null);
+      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 function template(ctx: any, node: any, key = ""): any {
-    return callSlot(ctx, node, key, "default", false, null);
+    return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
  };
 }
@@ -72,13 +68,23 @@ export class Portal extends Component {
  };
  setup() {
-    const node = this.__owl__;
+    const node: any = this.__owl__;
-    const renderFn = node.renderFn;
+
-    node.renderFn = () => new VPortal(this.props.target, renderFn());
+    onMounted(() => {
-    onWillUnmount(() => {
+      const portal: VPortal = node.bdom;
-      if (node.bdom) {
+      if (!portal.target) {
-        node.bdom.remove();
+        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,24 +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;
@@ -35,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.
@@ -60,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> {
+export function markRaw<T extends Target>(value: T): T {
-  (value as any)[SKIP] = true;
+  skipped.add(value);
-  return value as NonReactive<T>;
+  return value;
 }
 /**
@@ -77,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 {
+export function toRaw<T extends Target, U extends Reactive<T>>(value: U | T): T {
-  return value[TARGET] || value;
+  return targets.has(value) ? (targets.get(value) as T) : value;
 }
 const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callback>>>();
@@ -92,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());
  }
@@ -146,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();
@@ -163,8 +168,9 @@ export function getSubscriptions(callback: Callback) {
    };
  });
 }
-
+// Maps reactive objects to the underlying target
-const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
+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
@@ -179,7 +185,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.
@@ -192,19 +198,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>(
+export function reactive<T extends Target>(target: T, callback: Callback = NO_CALLBACK): T {
  target: T,
  callback: Callback = () => {}
 ): Reactive<T> | NonReactive<T> {
  if (!canBeMadeReactive(target)) {
-    throw new Error(`Cannot make the given value reactive`);
+    throw new OwlError(`Cannot make the given value reactive`);
  }
-  if (SKIP in target) {
+  if (skipped.has(target)) {
-    return target as NonReactive<T>;
+    return target;
  }
-  const originalTarget = (target as Reactive)[TARGET];
+  if (targets.has(target)) {
-  if (originalTarget) {
+    // target is reactive, create a reactive on the underlying object instead
-    return reactive(originalTarget, callback);
+    return reactive(targets.get(target) as T, callback);
  }
  if (!reactiveCache.has(target)) {
    reactiveCache.set(target, new WeakMap());
@@ -217,6 +220,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>;
 }
@@ -228,29 +232,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>) {
+    get(target, key, receiver) {
      if (key === TARGET) {
        return target;
      }
      // non-writable non-configurable properties cannot be made reactive
      const desc = Object.getOwnPropertyDescriptor(target, key);
      if (desc && !desc.writable && !desc.configurable) {
-        return Reflect.get(target, key, 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) {
+    set(target, key, value, receiver) {
-      const isNewKey = !objectHasOwnProperty.call(target, key);
+      const hadKey = objectHasOwnProperty.call(target, key);
-      const originalValue = Reflect.get(target, key, proxy);
+      const originalValue = Reflect.get(target, key, receiver);
-      const ret = Reflect.set(target, key, value, proxy);
+      const ret = Reflect.set(target, key, value, receiver);
-      if (isNewKey) {
+      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;
@@ -443,10 +447,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];
      }
@@ -4,6 +4,7 @@ import { html } from "./blockdom/index";
 import { isOptional, validateSchema } from "./validation";
 import type { ComponentConstructor } from "./component";
 import { markRaw } from "./reactivity";
 import { OwlError } from "./error_handling";
 const ObjectCreate = Object.create;
 /**
@@ -31,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]);
  }
@@ -46,8 +47,7 @@ function callSlot(
 }
 function capture(ctx: any): any {
-  const component = ctx.__owl__.component;
+  const result = ObjectCreate(ctx);
  const result = ObjectCreate(component);
  for (let k in ctx) {
    result[k] = ctx[k];
  }
@@ -70,7 +70,7 @@ function prepareList(collection: any): [any[], any[], number, any[]] {
    values = Object.keys(collection);
    keys = Object.values(collection);
  } else {
-    throw new Error("Invalid loop expression");
+    throw new OwlError("Invalid loop expression");
  }
  const n = values.length;
  return [keys, values, n, new Array(n)];
@@ -110,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() {
@@ -129,9 +132,9 @@ class LazyValue {
 /*
 * Safely outputs `value` as a block depending on the nature of `value`
 */
-export function safeOutput(value: any): ReturnType<typeof toggler> {
+export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof toggler> {
-  if (!value) {
+  if (value === undefined) {
-    return value;
+    return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
  }
  let safeKey;
  let block;
@@ -167,8 +170,7 @@ let boundFunctions = new WeakMap();
 const WeakMapGet = WeakMap.prototype.get;
 const WeakMapSet = WeakMap.prototype.set;
-function bind(ctx: any, fn: Function): Function {
+function bind(component: any, fn: Function): Function {
  let component = ctx.__owl__.component;
  let boundFnMap = WeakMapGet.call(boundFunctions, component);
  if (!boundFnMap) {
    boundFnMap = new WeakMap();
@@ -191,7 +193,7 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
    if (el) {
      count++;
      if (count > 1) {
-        throw new Error("Cannot have 2 elements with same ref name at the same time");
+        throw new OwlError("Cannot have 2 elements with same ref name at the same time");
      }
    }
    if (count === 0 || el) {
@@ -206,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
@@ -220,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;
@@ -233,7 +235,7 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
        : name in schema && !("*" in schema) && !isOptional(schema[name]);
    for (let p in defaultProps) {
      if (isMandatory(p)) {
-        throw new Error(
+        throw new OwlError(
          `A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
        );
      }
@@ -242,7 +244,9 @@ export function validateProps<P>(name: string | ComponentConstructor<P>, props:
  const errors = validateSchema(props, schema);
  if (errors.length) {
-    throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+    throw new OwlError(
      `Invalid props for component '${ComponentClass.name}': ` + errors.join(", ")
    );
  }
 }
@@ -264,4 +268,5 @@ export const helpers = {
  bind,
  createCatcher,
  markRaw,
  OwlError,
 };
@@ -3,6 +3,7 @@ import { comment, createBlock, html, list, multi, text, toggler } from "./blockd
 import { getCurrent } from "./component_node";
 import { Portal, portalTemplate } from "./portal";
 import { helpers } from "./template_helpers";
 import { OwlError } from "./error_handling";
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
@@ -31,7 +32,7 @@ function parseXML(xml: string): Document {
        }
      }
    }
-    throw new Error(msg);
+    throw new OwlError(msg);
  }
  return doc;
 }
@@ -76,7 +77,7 @@ export class TemplateSet {
      if (currentAsString === newAsString) {
        return;
      }
-      throw new Error(`Template ${name} already defined with different content`);
+      throw new OwlError(`Template ${name} already defined with different content`);
    }
    this.rawTemplates[name] = template;
  }
@@ -102,7 +103,7 @@ export class TemplateSet {
          const componentName = getCurrent().component.constructor.name;
          extraInfo = ` (for component "${componentName}")`;
        } catch {}
-        throw new Error(`Missing template: "${name}"${extraInfo}`);
+        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
      }
      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
@@ -119,7 +120,7 @@ export class TemplateSet {
  }
  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new Error(`Unable to compile a template. Please use owl full build instead`);
+    throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
  }
  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
@@ -1,3 +1,4 @@
 import { OwlError } from "./error_handling";
 export type Callback = () => void;
 /**
@@ -27,12 +28,18 @@ export function batched(callback: Callback): Callback {
 }
 export function validateTarget(target: HTMLElement) {
-  if (!(target instanceof HTMLElement)) {
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-    throw new Error("Cannot mount component: the target is not a valid DOM element");
+  const document = target && target.ownerDocument;
-  }
+  if (document) {
-  if (!document.body.contains(target)) {
+    const HTMLElement = document.defaultView!.HTMLElement;
-    throw new Error("Cannot mount a component on a detached dom node");
+    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 {
@@ -54,7 +61,7 @@ export function whenReady(fn?: any): Promise<void> {
 export async function loadFile(url: string): Promise<string> {
  const result = await fetch(url);
  if (!result.ok) {
-    throw new Error("Error while fetching xml templates");
+    throw new OwlError("Error while fetching xml templates");
  }
  return await result.text();
 }
@@ -1,3 +1,5 @@
 import { OwlError } from "./error_handling";
 type BaseType =
  | typeof String
  | typeof Boolean
@@ -70,7 +72,7 @@ function toSchema(spec: SimplifiedSchema): NormalizedSchema {
 export function validate(obj: { [key: string]: any }, spec: Schema) {
  let errors = validateSchema(obj, spec);
  if (errors.length) {
-    throw new Error("Invalid object: " + errors.join(", "));
+    throw new OwlError("Invalid object: " + errors.join(", "));
  }
 }
@@ -49,7 +49,6 @@ exports[`Reactivity: useState concurrent renderings 3`] = `
 exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -68,7 +67,6 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -83,7 +81,6 @@ exports[`Reactivity: useState destroyed component before being mounted is inacti
 exports[`Reactivity: useState destroyed component is inactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -102,7 +99,6 @@ exports[`Reactivity: useState destroyed component is inactive 1`] = `
 exports[`Reactivity: useState destroyed component is inactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -117,7 +113,6 @@ exports[`Reactivity: useState destroyed component is inactive 2`] = `
 exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -133,7 +128,6 @@ exports[`Reactivity: useState one components can subscribe twice to same context
 exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -150,7 +144,6 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
 exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -228,7 +221,6 @@ exports[`Reactivity: useState several nodes on different level use same context
 exports[`Reactivity: useState two components are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -246,7 +238,6 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
 exports[`Reactivity: useState two components are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -261,7 +252,6 @@ exports[`Reactivity: useState two components are updated in parallel 2`] = `
 exports[`Reactivity: useState two components can subscribe to same context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -279,7 +269,6 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
 exports[`Reactivity: useState two components can subscribe to same context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -294,7 +283,6 @@ exports[`Reactivity: useState two components can subscribe to same context 2`] =
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Parent\`, true, false, false, true);
@@ -312,7 +300,6 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -327,7 +314,6 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -343,7 +329,6 @@ exports[`Reactivity: useState two independent components on different levels are
 exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -358,7 +343,6 @@ exports[`Reactivity: useState useContext=useState hook is reactive, for one comp
 exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
@@ -385,7 +369,6 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
 exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -400,7 +383,6 @@ exports[`Reactivity: useState useless atoms should be deleted 2`] = `
 exports[`Reactivity: useState very simple use, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -3,7 +3,6 @@
 exports[`app App supports env with getters/setters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
@@ -19,7 +18,6 @@ exports[`app App supports env with getters/setters 1`] = `
 exports[`app can configure an app with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -31,10 +29,22 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -48,7 +58,6 @@ exports[`app destroy remove the widget from the DOM 1`] = `
 exports[`app warnIfNoStaticProps works as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -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");
  });
 });
@@ -3,7 +3,6 @@
 exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
@@ -18,7 +17,6 @@ exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
 exports[`attributes changing a class with t-att-class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -33,7 +31,6 @@ exports[`attributes changing a class with t-att-class 1`] = `
 exports[`attributes changing an attribute with t-att- 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
@@ -48,7 +45,6 @@ exports[`attributes changing an attribute with t-att- 1`] = `
 exports[`attributes class and t-att-class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\" class=\\"hello\\"/>\`);
@@ -63,7 +59,6 @@ exports[`attributes class and t-att-class should combine together 1`] = `
 exports[`attributes class and t-attf-class with ternary operation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
@@ -78,7 +73,6 @@ exports[`attributes class and t-attf-class with ternary operation 1`] = `
 exports[`attributes dynamic attribute evaluating to 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -93,7 +87,6 @@ exports[`attributes dynamic attribute evaluating to 0 1`] = `
 exports[`attributes dynamic attribute falsy variable  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -108,7 +101,6 @@ exports[`attributes dynamic attribute falsy variable  1`] = `
 exports[`attributes dynamic attribute with a dash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"data-action-id\\"/>\`);
@@ -123,7 +115,6 @@ exports[`attributes dynamic attribute with a dash 1`] = `
 exports[`attributes dynamic attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -138,7 +129,6 @@ exports[`attributes dynamic attributes 1`] = `
 exports[`attributes dynamic attributes with backticks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -153,7 +143,6 @@ exports[`attributes dynamic attributes with backticks 1`] = `
 exports[`attributes dynamic class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -168,7 +157,6 @@ exports[`attributes dynamic class attribute 1`] = `
 exports[`attributes dynamic class attribute evaluating to 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -183,7 +171,6 @@ exports[`attributes dynamic class attribute evaluating to 0 1`] = `
 exports[`attributes dynamic class attribute that starts and ends with a space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -198,7 +185,6 @@ exports[`attributes dynamic class attribute that starts and ends with a space 1`
 exports[`attributes dynamic class attribute which is only a space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -213,7 +199,6 @@ exports[`attributes dynamic class attribute which is only a space 1`] = `
 exports[`attributes dynamic class attribute with multiple consecutive spaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -228,7 +213,6 @@ exports[`attributes dynamic class attribute with multiple consecutive spaces 1`]
 exports[`attributes dynamic empty class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -243,7 +227,6 @@ exports[`attributes dynamic empty class attribute 1`] = `
 exports[`attributes dynamic formatted attributes with a dash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"aria-label\\"/>\`);
@@ -258,7 +241,6 @@ exports[`attributes dynamic formatted attributes with a dash 1`] = `
 exports[`attributes dynamic undefined class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -273,7 +255,6 @@ exports[`attributes dynamic undefined class attribute 1`] = `
 exports[`attributes dynamic undefined generic attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"thing\\"/>\`);
@@ -288,7 +269,6 @@ exports[`attributes dynamic undefined generic attribute 1`] = `
 exports[`attributes fixed variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -303,7 +283,6 @@ exports[`attributes fixed variable 1`] = `
 exports[`attributes format expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -318,7 +297,6 @@ exports[`attributes format expression 1`] = `
 exports[`attributes format literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -333,7 +311,6 @@ exports[`attributes format literal 1`] = `
 exports[`attributes format multiple 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -348,7 +325,6 @@ exports[`attributes format multiple 1`] = `
 exports[`attributes format value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -363,7 +339,6 @@ exports[`attributes format value 1`] = `
 exports[`attributes from object variables set previously 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -382,7 +357,6 @@ exports[`attributes from object variables set previously 1`] = `
 exports[`attributes from variables set previously (no external node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -401,7 +375,6 @@ exports[`attributes from variables set previously (no external node) 1`] = `
 exports[`attributes from variables set previously 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -420,7 +393,6 @@ exports[`attributes from variables set previously 1`] = `
 exports[`attributes object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
@@ -435,7 +407,6 @@ exports[`attributes object 1`] = `
 exports[`attributes static attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div foo=\\"a\\" bar=\\"b\\" baz=\\"c\\"/>\`);
@@ -449,7 +420,6 @@ exports[`attributes static attributes 1`] = `
 exports[`attributes static attributes on void elements 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
@@ -460,10 +430,22 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div foo=\\"\\\\\`bar\\\\\`\\"/>\`);
@@ -477,7 +459,6 @@ exports[`attributes static attributes with backticks 1`] = `
 exports[`attributes static attributes with dashes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
@@ -491,7 +472,6 @@ exports[`attributes static attributes with dashes 1`] = `
 exports[`attributes string interpolation, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
@@ -506,7 +486,6 @@ exports[`attributes string interpolation, alternate syntax 1`] = `
 exports[`attributes t-att-class and class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
@@ -521,7 +500,6 @@ exports[`attributes t-att-class and class should combine together 1`] = `
 exports[`attributes t-att-class with multiple classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -536,7 +514,6 @@ exports[`attributes t-att-class with multiple classes 1`] = `
 exports[`attributes t-att-class with multiple classes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -551,7 +528,6 @@ exports[`attributes t-att-class with multiple classes 2`] = `
 exports[`attributes t-att-class with multiple classes 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -566,7 +542,6 @@ exports[`attributes t-att-class with multiple classes 3`] = `
 exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -581,7 +556,6 @@ exports[`attributes t-att-class with multiple classes, some of which are duplica
 exports[`attributes t-att-class with object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"static\\" block-attribute-0=\\"class\\"/>\`);
@@ -596,7 +570,6 @@ exports[`attributes t-att-class with object 1`] = `
 exports[`attributes t-att-class with object 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -611,7 +584,6 @@ exports[`attributes t-att-class with object 2`] = `
 exports[`attributes t-att-class with object 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -626,7 +598,6 @@ exports[`attributes t-att-class with object 3`] = `
 exports[`attributes t-attf-class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -641,7 +612,6 @@ exports[`attributes t-attf-class 1`] = `
 exports[`attributes t-attf-class should combine with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
@@ -656,7 +626,6 @@ exports[`attributes t-attf-class should combine with class 1`] = `
 exports[`attributes t-attf-class with multiple classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -671,7 +640,6 @@ exports[`attributes t-attf-class with multiple classes 1`] = `
 exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -686,7 +654,6 @@ exports[`attributes t-attf-class with multiple classes separated by multiple spa
 exports[`attributes tuple literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
@@ -701,7 +668,6 @@ exports[`attributes tuple literal 1`] = `
 exports[`attributes tuple variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
@@ -716,7 +682,6 @@ exports[`attributes tuple variable 1`] = `
 exports[`attributes two classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"a b\\"/>\`);
@@ -730,7 +695,6 @@ exports[`attributes two classes 1`] = `
 exports[`attributes two dynamic attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\" block-attribute-1=\\"bar\\"/>\`);
@@ -746,7 +710,6 @@ exports[`attributes two dynamic attributes 1`] = `
 exports[`attributes updating classes (with obj notation) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
@@ -758,10 +721,23 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
@@ -778,7 +754,6 @@ exports[`attributes various escapes 1`] = `
 exports[`attributes various escapes 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div> &lt; </div>\`);
@@ -792,13 +767,12 @@ exports[`attributes various escapes 2 1`] = `
 exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new Boolean(ctx['v']);
    return block1([attr1]);
  }
 }"
@@ -807,13 +781,26 @@ exports[`special cases for some specific html attributes/properties input of typ
 exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['flag'];
+    let attr1 = new Boolean(ctx['flag']);
    return block1([attr1]);
  }
 }"
 `;
 exports[`special cases for some specific html attributes/properties input with t-att-value (patching with same 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]);
  }
 }"
@@ -822,13 +809,26 @@ exports[`special cases for some specific html attributes/properties input type=
 exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
    return block1([attr1]);
  }
 }"
 `;
 exports[`special cases for some specific html attributes/properties input, type checkbox, with t-att-checked (patching with same value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
    let attr1 = new Boolean(ctx['v']);
    return block1([attr1]);
  }
 }"
@@ -837,13 +837,12 @@ exports[`special cases for some specific html attributes/properties input with t
 exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['value'];
+    let attr1 = new String((ctx['value']) || \\"\\");
    return block1([attr1]);
  }
 }"
@@ -852,13 +851,12 @@ exports[`special cases for some specific html attributes/properties select with
 exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
+    let attr1 = new String((ctx['v']) || \\"\\");
    return block1([attr1]);
  }
 }"
@@ -867,7 +865,6 @@ exports[`special cases for some specific html attributes/properties textarea wit
 exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);
@@ -3,7 +3,6 @@
 exports[`comments only a comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -15,7 +14,6 @@ exports[`comments only a comment 1`] = `
 exports[`comments properly handle comments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hello <!-- comment-->owl</div>\`);
@@ -29,7 +27,6 @@ exports[`comments properly handle comments 1`] = `
 exports[`comments properly handle comments between t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -3,7 +3,6 @@
 exports[`t-on can bind event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -18,7 +17,6 @@ exports[`t-on can bind event handler 1`] = `
 exports[`t-on can bind handlers with arguments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -34,7 +32,6 @@ exports[`t-on can bind handlers with arguments 1`] = `
 exports[`t-on can bind handlers with empty  object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -50,7 +47,6 @@ exports[`t-on can bind handlers with empty  object 1`] = `
 exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -66,7 +62,6 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 exports[`t-on can bind handlers with empty object (with non empty inner string) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -94,7 +89,6 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
 exports[`t-on can bind handlers with object arguments 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -110,7 +104,6 @@ exports[`t-on can bind handlers with object arguments 1`] = `
 exports[`t-on can bind two event handlers 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
@@ -126,7 +119,6 @@ exports[`t-on can bind two event handlers 1`] = `
 exports[`t-on handler is bound to proper owner 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -141,7 +133,6 @@ exports[`t-on handler is bound to proper owner 1`] = `
 exports[`t-on handler is bound to proper owner, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -164,7 +155,6 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
 exports[`t-on handler is bound to proper owner, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -177,7 +167,6 @@ exports[`t-on handler is bound to proper owner, part 3 1`] = `
 exports[`t-on handler is bound to proper owner, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -192,7 +181,6 @@ exports[`t-on handler is bound to proper owner, part 3 2`] = `
 exports[`t-on handler is bound to proper owner, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -217,7 +205,6 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
 exports[`t-on handler is bound to proper owner, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -232,7 +219,6 @@ exports[`t-on handler is bound to proper owner, part 4 2`] = `
 exports[`t-on receive event in first argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -247,7 +233,6 @@ exports[`t-on receive event in first argument 1`] = `
 exports[`t-on t-on modifiers (native listener) basic support for native listener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
@@ -263,7 +248,6 @@ exports[`t-on t-on modifiers (native listener) basic support for native listener
 exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
@@ -279,7 +263,6 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
 exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -296,7 +279,6 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
 exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
@@ -312,7 +294,6 @@ exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] =
 exports[`t-on t-on modifiers (native listener) t-on with empty handler (only modifiers) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
@@ -327,7 +308,6 @@ exports[`t-on t-on modifiers (native listener) t-on with empty handler (only mod
 exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifiers (order matters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
@@ -342,7 +322,6 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifi
 exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop modifiers 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
@@ -359,7 +338,6 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop mod
 exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -387,7 +365,6 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
 exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifiers (order matters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
@@ -402,7 +379,6 @@ exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifi
 exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
@@ -418,7 +394,6 @@ exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
 exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
@@ -434,7 +409,6 @@ exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`
 exports[`t-on t-on with inline statement (function call) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -450,7 +424,6 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
 exports[`t-on t-on with inline statement 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
@@ -466,7 +439,6 @@ exports[`t-on t-on with inline statement 1`] = `
 exports[`t-on t-on with inline statement, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
@@ -482,7 +454,6 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
 exports[`t-on t-on with inline statement, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
@@ -499,7 +470,6 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
 exports[`t-on t-on with t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -515,7 +485,6 @@ exports[`t-on t-on with t-call 1`] = `
 exports[`t-on t-on with t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
@@ -530,7 +499,6 @@ exports[`t-on t-on with t-call 2`] = `
 exports[`t-on t-on, with arguments and t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -546,14 +514,14 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
 exports[`t-on t-on, with arguments and t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
  return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['value'];
+    const v1 = ctx['this'];
-    let hdlr1 = [()=>this.update(v1), ctx];
+    const v2 = ctx['value'];
    let hdlr1 = [()=>v1.update(v2), ctx];
    return block1([hdlr1]);
  }
 }"
@@ -3,7 +3,6 @@
 exports[`misc complex template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`SlotButton\`, true, false, false, false);
@@ -83,7 +82,6 @@ exports[`misc complex template 1`] = `
 exports[`misc global 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, zero, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`_callee-uses-foo\`);
@@ -136,7 +134,6 @@ exports[`misc global 1`] = `
 exports[`misc global 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { withDefault } = helpers;
@@ -152,7 +149,6 @@ exports[`misc global 2`] = `
 exports[`misc global 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -169,15 +165,14 @@ exports[`misc global 3`] = `
 exports[`misc global 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { safeOutput } = helpers;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
  return function template(ctx, node, key = \\"\\") {
    const b3 = text(\`toto default\`);
-    const b2 = withDefault(safeOutput(ctx['toto']), b3);
+    const b2 = safeOutput(ctx['toto'], b3);
    return block1([], [b2]);
  }
 }"
@@ -186,7 +181,6 @@ exports[`misc global 4`] = `
 exports[`misc other complex template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`LOAD_INFOS_TEMPLATE\`);
@@ -223,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;
@@ -275,7 +269,7 @@ exports[`misc other complex template 1`] = `
        ctx[\`category\`] = v_block15[i1];
        const key1 = ctx['category'].id;
        let attr6 = ctx['category'].id;
-        let attr7 = ctx['category'].id==ctx['options'].active_category_id;
+        let attr7 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
        let txt5 = ctx['category'].name;
        c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
      }
@@ -283,7 +277,7 @@ exports[`misc other complex template 1`] = `
      const b15 = list(c_block15);
      b14 = block14([], [b15]);
    }
-    let attr8 = 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];
@@ -297,7 +291,7 @@ exports[`misc other complex template 1`] = `
        if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
          let attr9 = \`trigger_\${ctx['trigger'].id}\`;
          let attr10 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr11 = ctx['options'].trigger_display[ctx['trigger'].id];
+          let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
          let attr12 = ctx['trigger'].id;
          let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
          let attr13 = \`trigger_\${ctx['trigger'].id}\`;
@@ -3,7 +3,6 @@
 exports[`memory t-foreach does not leak stuff in global scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -3,7 +3,6 @@
 exports[`simple templates, mostly static can render a table row 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<tr><td>cell</td></tr>\`);
@@ -17,7 +16,6 @@ exports[`simple templates, mostly static can render a table row 1`] = `
 exports[`simple templates, mostly static div with a class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"abc\\">foo</div>\`);
@@ -31,7 +29,6 @@ exports[`simple templates, mostly static div with a class attribute 1`] = `
 exports[`simple templates, mostly static div with a class attribute with a quote 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"a'bc\\">word</div>\`);
@@ -45,7 +42,6 @@ exports[`simple templates, mostly static div with a class attribute with a quote
 exports[`simple templates, mostly static div with a span child node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span>word</span></div>\`);
@@ -59,7 +55,6 @@ exports[`simple templates, mostly static div with a span child node 1`] = `
 exports[`simple templates, mostly static div with an arbitrary attribute with a quote 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div abc=\\"a'bc\\">word</div>\`);
@@ -73,7 +68,6 @@ exports[`simple templates, mostly static div with an arbitrary attribute with a
 exports[`simple templates, mostly static div with an empty class attribute 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>word</div>\`);
@@ -87,7 +81,6 @@ exports[`simple templates, mostly static div with an empty class attribute 1`] =
 exports[`simple templates, mostly static div with content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>foo</div>\`);
@@ -101,7 +94,6 @@ exports[`simple templates, mostly static div with content 1`] = `
 exports[`simple templates, mostly static dom node with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -116,7 +108,6 @@ exports[`simple templates, mostly static dom node with t-esc 1`] = `
 exports[`simple templates, mostly static dom node with t-esc 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -131,7 +122,6 @@ exports[`simple templates, mostly static dom node with t-esc 2`] = `
 exports[`simple templates, mostly static dynamic text value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -143,7 +133,6 @@ exports[`simple templates, mostly static dynamic text value 1`] = `
 exports[`simple templates, mostly static empty div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -157,7 +146,6 @@ exports[`simple templates, mostly static empty div 1`] = `
 exports[`simple templates, mostly static empty string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -169,7 +157,6 @@ exports[`simple templates, mostly static empty string 1`] = `
 exports[`simple templates, mostly static empty string in a template set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -181,7 +168,6 @@ exports[`simple templates, mostly static empty string in a template set 1`] = `
 exports[`simple templates, mostly static inline template string in t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -193,7 +179,6 @@ exports[`simple templates, mostly static inline template string in t-esc 1`] = `
 exports[`simple templates, mostly static inline template string with content in t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -209,7 +194,6 @@ exports[`simple templates, mostly static inline template string with content in
 exports[`simple templates, mostly static inline template string with variable in context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -221,7 +205,6 @@ exports[`simple templates, mostly static inline template string with variable in
 exports[`simple templates, mostly static multiple root nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<div>foo</div>\`);
@@ -238,7 +221,6 @@ exports[`simple templates, mostly static multiple root nodes 1`] = `
 exports[`simple templates, mostly static simple string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -250,7 +232,6 @@ exports[`simple templates, mostly static simple string 1`] = `
 exports[`simple templates, mostly static simple string in t tag 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -262,7 +243,6 @@ exports[`simple templates, mostly static simple string in t tag 1`] = `
 exports[`simple templates, mostly static static text and dynamic text (no t tag) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -276,7 +256,6 @@ exports[`simple templates, mostly static static text and dynamic text (no t tag)
 exports[`simple templates, mostly static static text and dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -290,7 +269,6 @@ exports[`simple templates, mostly static static text and dynamic text 1`] = `
 exports[`simple templates, mostly static t-esc in dom node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -305,7 +283,6 @@ exports[`simple templates, mostly static t-esc in dom node 1`] = `
 exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hello <block-text-0/></div>\`);
@@ -320,7 +297,6 @@ exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
 exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hello <block-text-0/> world</div>\`);
@@ -335,7 +311,6 @@ exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
 exports[`simple templates, mostly static template with multiple t tag with multiple content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><block-text-1/>Loading<block-text-2/></div>\`);
@@ -352,7 +327,6 @@ exports[`simple templates, mostly static template with multiple t tag with multi
 exports[`simple templates, mostly static template with t tag with multiple content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Loading<block-child-0/></div>\`);
@@ -370,7 +344,6 @@ exports[`simple templates, mostly static template with t tag with multiple conte
 exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -384,7 +357,6 @@ exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 exports[`simple templates, mostly static two t-escs next to each other 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -398,7 +370,6 @@ exports[`simple templates, mostly static two t-escs next to each other 2`] = `
 exports[`simple templates, mostly static two t-escs next to each other, in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -3,7 +3,6 @@
 exports[`properly support svg add proper namespace to g tags 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </g>\`);
@@ -17,7 +16,6 @@ exports[`properly support svg add proper namespace to g tags 1`] = `
 exports[`properly support svg add proper namespace to svg 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\" width=\\"100px\\" height=\\"90px\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/> </svg>\`);
@@ -31,7 +29,6 @@ exports[`properly support svg add proper namespace to svg 1`] = `
 exports[`properly support svg namespace to g tags not added if already in svg namespace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><g/></svg>\`);
@@ -45,7 +42,6 @@ exports[`properly support svg namespace to g tags not added if already in svg na
 exports[`properly support svg namespace to svg tags added even if already in svg namespace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><svg/></svg>\`);
@@ -59,7 +55,6 @@ exports[`properly support svg namespace to svg tags added even if already in svg
 exports[`properly support svg svg creates new block if it is within html -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -80,7 +75,6 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
 exports[`properly support svg svg creates new block if it is within html 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -96,7 +90,6 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
 exports[`properly support svg svg namespace added to sub templates if root tag is path 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`path\`);
@@ -112,7 +105,6 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 exports[`properly support svg svg namespace added to sub templates if root tag is path 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<path block-ns=\\"http://www.w3.org/2000/svg\\"/>\`);
@@ -126,7 +118,6 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
 exports[`properly support svg svg namespace added to sub-blocks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
@@ -3,7 +3,6 @@
 exports[`t-call (template calling) basic caller 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
@@ -19,7 +18,6 @@ exports[`t-call (template calling) basic caller 1`] = `
 exports[`t-call (template calling) basic caller 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>ok</span>\`);
@@ -33,7 +31,6 @@ exports[`t-call (template calling) basic caller 2`] = `
 exports[`t-call (template calling) basic caller, no parent node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
@@ -46,7 +43,6 @@ exports[`t-call (template calling) basic caller, no parent node 1`] = `
 exports[`t-call (template calling) basic caller, no parent node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>ok</span>\`);
@@ -60,7 +56,6 @@ exports[`t-call (template calling) basic caller, no parent node 2`] = `
 exports[`t-call (template calling) call with several sub nodes on same line 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -86,7 +81,6 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
 exports[`t-call (template calling) call with several sub nodes on same line 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -102,7 +96,6 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
 exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
@@ -128,7 +121,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
@@ -152,7 +144,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
@@ -176,7 +167,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
 exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -192,7 +182,6 @@ exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subTemplate\`);
@@ -216,7 +205,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`subSubTemplate\`);
@@ -238,7 +226,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`finalTemplate\`);
@@ -260,7 +247,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) cascading t-call t-out='0', without external divs 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -277,7 +263,6 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
 exports[`t-call (template calling) dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const call = app.callTemplate.bind(app);
@@ -294,7 +279,6 @@ exports[`t-call (template calling) dynamic t-call 1`] = `
 exports[`t-call (template calling) dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<foo><block-text-0/></foo>\`);
@@ -309,7 +293,6 @@ exports[`t-call (template calling) dynamic t-call 2`] = `
 exports[`t-call (template calling) dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<bar><block-text-0/></bar>\`);
@@ -324,7 +307,6 @@ exports[`t-call (template calling) dynamic t-call 3`] = `
 exports[`t-call (template calling) inherit context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -344,7 +326,6 @@ exports[`t-call (template calling) inherit context 1`] = `
 exports[`t-call (template calling) inherit context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -353,10 +334,60 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`recursive\`);
@@ -375,7 +406,6 @@ exports[`t-call (template calling) recursive template, part 1 1`] = `
 exports[`t-call (template calling) recursive template, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -397,7 +427,6 @@ exports[`t-call (template calling) recursive template, part 2 1`] = `
 exports[`t-call (template calling) recursive template, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -432,7 +461,6 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
 exports[`t-call (template calling) recursive template, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -454,7 +482,6 @@ exports[`t-call (template calling) recursive template, part 3 1`] = `
 exports[`t-call (template calling) recursive template, part 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -489,7 +516,6 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -512,7 +538,6 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 exports[`t-call (template calling) recursive template, part 4: with t-set recursive index 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`nodeTemplate\`);
@@ -549,7 +574,6 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
 exports[`t-call (template calling) scoped parameters 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -573,7 +597,6 @@ exports[`t-call (template calling) scoped parameters 1`] = `
 exports[`t-call (template calling) scoped parameters 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -585,7 +608,6 @@ exports[`t-call (template calling) scoped parameters 2`] = `
 exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -610,7 +632,6 @@ exports[`t-call (template calling) scoped parameters, part 2 1`] = `
 exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -622,7 +643,6 @@ exports[`t-call (template calling) scoped parameters, part 2 2`] = `
 exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -638,7 +658,6 @@ exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
 exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>ok</span>\`);
@@ -652,7 +671,6 @@ exports[`t-call (template calling) t-call allowed on a non t node 2`] = `
 exports[`t-call (template calling) t-call on a div with t-call-context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -669,7 +687,6 @@ exports[`t-call (template calling) t-call on a div with t-call-context 1`] = `
 exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -684,7 +701,6 @@ exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
 exports[`t-call (template calling) t-call with body content as root of a template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`antony\`);
@@ -704,7 +720,6 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 exports[`t-call (template calling) t-call with body content as root of a template 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -720,7 +735,6 @@ exports[`t-call (template calling) t-call with body content as root of a templat
 exports[`t-call (template calling) t-call with t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -739,7 +753,6 @@ exports[`t-call (template calling) t-call with t-if 1`] = `
 exports[`t-call (template calling) t-call with t-if 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>ok</span>\`);
@@ -753,7 +766,6 @@ exports[`t-call (template calling) t-call with t-if 2`] = `
 exports[`t-call (template calling) t-call with t-set inside and body text content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -775,7 +787,6 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 exports[`t-call (template calling) t-call with t-set inside and body text content 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -790,7 +801,6 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
 exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -825,7 +835,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
 exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -840,7 +849,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside 2`] = `
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`main\`);
@@ -860,7 +868,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] =
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -895,7 +902,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
 exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<span><block-text-0/></span>\`);
@@ -912,7 +918,6 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] =
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`callee1\`);
@@ -942,7 +947,6 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>callee1</div>\`);
@@ -956,7 +960,6 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call, conditional and t-set in t-call body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>callee2 <block-text-0/></div>\`);
@@ -971,7 +974,6 @@ exports[`t-call (template calling) t-call, conditional and t-set in t-call body
 exports[`t-call (template calling) t-call-context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -985,7 +987,6 @@ exports[`t-call (template calling) t-call-context 1`] = `
 exports[`t-call (template calling) t-call-context 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -1000,7 +1001,6 @@ exports[`t-call (template calling) t-call-context 2`] = `
 exports[`t-call (template calling) t-call-context and value in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1020,7 +1020,6 @@ exports[`t-call (template calling) t-call-context and value in body 1`] = `
 exports[`t-call (template calling) t-call-context and value in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -1036,7 +1035,6 @@ exports[`t-call (template calling) t-call-context and value in body 2`] = `
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1056,7 +1054,6 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] =
 exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -1071,7 +1068,6 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 2`] =
 exports[`t-call (template calling) with unused body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1089,7 +1085,6 @@ exports[`t-call (template calling) with unused body 1`] = `
 exports[`t-call (template calling) with unused body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>ok</div>\`);
@@ -1103,7 +1098,6 @@ exports[`t-call (template calling) with unused body 2`] = `
 exports[`t-call (template calling) with unused setbody 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1122,7 +1116,6 @@ exports[`t-call (template calling) with unused setbody 1`] = `
 exports[`t-call (template calling) with unused setbody 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>ok</div>\`);
@@ -1136,7 +1129,6 @@ exports[`t-call (template calling) with unused setbody 2`] = `
 exports[`t-call (template calling) with used body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1154,7 +1146,6 @@ exports[`t-call (template calling) with used body 1`] = `
 exports[`t-call (template calling) with used body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -1170,7 +1161,6 @@ exports[`t-call (template calling) with used body 2`] = `
 exports[`t-call (template calling) with used setbody 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -1192,7 +1182,6 @@ exports[`t-call (template calling) with used setbody 1`] = `
 exports[`t-call (template calling) with used setbody 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -3,7 +3,6 @@
 exports[`debugging t-debug 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -24,7 +23,6 @@ exports[`debugging t-debug 1`] = `
 exports[`debugging t-debug on sub template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p>coucou</p>\`);
@@ -39,7 +37,6 @@ exports[`debugging t-debug on sub template 1`] = `
 exports[`debugging t-debug on sub template 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -55,7 +52,6 @@ exports[`debugging t-debug on sub template 2`] = `
 exports[`debugging t-log 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -3,7 +3,6 @@
 exports[`t-esc div with falsy values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p><p><block-text-2/></p><p><block-text-3/></p><p><block-text-4/></p></div>\`);
@@ -22,7 +21,6 @@ exports[`t-esc div with falsy values 1`] = `
 exports[`t-esc escaping 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -37,7 +35,6 @@ exports[`t-esc escaping 1`] = `
 exports[`t-esc escaping on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -52,7 +49,6 @@ exports[`t-esc escaping on a node 1`] = `
 exports[`t-esc escaping on a node with a body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { withDefault } = helpers;
@@ -68,7 +64,6 @@ exports[`t-esc escaping on a node with a body 1`] = `
 exports[`t-esc escaping on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { withDefault } = helpers;
@@ -84,7 +79,6 @@ exports[`t-esc escaping on a node with a body, as a default 1`] = `
 exports[`t-esc falsy values in text nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -105,7 +99,6 @@ exports[`t-esc falsy values in text nodes 1`] = `
 exports[`t-esc literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -120,7 +113,6 @@ exports[`t-esc literal 1`] = `
 exports[`t-esc t-esc is escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue } = helpers;
@@ -134,7 +126,32 @@ 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]);
  }
 }"
 `;
 exports[`t-esc t-esc with the 0 number 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    return text(ctx['var']);
  }
 }"
 `;
 exports[`t-esc t-esc with the 0 number, in a p 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/></p>\`);
  return function template(ctx, node, key = \\"\\") {
    let txt1 = ctx['var'];
    return block1([txt1]);
  }
@@ -144,7 +161,6 @@ exports[`t-esc t-esc is escaped 1`] = `
 exports[`t-esc t-esc work with spread operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -159,7 +175,6 @@ exports[`t-esc t-esc work with spread operator 1`] = `
 exports[`t-esc t-esc=0 is escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -181,7 +196,6 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
 exports[`t-esc t-esc=0 is escaped 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -194,10 +208,20 @@ exports[`t-esc t-esc=0 is escaped 2`] = `
 }"
 `;
 exports[`t-esc top level t-esc with undefined 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    return text(ctx['var']);
  }
 }"
 `;
 exports[`t-esc variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -3,7 +3,6 @@
 exports[`t-foreach does not pollute the rendering context 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -26,7 +25,6 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
 exports[`t-foreach iterate on items (on a element node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -51,7 +49,6 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
 exports[`t-foreach iterate on items 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -83,7 +80,6 @@ exports[`t-foreach iterate on items 1`] = `
 exports[`t-foreach iterate, dict param 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -115,7 +111,6 @@ exports[`t-foreach iterate, dict param 1`] = `
 exports[`t-foreach iterate, position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -152,7 +147,6 @@ exports[`t-foreach iterate, position 1`] = `
 exports[`t-foreach simple iteration (in a node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -175,7 +169,6 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
 exports[`t-foreach simple iteration 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -195,7 +188,6 @@ exports[`t-foreach simple iteration 1`] = `
 exports[`t-foreach simple iteration with two nodes inside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -222,7 +214,6 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
 exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, isBoundary, withDefault, setContextValue, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -276,7 +267,6 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -295,7 +285,6 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
 exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -343,7 +332,6 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -366,7 +354,6 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
 exports[`t-foreach t-foreach in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -401,7 +388,6 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
 exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -428,7 +414,6 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
 exports[`t-foreach t-foreach with t-if inside 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -457,7 +442,6 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
 exports[`t-foreach t-key on t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -481,7 +465,6 @@ exports[`t-foreach t-key on t-foreach 1`] = `
 exports[`t-foreach throws error if invalid loop expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -507,7 +490,6 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
 exports[`t-foreach with t-memo 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -3,7 +3,6 @@
 exports[`t-if a t-if next to a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<div>foo</div>\`);
@@ -22,7 +21,6 @@ exports[`t-if a t-if next to a div 1`] = `
 exports[`t-if a t-if with two inner nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block3 = createBlock(\`<span>yip</span>\`);
@@ -43,7 +41,6 @@ exports[`t-if a t-if with two inner nodes 1`] = `
 exports[`t-if boolean value condition elif (no outside node) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -65,7 +62,6 @@ exports[`t-if boolean value condition elif (no outside node) 1`] = `
 exports[`t-if boolean value condition elif 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
@@ -89,7 +85,6 @@ exports[`t-if boolean value condition elif 1`] = `
 exports[`t-if boolean value condition else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
@@ -109,7 +104,6 @@ exports[`t-if boolean value condition else 1`] = `
 exports[`t-if boolean value condition false else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
@@ -129,7 +123,6 @@ exports[`t-if boolean value condition false else 1`] = `
 exports[`t-if boolean value condition missing 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-child-0/></span>\`);
@@ -147,7 +140,6 @@ exports[`t-if boolean value condition missing 1`] = `
 exports[`t-if can use some boolean operators in expressions 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-child-4/><block-child-5/><block-child-6/><block-child-7/></div>\`);
@@ -186,7 +178,6 @@ exports[`t-if can use some boolean operators in expressions 1`] = `
 exports[`t-if div containing a t-if with two inner nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -208,7 +199,6 @@ exports[`t-if div containing a t-if with two inner nodes 1`] = `
 exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
@@ -231,7 +221,6 @@ exports[`t-if dynamic content after t-if with two children nodes 1`] = `
 exports[`t-if just a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -247,7 +236,6 @@ exports[`t-if just a t-if 1`] = `
 exports[`t-if simple t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -265,7 +253,6 @@ exports[`t-if simple t-if/t-else 1`] = `
 exports[`t-if simple t-if/t-else in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -285,7 +272,6 @@ exports[`t-if simple t-if/t-else in a div 1`] = `
 exports[`t-if t-esc with t-elif 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -305,7 +291,6 @@ exports[`t-if t-esc with t-elif 1`] = `
 exports[`t-if t-esc with t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -323,7 +308,6 @@ exports[`t-if t-esc with t-if 1`] = `
 exports[`t-if t-if and t-else with two nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block4 = createBlock(\`<span>a</span>\`);
@@ -346,7 +330,6 @@ exports[`t-if t-if and t-else with two nodes 1`] = `
 exports[`t-if t-if in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -364,7 +347,6 @@ exports[`t-if t-if in a div 1`] = `
 exports[`t-if t-if in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -387,7 +369,6 @@ exports[`t-if t-if in a t-if 1`] = `
 exports[`t-if t-if with empty content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -404,7 +385,6 @@ exports[`t-if t-if with empty content 1`] = `
 exports[`t-if t-if/t-else with more content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -424,7 +404,6 @@ exports[`t-if t-if/t-else with more content 1`] = `
 exports[`t-if t-set, then t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -446,7 +425,6 @@ exports[`t-if t-set, then t-if 1`] = `
 exports[`t-if t-set, then t-if, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -470,7 +448,6 @@ exports[`t-if t-set, then t-if, part 2 1`] = `
 exports[`t-if t-set, then t-if, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -497,7 +474,6 @@ exports[`t-if t-set, then t-if, part 3 1`] = `
 exports[`t-if two consecutive t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -516,7 +492,6 @@ exports[`t-if two consecutive t-if 1`] = `
 exports[`t-if two consecutive t-if in a div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -537,7 +512,6 @@ exports[`t-if two consecutive t-if in a div 1`] = `
 exports[`t-if two t-ifs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -3,7 +3,6 @@
 exports[`t-key can use t-key directive on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -19,7 +18,6 @@ exports[`t-key can use t-key directive on a node 1`] = `
 exports[`t-key can use t-key directive on a node 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -35,7 +33,6 @@ exports[`t-key can use t-key directive on a node 2 1`] = `
 exports[`t-key can use t-key directive on a node as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -51,7 +48,6 @@ exports[`t-key can use t-key directive on a node as a function 1`] = `
 exports[`t-key t-key directive in a list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -76,7 +72,6 @@ exports[`t-key t-key directive in a list 1`] = `
 exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -98,7 +93,6 @@ exports[`t-key t-key on sub dom node pushes a child block in its parent 1`] = `
 exports[`t-key t-key on sub dom node pushes a child block in its parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><h1/></div>\`);
@@ -3,7 +3,6 @@
 exports[`t-out literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -19,7 +18,6 @@ exports[`t-out literal 1`] = `
 exports[`t-out literal, no outside html element 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -32,7 +30,6 @@ exports[`t-out literal, no outside html element 1`] = `
 exports[`t-out multiple calls to t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -54,7 +51,6 @@ exports[`t-out multiple calls to t-out 1`] = `
 exports[`t-out multiple calls to t-out 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -71,7 +67,6 @@ exports[`t-out multiple calls to t-out 2`] = `
 exports[`t-out not escaping 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -87,7 +82,6 @@ exports[`t-out not escaping 1`] = `
 exports[`t-out number literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -103,7 +97,6 @@ exports[`t-out number literal 1`] = `
 exports[`t-out t-out 0 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const callTemplate_1 = app.getTemplate(\`_basic-callee\`);
@@ -125,7 +118,6 @@ exports[`t-out t-out 0 1`] = `
 exports[`t-out t-out 0 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { zero } = helpers;
@@ -141,7 +133,6 @@ exports[`t-out t-out 0 2`] = `
 exports[`t-out t-out and another sibling node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -157,7 +148,6 @@ exports[`t-out t-out and another sibling node 1`] = `
 exports[`t-out t-out bdom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
@@ -171,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]);
  }
@@ -181,7 +171,6 @@ exports[`t-out t-out bdom 1`] = `
 exports[`t-out t-out block 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -197,7 +186,6 @@ exports[`t-out t-out block 1`] = `
 exports[`t-out t-out escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -213,7 +201,6 @@ exports[`t-out t-out escaped 1`] = `
 exports[`t-out t-out markedup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -229,15 +216,14 @@ exports[`t-out t-out markedup 1`] = `
 exports[`t-out t-out on a node with a body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { safeOutput } = helpers;
  let block1 = createBlock(\`<span><block-child-0/></span>\`);
  return function template(ctx, node, key = \\"\\") {
    const b3 = text(\`nope\`);
-    const b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b2 = safeOutput(ctx['var'], b3);
    return block1([], [b2]);
  }
 }"
@@ -246,16 +232,15 @@ exports[`t-out t-out on a node with a body, as a default 1`] = `
 exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { safeOutput, withDefault } = helpers;
+  let { safeOutput } = helpers;
  let block1 = createBlock(\`<span><block-child-0/></span>\`);
  let block3 = createBlock(\`<div>nope</div>\`);
  return function template(ctx, node, key = \\"\\") {
    const b3 = block3();
-    const b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b2 = safeOutput(ctx['var'], b3);
    return block1([], [b2]);
  }
 }"
@@ -264,7 +249,6 @@ exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
 exports[`t-out t-out switch escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -280,7 +264,6 @@ exports[`t-out t-out switch escaped 1`] = `
 exports[`t-out t-out switch escaped on markup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -296,7 +279,6 @@ exports[`t-out t-out switch escaped on markup 1`] = `
 exports[`t-out t-out switch markup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -312,7 +294,6 @@ exports[`t-out t-out switch markup 1`] = `
 exports[`t-out t-out switch markup on bdom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
@@ -329,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]);
@@ -345,7 +326,6 @@ exports[`t-out t-out switch markup on bdom 1`] = `
 exports[`t-out t-out switch markup on escaped 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -361,7 +341,6 @@ exports[`t-out t-out switch markup on escaped 1`] = `
 exports[`t-out t-out with a <t/> in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -374,7 +353,6 @@ exports[`t-out t-out with a <t/> in body 1`] = `
 exports[`t-out t-out with arbitrary object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -390,7 +368,6 @@ exports[`t-out t-out with arbitrary object 1`] = `
 exports[`t-out t-out with arbitrary object 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -406,7 +383,6 @@ exports[`t-out t-out with arbitrary object 2 1`] = `
 exports[`t-out t-out with comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -422,7 +398,45 @@ exports[`t-out t-out with comment 1`] = `
 exports[`t-out t-out with just a t-set t-value in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
  return function template(ctx, node, key = \\"\\") {
    return safeOutput(ctx['var']);
  }
 }"
 `;
 exports[`t-out t-out with the 0 number 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
  return function template(ctx, node, key = \\"\\") {
    return safeOutput(ctx['var']);
  }
 }"
 `;
 exports[`t-out t-out with the 0 number, in a p 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
  let block1 = createBlock(\`<p><block-child-0/></p>\`);
  return function template(ctx, node, key = \\"\\") {
    const b2 = safeOutput(ctx['var']);
    return block1([], [b2]);
  }
 }"
 `;
 exports[`t-out top level t-out with undefined 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -435,7 +449,6 @@ exports[`t-out t-out with just a t-set t-value in body 1`] = `
 exports[`t-out variable 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -451,7 +464,6 @@ exports[`t-out variable 1`] = `
 exports[`t-out with a String class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -467,7 +479,6 @@ exports[`t-out with a String class 1`] = `
 exports[`t-out with an extended String class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -483,7 +494,6 @@ exports[`t-out with an extended String class 1`] = `
 exports[`t-raw is deprecated should warn 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -499,7 +509,6 @@ exports[`t-raw is deprecated should warn 1`] = `
 exports[`t-raw is deprecated t-out is actually called in t-raw's place 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -3,13 +3,12 @@
 exports[`t-ref can get a dynamic ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
  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]);
@@ -20,13 +19,12 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
 exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
  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]);
@@ -37,13 +35,12 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 exports[`t-ref can get a ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
  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]);
  }
@@ -53,7 +50,6 @@ exports[`t-ref can get a ref on a node 1`] = `
 exports[`t-ref ref in a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -69,13 +65,12 @@ exports[`t-ref ref in a t-call 1`] = `
 exports[`t-ref ref in a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
  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]);
  }
@@ -85,14 +80,13 @@ exports[`t-ref ref in a t-call 2`] = `
 exports[`t-ref ref in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
  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']) {
@@ -106,7 +100,6 @@ exports[`t-ref ref in a t-if 1`] = `
 exports[`t-ref refs in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -114,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++) {
@@ -135,14 +128,13 @@ exports[`t-ref refs in a loop 1`] = `
 exports[`t-ref two refs, one in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
  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;
@@ -3,7 +3,6 @@
 exports[`t-set evaluate value expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -22,7 +21,6 @@ exports[`t-set evaluate value expression 1`] = `
 exports[`t-set evaluate value expression, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -41,7 +39,6 @@ exports[`t-set evaluate value expression, part 2 1`] = `
 exports[`t-set set from attribute literal (no outside div) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -57,7 +54,6 @@ exports[`t-set set from attribute literal (no outside div) 1`] = `
 exports[`t-set set from attribute literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -76,7 +72,6 @@ exports[`t-set set from attribute literal 1`] = `
 exports[`t-set set from attribute lookup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -95,7 +90,6 @@ exports[`t-set set from attribute lookup 1`] = `
 exports[`t-set set from body literal (with t-if/t-else 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue } = helpers;
@@ -112,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']);
  }
 }"
@@ -121,7 +115,6 @@ exports[`t-set set from body literal (with t-if/t-else 1`] = `
 exports[`t-set set from body literal 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -137,7 +130,6 @@ exports[`t-set set from body literal 1`] = `
 exports[`t-set set from body lookup 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue } = helpers;
@@ -150,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]);
  }
@@ -160,7 +152,6 @@ exports[`t-set set from body lookup 1`] = `
 exports[`t-set set from empty body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -179,7 +170,6 @@ exports[`t-set set from empty body 1`] = `
 exports[`t-set t-set and t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -201,7 +191,6 @@ exports[`t-set t-set and t-if 1`] = `
 exports[`t-set t-set body is evaluated immediately 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
@@ -217,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]);
@@ -228,7 +217,6 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
 exports[`t-set t-set can't alter from within callee 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -250,7 +238,6 @@ exports[`t-set t-set can't alter from within callee 1`] = `
 exports[`t-set t-set can't alter from within callee 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -270,7 +257,6 @@ exports[`t-set t-set can't alter from within callee 2`] = `
 exports[`t-set t-set can't alter in t-call body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`sub\`);
@@ -296,7 +282,6 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
 exports[`t-set t-set can't alter in t-call body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -316,7 +301,6 @@ exports[`t-set t-set can't alter in t-call body 2`] = `
 exports[`t-set t-set does not modify render context existing key values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -335,7 +319,6 @@ exports[`t-set t-set does not modify render context existing key values 1`] = `
 exports[`t-set t-set evaluates an expression only once 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -355,7 +338,6 @@ exports[`t-set t-set evaluates an expression only once 1`] = `
 exports[`t-set t-set outside modified in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
@@ -386,7 +368,6 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
 exports[`t-set t-set outside modified in t-foreach increment-after operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
@@ -417,7 +398,6 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
 exports[`t-set t-set outside modified in t-foreach increment-before operator 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
@@ -448,7 +428,6 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
 exports[`t-set t-set should reuse variable if possible 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
@@ -478,7 +457,6 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
 exports[`t-set t-set with content and sub t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue } = helpers;
@@ -493,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]);
  }
@@ -503,7 +481,6 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
 exports[`t-set t-set with t-value (falsy) and body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
@@ -520,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']);
@@ -532,7 +509,6 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
 exports[`t-set t-set with t-value (truthy) and body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, LazyValue, safeOutput } = helpers;
@@ -549,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']);
@@ -558,14 +534,36 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
 }"
 `;
-exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
+exports[`t-set t-set, multiple t-ifs, and a specific configuration 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<p><div><span>First div</span></div><div><block-child-0/></div></p>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
    ctx[isBoundary] = 1
    let b2;
    if (ctx['flag']) {
      setContextValue(ctx, \\"bouh\\", 2);
    }
    if (!ctx['flag']) {
      b2 = text(\`Second\`);
    }
    return block1([], [b2]);
  }
 }"
 `;
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -584,11 +582,10 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -607,7 +604,6 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
 exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -629,7 +625,6 @@ exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
 exports[`t-set value priority (with non text body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue } = helpers;
@@ -643,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]);
  }
@@ -653,7 +648,6 @@ exports[`t-set value priority (with non text body 1`] = `
 exports[`t-set value priority 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -3,7 +3,6 @@
 exports[`qweb t-tag can fallback if falsy tag 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 'fallback'}/>\`);
@@ -18,7 +17,6 @@ exports[`qweb t-tag can fallback if falsy tag 1`] = `
 exports[`qweb t-tag can update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
@@ -33,7 +31,6 @@ exports[`qweb t-tag can update 1`] = `
 exports[`qweb t-tag simple usecases 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
@@ -48,7 +45,6 @@ exports[`qweb t-tag simple usecases 1`] = `
 exports[`qweb t-tag simple usecases 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 't'}>text</\${tag || 't'}>\`);
@@ -63,7 +59,6 @@ exports[`qweb t-tag simple usecases 2`] = `
 exports[`qweb t-tag with multiple attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 't'} class=\\"blueberry\\" taste=\\"raspberry\\">gooseberry</\${tag || 't'}>\`);
@@ -78,7 +73,6 @@ exports[`qweb t-tag with multiple attributes 1`] = `
 exports[`qweb t-tag with multiple child nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
@@ -93,7 +87,6 @@ exports[`qweb t-tag with multiple child nodes 1`] = `
 exports[`qweb t-tag with multiple t-tag in same template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = tag => createBlock(\`<\${tag || 't'}><block-child-0/></\${tag || 't'}>\`);
@@ -111,7 +104,6 @@ exports[`qweb t-tag with multiple t-tag in same template 1`] = `
 exports[`qweb t-tag with multiple t-tag in same template, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = tag => createBlock(\`<\${tag || 't'}>bar</\${tag || 't'}>\`);
@@ -3,7 +3,6 @@
 exports[`loading templates addTemplates does not modify its xml document in place 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -18,7 +17,6 @@ exports[`loading templates addTemplates does not modify its xml document in plac
 exports[`loading templates can initialize qweb with a string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>jupiler</div>\`);
@@ -32,7 +30,6 @@ exports[`loading templates can initialize qweb with a string 1`] = `
 exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>jupiler</div>\`);
@@ -46,7 +43,6 @@ exports[`loading templates can initialize qweb with an XMLDocument 1`] = `
 exports[`loading templates can load a few templates from a xml string 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`items\`);
@@ -62,7 +58,6 @@ exports[`loading templates can load a few templates from a xml string 1`] = `
 exports[`loading templates can load a few templates from a xml string 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<li>ok</li>\`);
@@ -79,7 +74,6 @@ exports[`loading templates can load a few templates from a xml string 2`] = `
 exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`items\`);
@@ -95,7 +89,6 @@ exports[`loading templates can load a few templates from an XMLDocument 1`] = `
 exports[`loading templates can load a few templates from an XMLDocument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<li>ok</li>\`);
@@ -3,7 +3,6 @@
 exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div tomato=\\"word\\" potato=\\"mot\\" title=\\"mot\\" label=\\"word\\">text</div>\`);
@@ -17,7 +16,6 @@ exports[`translation support can set and remove translatable attributes 1`] = `
 exports[`translation support can translate node content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>mot</div>\`);
@@ -31,7 +29,6 @@ exports[`translation support can translate node content 1`] = `
 exports[`translation support does not translate node content if disabled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span>mot</span><span>word</span></div>\`);
@@ -45,7 +42,6 @@ exports[`translation support does not translate node content if disabled 1`] = `
 exports[`translation support some attributes are translated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><p label=\\"mot\\">mot</p><p title=\\"mot\\">mot</p><p placeholder=\\"mot\\">mot</p><p alt=\\"mot\\">mot</p><p something=\\"word\\">mot</p></div>\`);
@@ -59,7 +55,6 @@ exports[`translation support some attributes are translated 1`] = `
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div> mot </div>\`);
@@ -3,7 +3,6 @@
 exports[`white space handling consecutives whitespaces are condensed into a single space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div> abc </div>\`);
@@ -17,7 +16,6 @@ exports[`white space handling consecutives whitespaces are condensed into a sing
 exports[`white space handling nothing is done in pre tags 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<pre>   </pre>\`);
@@ -31,7 +29,6 @@ exports[`white space handling nothing is done in pre tags 1`] = `
 exports[`white space handling nothing is done in pre tags 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<pre>
@@ -47,7 +44,6 @@ exports[`white space handling nothing is done in pre tags 2`] = `
 exports[`white space handling nothing is done in pre tags 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<pre>
@@ -63,7 +59,6 @@ exports[`white space handling nothing is done in pre tags 3`] = `
 exports[`white space handling pre inside a div with a new line 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><pre>SomeText</pre></div>\`);
@@ -77,7 +72,6 @@ exports[`white space handling pre inside a div with a new line 1`] = `
 exports[`white space handling white space only text nodes are condensed into a single space 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div> </div>\`);
@@ -91,7 +85,6 @@ exports[`white space handling white space only text nodes are condensed into a s
 exports[`white space handling whitespace only text nodes with newlines are removed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><span>abc</span></div>\`);
@@ -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"/>`;
@@ -429,6 +463,42 @@ describe("special cases for some specific html attributes/properties", () => {
    expect(input.value).toBe("potato");
  });
  test("input with t-att-value (patching with same value", () => {
    // render input with initial value
    const template = `<input t-att-value="v"/>`;
    const bnode1 = renderToBdom(template, { v: "zucchini" });
    const fixture = makeTestFixture();
    mount(bnode1, fixture);
    const input = fixture.querySelector("input")!;
    expect(input.value).toBe("zucchini");
    // change value manually in input, to simulate user input
    input.value = "tomato";
    expect(input.value).toBe("tomato");
    const bnode2 = renderToBdom(template, { v: "zucchini" });
    patch(bnode1, bnode2);
    expect(input.value).toBe("zucchini");
  });
  test("input, type checkbox, with t-att-checked (patching with same value", () => {
    // render input with initial value
    const template = `<input type="checkbox" t-att-checked="v"/>`;
    const bnode1 = renderToBdom(template, { v: true });
    const fixture = makeTestFixture();
    mount(bnode1, fixture);
    const input = fixture.querySelector("input")!;
    expect(input.checked).toBe(true);
    // change checked manually in input, to simulate user input
    input.checked = false;
    expect(input.checked).toBe(false);
    const bnode2 = renderToBdom(template, { v: true });
    patch(bnode1, bnode2);
    expect(input.checked).toBe(true);
  });
  test("input of type checkbox with t-att-indeterminate", () => {
    const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
    const bnode1 = renderToBdom(template, { v: true });
@@ -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>");
  });
 });
@@ -67,6 +67,21 @@ describe("t-esc", () => {
    );
  });
  test("t-esc with the 0 number", () => {
    const template = `<t t-esc="var"/>`;
    expect(renderToString(template, { var: 0 })).toBe("0");
  });
  test("t-esc with the 0 number, in a p", () => {
    const template = `<p><t t-esc="var"/></p>`;
    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
  });
  test("top level t-esc with undefined", () => {
    const template = `<t t-esc="var"/>`;
    expect(renderToString(template, { var: undefined })).toBe("");
  });
  test("falsy values in text nodes", () => {
    const template = `
        <t t-esc="v1"/>:<t t-esc="v2"/>:<t t-esc="v3"/>:<t t-esc="v4"/>:<t t-esc="v5"/>`;
@@ -47,6 +47,21 @@ describe("t-out", () => {
    expect(renderToString(template, { var: new String("ok") })).toBe("<span>ok</span>");
  });
  test("t-out with the 0 number", () => {
    const template = `<t t-out="var"/>`;
    expect(renderToString(template, { var: 0 })).toBe("0");
  });
  test("t-out with the 0 number, in a p", () => {
    const template = `<p><t t-out="var"/></p>`;
    expect(renderToString(template, { var: 0 })).toBe("<p>0</p>");
  });
  test("top level t-out with undefined", () => {
    const template = `<t t-out="var"/>`;
    expect(renderToString(template, { var: undefined })).toBe("");
  });
  test("with an extended String class", () => {
    class LoveString extends String {
      valueOf(): string {
@@ -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");
@@ -33,6 +33,22 @@ describe("t-set", () => {
    expect(renderToString(template, { value: "ok" })).toBe("<div>grimbergen</div>");
  });
  test("t-set, multiple t-ifs, and a specific configuration", () => {
    const template = `
      <p>
        <div>
          <t t-if="flag" t-set="bouh" t-value="2"/>
          <span>First div</span>
        </div>
        <div>
          <t t-if="!flag">Second</t>
        </div>
      </p>`;
    expect(renderToString(template)).toBe(
      "<p><div><span>First div</span></div><div>Second</div></p>"
    );
  });
  test("set from body literal", () => {
    const template = `<t><t t-set="value">ok</t><t t-esc="value"/></t>`;
    expect(renderToString(template)).toBe("ok");
@@ -3,7 +3,6 @@
 exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, false);
@@ -17,7 +16,6 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
 exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
@@ -34,7 +32,6 @@ exports[`basics GrandChild display is controlled by its GrandParent 2`] = `
 exports[`basics GrandChild display is controlled by its GrandParent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -48,7 +45,6 @@ exports[`basics GrandChild display is controlled by its GrandParent 3`] = `
 exports[`basics Multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<span>1</span>\`);
@@ -66,7 +62,6 @@ exports[`basics Multi root component 1`] = `
 exports[`basics a class component inside a class component, no external dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -79,7 +74,6 @@ exports[`basics a class component inside a class component, no external dom 1`]
 exports[`basics a class component inside a class component, no external dom 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -93,7 +87,6 @@ exports[`basics a class component inside a class component, no external dom 2`]
 exports[`basics a component cannot be mounted in a detached node (even if node is detached later) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -107,7 +100,6 @@ exports[`basics a component cannot be mounted in a detached node (even if node i
 exports[`basics a component inside a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -123,7 +115,6 @@ exports[`basics a component inside a component 1`] = `
 exports[`basics a component inside a component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -137,7 +128,6 @@ exports[`basics a component inside a component 2`] = `
 exports[`basics can be clicked on and updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
@@ -154,7 +144,6 @@ exports[`basics can be clicked on and updated 1`] = `
 exports[`basics can handle empty props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -170,7 +159,6 @@ exports[`basics can handle empty props 1`] = `
 exports[`basics can handle empty props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -185,7 +173,6 @@ exports[`basics can handle empty props 2`] = `
 exports[`basics can inject values in tagged templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -198,7 +185,6 @@ exports[`basics can inject values in tagged templates 1`] = `
 exports[`basics can inject values in tagged templates 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -213,7 +199,6 @@ exports[`basics can inject values in tagged templates 2`] = `
 exports[`basics can mount a component with just some text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -225,7 +210,6 @@ exports[`basics can mount a component with just some text 1`] = `
 exports[`basics can mount a component with no text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -237,7 +221,6 @@ exports[`basics can mount a component with no text 1`] = `
 exports[`basics can mount a simple component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -251,7 +234,6 @@ exports[`basics can mount a simple component 1`] = `
 exports[`basics can mount a simple component with multiple roots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<span/>\`);
@@ -268,7 +250,6 @@ exports[`basics can mount a simple component with multiple roots 1`] = `
 exports[`basics can mount a simple component with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -283,7 +264,6 @@ exports[`basics can mount a simple component with props 1`] = `
 exports[`basics child can be updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -296,7 +276,6 @@ exports[`basics child can be updated 1`] = `
 exports[`basics child can be updated 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -308,7 +287,6 @@ exports[`basics child can be updated 2`] = `
 exports[`basics class component with dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
@@ -323,7 +301,6 @@ exports[`basics class component with dynamic text 1`] = `
 exports[`basics class parent, class child component with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -336,7 +313,6 @@ exports[`basics class parent, class child component with props 1`] = `
 exports[`basics class parent, class child component with props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -351,7 +327,6 @@ exports[`basics class parent, class child component with props 2`] = `
 exports[`basics component children doesn't leak (if case) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -368,7 +343,6 @@ exports[`basics component children doesn't leak (if case) 1`] = `
 exports[`basics component children doesn't leak (if case) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -382,7 +356,6 @@ exports[`basics component children doesn't leak (if case) 2`] = `
 exports[`basics component children doesn't leak (t-key case) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -396,7 +369,6 @@ exports[`basics component children doesn't leak (t-key case) 1`] = `
 exports[`basics component children doesn't leak (t-key case) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -410,7 +382,6 @@ exports[`basics component children doesn't leak (t-key case) 2`] = `
 exports[`basics component with dynamic content can be updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -425,7 +396,6 @@ exports[`basics component with dynamic content can be updated 1`] = `
 exports[`basics do not remove previously rendered dom if not necessary 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -439,7 +409,6 @@ exports[`basics do not remove previously rendered dom if not necessary 1`] = `
 exports[`basics do not remove previously rendered dom if not necessary, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
@@ -454,7 +423,6 @@ exports[`basics do not remove previously rendered dom if not necessary, variatio
 exports[`basics higher order components parent and child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -467,7 +435,6 @@ exports[`basics higher order components parent and child 1`] = `
 exports[`basics higher order components parent and child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
@@ -487,7 +454,6 @@ exports[`basics higher order components parent and child 2`] = `
 exports[`basics higher order components parent and child 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>a</div>\`);
@@ -501,7 +467,6 @@ exports[`basics higher order components parent and child 3`] = `
 exports[`basics higher order components parent and child 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>b</span>\`);
@@ -515,7 +480,6 @@ exports[`basics higher order components parent and child 4`] = `
 exports[`basics list of two sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`SubWidget\`, true, false, false, true);
@@ -543,7 +507,6 @@ exports[`basics list of two sub components inside other nodes 1`] = `
 exports[`basics list of two sub components inside other nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>asdf</span>\`);
@@ -557,7 +520,6 @@ exports[`basics list of two sub components inside other nodes 2`] = `
 exports[`basics parent, child and grandchild 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -570,7 +532,6 @@ exports[`basics parent, child and grandchild 1`] = `
 exports[`basics parent, child and grandchild 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
@@ -583,7 +544,6 @@ exports[`basics parent, child and grandchild 2`] = `
 exports[`basics parent, child and grandchild 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey</div>\`);
@@ -597,7 +557,6 @@ exports[`basics parent, child and grandchild 3`] = `
 exports[`basics props is set on root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -611,7 +570,6 @@ exports[`basics props is set on root component 1`] = `
 exports[`basics props value are own property of props object 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -625,7 +583,6 @@ exports[`basics props value are own property of props object 1`] = `
 exports[`basics props value are own property of props object, even with default values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -639,7 +596,6 @@ exports[`basics props value are own property of props object, even with default
 exports[`basics reconciliation alg is not confused in some specific situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -658,7 +614,6 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
 exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child</span>\`);
@@ -672,7 +627,6 @@ exports[`basics reconciliation alg is not confused in some specific situation 2`
 exports[`basics rerendering a widget with a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Counter\`, true, false, false, true);
@@ -685,7 +639,6 @@ exports[`basics rerendering a widget with a sub widget 1`] = `
 exports[`basics rerendering a widget with a sub widget 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
@@ -702,7 +655,6 @@ exports[`basics rerendering a widget with a sub widget 2`] = `
 exports[`basics same t-keys in two different places 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
@@ -722,7 +674,6 @@ exports[`basics same t-keys in two different places 1`] = `
 exports[`basics same t-keys in two different places 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -737,7 +688,6 @@ exports[`basics same t-keys in two different places 2`] = `
 exports[`basics simple component with a dynamic text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -752,7 +702,6 @@ exports[`basics simple component with a dynamic text 1`] = `
 exports[`basics simple component, useState 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -767,7 +716,6 @@ exports[`basics simple component, useState 1`] = `
 exports[`basics some simple sanity checks (el/status) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -781,7 +729,6 @@ exports[`basics some simple sanity checks (el/status) 1`] = `
 exports[`basics sub components between t-ifs 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -809,7 +756,6 @@ exports[`basics sub components between t-ifs 1`] = `
 exports[`basics sub components between t-ifs 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child</span>\`);
@@ -823,7 +769,6 @@ exports[`basics sub components between t-ifs 2`] = `
 exports[`basics t-elif works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -845,7 +790,6 @@ exports[`basics t-elif works with t-component 1`] = `
 exports[`basics t-elif works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>hey</span>\`);
@@ -859,7 +803,6 @@ exports[`basics t-elif works with t-component 2`] = `
 exports[`basics t-else with empty string works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -881,7 +824,6 @@ exports[`basics t-else with empty string works with t-component 1`] = `
 exports[`basics t-else with empty string works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>hey</span>\`);
@@ -895,7 +837,6 @@ exports[`basics t-else with empty string works with t-component 2`] = `
 exports[`basics t-else works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -917,7 +858,6 @@ exports[`basics t-else works with t-component 1`] = `
 exports[`basics t-else works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>hey</span>\`);
@@ -931,7 +871,6 @@ exports[`basics t-else works with t-component 2`] = `
 exports[`basics t-if works with t-component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -950,7 +889,6 @@ exports[`basics t-if works with t-component 1`] = `
 exports[`basics t-if works with t-component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>hey</span>\`);
@@ -964,7 +902,6 @@ exports[`basics t-if works with t-component 2`] = `
 exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -986,7 +923,6 @@ exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
 exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child</span>\`);
@@ -1000,7 +936,6 @@ exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
 exports[`basics text after a conditional component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1020,7 +955,6 @@ exports[`basics text after a conditional component 1`] = `
 exports[`basics text after a conditional component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p>simple vnode</p>\`);
@@ -1034,7 +968,6 @@ exports[`basics text after a conditional component 2`] = `
 exports[`basics three level of components with collapsing root nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1047,7 +980,6 @@ exports[`basics three level of components with collapsing root nodes 1`] = `
 exports[`basics three level of components with collapsing root nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
@@ -1060,7 +992,6 @@ exports[`basics three level of components with collapsing root nodes 2`] = `
 exports[`basics three level of components with collapsing root nodes 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>2</div>\`);
@@ -1074,7 +1005,6 @@ exports[`basics three level of components with collapsing root nodes 3`] = `
 exports[`basics two child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1090,7 +1020,6 @@ exports[`basics two child components 1`] = `
 exports[`basics two child components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -1104,7 +1033,6 @@ exports[`basics two child components 2`] = `
 exports[`basics update props of component without concrete own node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
@@ -1121,7 +1049,6 @@ exports[`basics update props of component without concrete own node 1`] = `
 exports[`basics update props of component without concrete own node 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Custom\`, true, false, false, false);
@@ -1135,7 +1062,6 @@ exports[`basics update props of component without concrete own node 2`] = `
 exports[`basics update props of component without concrete own node 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"widget-subkey\\"><block-text-0/>__<block-text-1/></div>\`);
@@ -1151,7 +1077,6 @@ exports[`basics update props of component without concrete own node 3`] = `
 exports[`basics updating a component with t-foreach as root 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -1171,7 +1096,6 @@ exports[`basics updating a component with t-foreach as root 1`] = `
 exports[`basics updating widget immediately 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -1184,7 +1108,6 @@ exports[`basics updating widget immediately 1`] = `
 exports[`basics updating widget immediately 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>abc<block-child-0/></span>\`);
@@ -1202,7 +1125,6 @@ exports[`basics updating widget immediately 2`] = `
 exports[`basics widget after a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
@@ -1229,7 +1151,6 @@ exports[`basics widget after a t-foreach 1`] = `
 exports[`basics widget after a t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -1243,7 +1164,6 @@ exports[`basics widget after a t-foreach 2`] = `
 exports[`basics zero or one child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1260,7 +1180,6 @@ exports[`basics zero or one child components 1`] = `
 exports[`basics zero or one child components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -1274,7 +1193,6 @@ exports[`basics zero or one child components 2`] = `
 exports[`mount targets can mount a component (with default position='last-child') 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>app</div>\`);
@@ -1288,7 +1206,6 @@ exports[`mount targets can mount a component (with default position='last-child'
 exports[`mount targets can mount a component (with position='first-child') 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>app</div>\`);
@@ -1302,7 +1219,6 @@ exports[`mount targets can mount a component (with position='first-child') 1`] =
 exports[`mount targets default mount option is 'last-child' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>app</div>\`);
@@ -1316,7 +1232,6 @@ exports[`mount targets default mount option is 'last-child' 1`] = `
 exports[`mount targets mount function: can mount a component (with default position='last-child') 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>app</div>\`);
@@ -1330,7 +1245,6 @@ exports[`mount targets mount function: can mount a component (with default posit
 exports[`support svg components add proper namespace to svg 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GComp\`, true, false, false, true);
@@ -1346,7 +1260,6 @@ exports[`support svg components add proper namespace to svg 1`] = `
 exports[`support svg components add proper namespace to svg 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<g block-ns=\\"http://www.w3.org/2000/svg\\"><circle cx=\\"50\\" cy=\\"50\\" r=\\"4\\" stroke=\\"green\\" stroke-width=\\"1\\" fill=\\"yellow\\"/></g>\`);
@@ -1360,7 +1273,6 @@ exports[`support svg components add proper namespace to svg 2`] = `
 exports[`t-out in components can render list of t-out  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, safeOutput, withKey } = helpers;
@@ -1385,7 +1297,6 @@ exports[`t-out in components can render list of t-out  1`] = `
 exports[`t-out in components can switch the contents of two t-out repeatedly 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -1397,10 +1308,21 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
 }"
 `;
 exports[`t-out in components t-out and updating falsy values,  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
  return function template(ctx, node, key = \\"\\") {
    return safeOutput(ctx['state'].a);
  }
 }"
 `;
 exports[`t-out in components update properly on state changes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -3,7 +3,6 @@
 exports[`Cascading renders after microtaskTick 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -27,7 +26,6 @@ exports[`Cascading renders after microtaskTick 1`] = `
 exports[`Cascading renders after microtaskTick 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Element\`, true, false, false, false);
@@ -48,7 +46,6 @@ exports[`Cascading renders after microtaskTick 2`] = `
 exports[`Cascading renders after microtaskTick 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -60,7 +57,6 @@ exports[`Cascading renders after microtaskTick 3`] = `
 exports[`another scenario with delayed rendering 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -78,7 +74,6 @@ exports[`another scenario with delayed rendering 1`] = `
 exports[`another scenario with delayed rendering 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -93,7 +88,6 @@ exports[`another scenario with delayed rendering 2`] = `
 exports[`another scenario with delayed rendering 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -109,7 +103,6 @@ exports[`another scenario with delayed rendering 3`] = `
 exports[`async rendering destroying a widget before start is over 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -123,7 +116,6 @@ exports[`async rendering destroying a widget before start is over 1`] = `
 exports[`calling render in destroy 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -137,7 +129,6 @@ exports[`calling render in destroy 1`] = `
 exports[`calling render in destroy 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -150,7 +141,6 @@ exports[`calling render in destroy 2`] = `
 exports[`calling render in destroy 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -165,7 +155,6 @@ exports[`calling render in destroy 3`] = `
 exports[`change state and call manually render: no unnecessary rendering 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -180,7 +169,6 @@ exports[`change state and call manually render: no unnecessary rendering 1`] = `
 exports[`changing state before first render does not trigger a render (with parent) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`TestW\`, true, false, false, true);
@@ -199,7 +187,6 @@ exports[`changing state before first render does not trigger a render (with pare
 exports[`changing state before first render does not trigger a render (with parent) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -214,7 +201,6 @@ exports[`changing state before first render does not trigger a render (with pare
 exports[`changing state before first render does not trigger a render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -229,7 +215,6 @@ exports[`changing state before first render does not trigger a render 1`] = `
 exports[`concurrent renderings scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -245,7 +230,6 @@ exports[`concurrent renderings scenario 1 1`] = `
 exports[`concurrent renderings scenario 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -261,7 +245,6 @@ exports[`concurrent renderings scenario 1 2`] = `
 exports[`concurrent renderings scenario 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -277,7 +260,6 @@ exports[`concurrent renderings scenario 1 3`] = `
 exports[`concurrent renderings scenario 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -294,7 +276,6 @@ exports[`concurrent renderings scenario 2 1`] = `
 exports[`concurrent renderings scenario 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -310,7 +291,6 @@ exports[`concurrent renderings scenario 2 2`] = `
 exports[`concurrent renderings scenario 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -326,7 +306,6 @@ exports[`concurrent renderings scenario 2 3`] = `
 exports[`concurrent renderings scenario 2bis 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -342,7 +321,6 @@ exports[`concurrent renderings scenario 2bis 1`] = `
 exports[`concurrent renderings scenario 2bis 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -358,7 +336,6 @@ exports[`concurrent renderings scenario 2bis 2`] = `
 exports[`concurrent renderings scenario 2bis 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -374,7 +351,6 @@ exports[`concurrent renderings scenario 2bis 3`] = `
 exports[`concurrent renderings scenario 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -390,7 +366,6 @@ exports[`concurrent renderings scenario 3 1`] = `
 exports[`concurrent renderings scenario 3 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -406,7 +381,6 @@ exports[`concurrent renderings scenario 3 2`] = `
 exports[`concurrent renderings scenario 3 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
@@ -422,7 +396,6 @@ exports[`concurrent renderings scenario 3 3`] = `
 exports[`concurrent renderings scenario 3 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
@@ -438,7 +411,6 @@ exports[`concurrent renderings scenario 3 4`] = `
 exports[`concurrent renderings scenario 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -454,7 +426,6 @@ exports[`concurrent renderings scenario 4 1`] = `
 exports[`concurrent renderings scenario 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -470,7 +441,6 @@ exports[`concurrent renderings scenario 4 2`] = `
 exports[`concurrent renderings scenario 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
@@ -486,7 +456,6 @@ exports[`concurrent renderings scenario 4 3`] = `
 exports[`concurrent renderings scenario 4 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<i><block-text-0/><block-text-1/></i>\`);
@@ -502,7 +471,6 @@ exports[`concurrent renderings scenario 4 4`] = `
 exports[`concurrent renderings scenario 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -518,7 +486,6 @@ exports[`concurrent renderings scenario 5 1`] = `
 exports[`concurrent renderings scenario 5 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -533,7 +500,6 @@ exports[`concurrent renderings scenario 5 2`] = `
 exports[`concurrent renderings scenario 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -549,7 +515,6 @@ exports[`concurrent renderings scenario 6 1`] = `
 exports[`concurrent renderings scenario 6 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -564,7 +529,6 @@ exports[`concurrent renderings scenario 6 2`] = `
 exports[`concurrent renderings scenario 7 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -580,7 +544,6 @@ exports[`concurrent renderings scenario 7 1`] = `
 exports[`concurrent renderings scenario 7 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
@@ -596,7 +559,6 @@ exports[`concurrent renderings scenario 7 2`] = `
 exports[`concurrent renderings scenario 8 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -612,7 +574,6 @@ exports[`concurrent renderings scenario 8 1`] = `
 exports[`concurrent renderings scenario 8 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
@@ -628,7 +589,6 @@ exports[`concurrent renderings scenario 8 2`] = `
 exports[`concurrent renderings scenario 9 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
  const comp2 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -647,7 +607,6 @@ exports[`concurrent renderings scenario 9 1`] = `
 exports[`concurrent renderings scenario 9 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<b><block-text-0/></b>\`);
@@ -662,7 +621,6 @@ exports[`concurrent renderings scenario 9 2`] = `
 exports[`concurrent renderings scenario 9 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentD\`, true, false, false, false);
@@ -678,7 +636,6 @@ exports[`concurrent renderings scenario 9 3`] = `
 exports[`concurrent renderings scenario 9 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -694,7 +651,6 @@ exports[`concurrent renderings scenario 9 4`] = `
 exports[`concurrent renderings scenario 10 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, false);
@@ -710,7 +666,6 @@ exports[`concurrent renderings scenario 10 1`] = `
 exports[`concurrent renderings scenario 10 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, false);
@@ -729,7 +684,6 @@ exports[`concurrent renderings scenario 10 2`] = `
 exports[`concurrent renderings scenario 10 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -744,7 +698,6 @@ exports[`concurrent renderings scenario 10 3`] = `
 exports[`concurrent renderings scenario 11 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -760,7 +713,6 @@ exports[`concurrent renderings scenario 11 1`] = `
 exports[`concurrent renderings scenario 11 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/>|<block-text-1/></span>\`);
@@ -776,7 +728,6 @@ exports[`concurrent renderings scenario 11 2`] = `
 exports[`concurrent renderings scenario 12 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -792,7 +743,6 @@ exports[`concurrent renderings scenario 12 1`] = `
 exports[`concurrent renderings scenario 12 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -807,7 +757,6 @@ exports[`concurrent renderings scenario 12 2`] = `
 exports[`concurrent renderings scenario 13 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
@@ -828,7 +777,6 @@ exports[`concurrent renderings scenario 13 1`] = `
 exports[`concurrent renderings scenario 13 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -843,7 +791,6 @@ exports[`concurrent renderings scenario 13 2`] = `
 exports[`concurrent renderings scenario 14 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -859,7 +806,6 @@ exports[`concurrent renderings scenario 14 1`] = `
 exports[`concurrent renderings scenario 14 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -875,7 +821,6 @@ exports[`concurrent renderings scenario 14 2`] = `
 exports[`concurrent renderings scenario 14 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
@@ -892,7 +837,6 @@ exports[`concurrent renderings scenario 14 3`] = `
 exports[`concurrent renderings scenario 15 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -908,7 +852,6 @@ exports[`concurrent renderings scenario 15 1`] = `
 exports[`concurrent renderings scenario 15 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -924,7 +867,6 @@ exports[`concurrent renderings scenario 15 2`] = `
 exports[`concurrent renderings scenario 15 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><span><block-text-0/></span><span><block-text-1/></span><span><block-text-2/></span></p>\`);
@@ -941,7 +883,6 @@ exports[`concurrent renderings scenario 15 3`] = `
 exports[`concurrent renderings scenario 16 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -954,7 +895,6 @@ exports[`concurrent renderings scenario 16 1`] = `
 exports[`concurrent renderings scenario 16 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -967,7 +907,6 @@ exports[`concurrent renderings scenario 16 2`] = `
 exports[`concurrent renderings scenario 16 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`D\`, true, false, false, true);
@@ -990,7 +929,6 @@ exports[`concurrent renderings scenario 16 3`] = `
 exports[`concurrent renderings scenario 16 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1002,7 +940,6 @@ exports[`concurrent renderings scenario 16 4`] = `
 exports[`creating two async components, scenario 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, true);
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, true);
@@ -1023,7 +960,6 @@ exports[`creating two async components, scenario 1 1`] = `
 exports[`creating two async components, scenario 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -1038,7 +974,6 @@ exports[`creating two async components, scenario 1 2`] = `
 exports[`creating two async components, scenario 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>b</span>\`);
@@ -1052,7 +987,6 @@ exports[`creating two async components, scenario 1 3`] = `
 exports[`creating two async components, scenario 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
@@ -1073,7 +1007,6 @@ exports[`creating two async components, scenario 2 1`] = `
 exports[`creating two async components, scenario 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>a<block-text-0/></span>\`);
@@ -1088,7 +1021,6 @@ exports[`creating two async components, scenario 2 2`] = `
 exports[`creating two async components, scenario 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>b<block-text-0/></span>\`);
@@ -1103,7 +1035,6 @@ exports[`creating two async components, scenario 2 3`] = `
 exports[`creating two async components, scenario 3 (patching in the same frame) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
@@ -1124,7 +1055,6 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 exports[`creating two async components, scenario 3 (patching in the same frame) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>a<block-text-0/></span>\`);
@@ -1139,7 +1069,6 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 exports[`creating two async components, scenario 3 (patching in the same frame) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>b<block-text-0/></span>\`);
@@ -1154,7 +1083,6 @@ exports[`creating two async components, scenario 3 (patching in the same frame)
 exports[`delay willUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -1167,7 +1095,6 @@ exports[`delay willUpdateProps 1`] = `
 exports[`delay willUpdateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1182,7 +1109,6 @@ exports[`delay willUpdateProps 2`] = `
 exports[`delay willUpdateProps with rendering grandchild 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Parent\`, true, false, false, false);
@@ -1195,7 +1121,6 @@ exports[`delay willUpdateProps with rendering grandchild 1`] = `
 exports[`delay willUpdateProps with rendering grandchild 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`DelayedChild\`, true, false, false, false);
  const comp2 = app.createComponent(\`ReactiveChild\`, true, false, false, true);
@@ -1211,7 +1136,6 @@ exports[`delay willUpdateProps with rendering grandchild 2`] = `
 exports[`delay willUpdateProps with rendering grandchild 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1226,7 +1150,6 @@ exports[`delay willUpdateProps with rendering grandchild 3`] = `
 exports[`delay willUpdateProps with rendering grandchild 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -1240,7 +1163,6 @@ exports[`delay willUpdateProps with rendering grandchild 4`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, true);
@@ -1255,7 +1177,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -1270,7 +1191,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`D\`, true, false, false, true);
@@ -1285,7 +1205,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
 exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1297,7 +1216,6 @@ exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -1310,7 +1228,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -1323,7 +1240,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`D\`, true, false, false, true);
@@ -1341,7 +1257,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, but then initial rendering is cancelled by yet another render 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1357,7 +1272,6 @@ exports[`delayed rendering, but then initial rendering is cancelled by yet anoth
 exports[`delayed rendering, destruction, stuff happens 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -1372,7 +1286,6 @@ exports[`delayed rendering, destruction, stuff happens 1`] = `
 exports[`delayed rendering, destruction, stuff happens 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -1390,7 +1303,6 @@ exports[`delayed rendering, destruction, stuff happens 2`] = `
 exports[`delayed rendering, destruction, stuff happens 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`D\`, true, false, false, true);
@@ -1409,7 +1321,6 @@ exports[`delayed rendering, destruction, stuff happens 3`] = `
 exports[`delayed rendering, destruction, stuff happens 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block3 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1427,7 +1338,6 @@ exports[`delayed rendering, destruction, stuff happens 4`] = `
 exports[`delayed rendering, reusing fiber and stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -1440,7 +1350,6 @@ exports[`delayed rendering, reusing fiber and stuff 1`] = `
 exports[`delayed rendering, reusing fiber and stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -1455,7 +1364,6 @@ exports[`delayed rendering, reusing fiber and stuff 2`] = `
 exports[`delayed rendering, reusing fiber and stuff 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1471,7 +1379,6 @@ exports[`delayed rendering, reusing fiber and stuff 3`] = `
 exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -1489,7 +1396,6 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -1504,7 +1410,6 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1520,7 +1425,6 @@ exports[`delayed rendering, reusing fiber then component is destroyed and  stuff
 exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -1533,7 +1437,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
 exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -1551,7 +1454,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
 exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -1567,7 +1469,6 @@ exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
 exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
  const comp2 = app.createComponent(\`C\`, true, false, false, false);
@@ -1588,7 +1489,6 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1600,7 +1500,6 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1612,7 +1511,6 @@ exports[`destroyed component causes other soon to be destroyed component to rere
 exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1630,7 +1528,6 @@ exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 exports[`destroying/recreating a subcomponent, other scenario 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1642,7 +1539,6 @@ exports[`destroying/recreating a subcomponent, other scenario 2`] = `
 exports[`destroying/recreating a subwidget with different props (if start is not over) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -1661,7 +1557,6 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 exports[`destroying/recreating a subwidget with different props (if start is not over) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child:<block-text-0/></span>\`);
@@ -1676,7 +1571,6 @@ exports[`destroying/recreating a subwidget with different props (if start is not
 exports[`parent and child rendered at exact same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -1689,7 +1583,6 @@ exports[`parent and child rendered at exact same time 1`] = `
 exports[`parent and child rendered at exact same time 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1701,7 +1594,6 @@ exports[`parent and child rendered at exact same time 2`] = `
 exports[`properly behave when destroyed/unmounted while rendering  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -1720,7 +1612,6 @@ exports[`properly behave when destroyed/unmounted while rendering  1`] = `
 exports[`properly behave when destroyed/unmounted while rendering  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`SubChild\`, true, false, false, false);
@@ -1736,7 +1627,6 @@ exports[`properly behave when destroyed/unmounted while rendering  2`] = `
 exports[`properly behave when destroyed/unmounted while rendering  3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -1750,7 +1640,6 @@ exports[`properly behave when destroyed/unmounted while rendering  3`] = `
 exports[`rendering component again in next microtick 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1770,7 +1659,6 @@ exports[`rendering component again in next microtick 1`] = `
 exports[`rendering component again in next microtick 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Child</div>\`);
@@ -1784,7 +1672,6 @@ exports[`rendering component again in next microtick 2`] = `
 exports[`rendering parent twice, with different props on child and stuff 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -1797,7 +1684,6 @@ exports[`rendering parent twice, with different props on child and stuff 1`] = `
 exports[`rendering parent twice, with different props on child and stuff 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1809,7 +1695,6 @@ exports[`rendering parent twice, with different props on child and stuff 2`] = `
 exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
  const comp2 = app.createComponent(\`D\`, true, false, false, true);
@@ -1826,7 +1711,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] =
 exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -1844,7 +1728,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] =
 exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
@@ -1862,7 +1745,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] =
 exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
@@ -1880,7 +1762,6 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] =
 exports[`t-foreach with dynamic async component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(null, false, false, false, false);
@@ -1907,7 +1788,6 @@ exports[`t-foreach with dynamic async component 1`] = `
 exports[`t-foreach with dynamic async component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1922,7 +1802,6 @@ exports[`t-foreach with dynamic async component 2`] = `
 exports[`t-key on dom node having a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, false);
@@ -1940,7 +1819,6 @@ exports[`t-key on dom node having a component 1`] = `
 exports[`t-key on dom node having a component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1952,7 +1830,6 @@ exports[`t-key on dom node having a component 2`] = `
 exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, false);
@@ -1967,7 +1844,6 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
 exports[`t-key on dynamic async component (toggler is never patched) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1982,7 +1858,6 @@ exports[`t-key on dynamic async component (toggler is never patched) 2`] = `
 exports[`two renderings initiated between willPatch and patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Panel\`, true, false, false, false);
@@ -2002,7 +1877,6 @@ exports[`two renderings initiated between willPatch and patched 1`] = `
 exports[`two renderings initiated between willPatch and patched 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<abc><block-text-0/><block-text-1/></abc>\`);
@@ -2018,7 +1892,6 @@ exports[`two renderings initiated between willPatch and patched 2`] = `
 exports[`two sequential renderings before an animation frame 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -2031,7 +1904,6 @@ exports[`two sequential renderings before an animation frame 1`] = `
 exports[`two sequential renderings before an animation frame 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -2043,7 +1915,6 @@ exports[`two sequential renderings before an animation frame 2`] = `
 exports[`update a sub-component twice in the same frame 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
@@ -2059,7 +1930,6 @@ exports[`update a sub-component twice in the same frame 1`] = `
 exports[`update a sub-component twice in the same frame 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -2074,7 +1944,6 @@ exports[`update a sub-component twice in the same frame 2`] = `
 exports[`update a sub-component twice in the same frame, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
@@ -2090,7 +1959,6 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
 exports[`update a sub-component twice in the same frame, 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -3,7 +3,6 @@
 exports[`basics display a nice error if a component is not a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`SomeComponent\`, true, false, false, true);
@@ -16,13 +15,12 @@ exports[`basics display a nice error if a component is not a component 1`] = `
 exports[`basics display a nice error if it cannot find component (in dev mode) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
  return function template(ctx, node, key = \\"\\") {
    const props1 = {};
-    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -31,7 +29,6 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
 exports[`basics display a nice error if it cannot find component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`SomeMispelledComponent\`, true, false, false, true);
@@ -41,10 +38,24 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
@@ -60,7 +71,6 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
 exports[`basics no component catching error lead to full app destruction 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -75,7 +85,6 @@ exports[`basics no component catching error lead to full app destruction 2`] = `
 exports[`basics simple catchError 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
@@ -96,7 +105,6 @@ exports[`basics simple catchError 1`] = `
 exports[`basics simple catchError 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -108,10 +116,75 @@ exports[`basics simple catchError 2`] = `
 }"
 `;
 exports[`can catch errors Errors have the right cause 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 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;
  return function template(ctx, node, key = \\"\\") {
    return text(ctx['state'].value);
  }
 }"
 `;
 exports[`can catch errors Errors in owl lifecycle are wrapped out of dev mode: async hook 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 Errors in owl lifecycle are wrapped outside dev mode: sync hook 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 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -129,7 +202,6 @@ exports[`can catch errors an error in onWillDestroy 1`] = `
 exports[`can catch errors an error in onWillDestroy 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>abc</div>\`);
@@ -143,7 +215,6 @@ exports[`can catch errors an error in onWillDestroy 2`] = `
 exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -161,7 +232,6 @@ exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 exports[`can catch errors an error in onWillDestroy, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>abc</div>\`);
@@ -175,7 +245,6 @@ exports[`can catch errors an error in onWillDestroy, variation 2`] = `
 exports[`can catch errors calling a hook outside setup should crash 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -187,7 +256,6 @@ exports[`can catch errors calling a hook outside setup should crash 1`] = `
 exports[`can catch errors can catch an error in a component render function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
@@ -200,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]);
  }
 }"
@@ -209,7 +277,6 @@ exports[`can catch errors can catch an error in a component render function 1`]
 exports[`can catch errors can catch an error in a component render function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -230,7 +297,6 @@ exports[`can catch errors can catch an error in a component render function 2`]
 exports[`can catch errors can catch an error in a component render function 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -245,7 +311,6 @@ exports[`can catch errors can catch an error in a component render function 3`]
 exports[`can catch errors can catch an error in the constructor call of a component render function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -258,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]);
  }
 }"
@@ -267,7 +332,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -288,7 +352,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
@@ -304,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]);
  }
 }"
@@ -313,7 +376,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -334,7 +396,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>classic</div>\`);
@@ -348,7 +409,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 2 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -362,7 +422,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the constructor call of a component render function 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -376,7 +435,6 @@ exports[`can catch errors can catch an error in the constructor call of a compon
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -389,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]);
  }
 }"
@@ -398,7 +456,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -419,7 +476,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -434,7 +490,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -449,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]);
  }
@@ -459,7 +514,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -480,7 +534,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -495,7 +548,6 @@ exports[`can catch errors can catch an error in the initial call of a component
 exports[`can catch errors can catch an error in the mounted call (in child of child) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, true);
@@ -508,7 +560,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in child of child) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -524,7 +575,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in child of child) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
@@ -545,7 +595,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in child of child) 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -559,7 +608,6 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
 exports[`can catch errors can catch an error in the mounted call (in root component) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -580,7 +628,6 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 exports[`can catch errors can catch an error in the mounted call (in root component) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -594,7 +641,6 @@ exports[`can catch errors can catch an error in the mounted call (in root compon
 exports[`can catch errors can catch an error in the mounted call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -607,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]);
  }
 }"
@@ -616,7 +662,6 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
 exports[`can catch errors can catch an error in the mounted call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -637,7 +682,6 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
 exports[`can catch errors can catch an error in the mounted call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -651,7 +695,6 @@ exports[`can catch errors can catch an error in the mounted call 3`] = `
 exports[`can catch errors can catch an error in the willPatch call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, false);
@@ -665,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]);
  }
 }"
@@ -674,7 +717,6 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
 exports[`can catch errors can catch an error in the willPatch call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -695,7 +737,6 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
 exports[`can catch errors can catch an error in the willPatch call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -710,7 +751,6 @@ exports[`can catch errors can catch an error in the willPatch call 3`] = `
 exports[`can catch errors can catch an error in the willStart call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -723,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]);
  }
 }"
@@ -732,7 +772,6 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
 exports[`can catch errors can catch an error in the willStart call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -753,7 +792,6 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
 exports[`can catch errors can catch an error in the willStart call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -767,7 +805,6 @@ exports[`can catch errors can catch an error in the willStart call 3`] = `
 exports[`can catch errors can catch an error origination from a child's willStart function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`ClassicCompoent\`, true, false, false, true);
@@ -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]);
  }
 }"
@@ -792,7 +829,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors can catch an error origination from a child's willStart function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -813,7 +849,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors can catch an error origination from a child's willStart function 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>classic</div>\`);
@@ -827,7 +862,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors can catch an error origination from a child's willStart function 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -841,7 +875,6 @@ exports[`can catch errors can catch an error origination from a child's willStar
 exports[`can catch errors catchError in catchError 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -862,7 +895,6 @@ exports[`can catch errors catchError in catchError 1`] = `
 exports[`can catch errors catchError in catchError 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Boom\`, true, false, false, true);
@@ -878,7 +910,6 @@ exports[`can catch errors catchError in catchError 2`] = `
 exports[`can catch errors catchError in catchError 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -893,7 +924,6 @@ exports[`can catch errors catchError in catchError 3`] = `
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, capture, markRaw, withKey } = helpers;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -910,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);
  }
@@ -922,7 +953,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -935,7 +965,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ErrorComponent\`, true, false, false, true);
@@ -948,7 +977,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -962,7 +990,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching error, rethrow, render parent  -- a main component loop implementation 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Sibling</div>\`);
@@ -976,7 +1003,6 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
 exports[`can catch errors catching in child makes parent render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, capture, markRaw, withKey } = helpers;
  const comp1 = app.createComponent(null, false, false, false, false);
@@ -989,13 +1015,14 @@ exports[`can catch errors catching in child makes parent render 1`] = `
  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);
  }
@@ -1005,7 +1032,6 @@ exports[`can catch errors catching in child makes parent render 1`] = `
 exports[`can catch errors catching in child makes parent render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -1018,7 +1044,6 @@ exports[`can catch errors catching in child makes parent render 2`] = `
 exports[`can catch errors catching in child makes parent render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -1032,7 +1057,6 @@ exports[`can catch errors catching in child makes parent render 3`] = `
 exports[`can catch errors catching in child makes parent render 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1047,7 +1071,6 @@ exports[`can catch errors catching in child makes parent render 4`] = `
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`OK\`, true, false, false, true);
@@ -1062,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]);
  }
 }"
@@ -1071,7 +1094,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -1083,7 +1105,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -1104,7 +1125,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors error in mounted on a component with a sibling (properly mounted) 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>Some text</div>\`);
@@ -1118,7 +1138,6 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
 exports[`can catch errors onError in class inheritance is called if rethrown 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
@@ -1131,7 +1150,6 @@ exports[`can catch errors onError in class inheritance is called if rethrown 1`]
 exports[`can catch errors onError in class inheritance is called if rethrown 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -1139,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);
    }
@@ -1151,7 +1169,6 @@ exports[`can catch errors onError in class inheritance is called if rethrown 2`]
 exports[`can catch errors onError in class inheritance is not called if no rethrown 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Concrete\`, true, false, false, true);
@@ -1164,7 +1181,6 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 exports[`can catch errors onError in class inheritance is not called if no rethrown 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
@@ -1172,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);
    }
@@ -1184,7 +1200,6 @@ exports[`can catch errors onError in class inheritance is not called if no rethr
 exports[`errors and promises a rendering error in a sub component will reject the mount promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1200,13 +1215,12 @@ exports[`errors and promises a rendering error in a sub component will reject th
 exports[`errors and promises a rendering error in a sub component will reject the mount promise 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  return function template(ctx, node, key = \\"\\") {
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
    return block1([txt1]);
  }
 }"
@@ -1215,13 +1229,12 @@ exports[`errors and promises a rendering error in a sub component will reject th
 exports[`errors and promises a rendering error will reject the mount promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
  return function template(ctx, node, key = \\"\\") {
-    let txt1 = this.will.crash;
+    let txt1 = ctx['this'].will.crash;
    return block1([txt1]);
  }
 }"
@@ -1230,7 +1243,6 @@ exports[`errors and promises a rendering error will reject the mount promise 1`]
 exports[`errors and promises a rendering error will reject the render promise (with sub components) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -1247,7 +1259,6 @@ exports[`errors and promises a rendering error will reject the render promise (w
 exports[`errors and promises a rendering error will reject the render promise (with sub components) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span/>\`);
@@ -1261,7 +1272,6 @@ exports[`errors and promises a rendering error will reject the render promise (w
 exports[`errors and promises a rendering error will reject the render promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -1269,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]);
  }
@@ -1279,7 +1289,6 @@ exports[`errors and promises a rendering error will reject the render promise 1`
 exports[`errors and promises an error in mounted call will reject the mount promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>abc</div>\`);
@@ -1293,7 +1302,6 @@ exports[`errors and promises an error in mounted call will reject the mount prom
 exports[`errors and promises an error in onMounted callback will have the component's setup in its stack trace 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>abc</div>\`);
@@ -1307,7 +1315,6 @@ exports[`errors and promises an error in onMounted callback will have the compon
 exports[`errors and promises an error in patched call will reject the render promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1322,7 +1329,6 @@ exports[`errors and promises an error in patched call will reject the render pro
 exports[`errors and promises an error in willPatch call will reject the render promise 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1337,7 +1343,6 @@ exports[`errors and promises an error in willPatch call will reject the render p
 exports[`errors and promises errors in mounted and in willUnmount 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -1351,7 +1356,6 @@ exports[`errors and promises errors in mounted and in willUnmount 1`] = `
 exports[`errors and promises errors in onWillRender/onRender aren't wrapped more than once 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>abc</div>\`);
@@ -1365,7 +1369,6 @@ exports[`errors and promises errors in onWillRender/onRender aren't wrapped more
 exports[`errors and promises errors in rerender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -1376,3 +1379,16 @@ exports[`errors and promises errors in rerender 1`] = `
  }
 }"
 `;
 exports[`errors and promises wrapped errors in async code are correctly caught 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>abc</div>\`);
  return function template(ctx, node, key = \\"\\") {
    return block1();
  }
 }"
 `;
@@ -3,7 +3,6 @@
 exports[`event handling Invalid handler throws an error 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\">click</button>\`);
@@ -18,7 +17,6 @@ exports[`event handling Invalid handler throws an error 1`] = `
 exports[`event handling handler is not called if component is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span block-handler-0=\\"click\\"/>\`);
@@ -33,7 +31,6 @@ exports[`event handling handler is not called if component is destroyed 1`] = `
 exports[`event handling handler receive the event as argument 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -51,7 +48,6 @@ exports[`event handling handler receive the event as argument 1`] = `
 exports[`event handling handler receive the event as argument 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>simple vnode</div>\`);
@@ -62,10 +58,23 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -84,7 +93,6 @@ exports[`event handling input blur event is not called if component is destroyed
 exports[`event handling input blur event is not called if component is destroyed 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<input block-handler-0=\\"blur\\"/>\`);
@@ -99,7 +107,6 @@ exports[`event handling input blur event is not called if component is destroyed
 exports[`event handling objects from scope are properly captured by t-on 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -126,7 +133,6 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
 exports[`event handling support for callable expression in event handler 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
@@ -142,7 +148,6 @@ exports[`event handling support for callable expression in event handler 1`] = `
 exports[`event handling t-on with handler bound to dynamic argument on a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -3,7 +3,6 @@
 exports[`basics basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -16,7 +15,6 @@ exports[`basics basic use 1`] = `
 exports[`basics basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
@@ -31,7 +29,6 @@ exports[`basics basic use 2`] = `
 exports[`basics can select a sub widget  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
@@ -52,7 +49,6 @@ exports[`basics can select a sub widget  1`] = `
 exports[`basics can select a sub widget  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>CHILD 1</span>\`);
@@ -66,7 +62,6 @@ exports[`basics can select a sub widget  2`] = `
 exports[`basics can select a sub widget  3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>CHILD 2</div>\`);
@@ -80,7 +75,6 @@ exports[`basics can select a sub widget  3`] = `
 exports[`basics can select a sub widget, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const comp2 = app.createComponent(\`OtherChild\`, true, false, false, true);
@@ -101,7 +95,6 @@ exports[`basics can select a sub widget, part 2 1`] = `
 exports[`basics can select a sub widget, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>CHILD 1</span>\`);
@@ -115,7 +108,6 @@ exports[`basics can select a sub widget, part 2 2`] = `
 exports[`basics can select a sub widget, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>CHILD 2</div>\`);
@@ -129,7 +121,6 @@ exports[`basics can select a sub widget, part 2 3`] = `
 exports[`basics sub widget is interactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -142,7 +133,6 @@ exports[`basics sub widget is interactive 1`] = `
 exports[`basics sub widget is interactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
@@ -158,7 +148,6 @@ exports[`basics sub widget is interactive 2`] = `
 exports[`basics top level sub widget with a parent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentB\`, true, false, false, true);
@@ -174,7 +163,6 @@ exports[`basics top level sub widget with a parent 1`] = `
 exports[`basics top level sub widget with a parent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ComponentC\`, true, false, false, true);
@@ -187,7 +175,6 @@ exports[`basics top level sub widget with a parent 2`] = `
 exports[`basics top level sub widget with a parent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>Hello</span>\`);
@@ -3,14 +3,13 @@
 exports[`hooks autofocus hook input in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><block-child-0/></div>\`);
  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;
@@ -25,13 +24,12 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
 exports[`hooks autofocus hook simple input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
  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]);
@@ -42,7 +40,6 @@ exports[`hooks autofocus hook simple input 1`] = `
 exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, false);
@@ -55,7 +52,6 @@ exports[`hooks can use onWillStart, onWillUpdateProps 1`] = `
 exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -70,7 +66,6 @@ exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
 exports[`hooks can use useComponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -84,7 +79,6 @@ exports[`hooks can use useComponent 1`] = `
 exports[`hooks can use useEnv 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -99,7 +93,6 @@ exports[`hooks can use useEnv 1`] = `
 exports[`hooks mounted callbacks should be called in reverse order from willUnmount callbacks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -114,7 +107,6 @@ exports[`hooks mounted callbacks should be called in reverse order from willUnmo
 exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -129,7 +121,6 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
 exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<div><block-text-0/></div>\`);
@@ -148,7 +139,6 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 2`] = `
 exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -163,7 +153,6 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
 exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -178,7 +167,6 @@ exports[`hooks parent and child env (with useChildSubEnv) 2`] = `
 exports[`hooks parent and child env (with useSubEnv) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -193,7 +181,6 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
 exports[`hooks parent and child env (with useSubEnv) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -208,7 +195,6 @@ exports[`hooks parent and child env (with useSubEnv) 2`] = `
 exports[`hooks two different call to willPatch/patched should work 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
@@ -223,7 +209,6 @@ exports[`hooks two different call to willPatch/patched should work 1`] = `
 exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -238,7 +223,6 @@ exports[`hooks useChildSubEnv does not pollute user env 1`] = `
 exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -251,7 +235,6 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 1`] = `
 exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
@@ -267,7 +250,6 @@ exports[`hooks useChildSubEnv supports arbitrary descriptor 2`] = `
 exports[`hooks useEffect hook dependencies prevent effects from rerunning when unchanged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -281,13 +263,12 @@ exports[`hooks useEffect hook dependencies prevent effects from rerunning when u
 exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
  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) {
@@ -301,7 +282,6 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and is cleaned up on unmount and before reapplying 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -315,7 +295,6 @@ exports[`hooks useEffect hook effect runs on mount, is reapplied on patch, and i
 exports[`hooks useEffect hook effect with empty dependency list never reruns 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -330,7 +309,6 @@ exports[`hooks useEffect hook effect with empty dependency list never reruns 1`]
 exports[`hooks useEffect hook properly behaves when the effect function throws 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -344,7 +322,6 @@ exports[`hooks useEffect hook properly behaves when the effect function throws 1
 exports[`hooks useExternalListener 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`MyComponent\`, true, false, false, true);
@@ -361,7 +338,6 @@ exports[`hooks useExternalListener 1`] = `
 exports[`hooks useExternalListener 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -376,13 +352,12 @@ exports[`hooks useExternalListener 2`] = `
 exports[`hooks useRef hook: basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
  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]);
@@ -393,7 +368,6 @@ exports[`hooks useRef hook: basic use 1`] = `
 exports[`hooks useSubEnv modifies user env 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -408,7 +382,6 @@ exports[`hooks useSubEnv modifies user env 1`] = `
 exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -421,7 +394,6 @@ exports[`hooks useSubEnv supports arbitrary descriptor 1`] = `
 exports[`hooks useSubEnv supports arbitrary descriptor 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
@@ -3,7 +3,6 @@
 exports[`lifecycle hooks basic checks for a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>test</span>\`);
@@ -17,7 +16,6 @@ exports[`lifecycle hooks basic checks for a component 1`] = `
 exports[`lifecycle hooks component semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, true);
  const comp2 = app.createComponent(\`C\`, true, false, false, true);
@@ -35,7 +33,6 @@ exports[`lifecycle hooks component semantics 1`] = `
 exports[`lifecycle hooks component semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>B</div>\`);
@@ -49,7 +46,6 @@ exports[`lifecycle hooks component semantics 2`] = `
 exports[`lifecycle hooks component semantics 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`D\`, true, false, false, true);
  const comp2 = app.createComponent(\`E\`, true, false, false, true);
@@ -73,7 +69,6 @@ exports[`lifecycle hooks component semantics 3`] = `
 exports[`lifecycle hooks component semantics 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>D</div>\`);
@@ -87,7 +82,6 @@ exports[`lifecycle hooks component semantics 4`] = `
 exports[`lifecycle hooks component semantics 5`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>E</div>\`);
@@ -101,7 +95,6 @@ exports[`lifecycle hooks component semantics 5`] = `
 exports[`lifecycle hooks component semantics 6`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>F</div>\`);
@@ -115,7 +108,6 @@ exports[`lifecycle hooks component semantics 6`] = `
 exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -135,7 +127,6 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -150,7 +141,6 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
 exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -167,7 +157,6 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -181,7 +170,6 @@ exports[`lifecycle hooks components are unmounted destroyed if no longer in DOM
 exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -200,7 +188,6 @@ exports[`lifecycle hooks destroy new children before being mountged 1`] = `
 exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -212,7 +199,6 @@ exports[`lifecycle hooks destroy new children before being mountged 2`] = `
 exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -228,7 +214,6 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -242,7 +227,6 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
 exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
@@ -255,7 +239,6 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 1`] = `
 exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -267,7 +250,6 @@ exports[`lifecycle hooks lifecycle callbacks are bound to component 2`] = `
 exports[`lifecycle hooks lifecycle semantics 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -283,7 +265,6 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
 exports[`lifecycle hooks lifecycle semantics 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -297,7 +278,6 @@ exports[`lifecycle hooks lifecycle semantics 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -314,7 +294,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
@@ -327,7 +306,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -341,7 +319,6 @@ exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
 exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -358,7 +335,6 @@ exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -375,7 +351,6 @@ exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`GrandChild\`, true, false, false, true);
@@ -388,7 +363,6 @@ exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -402,7 +376,6 @@ exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
 exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -419,7 +392,6 @@ exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -433,7 +405,6 @@ exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
 exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -446,7 +417,6 @@ exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
 exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -460,7 +430,6 @@ exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
 exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -474,7 +443,6 @@ exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
 exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -491,7 +459,6 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 exports[`lifecycle hooks mounted hook is called on every mount, not just the first one 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>child</div>\`);
@@ -505,7 +472,6 @@ exports[`lifecycle hooks mounted hook is called on every mount, not just the fir
 exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -521,7 +487,6 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -535,7 +500,6 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -554,7 +518,6 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, true);
@@ -570,7 +533,6 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -584,7 +546,6 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
 exports[`lifecycle hooks onWillRender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -597,7 +558,6 @@ exports[`lifecycle hooks onWillRender 1`] = `
 exports[`lifecycle hooks onWillRender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
@@ -613,7 +573,6 @@ exports[`lifecycle hooks onWillRender 2`] = `
 exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -629,7 +588,6 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
 exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -643,7 +601,6 @@ exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
 exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -658,7 +615,6 @@ exports[`lifecycle hooks patched hook is called after updating State 1`] = `
 exports[`lifecycle hooks render in mounted 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -673,7 +629,6 @@ exports[`lifecycle hooks render in mounted 1`] = `
 exports[`lifecycle hooks render in patched 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -688,7 +643,6 @@ exports[`lifecycle hooks render in patched 1`] = `
 exports[`lifecycle hooks render in willPatch 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -703,7 +657,6 @@ exports[`lifecycle hooks render in willPatch 1`] = `
 exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -720,7 +673,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -734,7 +686,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span/>\`);
@@ -748,13 +699,12 @@ exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  return function template(ctx, node, key = \\"\\") {
    const props1 = {prop: ctx['state'].prop};
-    helpers.validateProps(\`Child\`, props1, ctx);
+    helpers.validateProps(\`Child\`, props1, this);
    return comp1(props1, key + \`__1\`, node, this, null);
  }
 }"
@@ -763,7 +713,6 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -775,7 +724,6 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -791,7 +739,6 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
@@ -807,7 +754,6 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -822,7 +768,6 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
 exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -835,7 +780,6 @@ exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
 exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -849,7 +793,6 @@ exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
 exports[`lifecycle hooks willStart is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -863,7 +806,6 @@ exports[`lifecycle hooks willStart is called 1`] = `
 exports[`lifecycle hooks willStart is called with component as this 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>simple vnode</span>\`);
@@ -877,7 +819,6 @@ exports[`lifecycle hooks willStart is called with component as this 1`] = `
 exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -899,7 +840,6 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -913,7 +853,6 @@ exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is
 exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -926,7 +865,6 @@ exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
 exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -3,7 +3,6 @@
 exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -19,7 +18,6 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -34,7 +32,6 @@ exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
 exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -57,7 +54,6 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
 exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
@@ -72,7 +68,6 @@ exports[`basics arrow functions as prop correctly capture their scope 2`] = `
 exports[`basics explicit object prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -88,7 +83,6 @@ exports[`basics explicit object prop 1`] = `
 exports[`basics explicit object prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -103,7 +97,6 @@ exports[`basics explicit object prop 2`] = `
 exports[`basics prop names can contain - 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -116,7 +109,6 @@ exports[`basics prop names can contain - 1`] = `
 exports[`basics prop names can contain - 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -131,7 +123,6 @@ exports[`basics prop names can contain - 2`] = `
 exports[`basics support prop names that aren't valid bare object property names 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -144,7 +135,6 @@ exports[`basics support prop names that aren't valid bare object property names
 exports[`basics support prop names that aren't valid bare object property names 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
@@ -159,7 +149,6 @@ exports[`basics support prop names that aren't valid bare object property names
 exports[`basics t-set with a body expression can be passed in props, and then t-out 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -174,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]);
  }
@@ -184,7 +173,6 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 exports[`basics t-set with a body expression can be passed in props, and then t-out 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { safeOutput } = helpers;
@@ -201,7 +189,6 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
 exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -221,7 +208,6 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
 exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -236,7 +222,6 @@ exports[`basics t-set with a body expression can be used as textual prop 2`] = `
 exports[`basics t-set works  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -256,7 +241,6 @@ exports[`basics t-set works  1`] = `
 exports[`basics t-set works  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -271,7 +255,6 @@ exports[`basics t-set works  2`] = `
 exports[`basics template string in prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -284,7 +267,6 @@ exports[`basics template string in prop 1`] = `
 exports[`basics template string in prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -296,13 +278,12 @@ exports[`basics template string in prop 2`] = `
 exports[`bound functions is referentially equal after update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { bind } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null);
+    return comp1({val: ctx['state'].val,fn: bind(this, ctx['someFunction'])}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -310,7 +291,6 @@ exports[`bound functions is referentially equal after update 1`] = `
 exports[`bound functions is referentially equal after update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -322,13 +302,12 @@ exports[`bound functions is referentially equal after update 2`] = `
 exports[`can bind function prop with bind suffix 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { bind } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  return function template(ctx, node, key = \\"\\") {
-    return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null);
+    return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null);
  }
 }"
 `;
@@ -336,7 +315,6 @@ exports[`can bind function prop with bind suffix 1`] = `
 exports[`can bind function prop with bind suffix 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -3,7 +3,6 @@
 exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -20,7 +19,6 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -32,7 +30,6 @@ exports[`reactivity in lifecycle Child component doesn't render when state they
 exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -45,7 +42,6 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -59,7 +55,6 @@ exports[`reactivity in lifecycle Component is automatically subscribed to reacti
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -74,7 +69,6 @@ exports[`reactivity in lifecycle can use a state hook 1`] = `
 exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -89,7 +83,6 @@ exports[`reactivity in lifecycle can use a state hook 2 1`] = `
 exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -104,7 +97,6 @@ exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
 exports[`reactivity in lifecycle change state while mounting component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -119,7 +111,6 @@ exports[`reactivity in lifecycle change state while mounting component 1`] = `
 exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -138,7 +129,6 @@ exports[`reactivity in lifecycle state changes in willUnmount do not trigger rer
 exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -3,13 +3,12 @@
 exports[`refs basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
  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]);
  }
@@ -19,7 +18,6 @@ exports[`refs basic use 1`] = `
 exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { multiRefSetter } = helpers;
@@ -27,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) {
@@ -43,14 +41,13 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 exports[`refs refs and recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Test\`, true, false, false, false);
  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;
@@ -65,7 +62,6 @@ exports[`refs refs and recursive templates 1`] = `
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { capture, markRaw } = helpers;
  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
@@ -74,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]);
@@ -83,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]);
  }
 }"
@@ -92,7 +88,6 @@ exports[`refs refs are properly bound in slots 1`] = `
 exports[`refs refs are properly bound in slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -108,7 +103,6 @@ exports[`refs refs are properly bound in slots 2`] = `
 exports[`refs throws if there are 2 same refs at the same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { multiRefSetter } = helpers;
@@ -116,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]);
@@ -3,7 +3,6 @@
 exports[`children, default props and renderings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -18,7 +17,6 @@ exports[`children, default props and renderings 1`] = `
 exports[`children, default props and renderings 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -30,7 +28,6 @@ exports[`children, default props and renderings 2`] = `
 exports[`force render in case of existing render 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -43,7 +40,6 @@ exports[`force render in case of existing render 1`] = `
 exports[`force render in case of existing render 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -58,7 +54,6 @@ exports[`force render in case of existing render 2`] = `
 exports[`force render in case of existing render 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -70,7 +65,6 @@ exports[`force render in case of existing render 3`] = `
 exports[`rendering semantics can force a render to update sub tree 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -85,7 +79,6 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
 exports[`rendering semantics can force a render to update sub tree 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -97,7 +90,6 @@ exports[`rendering semantics can force a render to update sub tree 2`] = `
 exports[`rendering semantics can render a parent without rendering child 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -112,7 +104,6 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
 exports[`rendering semantics can render a parent without rendering child 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -124,7 +115,6 @@ exports[`rendering semantics can render a parent without rendering child 2`] = `
 exports[`rendering semantics props are reactive (nested prop) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -137,7 +127,6 @@ exports[`rendering semantics props are reactive (nested prop) 1`] = `
 exports[`rendering semantics props are reactive (nested prop) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -149,7 +138,6 @@ exports[`rendering semantics props are reactive (nested prop) 2`] = `
 exports[`rendering semantics props are reactive 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -162,7 +150,6 @@ exports[`rendering semantics props are reactive 1`] = `
 exports[`rendering semantics props are reactive 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -174,7 +161,6 @@ exports[`rendering semantics props are reactive 2`] = `
 exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -189,7 +175,6 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
 exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -201,7 +186,6 @@ exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -217,7 +201,6 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -231,7 +214,6 @@ exports[`rendering semantics render with deep=true followed by render with deep=
 exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`B\`, true, false, false, false);
@@ -246,7 +228,6 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
 exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`C\`, true, false, false, false);
@@ -259,7 +240,6 @@ exports[`rendering semantics rendering is atomic (for one subtree) 2`] = `
 exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -271,7 +251,6 @@ exports[`rendering semantics rendering is atomic (for one subtree) 3`] = `
 exports[`rendering semantics works as expected for dynamic number of props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
@@ -284,7 +263,6 @@ exports[`rendering semantics works as expected for dynamic number of props 1`] =
 exports[`rendering semantics works as expected for dynamic number of props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -3,7 +3,6 @@
 exports[`style and class handling can set class on multi root component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -16,7 +15,6 @@ exports[`style and class handling can set class on multi root component 1`] = `
 exports[`style and class handling can set class on multi root component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block2 = createBlock(\`<div>a</div>\`);
@@ -34,7 +32,6 @@ exports[`style and class handling can set class on multi root component 2`] = `
 exports[`style and class handling can set class on sub component, as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -47,7 +44,6 @@ exports[`style and class handling can set class on sub component, as prop 1`] =
 exports[`style and class handling can set class on sub component, as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
@@ -62,7 +58,6 @@ exports[`style and class handling can set class on sub component, as prop 2`] =
 exports[`style and class handling can set class on sub sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -75,7 +70,6 @@ exports[`style and class handling can set class on sub sub component 1`] = `
 exports[`style and class handling can set class on sub sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildChild\`, true, false, false, false);
@@ -88,7 +82,6 @@ exports[`style and class handling can set class on sub sub component 2`] = `
 exports[`style and class handling can set class on sub sub component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
@@ -103,7 +96,6 @@ exports[`style and class handling can set class on sub sub component 3`] = `
 exports[`style and class handling can set more than one class on sub component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -116,7 +108,6 @@ exports[`style and class handling can set more than one class on sub component 1
 exports[`style and class handling can set more than one class on sub component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
@@ -131,7 +122,6 @@ exports[`style and class handling can set more than one class on sub component 2
 exports[`style and class handling can set style and class inside component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
@@ -145,7 +135,6 @@ exports[`style and class handling can set style and class inside component 1`] =
 exports[`style and class handling class on components do not interfere with user defined classes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -160,7 +149,6 @@ exports[`style and class handling class on components do not interfere with user
 exports[`style and class handling class on sub component, which is switched to another 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -173,7 +161,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`ChildA\`, true, false, false, false);
  const comp2 = app.createComponent(\`ChildB\`, true, false, false, false);
@@ -193,7 +180,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
@@ -208,7 +194,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class on sub component, which is switched to another 4`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
@@ -223,7 +208,6 @@ exports[`style and class handling class on sub component, which is switched to a
 exports[`style and class handling class with extra whitespaces (variation) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -239,7 +223,6 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
 exports[`style and class handling class with extra whitespaces (variation) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -254,7 +237,6 @@ exports[`style and class handling class with extra whitespaces (variation) 2`] =
 exports[`style and class handling class with extra whitespaces 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -267,7 +249,6 @@ exports[`style and class handling class with extra whitespaces 1`] = `
 exports[`style and class handling class with extra whitespaces 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
@@ -282,7 +263,6 @@ exports[`style and class handling class with extra whitespaces 2`] = `
 exports[`style and class handling component class and parent class combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -295,7 +275,6 @@ exports[`style and class handling component class and parent class combine toget
 exports[`style and class handling component class and parent class combine together 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
@@ -337,7 +316,6 @@ exports[`style and class handling dynamic t-att-style is properly added and upda
 exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -353,7 +331,6 @@ exports[`style and class handling empty class attribute is not added on widget r
 exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
@@ -368,7 +345,6 @@ exports[`style and class handling empty class attribute is not added on widget r
 exports[`style and class handling error in subcomponent with class 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -381,14 +357,13 @@ exports[`style and class handling error in subcomponent with class 1`] = `
 exports[`style and class handling error in subcomponent with class 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><block-text-1/></div>\`);
  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]);
  }
 }"
@@ -397,7 +372,6 @@ exports[`style and class handling error in subcomponent with class 2`] = `
 exports[`style and class handling no class is set is child ignores it 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -410,7 +384,6 @@ exports[`style and class handling no class is set is child ignores it 1`] = `
 exports[`style and class handling no class is set is child ignores it 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>child</div>\`);
@@ -424,7 +397,6 @@ exports[`style and class handling no class is set is child ignores it 2`] = `
 exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -437,7 +409,6 @@ exports[`style and class handling no class is set is parent does not give it as
 exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
@@ -452,7 +423,6 @@ exports[`style and class handling no class is set is parent does not give it as
 exports[`style and class handling style is properly added on widget root el 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -465,7 +435,6 @@ exports[`style and class handling style is properly added on widget root el 1`]
 exports[`style and class handling style is properly added on widget root el 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"style\\"/>\`);
@@ -480,7 +449,6 @@ exports[`style and class handling style is properly added on widget root el 2`]
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -496,7 +464,6 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
@@ -511,7 +478,6 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -524,7 +490,6 @@ exports[`style and class handling t-att-class is properly added/removed on widge
 exports[`style and class handling t-att-class is properly added/removed on widget root el (v3) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
@@ -3,7 +3,6 @@
 exports[`t-call dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, zero } = helpers;
  const call = app.callTemplate.bind(app);
@@ -22,7 +21,6 @@ exports[`t-call dynamic t-call 1`] = `
 exports[`t-call dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>foo</div>\`);
@@ -36,7 +34,6 @@ exports[`t-call dynamic t-call 2`] = `
 exports[`t-call dynamic t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -48,7 +45,6 @@ exports[`t-call dynamic t-call 3`] = `
 exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  const call = app.callTemplate.bind(app);
@@ -65,7 +61,6 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
 exports[`t-call dynamic t-call: key is propagated 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-attribute-0=\\"id\\"/>\`);
@@ -80,7 +75,6 @@ exports[`t-call dynamic t-call: key is propagated 2`] = `
 exports[`t-call dynamic t-call: key is propagated 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -93,7 +87,6 @@ exports[`t-call dynamic t-call: key is propagated 3`] = `
 exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const call = app.callTemplate.bind(app);
@@ -111,13 +104,13 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
 exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
  return function template(ctx, node, key = \\"\\") {
-    let hdlr1 = [()=>this.update(), ctx];
+    const v1 = ctx['this'];
    let hdlr1 = [()=>v1.update(), ctx];
    return block1([hdlr1]);
  }
 }"
@@ -126,7 +119,6 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
 exports[`t-call handlers are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -143,7 +135,6 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 exports[`t-call handlers are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
@@ -158,7 +149,6 @@ exports[`t-call handlers are properly bound through a t-call 2`] = `
 exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -174,14 +164,14 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
  return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['a'];
+    const v1 = ctx['this'];
-    let hdlr1 = [()=>this.update(v1), ctx];
+    const v2 = ctx['a'];
    let hdlr1 = [()=>v1.update(v2), ctx];
    return block1([hdlr1]);
  }
 }"
@@ -190,7 +180,6 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
 exports[`t-call parent is set within t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -206,7 +195,6 @@ exports[`t-call parent is set within t-call 1`] = `
 exports[`t-call parent is set within t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -219,7 +207,6 @@ exports[`t-call parent is set within t-call 2`] = `
 exports[`t-call parent is set within t-call 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>lucas</span>\`);
@@ -233,7 +220,6 @@ exports[`t-call parent is set within t-call 3`] = `
 exports[`t-call parent is set within t-call with no parentNode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -246,7 +232,6 @@ exports[`t-call parent is set within t-call with no parentNode 1`] = `
 exports[`t-call parent is set within t-call with no parentNode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -259,7 +244,6 @@ exports[`t-call parent is set within t-call with no parentNode 2`] = `
 exports[`t-call parent is set within t-call with no parentNode 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>lucas</span>\`);
@@ -273,7 +257,6 @@ exports[`t-call parent is set within t-call with no parentNode 3`] = `
 exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`recursive\`);
@@ -295,7 +278,6 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
 exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`recursive\`);
@@ -307,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);
@@ -325,7 +307,6 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
 exports[`t-call sub components in two t-calls 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`sub\`);
  const callTemplate_2 = app.getTemplate(\`sub\`);
@@ -348,7 +329,6 @@ exports[`t-call sub components in two t-calls 1`] = `
 exports[`t-call sub components in two t-calls 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -361,7 +341,6 @@ exports[`t-call sub components in two t-calls 2`] = `
 exports[`t-call sub components in two t-calls 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -376,7 +355,6 @@ exports[`t-call sub components in two t-calls 3`] = `
 exports[`t-call t-call in t-foreach and children component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const callTemplate_1 = app.getTemplate(\`__template__999\`);
@@ -404,7 +382,6 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
 exports[`t-call t-call in t-foreach and children component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -417,7 +394,6 @@ exports[`t-call t-call in t-foreach and children component 2`] = `
 exports[`t-call t-call in t-foreach and children component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -432,7 +408,6 @@ exports[`t-call t-call in t-foreach and children component 3`] = `
 exports[`t-call t-call with t-call-context and subcomponent 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
@@ -446,7 +421,6 @@ exports[`t-call t-call with t-call-context and subcomponent 1`] = `
 exports[`t-call t-call with t-call-context and subcomponent 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
@@ -462,7 +436,51 @@ exports[`t-call t-call with t-call-context and subcomponent 2`] = `
 exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    const b2 = text(\`child\`);
    const b3 = text(ctx['props'].name);
    return multi([b2, b3]);
  }
 }"
 `;
 exports[`t-call t-call with t-call-context 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 = \\"\\") {
@@ -476,7 +494,6 @@ exports[`t-call t-call with t-call-context and subcomponent 3`] = `
 exports[`t-call t-call with t-call-context, simple use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
@@ -490,7 +507,6 @@ exports[`t-call t-call with t-call-context, simple use 1`] = `
 exports[`t-call t-call with t-call-context, simple use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -500,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']);
  }
 }"
 `;
@@ -3,7 +3,6 @@
 exports[`t-call-block simple t-call-block with static text 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-child-0/></div>\`);
@@ -3,7 +3,6 @@
 exports[`t-component can switch between dynamic components without the need for a t-key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -20,7 +19,6 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child a</span>\`);
@@ -34,7 +32,6 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child b</span>\`);
@@ -48,7 +45,6 @@ exports[`t-component can switch between dynamic components without the need for
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -63,7 +59,6 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child a</span>\`);
@@ -77,7 +72,6 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>child b</div>\`);
@@ -91,7 +85,6 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
 exports[`t-component can use dynamic components (the class) if given 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -106,7 +99,6 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
 exports[`t-component can use dynamic components (the class) if given 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child a</span>\`);
@@ -120,7 +112,6 @@ exports[`t-component can use dynamic components (the class) if given 2`] = `
 exports[`t-component can use dynamic components (the class) if given 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>child b</span>\`);
@@ -134,7 +125,6 @@ exports[`t-component can use dynamic components (the class) if given 3`] = `
 exports[`t-component modifying a sub widget 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -151,7 +141,6 @@ exports[`t-component modifying a sub widget 1`] = `
 exports[`t-component modifying a sub widget 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
@@ -168,7 +157,6 @@ exports[`t-component modifying a sub widget 2`] = `
 exports[`t-component switching dynamic component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -182,7 +170,6 @@ exports[`t-component switching dynamic component 1`] = `
 exports[`t-component switching dynamic component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>child a</div>\`);
@@ -196,7 +183,6 @@ exports[`t-component switching dynamic component 2`] = `
 exports[`t-component switching dynamic component 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -208,7 +194,6 @@ exports[`t-component switching dynamic component 3`] = `
 exports[`t-component t-component works in simple case 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(null, false, false, false, true);
@@ -222,7 +207,6 @@ exports[`t-component t-component works in simple case 1`] = `
 exports[`t-component t-component works in simple case 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div>child</div>\`);
@@ -3,7 +3,6 @@
 exports[`list of components components in a node in a t-foreach  1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -29,7 +28,6 @@ exports[`list of components components in a node in a t-foreach  1`] = `
 exports[`list of components components in a node in a t-foreach  2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -44,9 +42,8 @@ exports[`list of components components in a node in a t-foreach  2`] = `
 exports[`list of components crash on duplicate key in dev mode 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
+  let { prepareList, OwlError, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
  return function template(ctx, node, key = \\"\\") {
@@ -56,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 Error(\`Got duplicate key in t-foreach: \${key1}\`)}
+      if (keys1.has(String(key1))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key1}\`)}
-      keys1.add(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);
@@ -70,7 +67,42 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
 exports[`list of components crash on duplicate key in dev mode 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
-  \\"use strict\\";
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
    return text(\`\`);
  }
 }"
 `;
 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 = \\"\\") {
@@ -82,7 +114,6 @@ exports[`list of components crash on duplicate key in dev mode 2`] = `
 exports[`list of components list of sub components inside other nodes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`SubComponent\`, true, false, false, true);
@@ -108,7 +139,6 @@ exports[`list of components list of sub components inside other nodes 1`] = `
 exports[`list of components list of sub components inside other nodes 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span>asdf</span>\`);
@@ -119,10 +149,61 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -156,7 +237,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -171,7 +251,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
 exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -207,7 +286,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -222,7 +300,6 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
 exports[`list of components simple list 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -243,7 +320,6 @@ exports[`list of components simple list 1`] = `
 exports[`list of components simple list 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -258,7 +334,6 @@ exports[`list of components simple list 2`] = `
 exports[`list of components sub components rendered in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -282,7 +357,6 @@ exports[`list of components sub components rendered in a loop 1`] = `
 exports[`list of components sub components rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -297,7 +371,6 @@ exports[`list of components sub components rendered in a loop 2`] = `
 exports[`list of components sub components with some state rendered in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -321,7 +394,6 @@ exports[`list of components sub components with some state rendered in a loop 1`
 exports[`list of components sub components with some state rendered in a loop 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<p><block-text-0/></p>\`);
@@ -336,7 +408,6 @@ exports[`list of components sub components with some state rendered in a loop 2`
 exports[`list of components switch component position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -360,7 +431,6 @@ exports[`list of components switch component position 1`] = `
 exports[`list of components switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -375,7 +445,6 @@ exports[`list of components switch component position 2`] = `
 exports[`list of components t-foreach with t-component, and update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -400,7 +469,6 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
 exports[`list of components t-foreach with t-component, and update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
@@ -3,7 +3,6 @@
 exports[`t-key t-foreach with t-key switch component position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -28,7 +27,6 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
 exports[`t-key t-foreach with t-key switch component position 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -43,7 +41,6 @@ exports[`t-key t-foreach with t-key switch component position 2`] = `
 exports[`t-key t-key on Component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -57,7 +54,6 @@ exports[`t-key t-key on Component 1`] = `
 exports[`t-key t-key on Component 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -72,7 +68,6 @@ exports[`t-key t-key on Component 2`] = `
 exports[`t-key t-key on Component as a function 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -89,7 +84,6 @@ exports[`t-key t-key on Component as a function 1`] = `
 exports[`t-key t-key on Component as a function 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -104,7 +98,6 @@ exports[`t-key t-key on Component as a function 2`] = `
 exports[`t-key t-key on multiple Components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
@@ -124,7 +117,6 @@ exports[`t-key t-key on multiple Components 1`] = `
 exports[`t-key t-key on multiple Components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -139,7 +131,6 @@ exports[`t-key t-key on multiple Components 2`] = `
 exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
@@ -167,7 +158,6 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
 exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -181,7 +171,6 @@ exports[`t-key t-key on multiple Components with t-call 1 2`] = `
 exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -196,7 +185,6 @@ exports[`t-key t-key on multiple Components with t-call 1 3`] = `
 exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const callTemplate_1 = app.getTemplate(\`calledTemplate\`);
@@ -212,7 +200,6 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
 exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
  const comp2 = app.createComponent(\`Child\`, true, false, false, false);
@@ -230,7 +217,6 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
 exports[`t-key t-key on multiple Components with t-call 2 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -3,7 +3,6 @@
 exports[`t-model directive .lazy modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -23,7 +22,6 @@ exports[`t-model directive .lazy modifier 1`] = `
 exports[`t-model directive .number modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -43,7 +41,6 @@ exports[`t-model directive .number modifier 1`] = `
 exports[`t-model directive .trim modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -63,7 +60,6 @@ exports[`t-model directive .trim modifier 1`] = `
 exports[`t-model directive basic use, on an input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -83,7 +79,6 @@ exports[`t-model directive basic use, on an input 1`] = `
 exports[`t-model directive basic use, on an input with bracket expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -103,7 +98,6 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
 exports[`t-model directive basic use, on another key in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -123,19 +117,18 @@ exports[`t-model directive basic use, on another key in component 1`] = `
 exports[`t-model directive can also define t-on directive on same event, part 1 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
-  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; }];
+    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([hdlr1, attr1, hdlr2]);
+    let hdlr2 = [ctx['onInput'], ctx];
    return block1([attr1, hdlr1, hdlr2]);
  }
 }"
 `;
@@ -143,29 +136,28 @@ exports[`t-model directive can also define t-on directive on same event, part 1
 exports[`t-model directive can also define t-on directive on same event, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
-  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 hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr3 = [ctx['onClick'], ctx];
+    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 hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-    let hdlr5 = [ctx['onClick'], ctx];
+    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; }];
+    let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
-    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
+    let hdlr6 = [ctx['onClick'], ctx];
    return block1([attr1, hdlr1, hdlr2, attr2, hdlr3, hdlr4, attr3, hdlr5, hdlr6]);
  }
 }"
 `;
@@ -173,7 +165,6 @@ exports[`t-model directive can also define t-on directive on same event, part 2
 exports[`t-model directive following a scope protecting directive (e.g. t-set) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
@@ -195,7 +186,6 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
 exports[`t-model directive in a t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, toNumber, withKey } = helpers;
@@ -223,7 +213,6 @@ exports[`t-model directive in a t-foreach 1`] = `
 exports[`t-model directive in a t-foreach, part 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, toNumber, withKey } = helpers;
@@ -252,7 +241,6 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
 exports[`t-model directive in a t-foreach, part 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, toNumber, withKey } = helpers;
@@ -281,7 +269,6 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
 exports[`t-model directive on a select 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -301,7 +288,6 @@ exports[`t-model directive on a select 1`] = `
 exports[`t-model directive on a select, initial state 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -320,7 +306,6 @@ exports[`t-model directive on a select, initial state 1`] = `
 exports[`t-model directive on a sub state key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -340,7 +325,6 @@ exports[`t-model directive on a sub state key 1`] = `
 exports[`t-model directive on an input type=radio 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -364,7 +348,6 @@ exports[`t-model directive on an input type=radio 1`] = `
 exports[`t-model directive on an input type=radio, with initial value 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -387,7 +370,6 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
 exports[`t-model directive on an input, type=checkbox 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -412,7 +394,6 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
 exports[`t-model directive on an textarea 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -429,10 +410,28 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -451,7 +450,6 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
 exports[`t-model directive t-model on select with static options 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -473,7 +471,6 @@ exports[`t-model directive t-model on select with static options 1`] = `
 exports[`t-model directive t-model with dynamic values on select options -- 2 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -498,7 +495,6 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
 exports[`t-model directive t-model with dynamic values on select options -- 3 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -522,7 +518,6 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
 exports[`t-model directive t-model with dynamic values on select options 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -547,7 +542,6 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
 exports[`t-model directive t-model with dynamic values on select options in foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber, prepareList, withKey } = helpers;
@@ -575,10 +569,39 @@ 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
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -610,7 +633,6 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
 exports[`t-model directive with expression having a changing key 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { toNumber } = helpers;
@@ -3,7 +3,6 @@
 exports[`t-on t-on expression captured in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
@@ -34,7 +33,6 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
 exports[`t-on t-on expression in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -64,7 +62,6 @@ exports[`t-on t-on expression in t-foreach 1`] = `
 exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, prepareList, withKey } = helpers;
@@ -99,7 +96,6 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
 exports[`t-on t-on method call in t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, withKey } = helpers;
@@ -115,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'];
+      const v1 = ctx['this'];
-      let hdlr1 = [()=>this.addVal(v1), ctx];
+      const v2 = ctx['val'];
      let hdlr1 = [()=>v1.addVal(v2), ctx];
      c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
    }
    const b2 = list(c_block2);
@@ -128,7 +125,6 @@ exports[`t-on t-on method call in t-foreach 1`] = `
 exports[`t-on t-on on component next to t-on on div 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { createCatcher } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -148,7 +144,6 @@ exports[`t-on t-on on component next to t-on on div 1`] = `
 exports[`t-on t-on on component next to t-on on div 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -163,7 +158,6 @@ exports[`t-on t-on on component next to t-on on div 2`] = `
 exports[`t-on t-on on components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { createCatcher } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -179,7 +173,6 @@ exports[`t-on t-on on components 1`] = `
 exports[`t-on t-on on components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -194,7 +187,6 @@ exports[`t-on t-on on components 2`] = `
 exports[`t-on t-on on components and t-foreach 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { prepareList, createCatcher, withKey } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -206,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 v1 = ctx['this'];
-      const hdlr1 = [()=>this.log(v1), ctx];
+      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);
@@ -218,7 +211,6 @@ exports[`t-on t-on on components and t-foreach 1`] = `
 exports[`t-on t-on on components and t-foreach 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -233,7 +225,6 @@ exports[`t-on t-on on components and t-foreach 2`] = `
 exports[`t-on t-on on components, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { createCatcher } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -252,7 +243,6 @@ exports[`t-on t-on on components, variation 1`] = `
 exports[`t-on t-on on components, variation 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -267,7 +257,6 @@ exports[`t-on t-on on components, variation 2`] = `
 exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { createCatcher } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -283,7 +272,6 @@ exports[`t-on t-on on components, with 'prevent' modifier 1`] = `
 exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<button><block-text-0/></button>\`);
@@ -298,7 +286,6 @@ exports[`t-on t-on on components, with 'prevent' modifier 2`] = `
 exports[`t-on t-on on components, with a handler update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, createCatcher } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
@@ -308,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 v1 = ctx['this'];
-    const hdlr1 = [()=>this.log(v1), ctx];
+    const v2 = ctx['name'];
    const hdlr1 = [()=>v1.log(v2), ctx];
    return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
  }
 }"
@@ -318,7 +306,6 @@ exports[`t-on t-on on components, with a handler update 1`] = `
 exports[`t-on t-on on components, with a handler update 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -333,7 +320,6 @@ exports[`t-on t-on on components, with a handler update 2`] = `
 exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -352,7 +338,6 @@ exports[`t-on t-on on destroyed components 1`] = `
 exports[`t-on t-on on destroyed components 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div block-handler-0=\\"click\\"/>\`);
@@ -367,7 +352,6 @@ exports[`t-on t-on on destroyed components 2`] = `
 exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
@@ -379,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);
  }
 }"
 `;
@@ -387,7 +371,6 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
 exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot, createCatcher } = helpers;
  const catcher1 = createCatcher({\\"click.prevent\\":0});
@@ -402,7 +385,6 @@ exports[`t-on t-on on slot, with 'prevent' modifier 2`] = `
 exports[`t-on t-on on t-set-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { capture, createCatcher, markRaw } = helpers;
  const catcher1 = createCatcher({\\"click\\":0});
@@ -414,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]);
  }
@@ -423,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]);
  }
 }"
@@ -432,7 +415,6 @@ exports[`t-on t-on on t-set-slots 1`] = `
 exports[`t-on t-on on t-set-slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -445,7 +427,6 @@ exports[`t-on t-on on t-set-slots 2`] = `
 exports[`t-on t-on on t-slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { markRaw } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
@@ -457,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);
  }
 }"
 `;
@@ -465,7 +446,6 @@ exports[`t-on t-on on t-slots 1`] = `
 exports[`t-on t-on on t-slots 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot, createCatcher } = helpers;
  const catcher1 = createCatcher({\\"click\\":0});
@@ -474,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\`);
  }
 }"
 `;
@@ -3,7 +3,6 @@
 exports[`t-props basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
@@ -19,7 +18,6 @@ exports[`t-props basic use 1`] = `
 exports[`t-props basic use 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<span><block-text-0/></span>\`);
@@ -34,7 +32,6 @@ exports[`t-props basic use 2`] = `
 exports[`t-props child receives a copy of the t-props object, not the original 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
@@ -47,7 +44,6 @@ exports[`t-props child receives a copy of the t-props object, not the original 1
 exports[`t-props child receives a copy of the t-props object, not the original 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -61,7 +57,6 @@ exports[`t-props child receives a copy of the t-props object, not the original 2
 exports[`t-props t-props and other props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
@@ -77,7 +72,6 @@ exports[`t-props t-props and other props 1`] = `
 exports[`t-props t-props and other props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
@@ -93,7 +87,6 @@ exports[`t-props t-props and other props 2`] = `
 exports[`t-props t-props only 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Comp\`, true, false, true, false);
@@ -109,7 +102,6 @@ exports[`t-props t-props only 1`] = `
 exports[`t-props t-props only 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div><block-text-0/></div>\`);
@@ -124,7 +116,6 @@ exports[`t-props t-props only 2`] = `
 exports[`t-props t-props with props 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  const comp1 = app.createComponent(\`Child\`, true, false, true, false);
@@ -140,7 +131,6 @@ exports[`t-props t-props with props 1`] = `
 exports[`t-props t-props with props 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let block1 = createBlock(\`<div/>\`);
@@ -3,7 +3,6 @@
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue, capture, markRaw } = helpers;
  const comp1 = app.createComponent(\`Childcomp\`, true, true, false, true);
@@ -23,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]);
  }
@@ -33,7 +32,6 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
 exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -53,7 +51,6 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 2`] = `
 exports[`t-set slots with a t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
  const comp1 = app.createComponent(\`C\`, true, false, false, true);
@@ -62,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]);
@@ -74,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);
  }
 }"
 `;
@@ -82,7 +79,6 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
 exports[`t-set slots with a t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -97,7 +93,6 @@ exports[`t-set slots with a t-set with a component in body 2`] = `
 exports[`t-set slots with a t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -109,7 +104,6 @@ exports[`t-set slots with a t-set with a component in body 3`] = `
 exports[`t-set slots with an t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { capture, isBoundary, withDefault, LazyValue, safeOutput, markRaw } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -120,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]);
@@ -134,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);
  }
 }"
 `;
@@ -142,7 +136,6 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
 exports[`t-set slots with an t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -157,7 +150,6 @@ exports[`t-set slots with an t-set with a component in body 2`] = `
 exports[`t-set slots with an t-set with a component in body 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -169,7 +161,6 @@ exports[`t-set slots with an t-set with a component in body 3`] = `
 exports[`t-set slots with an unused t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { capture, isBoundary, withDefault, LazyValue, markRaw } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -178,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 \`);
  }
@@ -188,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);
  }
 }"
 `;
@@ -196,7 +187,6 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
 exports[`t-set slots with an unused t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { callSlot } = helpers;
@@ -211,7 +201,6 @@ exports[`t-set slots with an unused t-set with a component in body 2`] = `
 exports[`t-set t-set can't alter component even if key in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -231,7 +220,6 @@ exports[`t-set t-set can't alter component even if key in component 1`] = `
 exports[`t-set t-set can't alter component if key not in component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -251,11 +239,10 @@ exports[`t-set t-set can't alter component if key not in component 1`] = `
 exports[`t-set t-set in t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -277,7 +264,6 @@ exports[`t-set t-set in t-if 1`] = `
 exports[`t-set t-set not altered by child comp 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
  const comp1 = app.createComponent(\`Childcomp\`, true, false, false, true);
@@ -299,7 +285,6 @@ exports[`t-set t-set not altered by child comp 1`] = `
 exports[`t-set t-set not altered by child comp 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
@@ -319,11 +304,10 @@ exports[`t-set t-set not altered by child comp 2`] = `
 exports[`t-set t-set outside modified in t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, setContextValue } = helpers;
-  let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-child-0/><p><block-text-0/></p></div>\`);
+  let block1 = createBlock(\`<div><p><block-text-0/></p></div>\`);
  return function template(ctx, node, key = \\"\\") {
    ctx = Object.create(ctx);
@@ -346,7 +330,6 @@ exports[`t-set t-set outside modified in t-if 1`] = `
 exports[`t-set t-set with a component in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
@@ -360,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]);
  }
@@ -370,7 +353,6 @@ exports[`t-set t-set with a component in body 1`] = `
 exports[`t-set t-set with a component in body 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  return function template(ctx, node, key = \\"\\") {
@@ -382,7 +364,6 @@ exports[`t-set t-set with a component in body 2`] = `
 exports[`t-set t-set with something in body 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
  \\"use strict\\";
  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
@@ -396,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 {
+    prom.catch((e: Error) => (error = e));
-      await prom;
+    await expect(nextAppError(app)).resolves.toThrow(
-    } catch (e) {
+      "Cannot mount a component on a detached dom node"
-      error = e as Error;
+    );
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Cannot mount a component on a detached dom node");
    expect(console.warn).toBeCalledTimes(1);
@@ -1084,4 +1091,25 @@ describe("t-out in components", () => {
    await nextTick();
    expect(fixture.innerHTML).toBe("<div>1</div><div>2</div>");
  });
  test("t-out and updating falsy values, ", async () => {
    class Test extends Component {
      static template = xml`<t t-out="state.a"/>`;
      state: any = useState({ a: 0 });
    }
    const comp = await mount(Test, fixture);
    expect(fixture.innerHTML).toBe("0");
    comp.state.a = undefined;
    await nextTick();
    expect(fixture.innerHTML).toBe("");
    comp.state.a = "hello";
    await nextTick();
    expect(fixture.innerHTML).toBe("hello");
    comp.state.a = false;
    await nextTick();
    expect(fixture.innerHTML).toBe("false");
  });
 });
@@ -1,4 +1,4 @@
-import { Component, mount, onWillDestroy } from "../../src";
+import { App, Component, mount, onWillDestroy } from "../../src";
 import {
  onError,
  onMounted,
@@ -18,7 +18,9 @@ import {
  nextMicroTick,
  snapshotEverything,
  useLogLifecycle,
  nextAppError,
 } from "../helpers";
 import { OwlError } from "../../src/runtime/error_handling";
 let fixture: HTMLElement;
@@ -58,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);
  });
@@ -70,12 +73,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
    const app = new App(Parent);
    let error: Error;
-    try {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await mount(Parent, fixture);
+    await expect(nextAppError(app)).resolves.toThrow(
-    } catch (e) {
+      'Cannot find the definition of component "SomeMispelledComponent"'
-      error = e as Error;
+    );
-    }
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -89,12 +93,13 @@ describe("basics", () => {
      static template = xml`<SomeMispelledComponent />`;
      static components = { SomeComponent };
    }
    const app = new App(Parent, { test: true });
    let error: Error;
-    try {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await mount(Parent, fixture, { test: true });
+    await expect(nextAppError(app)).resolves.toThrow(
-    } catch (e) {
+      'Cannot find the definition of component "SomeMispelledComponent"'
-      error = e as Error;
+    );
-    }
+    await mountProm;
    expect(error!).toBeDefined();
    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
    expect(console.error).toBeCalledTimes(0);
@@ -108,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 {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      // @ts-expect-error
+    await expect(nextAppError(app)).resolves.toThrow(
-      await mount(Parent, fixture);
+      '"SomeComponent" is not a Component. It must inherit from the Component class'
-    } catch (e) {
+    );
-      error = e as Error;
+    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"/>`;
@@ -155,26 +177,26 @@ 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>`;
    }
-    let error: Error;
+    const app = new App(Root);
-    try {
+    let error: OwlError;
-      await mount(App, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleError).toBeCalledTimes(0);
  });
  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(() => {
@@ -183,21 +205,21 @@ describe("errors and promises", () => {
      }
    }
-    let error: Error;
+    const app = new App(Root);
-    try {
+    let error: OwlError;
-      await mount(App, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
-    expect(error!.message).toBe("boom");
+    expect(error!.cause).toBeDefined();
    expect(error!.cause.message).toBe("boom");
    expect(fixture.innerHTML).toBe("");
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
  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(() => {
@@ -206,14 +228,13 @@ describe("errors and promises", () => {
      }
    }
-    let error: Error;
+    const app = new App(Root, { test: true });
-    try {
+    let error: OwlError;
-      await mount(App, fixture, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-      error = e as Error;
+    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);
@@ -221,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(() => {
@@ -233,12 +254,11 @@ describe("errors and promises", () => {
      }
    }
-    let error: Error;
+    const app = new App(Root, { test: true });
-    try {
+    let error: OwlError;
-      await mount(App, fixture, { test: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      `The following error occurred in onWillRender: "boom in onWillRender"`
@@ -264,6 +284,29 @@ describe("errors and promises", () => {
    expect(error!.message).toBe("Tokenizer error: could not tokenize `{ 'invalid: 5 }`");
  });
  test("wrapped errors in async code are correctly caught", async () => {
    class Root extends Component {
      static template = xml`<div>abc</div>`;
      setup() {
        onWillStart(async () => {
          await Promise.resolve();
          throw new Error("boom in onWillStart");
        });
      }
    }
    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"`
    );
    await new Promise((r) => setTimeout(r, 0)); // wait for the rejection event to bubble
  });
  test("an error in willPatch call will reject the render promise", async () => {
    class Root extends Component {
      static template = xml`<div><t t-esc="val"/></div>`;
@@ -315,21 +358,21 @@ 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 };
    }
-    let error: Error;
+    const app = new App(Parent);
-    try {
+    let error: OwlError;
-      await mount(App, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -339,7 +382,7 @@ describe("errors and promises", () => {
      static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
      flag = false;
      setup() {
-        onError((e) => (error = e));
+        onError(({ cause }) => (error = cause));
      }
    }
@@ -366,16 +409,16 @@ describe("errors and promises", () => {
      static components = { Child };
    }
-    let error: Error;
+    const app = new App(Parent);
-    try {
+    let error: OwlError;
-      await mount(Parent, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.cause).toBeDefined();
    const regexp =
      /Cannot read properties of undefined \(reading 'y'\)|Cannot read property 'y' of undefined/g;
-    expect(error!.message).toMatch(regexp);
+    expect(error!.cause.message).toMatch(regexp);
    expect(mockConsoleError).toBeCalledTimes(0);
    expect(mockConsoleWarn).toBeCalledTimes(1);
  });
@@ -396,13 +439,12 @@ describe("errors and promises", () => {
      }
    }
-    try {
+    const app = new App(Example, { test: true });
-      await mount(Example, fixture, { test: true });
+    let error: OwlError;
-    } catch (e) {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      expect((e as Error).message).toBe(
+    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
-        `The following error occurred in onMounted: "Error in mounted"`
+    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);
@@ -419,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);
  });
 });
@@ -471,17 +514,150 @@ describe("can catch errors", () => {
        });
      }
    }
-    let e: Error;
+    const app = new App(Root, { test: true });
-    try {
+    let error: OwlError;
-      await mount(Root, fixture, { test: true });
+    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
-    } catch (error) {
+    await app.mount(fixture).catch((e: Error) => (error = e));
-      e = error as Error;
+    await crashProm;
-    }
+    expect(error!.message).toBe(
    expect(e!.message).toBe(
      `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
    );
  });
  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"/>`;
      state = useState({ value: 1 });
      setup() {
        onMounted(() => {
          throw 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 () => {
    const err = new Error("test error");
    class Root extends Component {
      static template = xml`<t t-esc="state.value"/>`;
      state = useState({ value: 1 });
      setup() {
        onWillStart(async () => {
          await nextMicroTick();
          throw 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 () => {
    const err = new Error("test error");
    class Root extends Component {
      static template = xml`<t t-esc="state.value"/>`;
      state = useState({ value: 1 });
      setup() {
        onMounted(() => {
          throw 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 () => {
    const err = new Error("test error");
    class Root extends Component {
      static template = xml`<t t-esc="state.value"/>`;
      state = useState({ value: 1 });
      setup() {
        onWillStart(async () => {
          await nextMicroTick();
          throw 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("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";
        });
      }
    }
    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 () => {
    class ErrorComponent extends Component {
      static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
@@ -1180,8 +1356,8 @@ describe("can catch errors", () => {
    class Catch extends Component {
      static template = xml`<t t-slot="default" />`;
      setup() {
-        onError((error) => {
+        onError(({ cause }) => {
-          this.props.onError(error);
+          this.props.onError(cause);
        });
      }
    }
@@ -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 {
+      let error: OwlError;
-        await mount(MyComponent, fixture);
+      const app = new App(MyComponent);
-      } catch (e: any) {
+      const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-        expect(e.message).toBe("Intentional error");
+      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 { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount } from "../../src";
+import { Component, onError, xml, mount, OwlError } from "../../src";
-import { DEV_MSG } from "../../src/runtime/app";
+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 {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    let error: OwlError | undefined;
-    } catch (e) {
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      error = e as Error;
+    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;
+    const app = new App(Parent, { test: true });
-    try {
+    let error: OwlError | undefined;
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow(
-      error = e as Error;
+      "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 = {};
-
+      let app = new App(Parent, { test: true });
-      try {
+      let error: OwlError | undefined;
-        await mount(Parent, fixture, { dev: true });
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      } catch (e) {
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-        error = e as Error;
+      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 {
+      app = new App(Parent, { test: true });
-        await mount(Parent, fixture, { dev: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      } catch (e) {
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-        error = e as Error;
+      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 {
+      let app = new App(Parent, { test: true });
-        await mount(Parent, fixture, { dev: true });
+      let error: OwlError | undefined;
-      } catch (e) {
+      let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-        error = e as Error;
+      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 {
+      app = new App(Parent, { test: true });
-        await mount(Parent, fixture, { dev: true });
+      mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      } catch (e) {
+      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
-        error = e as Error;
+      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 };
-      props = { p: 1 };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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 };
-      props = { p: 1 };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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] };
-      props = { p: [1] };
+    let app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    error = undefined;
-    try {
+    app = new App(Parent, { test: true });
-      props = { p: ["string", 1] };
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await mount(Parent, fixture, { dev: true });
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-    } catch (e) {
+    await mountProm;
-      error = e as Error;
+    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] };
-      props = { p: [true, 1] };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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 } };
-      props = { p: { id: 1, url: "url", extra: true } };
+    let app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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" } };
-      props = { p: { id: "1", url: "url" } };
+    app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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 } };
-      props = { p: { id: 1 } };
+    app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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] } };
-      props = { p: { id: 1, url: [12, true] } };
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    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,11 +674,10 @@ describe("props validation", () => {
      static components = { SubComp };
    }
    let error: Error;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
  });
@@ -754,11 +741,10 @@ describe("props validation", () => {
      static template = xml`<div><Child/></div>`;
    }
    let error: Error;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
-      error = e as Error;
+    await mountProm;
    }
    expect(error!).toBeDefined();
    expect(error!.message).toBe(
      "Invalid props for component 'Child': 'mandatory' is missing (should be a number)"
@@ -794,6 +780,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 +871,12 @@ describe("default props", () => {
      static template = xml`<Child/>`;
    }
    let error: Error;
-    try {
+    const app = new App(Parent, { test: true });
-      await mount(Parent, fixture, { dev: true });
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow(
-      error = e as Error;
+      "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)"
@@ -1,6 +1,5 @@
-import { Component, mount, onMounted, useRef, useState } from "../../src/index";
+import { App, Component, mount, onMounted, useRef, useState, xml } from "../../src/index";
-import { logStep, makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
 import { xml } from "../../src/index";
 snapshotEverything();
 let fixture: HTMLElement;
@@ -94,9 +93,14 @@ describe("refs", () => {
      ref = useRef("coucou");
    }
-    await expect(async () => {
+    const app = new App(Test, { test: true });
-      await mount(Test, fixture);
+    const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
-    }).rejects.toThrowError("Cannot have 2 elements with same ref name at the same time");
+      "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;
+    let error: Error;
-    try {
+    const app = new App(Parent);
-      await mount(Parent, fixture);
+    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    } catch (e) {
+    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
-      error = e;
+    await mountProm;
-    }
+    expect(error!).not.toBeNull();
    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>"
    );
  });
 });
--- a/Show More
+++ b/Show More
`@@ -124,5 +124,5 @@ npm install @odoo/owl`

	If you want to use a simple `<script>` tag, the last release can be downloaded here:	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)`