[IMP] hooks: add useRoots hook

closes #1260

.eslintrc

@@ -1,47 +0,0 @@
-{
-    "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,
-    },
-}

.github/workflows/deploy.yml

@@ -22,8 +22,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
+    - run: npm install
     - run: npm run test
     - run: npm run check-formatting
-    - run: npm run lint
     - run: npm run build

.gitignore

@@ -14,6 +14,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+package-lock.json
+yarn.lock
+
 #ide's
 .vscode
 .idea
@@ -22,7 +25,6 @@ node_modules
 
 # Extras temp file
 /tools/owl.js
-/tools/devtools/build
 
 release-notes.md
 

CHANGELOG.md

@@ -261,7 +261,12 @@ This comes from the fact that Owl 2 supports fragments (arbitrary content).
 Migration: if one need a reference to the root htmlelement of a template, it is
 suggested to simply add a `ref` on it, and access the reference as needed.
 
-Documentation: [Refs](doc/reference/refs.md)
+Another way to get access to a root node or html element is the hook `useRoots`
+
+Documentation: 
+- [Refs](doc/reference/refs.md)
+- [useRoots](doc/reference/hooks.md#useroots)
+
 
 ### 10. style/class on components are now regular props
 

doc/learning/tutorial_todoapp.md

@@ -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 rendering
-context contains the properties of the component. Note that we use the `id` of each task
-as a `t-key`, which is very common. There are two css classes: `task-list` and `task`,
+through the tasks. It can find the `tasks` list from the component, since the
+component is the rendering context. Note that we use the `id` of each task as a
+`t-key`, which is very common. There are two css classes: `task-list` and `task`,
 that we will use in the next section.
 
 Finally, notice the use of the `t-att-checked` attribute:
@@ -502,10 +502,6 @@ deleteTask(task) {
 Notice that the `onDelete` prop is defined with a `.bind` suffix: this is a special
 suffix that makes sure the function callback is bound to the component.
 
-Notice also that we have two functions named `deleteTask`. The one in the Task
-component just delegates the work to the Root component that owns the task list
-via the `onDelete` property.
-
 ## 10. Using a store
 
 Looking at the code, it is apparent that all the code handling tasks is scattered

doc/readme.md

@@ -38,6 +38,7 @@ Other hooks:
 - [`useRef`](reference/hooks.md#useref): get an object representing a reference (`t-ref`)
 - [`useChildSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for child components)
 - [`useSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for current component and child components)
+- [`useRoots`](reference/hooks.md#useroots): returns an object that provides access to all root nodes or htmlelements
 
 Utility/helpers:
 

doc/reference/hooks.md

@@ -13,6 +13,7 @@
   - [`useComponent`](#usecomponent)
   - [`useEnv`](#useenv)
   - [`useEffect`](#useeffect)
+  - [`useRoots`](#useroots)
 - [Example: Mouse Position](#example-mouse-position)
 
 ## Overview
@@ -288,6 +289,42 @@ class SomeComponent extends Component {
 }
 ```
 
+### `useRoots`
+
+`useRoots` is an alternative way to get a reference to the root notes or elements
+of a component. It may be useful in some cases where `useRef` cannot be applied,
+such as a higher order component, or a component with only text as content.
+
+The return value of `useRoots` is an object with the following key/values:
+
+- `node`: getter that evaluates to the first node of the component content (or null)
+- `elem`: getter that evaluates to the first HTMLElement of the component content (or null)
+- `nodes`: iterator that returns all content nodes
+- `elems`: iterator that returns all HTMLElement nodes
+
+```js
+class Child extends Component {
+  static template = xml`<p>some content</p>`;
+}
+
+class Parent extends Component {
+  static template = xml`<Child/>`;
+  static components = { Child };
+
+  setup() {
+    this.roots = useRoots();
+    console.log(this.roots.elem); // null
+    onMounted(() => {
+      console.log(this.roots.elem); // log the `p` element from the child
+
+      for (let elem of this.roots.elems) {
+        console.log(elem); // log the `p` element from the child
+      }
+    });
+  }
+}
+```
+
 ## Example: mouse position
 
 Here is the classical example of a non trivial hook to track the mouse position.

doc/reference/reactivity.md

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

doc/reference/templates.md

@@ -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 (which typically contains the properties of the component):
+2. it can use anything in the rendering context (typically, the component):
 
    ```xml
    <p t-if="user.birthday === today()">Happy bithday!</p>
@@ -541,8 +541,9 @@ 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. However, it may be useful to be able to specify a specific
-object as context. This can be done by using the `t-call-context` directive:
+rendering context (so, the current component). However, it may be useful to be
+able to specify a specific object as context. This can be done by using the
+`t-call-context` directive:
 
 ```xml
 <t t-call="other-template" t-call-context="obj"/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.7",
+  "version": "2.0.0-beta-20",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",
@@ -25,7 +25,6 @@
     "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,25 +42,26 @@
   "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": "^3.0.2",
+    "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",

src/compiler/code_generator.ts

@@ -1,3 +1,4 @@
+import { isProp } from "../runtime/blockdom/attributes";
 import {
   compileExpr,
   compileExprToArray,
@@ -57,30 +58,6 @@ function generateId(prefix: string = "") {
   return prefix + nextDataIds[prefix];
 }
 
-function isProp(tag: string, key: string): boolean {
-  switch (tag) {
-    case "input":
-      return (
-        key === "checked" ||
-        key === "indeterminate" ||
-        key === "value" ||
-        key === "readonly" ||
-        key === "readOnly" ||
-        key === "disabled"
-      );
-    case "option":
-      return key === "selected" || key === "disabled";
-    case "textarea":
-      return key === "value" || key === "readonly" || key === "readOnly" || key === "disabled";
-    case "select":
-      return key === "value" || key === "disabled";
-    case "button":
-    case "optgroup":
-      return key === "disabled";
-  }
-  return false;
-}
-
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -214,7 +191,7 @@ class CodeTarget {
     let result: string[] = [];
     result.push(`function ${this.name}(ctx, node, key = "") {`);
     if (this.hasRef) {
-      result.push(`  const refs = this.__owl__.refs;`);
+      result.push(`  const refs = ctx.__owl__.refs;`);
       for (let name in this.refInfo) {
         const [id, expr] = this.refInfo[name];
         result.push(`  const ${id} = ${expr};`);
@@ -237,14 +214,6 @@ class CodeTarget {
     result.push(`}`);
     return result.join("\n  ");
   }
-
-  currentKey(ctx: Context) {
-    let key = this.loopLevel ? `key${this.loopLevel}` : "key";
-    if (ctx.tKeyExpr) {
-      key = `${ctx.tKeyExpr} + ${key}`;
-    }
-    return key;
-  }
 }
 
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
@@ -317,7 +286,7 @@ export class CodeGenerator {
       for (let block of this.blocks) {
         if (block.dom) {
           let xmlString = block.asXmlString();
-          xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+          xmlString = xmlString.replace(/`/g, "\\`");
           if (block.dynamicTagName) {
             xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
             xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -396,15 +365,19 @@ export class CodeGenerator {
 
   insertBlock(expression: string, block: BlockDescription, ctx: Context): void {
     let blockExpr = block.generateExpr(expression);
+    const tKeyExpr = ctx.tKeyExpr;
     if (block.parentVar) {
-      let key = this.target.currentKey(ctx);
+      let keyArg = `key${this.target.loopLevel}`;
+      if (tKeyExpr) {
+        keyArg = `${tKeyExpr} + ${keyArg}`;
+      }
       this.helpers.add("withKey");
-      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
+      this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
       return;
     }
 
-    if (ctx.tKeyExpr) {
-      blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
+    if (tKeyExpr) {
+      blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
     }
 
     if (block.isRoot && !ctx.preventRoot) {
@@ -451,66 +424,78 @@ export class CodeGenerator {
       .join("");
   }
 
-  /**
-   * @returns the newly created block name, if any
-   */
-  compileAST(ast: AST, ctx: Context): string | null {
+  compileAST(ast: AST, ctx: Context) {
     switch (ast.type) {
       case ASTType.Comment:
-        return this.compileComment(ast, ctx);
+        this.compileComment(ast, ctx);
+        break;
       case ASTType.Text:
-        return this.compileText(ast, ctx);
+        this.compileText(ast, ctx);
+        break;
       case ASTType.DomNode:
-        return this.compileTDomNode(ast, ctx);
+        this.compileTDomNode(ast, ctx);
+        break;
       case ASTType.TEsc:
-        return this.compileTEsc(ast, ctx);
+        this.compileTEsc(ast, ctx);
+        break;
       case ASTType.TOut:
-        return this.compileTOut(ast, ctx);
+        this.compileTOut(ast, ctx);
+        break;
       case ASTType.TIf:
-        return this.compileTIf(ast, ctx);
+        this.compileTIf(ast, ctx);
+        break;
       case ASTType.TForEach:
-        return this.compileTForeach(ast, ctx);
+        this.compileTForeach(ast, ctx);
+        break;
       case ASTType.TKey:
-        return this.compileTKey(ast, ctx);
+        this.compileTKey(ast, ctx);
+        break;
       case ASTType.Multi:
-        return this.compileMulti(ast, ctx);
+        this.compileMulti(ast, ctx);
+        break;
       case ASTType.TCall:
-        return this.compileTCall(ast, ctx);
+        this.compileTCall(ast, ctx);
+        break;
       case ASTType.TCallBlock:
-        return this.compileTCallBlock(ast, ctx);
+        this.compileTCallBlock(ast, ctx);
+        break;
       case ASTType.TSet:
-        return this.compileTSet(ast, ctx);
+        this.compileTSet(ast, ctx);
+        break;
       case ASTType.TComponent:
-        return this.compileComponent(ast, ctx);
+        this.compileComponent(ast, ctx);
+        break;
       case ASTType.TDebug:
-        return this.compileDebug(ast, ctx);
+        this.compileDebug(ast, ctx);
+        break;
       case ASTType.TLog:
-        return this.compileLog(ast, ctx);
+        this.compileLog(ast, ctx);
+        break;
       case ASTType.TSlot:
-        return this.compileTSlot(ast, ctx);
+        this.compileTSlot(ast, ctx);
+        break;
       case ASTType.TTranslation:
-        return this.compileTTranslation(ast, ctx);
+        this.compileTTranslation(ast, ctx);
+        break;
       case ASTType.TPortal:
-        return this.compileTPortal(ast, ctx);
+        this.compileTPortal(ast, ctx);
     }
   }
 
-  compileDebug(ast: ASTDebug, ctx: Context): string | null {
+  compileDebug(ast: ASTDebug, ctx: Context) {
     this.addLine(`debugger;`);
     if (ast.content) {
-      return this.compileAST(ast.content, ctx);
+      this.compileAST(ast.content, ctx);
     }
-    return null;
   }
 
-  compileLog(ast: ASTLog, ctx: Context): string | null {
+  compileLog(ast: ASTLog, ctx: Context) {
     this.addLine(`console.log(${compileExpr(ast.expr)});`);
     if (ast.content) {
-      return this.compileAST(ast.content, ctx);
+      this.compileAST(ast.content, ctx);
     }
-    return null;
   }
-  compileComment(ast: ASTComment, ctx: Context): string {
+  compileComment(ast: ASTComment, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
@@ -523,10 +508,9 @@ export class CodeGenerator {
       const text = xmlDoc.createComment(ast.value);
       block!.insert(text);
     }
-    return block!.varName;
   }
 
-  compileText(ast: ASTText, ctx: Context): string {
+  compileText(ast: ASTText, ctx: Context) {
     let { block, forceNewBlock } = ctx;
 
     let value = ast.value;
@@ -545,7 +529,6 @@ export class CodeGenerator {
       const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
       block.insert(createFn.call(xmlDoc, value));
     }
-    return block.varName;
   }
 
   generateHandlerCode(rawEvent: string, handler: string): string {
@@ -565,7 +548,7 @@ export class CodeGenerator {
     return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
   }
 
-  compileTDomNode(ast: ASTDomNode, ctx: Context): string {
+  compileTDomNode(ast: ASTDomNode, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock || ast.dynamicTag !== null || ast.ns;
     let codeIdx = this.target.code.length;
@@ -601,26 +584,19 @@ export class CodeGenerator {
         attrName = key === "t-att" ? null : key.slice(6);
         expr = compileExpr(ast.attrs[key]);
         if (attrName && isProp(ast.tag, attrName)) {
-          if (attrName === "readonly") {
-            // the property has a different name than the attribute
-            attrName = "readOnly";
-          }
           // 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 (except 0), fall back to an empty string
-            expr = `new String((${expr}) === 0 ? 0 : ((${expr}) || ""))`;
+            // 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, "prop");
-          attrs[`block-property-${idx}`] = attrName!;
+        }
+        const idx = block!.insertData(expr, "attr");
+        if (key === "t-att") {
+          attrs[`block-attributes`] = String(idx);
         } else {
-          const idx = block!.insertData(expr, "attr");
-          if (key === "t-att") {
-            attrs[`block-attributes`] = String(idx);
-          } else {
-            attrs[`block-attribute-${idx}`] = attrName!;
-          }
+          attrs[`block-attribute-${idx}`] = attrName!;
         }
       } else if (this.translatableAttributes.includes(key)) {
         attrs[key] = this.translateFn(ast.attrs[key]);
@@ -636,6 +612,39 @@ export class CodeGenerator {
       }
     }
 
+    // event handlers
+    for (let ev in ast.on) {
+      const name = this.generateHandlerCode(ev, ast.on[ev]);
+      const idx = block!.insertData(name, "hdlr");
+      attrs[`block-handler-${idx}`] = ev;
+    }
+
+    // t-ref
+    if (ast.ref) {
+      this.target.hasRef = true;
+      const isDynamic = INTERP_REGEXP.test(ast.ref);
+      if (isDynamic) {
+        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+        const idx = block!.insertData(`(el) => refs[${str}] = el`, "ref");
+        attrs["block-ref"] = String(idx);
+      } else {
+        let name = ast.ref;
+        if (name in this.target.refInfo) {
+          // ref has already been defined
+          this.helpers.add("multiRefSetter");
+          const info = this.target.refInfo[name];
+          const index = block!.data.push(info[0]) - 1;
+          attrs["block-ref"] = String(index);
+          info[1] = `multiRefSetter(refs, \`${name}\`)`;
+        } else {
+          let id = generateId("ref");
+          this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
+          const index = block!.data.push(id) - 1;
+          attrs["block-ref"] = String(index);
+        }
+      }
+    }
+
     // t-model
     let tModelSelectedExpr;
     if (ast.model) {
@@ -662,23 +671,15 @@ export class CodeGenerator {
 
       let idx: number;
       if (specialInitTargetAttr) {
-        let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
-        if (!targetExpr && ast.attrs) {
-          // look at the dynamic attribute counterpart
-          const dynamicTgExpr = ast.attrs[`t-att-${targetAttr}`];
-          if (dynamicTgExpr) {
-            targetExpr = compileExpr(dynamicTgExpr);
-          }
-        }
-        idx = block!.insertData(`${fullExpression} === ${targetExpr}`, "prop");
-        attrs[`block-property-${idx}`] = 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}`, "prop");
-        attrs[`block-property-${idx}`] = targetAttr;
+        idx = block!.insertData(`${fullExpression}`, "attr");
+        attrs[`block-attribute-${idx}`] = targetAttr;
       }
       this.helpers.add("toNumber");
       let valueCode = `ev.target.${targetAttr}`;
@@ -690,41 +691,6 @@ export class CodeGenerator {
       attrs[`block-handler-${idx}`] = eventType;
     }
 
-    // event handlers
-    for (let ev in ast.on) {
-      const name = this.generateHandlerCode(ev, ast.on[ev]);
-      const idx = block!.insertData(name, "hdlr");
-      attrs[`block-handler-${idx}`] = ev;
-    }
-
-    // t-ref
-    if (ast.ref) {
-      this.target.hasRef = true;
-      const isDynamic = INTERP_REGEXP.test(ast.ref);
-      if (isDynamic) {
-        this.helpers.add("singleRefSetter");
-        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-        const idx = block!.insertData(`singleRefSetter(refs, ${str})`, "ref");
-        attrs["block-ref"] = String(idx);
-      } else {
-        let name = ast.ref;
-        if (name in this.target.refInfo) {
-          // ref has already been defined
-          this.helpers.add("multiRefSetter");
-          const info = this.target.refInfo[name];
-          const index = block!.data.push(info[0]) - 1;
-          attrs["block-ref"] = String(index);
-          info[1] = `multiRefSetter(refs, \`${name}\`)`;
-        } else {
-          let id = generateId("ref");
-          this.helpers.add("singleRefSetter");
-          this.target.refInfo[name] = [id, `singleRefSetter(refs, \`${name}\`)`];
-          const index = block!.data.push(id) - 1;
-          attrs["block-ref"] = String(index);
-        }
-      }
-    }
-
     const dom = xmlDoc.createElement(ast.tag);
     for (const [attr, val] of Object.entries(attrs)) {
       if (!(attr === "class" && val === "")) {
@@ -769,10 +735,9 @@ export class CodeGenerator {
         this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
-    return block!.varName;
   }
 
-  compileTEsc(ast: ASTTEsc, ctx: Context): string {
+  compileTEsc(ast: ASTTEsc, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     let expr: string;
     if (ast.expr === "0") {
@@ -793,10 +758,9 @@ export class CodeGenerator {
       const text = xmlDoc.createElement(`block-text-${idx}`);
       block.insert(text);
     }
-    return block.varName;
   }
 
-  compileTOut(ast: ASTTOut, ctx: Context): string {
+  compileTOut(ast: ASTTOut, ctx: Context) {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -818,7 +782,6 @@ export class CodeGenerator {
       blockStr = `safeOutput(${compileExpr(ast.expr)})`;
     }
     this.insertBlock(blockStr, block, ctx);
-    return block.varName;
   }
 
   compileTIfBranch(content: AST, block: BlockDescription, ctx: Context) {
@@ -832,7 +795,7 @@ export class CodeGenerator {
     this.target.indentLevel--;
   }
 
-  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode): string {
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
     let { block, forceNewBlock } = ctx;
     const codeIdx = this.target.code.length;
     const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
@@ -875,10 +838,9 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
-    return block.varName;
   }
 
-  compileTForeach(ast: ASTTForEach, ctx: Context): string {
+  compileTForeach(ast: ASTTForEach, ctx: Context) {
     let { block } = ctx;
     if (block) {
       this.insertAnchor(block);
@@ -917,9 +879,9 @@ export class CodeGenerator {
       // Throw error on duplicate keys in dev mode
       this.helpers.add("OwlError");
       this.addLine(
-        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
-      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
+      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
     }
     let id: string;
     if (ast.memo) {
@@ -956,10 +918,9 @@ export class CodeGenerator {
       this.addLine(`ctx = ctx.__proto__;`);
     }
     this.insertBlock("l", block, ctx);
-    return block.varName;
   }
 
-  compileTKey(ast: ASTTKey, ctx: Context): string | null {
+  compileTKey(ast: ASTTKey, ctx: Context) {
     const tKeyExpr = generateId("tKey_");
     this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
@@ -967,22 +928,20 @@ export class CodeGenerator {
       block: ctx.block,
       index: ctx.index,
     });
-    return this.compileAST(ast.content, ctx);
+    this.compileAST(ast.content, ctx);
   }
 
-  compileMulti(ast: ASTMulti, ctx: Context): string | null {
+  compileMulti(ast: ASTMulti, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     const isNewBlock = !block || forceNewBlock;
     let codeIdx = this.target.code.length;
     if (isNewBlock) {
       const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
-      let result: string | null = null;
       if (n <= 1) {
         for (let child of ast.content) {
-          const blockName = this.compileAST(child, ctx);
-          result = result || blockName;
+          this.compileAST(child, ctx);
         }
-        return result;
+        return;
       }
       block = this.createBlock(block, "multi", ctx);
     }
@@ -1022,10 +981,9 @@ export class CodeGenerator {
       const args = block!.children.map((c) => c.varName).join(", ");
       this.insertBlock(`multi([${args}])`, block!, ctx)!;
     }
-    return block!.varName;
   }
 
-  compileTCall(ast: ASTTCall, ctx: Context): string {
+  compileTCall(ast: ASTTCall, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     let ctxVar = ctx.ctxVar || "ctx";
     if (ast.context) {
@@ -1036,11 +994,12 @@ export class CodeGenerator {
       this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
       this.addLine(`${ctxVar}[isBoundary] = 1;`);
       this.helpers.add("isBoundary");
+      const nextId = BlockDescription.nextBlockId;
       const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
-      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (bl) {
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (nextId !== BlockDescription.nextBlockId) {
         this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = ${bl};`);
+        this.addLine(`${ctxVar}[zero] = b${nextId};`);
       }
     }
     const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -1074,10 +1033,9 @@ export class CodeGenerator {
     if (ast.body && !ctx.isLast) {
       this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
     }
-    return block.varName;
   }
 
-  compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
     let { block, forceNewBlock } = ctx;
     if (block) {
       if (!forceNewBlock) {
@@ -1086,10 +1044,9 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
-    return block.varName;
   }
 
-  compileTSet(ast: ASTTSet, ctx: Context): null {
+  compileTSet(ast: ASTTSet, ctx: Context) {
     this.target.shouldProtectScope = true;
     this.helpers.add("isBoundary").add("withDefault");
     const expr = ast.value ? compileExpr(ast.value || "") : "null";
@@ -1097,8 +1054,7 @@ export class CodeGenerator {
       this.helpers.add("LazyValue");
       const bodyAst: AST = { type: ASTType.Multi, content: ast.body };
       const name = this.compileInNewTarget("value", bodyAst, ctx);
-      let key = this.target.currentKey(ctx);
-      let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
+      let value = `new LazyValue(${name}, ctx, this, node)`;
       value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
       this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
     } else {
@@ -1115,7 +1071,6 @@ export class CodeGenerator {
       this.helpers.add("setContextValue");
       this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
     }
-    return null;
   }
 
   generateComponentKey() {
@@ -1144,7 +1099,7 @@ export class CodeGenerator {
       if (suffix === "bind") {
         this.helpers.add("bind");
         name = _name;
-        value = `bind(this, ${value || undefined})`;
+        value = `bind(ctx, ${value || undefined})`;
       } else {
         throw new OwlError("Invalid prop suffix");
       }
@@ -1167,7 +1122,7 @@ export class CodeGenerator {
     return propString;
   }
 
-  compileComponent(ast: ASTComponent, ctx: Context): string {
+  compileComponent(ast: ASTComponent, ctx: Context) {
     let { block } = ctx;
     // props
     const hasSlotsProp = "slots" in (ast.props || {});
@@ -1188,7 +1143,7 @@ export class CodeGenerator {
         const params = [];
         if (slotAst.content) {
           const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-          params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
+          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
         }
         const scope = ast.slots[slotName].scope;
         if (scope) {
@@ -1233,7 +1188,7 @@ export class CodeGenerator {
     }
 
     if (this.dev) {
-      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, this);`);
+      this.addLine(`helpers.validateProps(${expr}, ${propVar!}, node);`);
     }
 
     if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
@@ -1255,13 +1210,6 @@ export class CodeGenerator {
       })`,
     });
 
-    if (ast.isDynamic) {
-      // If the component class changes, this can cause delayed renders to go
-      // through if the key doesn't change. Use the component name for now.
-      // This means that two component classes with the same name isn't supported
-      // in t-component. We can generate a unique id per class later if needed.
-      keyArg = `(${expr}).name + ${keyArg}`;
-    }
     let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;
@@ -1274,7 +1222,6 @@ export class CodeGenerator {
 
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
-    return block.varName;
   }
 
   wrapWithEventCatcher(expr: string, on: EventHandlers): string {
@@ -1293,7 +1240,7 @@ export class CodeGenerator {
     return `${name}(${expr}, [${handlers.join(",")}])`;
   }
 
-  compileTSlot(ast: ASTSlot, ctx: Context): string {
+  compileTSlot(ast: ASTSlot, ctx: Context) {
     this.helpers.add("callSlot");
     let { block } = ctx;
     let blockString: string;
@@ -1322,7 +1269,7 @@ export class CodeGenerator {
     const scope = this.getPropString(props, dynProps);
     if (ast.defaultContent) {
       const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
+      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`;
     } else {
       if (dynamic) {
         let name = generateId("slot");
@@ -1342,16 +1289,14 @@ export class CodeGenerator {
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-    return block.varName;
   }
 
-  compileTTranslation(ast: ASTTranslation, ctx: Context): string | null {
+  compileTTranslation(ast: ASTTranslation, ctx: Context) {
     if (ast.content) {
-      return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+      this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
     }
-    return null;
   }
-  compileTPortal(ast: ASTTPortal, ctx: Context): string {
+  compileTPortal(ast: ASTTPortal, ctx: Context) {
     if (!this.staticDefs.find((d) => d.id === "Portal")) {
       this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
     }
@@ -1372,12 +1317,11 @@ export class CodeGenerator {
     });
 
     const target = compileExpr(ast.target);
-    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
     if (block) {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-    return block.varName;
   }
 }

src/compiler/inline_expressions.ts

@@ -28,7 +28,7 @@ import { OwlError } from "../runtime/error_handling";
 //------------------------------------------------------------------------------
 
 const RESERVED_WORDS =
-  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,eval,void,Math,RegExp,Array,Object,Date".split(
+  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(
     ","
   );
 

src/compiler/parser.ts

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

src/runtime/app.ts

@@ -1,11 +1,12 @@
 import { Component, ComponentConstructor, Props } from "./component";
 import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, OwlError, handleError } from "./error_handling";
-import { Fiber, RootFiber, MountOptions } from "./fibers";
+import { nodeErrorHandlers, OwlError } from "./error_handling";
+import { Fiber, MountOptions } from "./fibers";
 import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
+import { handleError } from "./error_handling";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -31,22 +32,6 @@ This is not suitable for production use.
 See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
 };
 
-declare global {
-  interface Window {
-    __OWL_DEVTOOLS__: {
-      apps: Set<App>;
-      Fiber: typeof Fiber;
-      RootFiber: typeof RootFiber;
-    };
-  }
-}
-
-window.__OWL_DEVTOOLS__ ||= {
-  apps: new Set<App>(),
-  Fiber: Fiber,
-  RootFiber: RootFiber,
-};
-
 export class App<
   T extends abstract new (...args: any) => any = any,
   P extends object = any,
@@ -64,7 +49,6 @@ export class App<
   constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
     super(config);
     this.Root = Root;
-    window.__OWL_DEVTOOLS__.apps.add(this);
     if (config.test) {
       this.dev = true;
     }
@@ -82,7 +66,7 @@ export class App<
   mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
     App.validateTarget(target);
     if (this.dev) {
-      validateProps(this.Root, this.props, { __owl__: { app: this } });
+      validateProps(this.Root, this.props, { app: this });
     }
     const node = this.makeNode(this.Root, this.props);
     const prom = this.mountNode(node, target, options);
@@ -126,7 +110,6 @@ export class App<
       this.scheduler.flush();
       this.root.destroy();
     }
-    window.__OWL_DEVTOOLS__.apps.delete(this);
   }
 
   createComponent<P extends Props>(
@@ -168,13 +151,7 @@ export class App<
       } else {
         // new component
         if (isStatic) {
-          const components = parent.constructor.components;
-          if (!components) {
-            throw new OwlError(
-              `Cannot find the definition of component "${name}", missing static components key in parent`
-            );
-          }
-          C = components[name as any];
+          C = parent.constructor.components[name as any];
           if (!C) {
             throw new OwlError(`Cannot find the definition of component "${name}"`);
           } else if (!(C.prototype instanceof Component)) {

src/runtime/blockdom/attributes.ts

@@ -140,3 +140,33 @@ 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 ? value.valueOf() : "";
+  };
+}
+
+export function isProp(tag: string, key: string): boolean {
+  switch (tag) {
+    case "input":
+      return (
+        key === "checked" ||
+        key === "indeterminate" ||
+        key === "value" ||
+        key === "readonly" ||
+        key === "disabled"
+      );
+    case "option":
+      return key === "selected" || key === "disabled";
+    case "textarea":
+      return key === "value" || key === "readonly" || key === "disabled";
+    case "select":
+      return key === "value" || key === "disabled";
+    case "button":
+    case "optgroup":
+      return key === "disabled";
+  }
+  return false;
+}

src/runtime/blockdom/block_compiler.ts

@@ -1,5 +1,13 @@
 import { OwlError } from "../error_handling";
-import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
+import {
+  attrsSetter,
+  attrsUpdater,
+  createAttrUpdater,
+  isProp,
+  makePropSetter,
+  setClass,
+  updateClass,
+} from "./attributes";
 import { config } from "./config";
 import { createEventHandler } from "./events";
 import type { VNode } from "./index";
@@ -17,13 +25,6 @@ const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
 
 const NO_OP = () => {};
 
-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 ? value.valueOf() : "";
-  };
-}
-
 // -----------------------------------------------------------------------------
 // Main compiler code
 // -----------------------------------------------------------------------------
@@ -100,7 +101,7 @@ function normalizeNode(node: HTMLElement | Text) {
 interface DynamicInfo {
   idx: number;
   refIdx?: number;
-  type: "text" | "child" | "handler" | "attribute" | "attributes" | "property" | "ref";
+  type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref";
   isOnlyChild?: boolean;
   name?: string;
   tag?: string;
@@ -183,14 +184,6 @@ function buildTree(
               name: attrValue,
               tag: tagName,
             });
-          } else if (attrName.startsWith("block-property-")) {
-            const idx = parseInt(attrName.slice(15), 10);
-            info.push({
-              type: "property",
-              idx,
-              name: attrValue,
-              tag: tagName,
-            });
           } else if (attrName === "block-attributes") {
             info.push({
               type: "attributes",
@@ -384,22 +377,15 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
           };
         }
         break;
-      case "property": {
-        const refIdx = info.refIdx!;
-        const setProp = makePropSetter(info.name!);
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx,
-          setData: setProp,
-          updateData: setProp,
-        });
-        break;
-      }
       case "attribute": {
         const refIdx = info.refIdx!;
         let updater: any;
         let setter: any;
-        if (info.name === "class") {
+        if (isProp(info.tag!, info.name!)) {
+          const setProp = makePropSetter(info.name!);
+          setter = setProp;
+          updater = setProp;
+        } else if (info.name === "class") {
           setter = setClass;
           updater = updateClass;
         } else {
@@ -531,13 +517,15 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      nodeInsertBefore.call(parent, this.el!, node);
+    *nodes() {
+      if (this.el) {
+        yield this.el;
+      }
     }
 
-    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
-      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
+    moveBefore(other: Block | null, afterNode: Node | null) {
+      const target = other ? other.el! : afterNode;
+      nodeInsertBefore.call(this.parentEl, this.el!, target);
     }
 
     toString() {

src/runtime/blockdom/event_catcher.ts

@@ -12,7 +12,6 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
     child: VNode;
     handlerData: any[];
     handlerFns: any[] = [];
-
     parentEl?: HTMLElement | undefined;
     afterNode: Text | null = null;
 
@@ -44,30 +43,17 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
         const self = this;
         handler[idx] = function (ev: any) {
           const target = ev.target;
-          let currentNode: any = self.child.firstNode();
-          const afterNode = self.afterNode;
-          while (currentNode && currentNode !== afterNode) {
-            if (currentNode.contains(target)) {
+          for (let node of self.nodes()) {
+            if (node.contains(target)) {
               return origFn.call(this, ev);
             }
-            currentNode = currentNode.nextSibling;
           }
         };
       }
     }
 
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      this.child.moveBeforeDOMNode(node, parent);
-      parent!.insertBefore(this.afterNode!, node);
-    }
-
-    moveBeforeVNode(other: VCatcher | null, afterNode: Node | null) {
-      if (other) {
-        // check this with @ged-odoo for use in foreach
-        afterNode = other.firstNode() || afterNode;
-      }
-      this.child.moveBeforeVNode(other ? other.child : null, afterNode);
+    moveBefore(other: VCatcher | null, afterNode: Node | null) {
+      this.child.moveBefore(other ? other.child : null, afterNode);
       this.parentEl!.insertBefore(this.afterNode!, afterNode);
     }
 
@@ -100,6 +86,10 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
       return this.child.firstNode();
     }
 
+    nodes(): Generator<Node> {
+      return this.child.nodes();
+    }
+
     toString(): string {
       return this.child.toString();
     }

src/runtime/blockdom/html.ts

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

src/runtime/blockdom/index.ts

@@ -10,13 +10,14 @@ export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void;
-  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
+  moveBefore(other: T | null, afterNode: Node | null): void;
   patch(other: T, withBeforeRemove: boolean): void;
   beforeRemove(): void;
   remove(): void;
   firstNode(): Node | undefined;
 
+  nodes(): Generator<Node>;
+
   el?: undefined | HTMLElement | Text;
   parentEl?: undefined | HTMLElement;
   isOnlyChild?: boolean | undefined;

src/runtime/blockdom/list.ts

@@ -38,23 +38,14 @@ class VList {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeDOMNode(node, parent);
-    }
-    parent!.insertBefore(this.anchor!, node);
-  }
-
-  moveBeforeVNode(other: VList | null, afterNode: Node | null) {
+  moveBefore(other: VList | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
       afterNode = (next ? next.firstNode() : other!.anchor) || null;
     }
     const children = this.children;
     for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeVNode(null, afterNode);
+      children[i].moveBefore(null, afterNode);
     }
     this.parentEl!.insertBefore(this.anchor!, afterNode);
   }
@@ -75,7 +66,7 @@ class VList {
       patch: cPatch,
       remove: cRemove,
       beforeRemove,
-      moveBeforeVNode: cMoveBefore,
+      moveBefore: cMoveBefore,
       firstNode: cFirstNode,
     } = proto;
 
@@ -230,6 +221,12 @@ class VList {
     return child ? child.firstNode() : undefined;
   }
 
+  *nodes() {
+    for (let child of this.children) {
+      yield* child.nodes();
+    }
+  }
+
   toString(): string {
     return this.children.map((c) => c!.toString()).join("");
   }

src/runtime/blockdom/multi.ts

@@ -38,22 +38,7 @@ export class VMulti {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    const anchors = this.anchors;
-    for (let i = 0, l = children.length; i < l; i++) {
-      let child = children[i];
-      if (child) {
-        child.moveBeforeDOMNode(node, parent);
-      } else {
-        const anchor = anchors![i];
-        nodeInsertBefore.call(parent, anchor, node);
-      }
-    }
-  }
-
-  moveBeforeVNode(other: VMulti | null, afterNode: Node | null) {
+  moveBefore(other: VMulti | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
       afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
@@ -64,7 +49,7 @@ export class VMulti {
     for (let i = 0, l = children.length; i < l; i++) {
       let child = children[i];
       if (child) {
-        child.moveBeforeVNode(null, afterNode);
+        child.moveBefore(null, afterNode);
       } else {
         const anchor = anchors![i];
         nodeInsertBefore.call(parent, anchor, afterNode);
@@ -139,6 +124,14 @@ export class VMulti {
     return child ? child.firstNode() : this.anchors![0];
   }
 
+  *nodes() {
+    for (let child of this.children) {
+      if (child) {
+        yield* child.nodes();
+      }
+    }
+  }
+
   toString(): string {
     return this.children.map((c) => (c ? c!.toString() : "")).join("");
   }

src/runtime/blockdom/text.ts

@@ -23,13 +23,9 @@ abstract class VSimpleNode {
     this.el = node;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    nodeInsertBefore.call(parent, this.el!, node);
-  }
-
-  moveBeforeVNode(other: VText | null, afterNode: Node | null) {
-    nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
+  moveBefore(other: VText | null, afterNode: Node | null) {
+    const target = other ? other.el! : afterNode;
+    nodeInsertBefore.call(this.parentEl, this.el!, target);
   }
 
   beforeRemove() {}
@@ -42,6 +38,12 @@ abstract class VSimpleNode {
     return this.el!;
   }
 
+  *nodes(): Generator<Node> {
+    if (this.el) {
+      yield this.el;
+    }
+  }
+
   toString() {
     return this.text;
   }

src/runtime/blockdom/toggler.ts

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

src/runtime/component_node.ts

@@ -3,7 +3,14 @@ import { BDom, VNode } from "./blockdom";
 import { Component, ComponentConstructor, Props } from "./component";
 import { fibersInError, OwlError } from "./error_handling";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
+import {
+  clearReactivesForCallback,
+  getSubscriptions,
+  NonReactive,
+  Reactive,
+  reactive,
+  TARGET,
+} from "./reactivity";
 import { STATUS } from "./status";
 import { batched, Callback } from "./utils";
 
@@ -45,7 +52,7 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  *  relevant changes
  * @see reactive
  */
-export function useState<T extends object>(state: T): T {
+export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
   const node = getCurrent();
   let render = batchedRenderFunctions.get(node)!;
   if (!render) {
@@ -109,13 +116,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.childEnv = env;
     for (const key in props) {
       const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
+      if (prop && typeof prop === "object" && prop[TARGET]) {
         props[key] = useState(prop);
       }
     }
     this.component = new C(props, env, this);
-    const ctx = Object.assign(Object.create(this.component), { this: this.component });
-    this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+    this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
     this.component.setup();
     currentNode = null;
   }
@@ -234,7 +240,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     currentNode = this;
     for (const key in props) {
       const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
+      if (prop && typeof prop === "object" && prop[TARGET]) {
         props[key] = useState(prop);
       }
     }
@@ -290,6 +296,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     return bdom ? bdom.firstNode() : undefined;
   }
 
+  *nodes(): Generator<Node> {
+    if (this.bdom) {
+      yield* this.bdom.nodes();
+    }
+  }
+
   mount(parent: HTMLElement, anchor: ChildNode) {
     const bdom = this.fiber!.bdom!;
     this.bdom = bdom;
@@ -300,12 +312,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.fiber = null;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void {
-    this.bdom!.moveBeforeDOMNode(node, parent);
-  }
-
-  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
-    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
+  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
+    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
   }
 
   patch() {
@@ -318,7 +326,6 @@ 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;

src/runtime/hooks.ts

@@ -117,7 +117,7 @@ export function useEffect(effect: Effect, computeDependencies: () => any[] = ()
  *  `useExternalListener(window, 'click', this._doSomething);`
  * */
 export function useExternalListener(
-  target: EventTarget,
+  target: HTMLElement | typeof window,
   eventName: string,
   handler: EventListener,
   eventParams?: AddEventListenerOptions
@@ -127,3 +127,39 @@ export function useExternalListener(
   onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
   onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
 }
+
+// -----------------------------------------------------------------------------
+// useRoots
+// -----------------------------------------------------------------------------
+interface DomRangeObj {
+  node: Node | null;
+  elem: HTMLElement | null;
+  elems: Iterable<HTMLElement>;
+  nodes: Iterable<Node>;
+}
+
+export function useRoots(): DomRangeObj {
+  const cnode = getCurrent();
+
+  function* _elems(): Generator<HTMLElement> {
+    for (let node of cnode.nodes()) {
+      if (node.nodeType === 1) {
+        yield node as HTMLElement;
+      }
+    }
+  }
+  return {
+    get node() {
+      return cnode.nodes().next().value || null;
+    },
+    get elem() {
+      return _elems().next().value || null;
+    },
+    get nodes() {
+      return cnode.nodes();
+    },
+    get elems() {
+      return _elems();
+    },
+  };
+}

src/runtime/index.ts

@@ -12,6 +12,7 @@ import {
   comment,
 } from "./blockdom";
 import { mainEventHandler } from "./event_handling";
+export type { Reactive } from "./reactivity";
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
@@ -39,7 +40,15 @@ export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";
-export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
+export {
+  useEffect,
+  useEnv,
+  useExternalListener,
+  useRef,
+  useChildSubEnv,
+  useSubEnv,
+  useRoots,
+} from "./hooks";
 export { EventBus, whenReady, loadFile, markup } from "./utils";
 export {
   onWillStart,

src/runtime/portal.ts

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

src/runtime/reactivity.ts

@@ -1,22 +1,25 @@
-import type { Callback } from "./utils";
+import { Callback } from "./utils";
 import { OwlError } from "./error_handling";
 
+// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
+export const TARGET = Symbol("Target");
+// Escape hatch to prevent reactivity system to turn something into a reactive
+const SKIP = Symbol("Skip");
 // Special key to subscribe to, to be notified of key creation/deletion
 const KEYCHANGES = Symbol("Key changes");
-// 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;
 
@@ -33,7 +36,7 @@ const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
  * @returns the raw type of the object
  */
 function rawType(obj: any) {
-  return objectToString.call(toRaw(obj)).slice(8, -1);
+  return objectToString.call(obj).slice(8, -1);
 }
 /**
  * Checks whether a given value can be made into a reactive object.
@@ -58,16 +61,15 @@ function possiblyReactive(val: any, cb: Callback) {
   return canBeMadeReactive(val) ? reactive(val, cb) : val;
 }
 
-const skipped = new WeakSet<Target>();
 /**
  * Mark an object or array so that it is ignored by the reactivity system
  *
  * @param value the value to mark
  * @returns the object itself
  */
-export function markRaw<T extends Target>(value: T): T {
-  skipped.add(value);
-  return value;
+export function markRaw<T extends Target>(value: T): NonReactive<T> {
+  (value as any)[SKIP] = true;
+  return value as NonReactive<T>;
 }
 
 /**
@@ -76,8 +78,8 @@ export function markRaw<T extends Target>(value: T): T {
  * @param value a reactive value
  * @returns the underlying value
  */
-export function toRaw<T extends Target, U extends Reactive<T>>(value: U | T): T {
-  return targets.has(value) ? (targets.get(value) as T) : value;
+export function toRaw<T extends object>(value: Reactive<T>): T {
+  return value[TARGET] || value;
 }
 
 const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callback>>>();
@@ -91,9 +93,6 @@ const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callbac
  * @param callback the function to call when the key changes
  */
 function observeTargetKey(target: Target, key: PropertyKey, callback: Callback): void {
-  if (callback === NO_CALLBACK) {
-    return;
-  }
   if (!targetToKeysToCallbacks.get(target)) {
     targetToKeysToCallbacks.set(target, new Map());
   }
@@ -148,11 +147,8 @@ export function clearReactivesForCallback(callback: Callback): void {
     if (!observedKeys) {
       continue;
     }
-    for (const [key, callbacks] of observedKeys.entries()) {
+    for (const callbacks of observedKeys.values()) {
       callbacks.delete(callback);
-      if (!callbacks.size) {
-        observedKeys.delete(key);
-      }
     }
   }
   targetsToClear.clear();
@@ -162,20 +158,14 @@ export function getSubscriptions(callback: Callback) {
   const targets = callbacksToTargets.get(callback) || [];
   return [...targets].map((target) => {
     const keysToCallbacks = targetToKeysToCallbacks.get(target);
-    let keys = [];
-    if (keysToCallbacks) {
-      for (const [key, cbs] of keysToCallbacks) {
-        if (cbs.has(callback)) {
-          keys.push(key);
-        }
-      }
-    }
-    return { target, keys };
+    return {
+      target,
+      keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
+    };
   });
 }
-// Maps reactive objects to the underlying target
-export const targets = new WeakMap<Reactive<Target>, Target>();
-const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>();
+
+const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
 /**
  * Creates a reactive proxy for an object. Reading data on the reactive object
  * subscribes to changes to the data. Writing data on the object will cause the
@@ -190,7 +180,7 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>()
  * Subscriptions:
  * + Reading a property on an object will subscribe you to changes in the value
  *    of that property.
- * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
+ * + Accessing an object keys (eg with Object.keys or with `for..in`) will
  *    subscribe you to the creation/deletion of keys. Checking the presence of a
  *    key on the object with 'in' has the same effect.
  * - getOwnPropertyDescriptor does not currently subscribe you to the property.
@@ -203,16 +193,19 @@ const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>()
  *  reactive has changed
  * @returns a proxy that tracks changes to it
  */
-export function reactive<T extends Target>(target: T, callback: Callback = NO_CALLBACK): T {
+export function reactive<T extends Target>(
+  target: T,
+  callback: Callback = () => {}
+): Reactive<T> | NonReactive<T> {
   if (!canBeMadeReactive(target)) {
     throw new OwlError(`Cannot make the given value reactive`);
   }
-  if (skipped.has(target)) {
-    return target;
+  if (SKIP in target) {
+    return target as NonReactive<T>;
   }
-  if (targets.has(target)) {
-    // target is reactive, create a reactive on the underlying object instead
-    return reactive(targets.get(target) as T, callback);
+  const originalTarget = (target as Reactive)[TARGET];
+  if (originalTarget) {
+    return reactive(originalTarget, callback);
   }
   if (!reactiveCache.has(target)) {
     reactiveCache.set(target, new WeakMap());
@@ -225,7 +218,6 @@ export function reactive<T extends Target>(target: T, callback: Callback = NO_CA
       : 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>;
 }
@@ -237,29 +229,29 @@ export function reactive<T extends Target>(target: T, callback: Callback = NO_CA
  */
 function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T> {
   return {
-    get(target, key, receiver) {
+    get(target: any, key: PropertyKey, proxy: Reactive<T>) {
+      if (key === TARGET) {
+        return target;
+      }
       // non-writable non-configurable properties cannot be made reactive
       const desc = Object.getOwnPropertyDescriptor(target, key);
       if (desc && !desc.writable && !desc.configurable) {
-        return Reflect.get(target, key, receiver);
+        return Reflect.get(target, key, proxy);
       }
       observeTargetKey(target, key, callback);
-      return possiblyReactive(Reflect.get(target, key, receiver), callback);
+      return possiblyReactive(Reflect.get(target, key, proxy), callback);
     },
-    set(target, key, value, receiver) {
-      const hadKey = objectHasOwnProperty.call(target, key);
-      const originalValue = Reflect.get(target, key, receiver);
-      const ret = Reflect.set(target, key, value, receiver);
-      if (!hadKey && objectHasOwnProperty.call(target, key)) {
+    set(target, key, value, proxy) {
+      const isNewKey = !objectHasOwnProperty.call(target, key);
+      const originalValue = Reflect.get(target, key, proxy);
+      const ret = Reflect.set(target, key, value, proxy);
+      if (isNewKey) {
         notifyReactives(target, KEYCHANGES);
       }
       // While Array length may trigger the set trap, it's not actually set by this
       // method but is updated behind the scenes, and the trap is not called with the
       // new value. We disable the "same-value-optimization" for it because of that.
-      if (
-        originalValue !== Reflect.get(target, key, receiver) ||
-        (key === "length" && Array.isArray(target))
-      ) {
+      if (originalValue !== value || (Array.isArray(target) && key === "length")) {
         notifyReactives(target, key);
       }
       return ret;
@@ -452,8 +444,10 @@ function collectionsProxyHandler<T extends Collection>(
   // property is read.
   const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
   return Object.assign(basicProxyHandler(callback), {
-    // FIXME: probably broken when part of prototype chain since we ignore the receiver
     get(target: any, key: PropertyKey) {
+      if (key === TARGET) {
+        return target;
+      }
       if (objectHasOwnProperty.call(specialHandlers, key)) {
         return (specialHandlers as any)[key];
       }

src/runtime/template_helpers.ts

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

src/runtime/validation.ts

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

tests/blockdom/block_attributes.test.ts

@@ -145,3 +145,59 @@ test("class attribute (with a preexisting value", async () => {
   patch(tree, block([""]));
   expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
 });
+
+describe("properties", () => {
+  test("input with value attribute", () => {
+    // render input with initial value
+    const block = createBlock(`<input block-attribute-0="value"/>`);
+
+    const tree = block(["zucchini"]);
+    mount(tree, fixture);
+    // 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");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // input value was properly reset by owl
+    patch(tree, block(["potato"]));
+    expect(input.value).toBe("potato");
+  });
+
+  test("input with value attribute, and falsy value given", () => {
+    const block = createBlock(`<input block-attribute-0="value"/>`);
+
+    const tree = block([undefined]);
+    mount(tree, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+
+    patch(tree, block([null]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([0]));
+    expect(input.value).toBe("0");
+
+    patch(tree, block([""]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([false]));
+    expect(input.value).toBe("");
+  });
+
+  test("input type=checkbox with checked attribute", () => {
+    // render input with initial value
+    const block = createBlock(`<input type="checkbox" block-attribute-0="checked"/>`);
+
+    const tree = block([true]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
+    const input = fixture.querySelector("input")!;
+    expect(input.checked).toBe(true);
+  });
+});

tests/blockdom/block_properties.test.ts

@@ -1,70 +0,0 @@
-import { mount, patch, createBlock } from "../../src/runtime/blockdom";
-import { makeTestFixture } from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-test("input with value property", () => {
-  // render input with initial value
-  const block = createBlock(`<input block-property-0="value"/>`);
-
-  const tree = block(["zucchini"]);
-  mount(tree, fixture);
-  // 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");
-
-  // rerender with a different value, and patch actual dom, to check that
-  // input value was properly reset by owl
-  patch(tree, block(["potato"]));
-  expect(input.value).toBe("potato");
-});
-
-test("input with value property, and falsy value given", () => {
-  const block = createBlock(`<input block-property-0="value"/>`);
-
-  const tree = block([undefined]);
-  mount(tree, fixture);
-  const input = fixture.querySelector("input")!;
-  expect(input.value).toBe("");
-
-  patch(tree, block([null]));
-  expect(input.value).toBe("");
-
-  patch(tree, block([0]));
-  expect(input.value).toBe("0");
-
-  patch(tree, block([""]));
-  expect(input.value).toBe("");
-
-  patch(tree, block([false]));
-  expect(input.value).toBe("");
-});
-
-test("input type=checkbox with checked property", () => {
-  // render input with initial value
-  const block = createBlock(`<input type="checkbox" block-property-0="checked"/>`);
-
-  const tree = block([true]);
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
-  const input = fixture.querySelector("input")!;
-  expect(input.checked).toBe(true);
-});

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

@@ -28,6 +28,20 @@ exports[`attributes changing a class with t-att-class 1`] = `
 }"
 `;
 
+exports[`attributes changing an attribute with t-att- 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes class and t-att-class should combine together 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -416,19 +430,6 @@ 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
 ) {
@@ -707,6 +708,20 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;
 
+exports[`attributes updating property with falsy value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -735,3 +750,114 @@ 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
+) {
+  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 = new Boolean(ctx['v']);
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 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['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]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input with t-att-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[`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]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  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 = new String((ctx['value']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  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 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  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>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

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

@@ -519,9 +519,8 @@ exports[`t-on t-on, with arguments and t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['this'];
-    const v2 = ctx['value'];
-    let hdlr1 = [()=>v1.update(v2), ctx];
+    const v1 = ctx['value'];
+    let hdlr1 = [()=>this.update(v1), ctx];
     return block1([hdlr1]);
   }
 }"

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

@@ -182,12 +182,12 @@ exports[`misc other complex template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey, singleRefSetter } = helpers;
+  let { prepareList, withKey } = helpers;
   const callTemplate_1 = app.getTemplate(\`LOAD_INFOS_TEMPLATE\`);
   const comp1 = app.createComponent(\`BundlesList\`, true, false, false, false);
   const comp2 = app.createComponent(\`BundlesList\`, true, false, false, false);
   
-  let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-property-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
+  let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
                       <h5>Search options</h5>
                       <input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/>
       
@@ -209,17 +209,17 @@ exports[`misc other complex template 1`] = `
   let block12 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
   let block13 = createBlock(\`<li class=\\"nav-item dropdown\\"><a href=\\"#\\" class=\\"nav-link dropdown-toggle\\" data-toggle=\\"dropdown\\"><b><span><block-text-0/></span></b></a><div class=\\"dropdown-menu js_usermenu\\" role=\\"menu\\"><a class=\\"dropdown-item\\" id=\\"o_logout\\" role=\\"menuitem\\" block-attribute-1=\\"href\\">Logout</a><a class=\\"dropdown-item\\" role=\\"menuitem\\" block-attribute-2=\\"href\\">Web</a></div></li>\`);
   let block14 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\"><block-child-0/></select>\`);
-  let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-property-1=\\"selected\\"><block-text-2/></option>\`);
-  let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-property-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
+  let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
+  let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
   let block21 = createBlock(\`<div><button class=\\"btn btn-sm btn-default\\" block-handler-0=\\"click\\">All</button><button class=\\"btn btn-sm btn-default\\" block-handler-1=\\"click\\">None</button><button class=\\"btn btn-sm btn-info\\" block-handler-2=\\"click\\">Default</button><button class=\\"btn btn-sm btn-default\\" block-handler-3=\\"click\\">Close</button></div>\`);
   let block23 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\"><block-text-0/> <!-- todo fixme--></div>\`);
   let block24 = createBlock(\`<div class=\\"mb32\\"><h1>No project</h1></div>\`);
   let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`search_input\`);
-    const ref2 = singleRefSetter(refs, \`settings_menu\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`search_input\`] = el;
+    const ref2 = (el) => refs[\`settings_menu\`] = el;
     let b2,b4,b14,b17,b22,b23,b24,b25;
     let attr1 = \`/runbot/\${ctx['project'].slug}\`;
     let txt1 = ctx['project'].name;
@@ -269,15 +269,15 @@ exports[`misc other complex template 1`] = `
         ctx[\`category\`] = v_block15[i1];
         const key1 = ctx['category'].id;
         let attr6 = ctx['category'].id;
-        let prop1 = new Boolean(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, prop1, txt5]), key1);
+        c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
       }
       ctx = ctx.__proto__;
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let prop2 = new String((ctx['search'].value) === 0 ? 0 : ((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];
@@ -289,14 +289,14 @@ exports[`misc other complex template 1`] = `
         const key1 = ctx['trigger'].id;
         let b20;
         if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
-          let attr7 = \`trigger_\${ctx['trigger'].id}\`;
-          let attr8 = \`trigger_\${ctx['trigger'].id}\`;
-          let prop3 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
-          let attr9 = ctx['trigger'].id;
-          let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
+          let attr9 = \`trigger_\${ctx['trigger'].id}\`;
           let attr10 = \`trigger_\${ctx['trigger'].id}\`;
+          let attr11 = new Boolean(ctx['options'].trigger_display[ctx['trigger'].id]);
+          let attr12 = ctx['trigger'].id;
+          let hdlr7 = [ctx['updateTriggerDisplay'], ctx];
+          let attr13 = \`trigger_\${ctx['trigger'].id}\`;
           let txt6 = ctx['trigger'].name;
-          b20 = block20([attr7, attr8, prop3, attr9, hdlr7, attr10, txt6]);
+          b20 = block20([attr9, attr10, attr11, attr12, hdlr7, attr13, txt6]);
         }
         c_block18[i1] = withKey(multi([b20]), key1);
       }
@@ -323,7 +323,7 @@ exports[`misc other complex template 1`] = `
       const b27 = comp2({bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__3\`, node, this, null);
       b25 = block25([], [b26, b27]);
     }
-    return block1([attr1, txt1, hdlr2, hdlr3, prop2, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
+    return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);
   }
 }"
 `;

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

@@ -1,250 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`changing an attribute with t-att- 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let attr1 = ctx['v'];
-    return block1([attr1]);
-  }
-}"
-`;
-
-exports[`dynamic input value: falsy values 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((0) === 0 ? 0 : ((0) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`dynamic input value: falsy values 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((false) === 0 ? 0 : ((false) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`dynamic input value: falsy values 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((undefined) === 0 ? 0 : ((undefined) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`dynamic input value: falsy values 4`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String(('') === 0 ? 0 : (('') || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`input of type checkbox with t-att-indeterminate 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"indeterminate\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new Boolean(ctx['v']);
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`input type= checkbox, with t-att-checked 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new Boolean(ctx['flag']);
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`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-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`input with t-att-value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`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-property-0=\\"checked\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new Boolean(ctx['v']);
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`readonly and readOnly are both interpreted as the readOnly property 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input readonly=\\"\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`readonly and readOnly are both interpreted as the readOnly property 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input readOnly=\\"\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`readonly and readOnly are both interpreted as the readOnly property 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"readOnly\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new Boolean(ctx['val']);
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`readonly and readOnly are both interpreted as the readOnly property 4`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<input block-property-0=\\"readOnly\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new Boolean(ctx['val']);
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`select with t-att-value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<select block-property-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 prop1 = new String((ctx['value']) === 0 ? 0 : ((ctx['value']) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`textarea with t-att-value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<textarea block-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`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-property-0=\\"value\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let prop1 = new String((ctx['v']) === 0 ? 0 : ((ctx['v']) || \\"\\"));
-    return block1([prop1]);
-  }
-}"
-`;
-
-exports[`various boolean html attributes 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  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>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;

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

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

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

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

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

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

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

@@ -4,14 +4,13 @@ exports[`t-ref can get a dynamic ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const v1 = ctx['id'];
-    let ref1 = singleRefSetter(refs, \`myspan\${v1}\`);
+    let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
     return block1([ref1]);
   }
 }"
@@ -21,14 +20,13 @@ exports[`t-ref can get a dynamic ref on a node, alternate syntax 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const v1 = ctx['id'];
-    let ref1 = singleRefSetter(refs, \`myspan\${v1}\`);
+    let ref1 = (el) => refs[\`myspan\${v1}\`] = el;
     return block1([ref1]);
   }
 }"
@@ -38,13 +36,12 @@ exports[`t-ref can get a ref on a node 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`myspan\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`myspan\`] = el;
     return block1([ref1]);
   }
 }"
@@ -69,13 +66,12 @@ exports[`t-ref ref in a t-call 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`name\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`name\`] = el;
     return block1([ref1]);
   }
 }"
@@ -85,14 +81,13 @@ exports[`t-ref ref in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`name\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`name\`] = el;
     let b2;
     if (ctx['condition']) {
       b2 = block2([ref1]);
@@ -106,13 +101,13 @@ exports[`t-ref refs in a loop 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, singleRefSetter, withKey } = helpers;
+  let { prepareList, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     ctx = Object.create(ctx);
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
@@ -120,7 +115,7 @@ exports[`t-ref refs in a loop 1`] = `
       const key1 = ctx['item'];
       const tKey_1 = ctx['item'];
       const v1 = ctx['item'];
-      let ref1 = singleRefSetter(refs, (v1));
+      let ref1 = (el) => refs[(v1)] = el;
       let txt1 = ctx['item'];
       c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
     }
@@ -134,15 +129,14 @@ exports[`t-ref two refs, one in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   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 = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`name\`);
-    const ref2 = singleRefSetter(refs, \`p\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`name\`] = el;
+    const ref2 = (el) => refs[\`p\`] = el;
     let b2;
     if (ctx['condition']) {
       b2 = block2([ref1]);

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

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

tests/compiler/attributes.test.ts

@@ -12,11 +12,6 @@ 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>`);
@@ -315,6 +310,54 @@ describe("attributes", () => {
     ).toBe('<div class="a b d"></div>');
   });
 
+  test("changing an attribute with t-att-", () => {
+    // render input with initial value
+    const template = `<div t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    expect(fixture.innerHTML).toBe('<div value="zucchini"></div>');
+
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(fixture.innerHTML).toBe('<div value="potato"></div>');
+
+    const bnode3 = renderToBdom(template, { v: "" });
+    patch(bnode1, bnode3);
+    // not sure about this. maybe we want to remove the attribute?
+    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"/>`;
@@ -372,3 +415,134 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
   });
 });
+
+describe("special cases for some specific html attributes/properties", () => {
+  test("input type= checkbox, with t-att-checked", () => {
+    const template = `<input type="checkbox" t-att-checked="flag"/>`;
+    const result = renderToString(template, { flag: true });
+    expect(result).toBe(`<input type="checkbox">`);
+  });
+
+  test("various boolean html attributes", () => {
+    // will cause the template to be snapshotted
+    renderToString(`
+      <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>
+      `);
+  });
+
+  test("input with t-att-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");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // input value was properly reset by owl
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    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 });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const input = fixture.querySelector("input")!;
+    expect(input.indeterminate).toBe(true);
+  });
+
+  test("textarea with t-att-value", () => {
+    // render textarea with initial value
+    const template = `<textarea t-att-value="v"/>`;
+    const bnode1 = renderToBdom(template, { v: "zucchini" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const elm = fixture.querySelector("textarea")!;
+    expect(elm.value).toBe("zucchini");
+
+    // change value manually in textarea, to simulate user textarea
+    elm.value = "tomato";
+    expect(elm.value).toBe("tomato");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // textarea value was properly reset by owl
+    const bnode2 = renderToBdom(template, { v: "potato" });
+    patch(bnode1, bnode2);
+    expect(elm.value).toBe("potato");
+  });
+
+  test("select with t-att-value", () => {
+    const template = `
+      <select t-att-value="value">
+        <option value="potato">Potato</option>
+        <option value="tomato">Tomato</option>
+        <option value="onion">Onion</option>
+      </select>`;
+    const bnode1 = renderToBdom(template, { value: "tomato" });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+    const elm = fixture.querySelector("select")!;
+    expect(elm.value).toBe("tomato");
+
+    elm.value = "potato";
+    expect(elm.value).toBe("potato");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // select value was properly reset by owl
+    const bnode2 = renderToBdom(template, { value: "onion" });
+    patch(bnode1, bnode2);
+    expect(elm.value).toBe("onion");
+  });
+});

tests/compiler/event_handling.test.ts

@@ -284,9 +284,6 @@ describe("t-on", () => {
         expect(this).toBe(owner);
         expect(val).toBe(444);
       },
-      get this() {
-        return owner;
-      },
       value: 444,
     };
 

tests/compiler/properties.test.ts

@@ -1,213 +0,0 @@
-import { mount, patch } from "../../src/runtime/blockdom";
-import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
-
-snapshotEverything();
-test("changing an attribute with t-att-", () => {
-  // render input with initial value
-  const template = `<div t-att-value="v"/>`;
-  const bnode1 = renderToBdom(template, { v: "zucchini" });
-  const fixture = makeTestFixture();
-  mount(bnode1, fixture);
-
-  expect(fixture.innerHTML).toBe('<div value="zucchini"></div>');
-
-  const bnode2 = renderToBdom(template, { v: "potato" });
-  patch(bnode1, bnode2);
-  expect(fixture.innerHTML).toBe('<div value="potato"></div>');
-
-  const bnode3 = renderToBdom(template, { v: "" });
-  patch(bnode1, bnode3);
-  // not sure about this. maybe we want to remove the attribute?
-  expect(fixture.innerHTML).toBe('<div value=""></div>');
-});
-
-test("dynamic input value: falsy values", () => {
-  // 0 doesn't fall back to empty string
-  expect(renderToBdom(`<input t-att-value="0"/>`)).toEqual({ data: [new String("0")] });
-  expect(renderToBdom(`<input t-att-value="false"/>`)).toEqual({ data: [new String("")] });
-  expect(renderToBdom(`<input t-att-value="undefined"/>`)).toEqual({ data: [new String("")] });
-  expect(renderToBdom(`<input t-att-value="''"/>`)).toEqual({ data: [new String("")] });
-});
-
-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("input type= checkbox, with t-att-checked", () => {
-  const template = `<input type="checkbox" t-att-checked="flag"/>`;
-  const result = renderToString(template, { flag: true });
-  expect(result).toBe(`<input type="checkbox">`);
-});
-
-test("various boolean html attributes", () => {
-  // will cause the template to be snapshotted
-  renderToString(`
-      <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>
-      `);
-});
-
-test("input with t-att-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");
-
-  // rerender with a different value, and patch actual dom, to check that
-  // input value was properly reset by owl
-  const bnode2 = renderToBdom(template, { v: "potato" });
-  patch(bnode1, bnode2);
-  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 });
-  const fixture = makeTestFixture();
-  mount(bnode1, fixture);
-  const input = fixture.querySelector("input")!;
-  expect(input.indeterminate).toBe(true);
-});
-
-test("textarea with t-att-value", () => {
-  // render textarea with initial value
-  const template = `<textarea t-att-value="v"/>`;
-  const bnode1 = renderToBdom(template, { v: "zucchini" });
-  const fixture = makeTestFixture();
-  mount(bnode1, fixture);
-  const elm = fixture.querySelector("textarea")!;
-  expect(elm.value).toBe("zucchini");
-
-  // change value manually in textarea, to simulate user textarea
-  elm.value = "tomato";
-  expect(elm.value).toBe("tomato");
-
-  // rerender with a different value, and patch actual dom, to check that
-  // textarea value was properly reset by owl
-  const bnode2 = renderToBdom(template, { v: "potato" });
-  patch(bnode1, bnode2);
-  expect(elm.value).toBe("potato");
-});
-
-test("select with t-att-value", () => {
-  const template = `
-      <select t-att-value="value">
-        <option value="potato">Potato</option>
-        <option value="tomato">Tomato</option>
-        <option value="onion">Onion</option>
-      </select>`;
-  const bnode1 = renderToBdom(template, { value: "tomato" });
-  const fixture = makeTestFixture();
-  mount(bnode1, fixture);
-  const elm = fixture.querySelector("select")!;
-  expect(elm.value).toBe("tomato");
-
-  elm.value = "potato";
-  expect(elm.value).toBe("potato");
-
-  // rerender with a different value, and patch actual dom, to check that
-  // select value was properly reset by owl
-  const bnode2 = renderToBdom(template, { value: "onion" });
-  patch(bnode1, bnode2);
-  expect(elm.value).toBe("onion");
-});
-
-test("readonly and readOnly are both interpreted as the readOnly property", () => {
-  // render input with initial value
-  const staticTemplates = [`<input readonly=""/>`, `<input readOnly=""/>`];
-  for (let template of staticTemplates) {
-    const fixture = makeTestFixture();
-    const bnode1 = renderToBdom(template);
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.readOnly).toBe(true);
-  }
-
-  const dynamicTemplates = [`<input t-att-readonly="val"/>`, `<input t-att-readOnly="val"/>`];
-  for (let template of dynamicTemplates) {
-    const fixture = makeTestFixture();
-    const bnode1 = renderToBdom(template, { val: true });
-    mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.readOnly).toBe(true);
-
-    const bnode2 = renderToBdom(template, { val: false });
-    patch(bnode1, bnode2);
-    expect(input.readOnly).toBe(false);
-  }
-});

tests/compiler/t_call.test.ts

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

tests/compiler/t_ref.test.ts

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

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

@@ -8,7 +8,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const Comp1 = ctx['myComp'];
-    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, this, Comp1));
   }
 }"
 `;

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

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

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

@@ -20,7 +20,7 @@ exports[`basics display a nice error if it cannot find component (in dev mode) 1
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SomeMispelledComponent\`, props1, this);
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, node);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -38,21 +38,6 @@ exports[`basics display a nice error if it cannot find component 1`] = `
 }"
 `;
 
-exports[`basics display a nice error if the components key is missing with subcomponents 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`MissingChild\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    return block1([], [b2]);
-  }
-}"
-`;
-
 exports[`basics no component catching error lead to full app destruction 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -268,7 +253,7 @@ exports[`can catch errors can catch an error in a component render function 1`]
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -323,7 +308,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -367,7 +352,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -447,7 +432,7 @@ exports[`can catch errors can catch an error in the initial call of a component
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -504,7 +489,7 @@ exports[`can catch errors can catch an error in the initial call of a component
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].flag) {
-      b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+      b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     }
     return block1([], [b3]);
   }
@@ -653,7 +638,7 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -708,7 +693,7 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].message;
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -763,7 +748,7 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -820,7 +805,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b5 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -931,7 +916,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['cp'].Comp;
-    return toggler(Comp1, comp1({}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -940,10 +925,9 @@ 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['this'];
-      const v2 = ctx['cp'];
+      const v1 = ctx['cp'];
       const ctx1 = capture(ctx);
-      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);
+      c_block1[i1] = withKey(comp2({onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -1010,19 +994,18 @@ exports[`can catch errors catching in child makes parent render 1`] = `
   
   function slot1(ctx, node, key = \\"\\") {
     const Comp1 = ctx['elem'][1];
-    return toggler(Comp1, comp1({id: ctx['elem'][0]}, (Comp1).name + key + \`__1\`, node, this, Comp1));
+    return toggler(Comp1, comp1({id: ctx['elem'][0]}, key + \`__1\`, node, this, Comp1));
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(ctx['this'].elements));;
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
       const key1 = ctx['elem'][0];
-      const v1 = ctx['this'];
-      const v2 = ctx['elem'];
+      const v1 = ctx['elem'];
       const ctx1 = capture(ctx);
-      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);
+      c_block1[i1] = withKey(comp2({onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, this, null), key1);
     }
     return list(c_block1);
   }
@@ -1085,7 +1068,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b2, b4]);
   }
 }"
@@ -1157,7 +1140,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(ctx['this'].will.crash);
+      b2 = text(this.will.crash);
     } else {
       b3 = text(ctx['state'].error);
     }
@@ -1188,7 +1171,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(ctx['this'].will.crash);
+      b2 = text(this.will.crash);
     } else {
       b3 = text(ctx['state'].error);
     }
@@ -1220,7 +1203,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['this'].will.crash;
+    let txt1 = this.will.crash;
     return block1([txt1]);
   }
 }"
@@ -1234,7 +1217,7 @@ exports[`errors and promises a rendering error will reject the mount promise 1`]
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['this'].will.crash;
+    let txt1 = this.will.crash;
     return block1([txt1]);
   }
 }"
@@ -1279,7 +1262,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(ctx['this'].will.crash);
+      b2 = text(this.will.crash);
     }
     return block1([], [b2]);
   }

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

@@ -4,15 +4,14 @@ exports[`hooks autofocus hook input in a t-if 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   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 = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`input1\`);
-    const ref2 = singleRefSetter(refs, \`input2\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`input1\`] = el;
+    const ref2 = (el) => refs[\`input2\`] = el;
     let b2;
     if (ctx['state'].flag) {
       b2 = block2([ref2]);
@@ -26,14 +25,13 @@ exports[`hooks autofocus hook simple input 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div><input block-ref=\\"0\\"/><input block-ref=\\"1\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`input1\`);
-    const ref2 = singleRefSetter(refs, \`input2\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`input1\`] = el;
+    const ref2 = (el) => refs[\`input2\`] = el;
     return block1([ref1, ref2]);
   }
 }"
@@ -266,13 +264,12 @@ exports[`hooks useEffect hook effect can depend on stuff in dom 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`div\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`div\`] = el;
     let b2;
     if (ctx['state'].value) {
       b2 = block2([ref1]);
@@ -356,13 +353,12 @@ exports[`hooks useRef hook: basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div><button block-ref=\\"0\\"><block-text-1/></button></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`button\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`button\`] = el;
     let txt1 = ctx['value'];
     return block1([ref1, txt1]);
   }
@@ -409,3 +405,69 @@ exports[`hooks useSubEnv supports arbitrary descriptor 2`] = `
   }
 }"
 `;
+
+exports[`useRoots hook return a list of nodes and elems 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`useRoots hook return a list of nodes and elems 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block3 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<p>bla</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\` some text \`);
+    const b3 = block3();
+    const b4 = text(\` coucou \`);
+    const b5 = block5();
+    return multi([b2, b3, b4, b5]);
+  }
+}"
+`;
+
+exports[`useRoots hook useRoots and lifecycle 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`useRoots hook useRoots is up to date 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block2 = createBlock(\`<span>hey</span>\`);
+  let block5 = createBlock(\`<p>paragraph</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      const b4 = text(\` coucou \`);
+      const b5 = block5();
+      b3 = multi([b4, b5]);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;

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

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

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

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

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

@@ -8,7 +8,7 @@ exports[`default props a default prop cannot be defined on a mandatory prop 1`]
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, node);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -24,7 +24,7 @@ exports[`default props can set default boolean values 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -61,7 +61,7 @@ exports[`default props can set default values 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -92,7 +92,7 @@ exports[`default props default values are also set whenever component is updated
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -121,7 +121,7 @@ exports[`props validation can specify that additional props are allowed (array)
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, node);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -148,7 +148,7 @@ exports[`props validation can specify that additional props are allowed (object)
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 'm',otherProp: 'o'};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, node);
     return comp1(props1, key + \`__1\`, node, this, null);
   }
 }"
@@ -177,7 +177,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -207,7 +207,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -237,7 +237,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -254,7 +254,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -284,7 +284,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -314,7 +314,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -331,7 +331,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -348,7 +348,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -378,7 +378,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -408,7 +408,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -438,7 +438,7 @@ exports[`props validation can validate an array with multiple sub element types
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -455,7 +455,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -485,7 +485,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -502,7 +502,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -519,7 +519,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -536,7 +536,7 @@ exports[`props validation can validate an optional props 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -566,7 +566,7 @@ exports[`props validation can validate an optional props 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -596,7 +596,7 @@ exports[`props validation can validate an optional props 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -613,7 +613,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -643,7 +643,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -673,47 +673,13 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
 }"
 `;
 
-exports[`props validation can validate through slots 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Wrapper\`, true, true, false, true);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
-    return comp1(props1, key + \`__1\`, node, this, null);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props2 = {slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})};
-    helpers.validateProps(\`Wrapper\`, props2, this);
-    return comp2(props2, key + \`__2\`, node, this, null);
-  }
-}"
-`;
-
-exports[`props validation can validate through slots 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
 exports[`props validation default values are applied before validating props at update 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -724,7 +690,7 @@ exports[`props validation default values are applied before validating props at
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -755,7 +721,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -772,7 +738,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -789,7 +755,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 1};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -820,7 +786,7 @@ exports[`props validation props are validated whenever component is updated 1`]
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -841,33 +807,6 @@ exports[`props validation props are validated whenever component is updated 2`]
 }"
 `;
 
-exports[`props validation props validation does not cause additional subscription 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props1 = {obj: ctx['obj']};
-    helpers.validateProps(\`Child\`, props1, this);
-    const b2 = comp1(props1, key + \`__1\`, node, this, null);
-    const b3 = text(ctx['obj'].otherValue);
-    return multi([b2, b3]);
-  }
-}"
-`;
-
-exports[`props validation props validation does not cause additional subscription 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].obj.value);
-  }
-}"
-`;
-
 exports[`props validation props: list of strings 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -878,7 +817,7 @@ exports[`props validation props: list of strings 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -895,7 +834,7 @@ exports[`props validation validate simple types 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -912,7 +851,7 @@ exports[`props validation validate simple types 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -942,7 +881,7 @@ exports[`props validation validate simple types 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -959,7 +898,7 @@ exports[`props validation validate simple types 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -976,7 +915,7 @@ exports[`props validation validate simple types 6`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1006,7 +945,7 @@ exports[`props validation validate simple types 8`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1023,7 +962,7 @@ exports[`props validation validate simple types 9`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1040,7 +979,7 @@ exports[`props validation validate simple types 10`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1070,7 +1009,7 @@ exports[`props validation validate simple types 12`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1087,7 +1026,7 @@ exports[`props validation validate simple types 13`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1104,7 +1043,7 @@ exports[`props validation validate simple types 14`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1134,7 +1073,7 @@ exports[`props validation validate simple types 16`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1151,7 +1090,7 @@ exports[`props validation validate simple types 17`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1168,7 +1107,7 @@ exports[`props validation validate simple types 18`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1198,7 +1137,7 @@ exports[`props validation validate simple types 20`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1215,7 +1154,7 @@ exports[`props validation validate simple types 21`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1232,7 +1171,7 @@ exports[`props validation validate simple types 22`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1262,7 +1201,7 @@ exports[`props validation validate simple types 24`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1279,7 +1218,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1296,7 +1235,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1326,7 +1265,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1343,7 +1282,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1360,7 +1299,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1390,7 +1329,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1407,7 +1346,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1424,7 +1363,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1454,7 +1393,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1471,7 +1410,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1488,7 +1427,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1518,7 +1457,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1535,7 +1474,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1552,7 +1491,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1582,7 +1521,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1599,7 +1538,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1616,7 +1555,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1646,7 +1585,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }
@@ -1663,7 +1602,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
-    helpers.validateProps(\`SubComp\`, props1, this);
+    helpers.validateProps(\`SubComp\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     return block1([], [b2]);
   }

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

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

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

@@ -4,13 +4,12 @@ exports[`refs basic use 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   
   let block1 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`div\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`div\`] = el;
     return block1([ref1]);
   }
 }"
@@ -20,13 +19,13 @@ exports[`refs can use 2 refs with same name in a t-if/t-else situation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter, multiRefSetter } = helpers;
+  let { multiRefSetter } = helpers;
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
     let b2,b3;
     if (ctx['state'].value) {
@@ -43,14 +42,13 @@ exports[`refs refs and recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
   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 = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`root\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`root\`] = el;
     let b2;
     let txt1 = ctx['props'].tree.value;
     if (ctx['props'].tree.child) {
@@ -61,41 +59,19 @@ exports[`refs refs and recursive templates 1`] = `
 }"
 `;
 
-exports[`refs refs and t-key 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter } = helpers;
-  
-  let block2 = createBlock(\`<button block-handler-0=\\"click\\"/>\`);
-  let block3 = createBlock(\`<p block-ref=\\"0\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`root\`);
-    const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.renderId++, ctx];
-    const b2 = block2([hdlr1]);
-    const tKey_1 = ctx['state'].renderId;
-    const b3 = toggler(tKey_1, block3([ref1]));
-    return multi([b2, b3]);
-  }
-}"
-`;
-
 exports[`refs refs are properly bound in slots 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, singleRefSetter, markRaw } = helpers;
+  let { capture, markRaw } = helpers;
   const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
   
   let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
   let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`myButton\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`myButton\`] = el;
     let hdlr1 = [ctx['doSomething'], ctx];
     return block2([hdlr1, ref1]);
   }
@@ -103,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.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -128,13 +104,13 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter, multiRefSetter } = helpers;
+  let { multiRefSetter } = helpers;
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   let block3 = createBlock(\`<span block-ref=\\"0\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
+    const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
     const b2 = block2([ref1]);
     const b3 = block3([ref1]);

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

@@ -28,7 +28,7 @@ exports[`slots can define a default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -55,7 +55,7 @@ exports[`slots can define and call slots 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -90,7 +90,7 @@ exports[`slots can define and call slots with bound params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'abc': {__render: slot1, __ctx: ctx1, getValue: bind(ctx, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -130,7 +130,7 @@ exports[`slots can define and call slots with params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2, __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -158,22 +158,22 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter, markRaw } = helpers;
+  let { markRaw } = helpers;
   const comp1 = app.createComponent(\`Child\`, true, false, false, true);
   const comp2 = app.createComponent(\`Child\`, true, true, false, true);
   
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = this.__owl__.refs;
-    const ref1 = singleRefSetter(refs, \`div\`);
+    const refs = ctx.__owl__.refs;
+    const ref1 = (el) => refs[\`div\`] = el;
     const b2 = block2([ref1]);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
     return multi([b2, b3]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -226,7 +226,7 @@ exports[`slots can use component in default-content of t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
   }
 }"
 `;
@@ -266,7 +266,7 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
   }
 }"
 `;
@@ -296,7 +296,7 @@ exports[`slots content is the default slot (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -328,7 +328,7 @@ exports[`slots content is the default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -364,7 +364,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -383,7 +383,7 @@ exports[`slots default content is not rendered if named slot is provided 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -403,7 +403,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -422,7 +422,7 @@ exports[`slots default content is not rendered if slot is provided 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -443,7 +443,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -466,8 +466,8 @@ exports[`slots default slot next to named slot, with default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
-    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2.bind(this));
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2);
     return block1([], [b3, b5]);
   }
 }"
@@ -485,7 +485,7 @@ exports[`slots default slot with params with - in it 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -520,7 +520,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -552,7 +552,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -583,7 +583,7 @@ exports[`slots default slot work with text nodes 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -620,7 +620,7 @@ exports[`slots dynamic slot in multiple locations 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -686,7 +686,7 @@ exports[`slots dynamic t-slot call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -733,7 +733,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -753,7 +753,7 @@ exports[`slots dynamic t-slot call with default 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['toggle'], ctx];
-    const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1);
     return block1([hdlr1], [b3]);
   }
 }"
@@ -771,7 +771,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -866,7 +866,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -952,7 +952,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -992,7 +992,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1032,7 +1032,7 @@ exports[`slots multiple slots containing components 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null);
+    return comp3({slots: markRaw({'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}})}, key + \`__3\`, node, this, null);
   }
 }"
 `;
@@ -1086,7 +1086,7 @@ exports[`slots named slot inside slot 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1096,7 +1096,7 @@ exports[`slots named slot inside slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1137,7 +1137,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1147,7 +1147,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1197,7 +1197,7 @@ exports[`slots named slots can define a default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -1222,7 +1222,7 @@ exports[`slots named slots inside slot, again 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol2': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1232,7 +1232,7 @@ exports[`slots named slots inside slot, again 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1255,8 +1255,8 @@ exports[`slots named slots inside slot, again 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1.bind(this));
-    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2.bind(this));
+    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
+    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
     const b6 = callSlot(ctx, node, key, 'default', false, {});
     return block1([], [b3, b5, b6]);
   }
@@ -1275,7 +1275,7 @@ exports[`slots nested slots in same template 1`] = `
   let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -1283,7 +1283,7 @@ exports[`slots nested slots in same template 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -1345,7 +1345,7 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1362,7 +1362,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1435,7 +1435,7 @@ exports[`slots simple default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1473,7 +1473,7 @@ exports[`slots simple default slot with params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1505,7 +1505,7 @@ exports[`slots simple default slot with params and bound function 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1517,7 +1517,7 @@ exports[`slots simple default slot with params and bound function 2`] = `
   let { callSlot, bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])});
+    return callSlot(ctx, node, key, 'default', false, {fn: bind(ctx, ctx['getValue'])});
   }
 }"
 `;
@@ -1534,7 +1534,7 @@ exports[`slots simple default slot, variation 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1570,7 +1570,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1618,7 +1618,7 @@ exports[`slots simple named and empty slot -- 2 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1.bind(this));
+    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1);
     return block1([], [b3]);
   }
 }"
@@ -1637,7 +1637,7 @@ exports[`slots simple named and empty slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1677,7 +1677,7 @@ exports[`slots simple slot with slot scope 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1713,7 +1713,7 @@ exports[`slots slot and (inline) t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1763,7 +1763,7 @@ exports[`slots slot and t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1811,7 +1811,7 @@ exports[`slots slot and t-esc 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1849,7 +1849,7 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
     let txt1 = ctx['state'].val;
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([hdlr1, txt1], [b3]);
   }
 }"
@@ -1897,7 +1897,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1945,7 +1945,7 @@ exports[`slots slot content has different key from other content -- static slot
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1992,14 +1992,13 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"var\\", 1);
-    const v1 = ctx['this'];
-    let hdlr1 = [()=>v1.inc(), ctx];
+    let hdlr1 = [()=>this.inc(), ctx];
     return block1([hdlr1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2034,7 +2033,7 @@ exports[`slots slot content is bound to caller 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2069,7 +2068,7 @@ exports[`slots slot in multiple locations 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2124,7 +2123,7 @@ exports[`slots slot in t-foreach locations 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2181,7 +2180,7 @@ exports[`slots slot preserves properly parented relationship 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2226,7 +2225,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2287,7 +2286,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2316,7 +2315,7 @@ exports[`slots slots and wrapper components 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2360,14 +2359,13 @@ exports[`slots slots are properly bound to correct component 2`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"var\\", 1);
-    const v1 = ctx['this'];
-    let hdlr1 = [()=>v1.increment(), ctx];
+    let hdlr1 = [()=>this.increment(), ctx];
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
   }
 }"
 `;
@@ -2390,7 +2388,7 @@ exports[`slots slots are rendered with proper context 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -2434,7 +2432,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
       ctx[\`user\`] = v_block2[i1];
       const key1 = ctx['user'].id;
       const ctx1 = capture(ctx);
-      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
+      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b7]), key1);
     }
     const b2 = list(c_block2);
@@ -2483,7 +2481,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
       const key1 = ctx['user'].id;
       setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name);
       const ctx1 = capture(ctx);
-      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
+      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b5]), key1);
     }
     const b2 = list(c_block2);
@@ -2526,7 +2524,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"userdescr\\", 'User '+ctx['state'].user.name);
     const ctx1 = capture(ctx);
-    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2568,7 +2566,7 @@ exports[`slots slots in slots, with vars 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"test\\", ctx['state'].name);
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2588,7 +2586,7 @@ exports[`slots slots in slots, with vars 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2630,7 +2628,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -2685,7 +2683,7 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
         ctx[\`node2\`] = v_block6[i2];
         const key2 = ctx['node2'].key;
         const ctx1 = capture(ctx);
-        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
+        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
       }
       ctx = ctx.__proto__;
       const b6 = list(c_block6);
@@ -2737,7 +2735,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
       const key1 = ctx['n_index'];
       setContextValue(ctx, \\"dummy\\", ctx['n_index']);
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -2777,7 +2775,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2816,7 +2814,7 @@ exports[`slots t-set t-value in a slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2837,36 +2835,6 @@ exports[`slots t-set t-value in a slot 2`] = `
 }"
 `;
 
-exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
-  
-  function slot1(ctx, node, key = \\"\\") {
-    return text(\`some other text\`);
-  }
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots t-set-slot=default has priority over rest of the content 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { callSlot } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
-  }
-}"
-`;
-
 exports[`slots t-slot in recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -2908,7 +2876,7 @@ exports[`slots t-slot in recursive templates 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2943,7 +2911,7 @@ exports[`slots t-slot nested within another slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2960,7 +2928,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -2968,7 +2936,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b4 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -3031,7 +2999,7 @@ exports[`slots t-slot scope context 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -3052,7 +3020,7 @@ exports[`slots t-slot scope context 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -3086,7 +3054,7 @@ exports[`slots t-slot within dynamic t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -3150,7 +3118,7 @@ exports[`slots template can just return a slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"

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

@@ -363,7 +363,7 @@ exports[`style and class handling error in subcomponent with class 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let attr1 = ctx['props'].class;
-    let txt1 = ctx['this'].will.crash;
+    let txt1 = this.will.crash;
     return block1([attr1, txt1]);
   }
 }"

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

@@ -109,8 +109,7 @@ exports[`t-call handlers are properly bound through a dynamic t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['this'];
-    let hdlr1 = [()=>v1.update(), ctx];
+    let hdlr1 = [()=>this.update(), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -169,9 +168,8 @@ exports[`t-call handlers with arguments are properly bound through a t-call 2`]
   let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const v1 = ctx['this'];
-    const v2 = ctx['a'];
-    let hdlr1 = [()=>v1.update(v2), ctx];
+    const v1 = ctx['a'];
+    let hdlr1 = [()=>this.update(v1), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -289,7 +287,7 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
     ctx[isBoundary] = 1
     let b2;
     if (ctx['level']<2) {
-      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(ctx['this']), ctx];
+      let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
       let txt1 = ctx['level'];
       const b3 = block3([hdlr1, txt1]);
       ctx = Object.create(ctx);
@@ -468,10 +466,10 @@ exports[`t-call t-call with t-call-context and subcomponent, in dev mode 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const props1 = {name: ctx['aab']};
-    helpers.validateProps(\`Child\`, props1, this);
+    helpers.validateProps(\`Child\`, props1, node);
     const b2 = comp1(props1, key + \`__1\`, node, this, null);
     const props2 = {name: ctx['lpe']};
-    helpers.validateProps(\`Child\`, props2, this);
+    helpers.validateProps(\`Child\`, props2, node);
     const b3 = comp2(props2, key + \`__2\`, node, this, null);
     return multi([b2, b3]);
   }
@@ -516,134 +514,3 @@ exports[`t-call t-call with t-call-context, simple use 2`] = `
   }
 }"
 `;
-
-exports[`t-call t-call-context: ComponentNode is not looked up in the context 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const callTemplate_1 = app.getTemplate(\`someTemplate\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let ctx1 = {method:function(){}};
-    return callTemplate_1.call(this, ctx1, node, key + \`__1\`);
-  }
-}"
-`;
-
-exports[`t-call t-call-context: ComponentNode is not looked up in the context 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { singleRefSetter, 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 = singleRefSetter(refs, \`myRef2\`);
-    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 = singleRefSetter(refs, \`myRef\`);
-    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']);
-  }
-}"
-`;

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

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

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

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

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

@@ -6,15 +6,15 @@ exports[`t-model directive .lazy modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -25,15 +25,15 @@ exports[`t-model directive .number modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'number';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = toNumber(ev.target.value); }];
     let txt1 = ctx['state'].number;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -44,15 +44,15 @@ exports[`t-model directive .trim modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
     let txt1 = ctx['state'].text;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -63,15 +63,15 @@ exports[`t-model directive basic use, on an input 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -82,15 +82,15 @@ exports[`t-model directive basic use, on an input with bracket expression 1`] =
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -101,15 +101,15 @@ exports[`t-model directive basic use, on another key in component 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['some'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['some'].text;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -120,15 +120,15 @@ exports[`t-model directive can also define t-on directive on same event, part 1
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\" block-handler-2=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-handler-0=\\"input\\" block-attribute-1=\\"value\\" block-handler-2=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onInput'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onInput'], ctx];
-    return block1([prop1, hdlr1, hdlr2]);
+    let attr1 = bExpr1[expr1];
+    let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    return block1([hdlr1, attr1, hdlr2]);
   }
 }"
 `;
@@ -139,25 +139,25 @@ exports[`t-model directive can also define t-on directive on same event, part 2
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-3=\\"checked\\" block-handler-4=\\"click\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-property-6=\\"checked\\" block-handler-7=\\"click\\" block-handler-8=\\"click\\"/></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-handler-0=\\"click\\" block-attribute-1=\\"checked\\" block-handler-2=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-handler-3=\\"click\\" block-attribute-4=\\"checked\\" block-handler-5=\\"click\\"/><input type=\\"radio\\" id=\\"three\\" value=\\"Three\\" block-handler-6=\\"click\\" block-attribute-7=\\"checked\\" block-handler-8=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onClick'], ctx];
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
-    let prop1 = bExpr1[expr1] === 'One';
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onClick'], ctx];
+    let attr1 = bExpr1[expr1] === 'One';
+    let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
+    let hdlr3 = [ctx['onClick'], ctx];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
-    let prop2 = bExpr2[expr2] === 'Two';
-    let hdlr3 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-    let hdlr4 = [ctx['onClick'], ctx];
+    let attr2 = bExpr2[expr2] === 'Two';
+    let hdlr4 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
+    let hdlr5 = [ctx['onClick'], ctx];
     const bExpr3 = ctx['state'];
     const expr3 = 'choice';
-    let prop3 = bExpr3[expr3] === 'Three';
-    let hdlr5 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
-    let hdlr6 = [ctx['onClick'], ctx];
-    return block1([prop1, hdlr1, hdlr2, prop2, hdlr3, hdlr4, prop3, hdlr5, hdlr6]);
+    let attr3 = bExpr3[expr3] === 'Three';
+    let hdlr6 = [(ev) => { bExpr3[expr3] = ev.target.value; }];
+    return block1([hdlr1, attr1, hdlr2, hdlr3, attr2, hdlr4, hdlr5, attr3, hdlr6]);
   }
 }"
 `;
@@ -168,7 +168,7 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { isBoundary, withDefault, setContextValue, toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -176,9 +176,9 @@ exports[`t-model directive following a scope protecting directive (e.g. t-set) 1
     setContextValue(ctx, \\"admiral\\", 'Bruno');
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([prop1, hdlr1]);
+    return block1([attr1, hdlr1]);
   }
 }"
 `;
@@ -190,7 +190,7 @@ exports[`t-model directive in a t-foreach 1`] = `
   let { prepareList, toNumber, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -200,9 +200,9 @@ exports[`t-model directive in a t-foreach 1`] = `
       const key1 = ctx['thing'].id;
       const bExpr1 = ctx['thing'];
       const expr1 = 'f';
-      let prop1 = bExpr1[expr1];
+      let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
-      c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -217,7 +217,7 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
   let { prepareList, toNumber, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -228,9 +228,9 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
       const key1 = ctx['thing_index'];
       const bExpr1 = ctx['state'];
       const expr1 = ctx['thing_index'];
-      let prop1 = bExpr1[expr1];
+      let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -245,7 +245,7 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
   let { prepareList, toNumber, withKey } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
@@ -256,9 +256,9 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
       const key1 = ctx['name_index'];
       const bExpr1 = ctx['state'].values;
       const expr1 = ctx['name'];
-      let prop1 = bExpr1[expr1];
+      let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      c_block2[i1] = withKey(block3([prop1, hdlr1]), key1);
+      c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -272,15 +272,15 @@ exports[`t-model directive on a select 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select><span>Choice: <block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].color;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -291,14 +291,14 @@ exports[`t-model directive on a select, initial state 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
+  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"\\">Please select one</option><option value=\\"red\\">Red</option><option value=\\"blue\\">Blue</option></select></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'color';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([prop1, hdlr1]);
+    return block1([attr1, hdlr1]);
   }
 }"
 `;
@@ -309,15 +309,15 @@ exports[`t-model directive on a sub state key 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'].something;
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something.text;
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -328,19 +328,19 @@ exports[`t-model directive on an input type=radio 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/><span>Choice: <block-text-4/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
-    let prop1 = bExpr1[expr1] === 'One';
+    let attr1 = bExpr1[expr1] === 'One';
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
-    let prop2 = bExpr2[expr2] === 'Two';
+    let attr2 = bExpr2[expr2] === 'Two';
     let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
     let txt1 = ctx['state'].choice;
-    return block1([prop1, hdlr1, prop2, hdlr2, txt1]);
+    return block1([attr1, hdlr1, attr2, hdlr2, txt1]);
   }
 }"
 `;
@@ -351,18 +351,18 @@ exports[`t-model directive on an input type=radio, with initial value 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-property-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-property-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"radio\\" id=\\"one\\" value=\\"One\\" block-attribute-0=\\"checked\\" block-handler-1=\\"click\\"/><input type=\\"radio\\" id=\\"two\\" value=\\"Two\\" block-attribute-2=\\"checked\\" block-handler-3=\\"click\\"/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'choice';
-    let prop1 = bExpr1[expr1] === 'One';
+    let attr1 = bExpr1[expr1] === 'One';
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     const bExpr2 = ctx['state'];
     const expr2 = 'choice';
-    let prop2 = bExpr2[expr2] === 'Two';
+    let attr2 = bExpr2[expr2] === 'Two';
     let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-    return block1([prop1, hdlr1, prop2, hdlr2]);
+    return block1([attr1, hdlr1, attr2, hdlr2]);
   }
 }"
 `;
@@ -373,20 +373,20 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-property-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" block-attribute-0=\\"checked\\" block-handler-1=\\"input\\"/><span><block-child-0/><block-child-1/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     const bExpr1 = ctx['state'];
     const expr1 = 'flag';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
     if (ctx['state'].flag) {
       b2 = text(\`yes\`);
     } else {
       b3 = text(\`no\`);
     }
-    return block1([prop1, hdlr1], [b2, b3]);
+    return block1([attr1, hdlr1], [b2, b3]);
   }
 }"
 `;
@@ -397,34 +397,15 @@ exports[`t-model directive on an textarea 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><textarea block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><textarea block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].text;
-    return block1([prop1, hdlr1, txt1]);
-  }
-}"
-`;
-
-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-property-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 prop1 = bExpr1[expr1];
-    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    let hdlr2 = [ctx['onInput'], ctx];
-    return block1([prop1, hdlr1, hdlr2]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;
@@ -435,14 +416,14 @@ exports[`t-model directive t-model on an input with an undefined value 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<input block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'text';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-    return block1([prop1, hdlr1]);
+    return block1([attr1, hdlr1]);
   }
 }"
 `;
@@ -453,17 +434,17 @@ exports[`t-model directive t-model on select with static options 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><select block-property-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
+  let block1 = createBlock(\`<div><select block-attribute-0=\\"value\\" block-handler-1=\\"change\\"><option value=\\"a\\"><block-text-2/></option><option value=\\"b\\"><block-text-3/></option><option value=\\"c\\"><block-text-4/></option></select></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = 'a';
     let txt2 = 'b';
     let txt3 = 'c';
-    return block1([prop1, hdlr1, txt1, txt2, txt3]);
+    return block1([attr1, hdlr1, txt1, txt2, txt3]);
   }
 }"
 `;
@@ -569,36 +550,6 @@ exports[`t-model directive t-model with dynamic values on select options in fore
 }"
 `;
 
-exports[`t-model directive t-model with radio button group in t-foreach 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, toNumber, withKey } = helpers;
-  
-  let block1 = createBlock(\`<div id=\\"get_data\\" block-handler-0=\\"click\\"><block-child-0/></div>\`);
-  let block3 = createBlock(\`<input type=\\"radio\\" name=\\"radio_group\\" block-property-0=\\"value\\" block-attribute-1=\\"id\\" block-property-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 prop1 = new String((ctx['opt']) === 0 ? 0 : ((ctx['opt']) || \\"\\"));
-      let attr1 = ctx['opt'];
-      const bExpr1 = ctx['state'];
-      const expr1 = 'group';
-      let prop2 = bExpr1[expr1] === ctx['opt'];
-      let hdlr2 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      c_block2[i1] = withKey(block3([prop1, attr1, prop2, 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
 ) {
@@ -606,24 +557,24 @@ exports[`t-model directive two inputs in a div alternating with a t-if 1`] = `
   let { toNumber } = helpers;
   
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  let block2 = createBlock(\`<input class=\\"a\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
-  let block3 = createBlock(\`<input class=\\"b\\" block-property-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block2 = createBlock(\`<input class=\\"a\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
+  let block3 = createBlock(\`<input class=\\"b\\" block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let b2,b3;
     if (ctx['state'].flag) {
       const bExpr1 = ctx['state'];
       const expr1 = 'text1';
-      let prop1 = bExpr1[expr1];
+      let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
-      b2 = block2([prop1, hdlr1]);
+      b2 = block2([attr1, hdlr1]);
     }
     if (!ctx['state'].flag) {
       const bExpr2 = ctx['state'];
       const expr2 = 'text2';
-      let prop2 = bExpr2[expr2];
+      let attr2 = bExpr2[expr2];
       let hdlr2 = [(ev) => { bExpr2[expr2] = ev.target.value; }];
-      b3 = block3([prop2, hdlr2]);
+      b3 = block3([attr2, hdlr2]);
     }
     return block1([], [b2, b3]);
   }
@@ -636,15 +587,15 @@ exports[`t-model directive with expression having a changing key 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-attribute-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'].something;
     const expr1 = ctx['text'].key;
-    let prop1 = bExpr1[expr1];
+    let attr1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let txt1 = ctx['state'].something[ctx['text'].key];
-    return block1([prop1, hdlr1, txt1]);
+    return block1([attr1, hdlr1, txt1]);
   }
 }"
 `;

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

@@ -111,9 +111,8 @@ 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['this'];
-      const v2 = ctx['val'];
-      let hdlr1 = [()=>v1.addVal(v2), ctx];
+      const v1 = ctx['val'];
+      let hdlr1 = [()=>this.addVal(v1), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -198,9 +197,8 @@ 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['this'];
-      const v2 = ctx['name'];
-      const hdlr1 = [()=>v1.log(v2), ctx];
+      const v1 = ctx['name'];
+      const hdlr1 = [()=>this.log(v1), ctx];
       c_block1[i1] = withKey(catcher1(comp1({value: ctx['name']}, key + \`__1__\${key1}\`, node, this, null), [hdlr1]), key1);
     }
     return list(c_block1);
@@ -295,9 +293,8 @@ 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['this'];
-    const v2 = ctx['name'];
-    const hdlr1 = [()=>v1.log(v2), ctx];
+    const v1 = ctx['name'];
+    const hdlr1 = [()=>this.log(v1), ctx];
     return catcher1(comp1({value: ctx['name']}, key + \`__1\`, node, this, null), [hdlr1]);
   }
 }"
@@ -363,7 +360,7 @@ exports[`t-on t-on on slot, with 'prevent' modifier 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -396,8 +393,7 @@ exports[`t-on t-on on t-set-slots 1`] = `
   function slot1(ctx, node, key = \\"\\") {
     const b6 = block6();
     const b7 = block7();
-    const v1 = ctx['this'];
-    const hdlr1 = [()=>v1.state.count++, ctx];
+    const hdlr1 = [()=>this.state.count++, ctx];
     return catcher1(multi([b6, b7]), [hdlr1]);
   }
   
@@ -406,7 +402,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.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b8 = comp1({slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return multi([b2, b3, b4, b8]);
   }
 }"
@@ -438,7 +434,7 @@ exports[`t-on t-on on t-slots 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -454,52 +450,9 @@ exports[`t-on t-on on t-slots 2`] = `
     const b2 = text(\` [\`);
     const b3 = text(ctx['state'].count);
     const b4 = text(\`] \`);
-    const v1 = ctx['this'];
-    const hdlr1 = [()=>v1.state.count++, ctx];
+    const hdlr1 = [()=>this.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);
-  }
-}"
-`;

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

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

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

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

tests/components/concurrency.test.ts

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

tests/components/error_handling.test.ts

@@ -126,23 +126,6 @@ describe("basics", () => {
     );
   });
 
-  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"/>`;

tests/components/hooks.test.ts

@@ -19,6 +19,7 @@ import {
   xml,
   OwlError,
 } from "../../src/index";
+import { useRoots } from "../../src/runtime/hooks";
 import {
   elem,
   logStep,
@@ -518,7 +519,7 @@ describe("hooks", () => {
     });
 
     test("dependencies prevent effects from rerunning when unchanged", async () => {
-      let steps = [];
+      let steps: string[] = [];
       class MyComponent extends Component {
         state = useState({
           a: 0,
@@ -673,3 +674,110 @@ describe("hooks", () => {
     });
   });
 });
+
+describe("useRoots hook", () => {
+  test("return a list of nodes and elems", async () => {
+    class MyComponent extends Component {
+      static template = xml`<span>hey</span>`;
+      roots: any;
+
+      setup() {
+        this.roots = useRoots();
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+
+    expect(comp.roots.node).toBeInstanceOf(HTMLSpanElement);
+    expect(comp.roots.elem).toBeInstanceOf(HTMLSpanElement);
+    expect([...comp.roots.nodes].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+    expect([...comp.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+  });
+
+  test("return a list of nodes and elems", async () => {
+    class MyComponent extends Component {
+      static template = xml`
+        some text
+        <span>hey</span>
+        coucou
+        <p>bla</p>`;
+      roots: any;
+
+      setup() {
+        this.roots = useRoots();
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+
+    expect(comp.roots.node).toBeInstanceOf(Text);
+    expect(comp.roots.elem).toBeInstanceOf(HTMLSpanElement);
+
+    expect([...comp.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN", "P"]);
+    expect([...comp.roots.nodes].map((n: any) => n.nodeType)).toEqual([3, 1, 3, 1]);
+  });
+
+  test("useRoots and lifecycle", async () => {
+    expect.assertions(13);
+    class MyComponent extends Component {
+      static template = xml`<span>hey</span>`;
+      roots: any;
+
+      setup() {
+        this.roots = useRoots();
+        expect(this.roots.elem).toBe(null);
+        expect(this.roots.node).toBe(null);
+        expect([...this.roots.nodes]).toEqual([]);
+        expect([...this.roots.elems]).toEqual([]);
+        onWillStart(() => {
+          expect(this.roots.elem).toBe(null);
+          expect(this.roots.node).toBe(null);
+          expect([...this.roots.nodes]).toEqual([]);
+          expect([...this.roots.elems]).toEqual([]);
+        });
+        onMounted(() => {
+          expect(this.roots.elem).toBeInstanceOf(HTMLSpanElement);
+          expect(this.roots.node).toBeInstanceOf(HTMLSpanElement);
+          expect([...this.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+          expect([...this.roots.nodes].map((n: any) => n.nodeType)).toEqual([1]);
+        });
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+    comp.__owl__.app.destroy();
+  });
+
+  test("useRoots is up to date", async () => {
+    class MyComponent extends Component {
+      static template = xml`
+        <t t-if="state.flag">
+          <span>hey</span>
+        </t>
+        <t t-else="">
+          coucou
+          <p>paragraph</p>
+        </t>`;
+      roots: any;
+      state: any;
+
+      setup() {
+        this.roots = useRoots();
+        this.state = useState({ flag: true });
+        onMounted(() => {
+          expect(this.roots.elem).toBeInstanceOf(HTMLSpanElement);
+          expect(this.roots.node).toBeInstanceOf(HTMLSpanElement);
+          expect([...this.roots.elems].map((n: any) => n.tagName)).toEqual(["SPAN"]);
+          expect([...this.roots.nodes].map((n: any) => n.nodeType)).toEqual([1]);
+        });
+      }
+    }
+
+    const comp = await mount(MyComponent, fixture);
+    comp.state.flag = false;
+    await nextTick();
+    expect(comp.roots.node.nodeType).toBe(3); // text node
+    expect(comp.roots.node.textContent).toBe(" coucou "); // text node
+    expect(comp.roots.elem).toBeInstanceOf(HTMLParagraphElement);
+  });
+});

tests/components/props_validation.test.ts

@@ -1,5 +1,5 @@
 import { makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
-import { Component, onError, xml, mount, OwlError, useState } from "../../src";
+import { Component, onError, xml, mount, OwlError } from "../../src";
 import { App, DEV_MSG } from "../../src/runtime/app";
 import { validateProps } from "../../src/runtime/template_helpers";
 import { Schema } from "../../src/runtime/validation";
@@ -682,29 +682,6 @@ describe("props validation", () => {
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
   });
 
-  test("props validation does not cause additional subscription", async () => {
-    let obj = {
-      value: 1,
-      otherValue: 2,
-    };
-    class Child extends Component {
-      static props = {
-        obj: { type: Object, shape: { value: Number, otherValue: Number } },
-      };
-      static template = xml`<t t-esc="props.obj.value"/>`;
-    }
-    class Parent extends Component {
-      static template = xml`<Child obj="obj"/><t t-esc="obj.otherValue"/>`;
-      static components = { Child };
-
-      obj = useState(obj);
-    }
-    const app = new App(Parent, { test: true });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("12");
-    expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
-  });
-
   test("props are validated whenever component is updated", async () => {
     let error: Error;
     class SubComp extends Component {
@@ -803,32 +780,6 @@ describe("props validation", () => {
     // we just check that it doesn't throw
     await expect(mount(Parent, fixture, { dev: true })).resolves.toEqual(expect.anything());
   });
-
-  test("can validate through slots", async () => {
-    class Child extends Component {
-      static props = ["message"];
-      static template = xml`<div>hey</div>`;
-    }
-
-    class Wrapper extends Component {
-      static template = xml`<t t-slot="default"/>`;
-    }
-
-    class Parent extends Component {
-      static components = { Child, Wrapper };
-      static template = xml`<Wrapper><Child /></Wrapper>`;
-    }
-
-    const app = new App(Parent, { test: true });
-    let error: OwlError | undefined;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
-      "Invalid props for component 'Child': 'message' is missing"
-    );
-    await mountProm;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe("Invalid props for component 'Child': 'message' is missing");
-  });
 });
 
 //------------------------------------------------------------------------------

tests/components/reactivity.test.ts

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

tests/components/refs.test.ts

@@ -1,14 +1,6 @@
-import {
-  App,
-  Component,
-  mount,
-  onMounted,
-  onPatched,
-  useRef,
-  useState,
-  xml,
-} from "../../src/index";
+import { App, Component, mount, onMounted, useRef, useState } from "../../src/index";
 import { logStep, makeTestFixture, nextAppError, nextTick, snapshotEverything } from "../helpers";
+import { xml } from "../../src/index";
 
 snapshotEverything();
 let fixture: HTMLElement;
@@ -136,33 +128,4 @@ describe("refs", () => {
     expect(fixture.innerHTML).toBe("<p>a<p>b</p></p>");
     expect(["<p>b</p>", "<p>a<p>b</p></p>"]).toBeLogged();
   });
-
-  test("refs and t-key", async () => {
-    let el;
-    class Test extends Component {
-      static components = {};
-      static template = xml`
-        <button t-on-click="() => state.renderId++" />
-        <p t-ref="root" t-key="state.renderId"/>`;
-      root = useRef("root");
-      state = useState({ renderId: 1 });
-
-      setup() {
-        onMounted(() => {
-          el = this.root.el;
-        });
-        onPatched(() => {
-          el = this.root.el;
-        });
-      }
-    }
-    await mount(Test, fixture);
-
-    expect(el).toBe(fixture.querySelector("p"));
-    const _el = el;
-    fixture.querySelector("button")!.click();
-    await nextTick();
-    expect(el).not.toBe(_el);
-    expect(el).toBe(fixture.querySelector("p"));
-  });
 });

tests/components/slots.test.ts

@@ -45,23 +45,6 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("some text");
   });
 
-  test("t-set-slot=default has priority over rest of the content", async () => {
-    class Child extends Component {
-      static template = xml`<t t-slot="default"/>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`<Child>
-        some text
-        <t t-set-slot="default">some other text</t>
-      </Child>`;
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-
-    expect(fixture.innerHTML).toBe("some other text");
-  });
-
   test("simple slot with slot scope", async () => {
     let child: any;
     class Child extends Component {

tests/components/t_call.test.ts

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

tests/components/t_foreach.test.ts

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

tests/components/t_model.test.ts

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

tests/components/t_on.test.ts

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

tests/components/t_out.test.ts

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

tests/helpers.ts

@@ -96,7 +96,7 @@ export function renderToBdom(template: string, context: any = {}, node?: any): B
     createComponent() {},
     createDynamicComponent() {},
   };
-  return fn(app as any, blockDom, helpers).call(context, context, node);
+  return fn(app as any, blockDom, helpers)(context, node);
 }
 
 export function renderToString(template: string, context: any = {}, node?: any): string {

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

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

tests/misc/portal.test.ts

@@ -276,7 +276,7 @@ describe("Portal", () => {
 
     expect(error!).toBeDefined();
     expect(error!.message).toBe("invalid portal target");
-    expect(fixture.innerHTML).toBe(``);
+    expect(fixture.innerHTML).toBe(`<div></div>`);
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
@@ -874,48 +874,6 @@ describe("Portal", () => {
     await nextTick();
     expect(fixture.innerHTML).toBe('<div id="outside"></div><div></div>');
   });
-
-  test("Child and Portal", async () => {
-    class Child extends Component {
-      static template = xml`
-        <span>child</span>
-        <t t-portal="'.portal'"><span>portal</span></t>`;
-    }
-    class Parent extends Component {
-      static template = xml`
-        <t>
-          <Child/>
-          <div class="portal"></div>
-        </t>`;
-
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      '<span>child</span><div class="portal"><span>portal</span></div>'
-    );
-  });
-
-  test("portal and Child", async () => {
-    class Child extends Component {
-      static template = xml`
-        <span>child</span>
-        <t t-portal="'.portal'"><span>portal</span></t>`;
-    }
-    class Parent extends Component {
-      static template = xml`
-        <t>
-          <div class="portal"></div>
-          <Child/>
-        </t>`;
-
-      static components = { Child };
-    }
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe(
-      '<div class="portal"><span>portal</span></div><span>child</span>'
-    );
-  });
 });
 
 describe("Portal: UI/UX", () => {

tests/reactivity.test.ts

@@ -9,7 +9,7 @@ import {
   markRaw,
   toRaw,
 } from "../src";
-import { reactive, getSubscriptions } from "../src/runtime/reactivity";
+import { reactive, Reactive } from "../src/runtime/reactivity";
 import { batched } from "../src/runtime/utils";
 import {
   makeDeferred,
@@ -1020,32 +1020,6 @@ describe("Reactivity", () => {
     expect(n3).toBe(2);
   });
 
-  test("reactive inside other: reading the inner reactive from outer doesn't affect the inner's subscriptions", async () => {
-    const getObservedKeys = (obj: any) => getSubscriptions(obj).flatMap(({ keys }) => keys);
-    let n1 = 0;
-    let n2 = 0;
-    const innerCb = () => n1++;
-    const outerCb = () => n2++;
-    const inner = createReactive({ a: 1 }, innerCb);
-    const outer = createReactive({ b: inner }, outerCb);
-    expect(n1).toBe(0);
-    expect(n2).toBe(0);
-    expect(getObservedKeys(innerCb)).toEqual([]);
-    expect(getObservedKeys(outerCb)).toEqual([]);
-
-    outer.b.a;
-    expect(getObservedKeys(innerCb)).toEqual([]);
-    expect(getObservedKeys(outerCb)).toEqual(["b", "a"]);
-    expect(n1).toBe(0);
-    expect(n2).toBe(0);
-
-    outer.b.a = 2;
-    expect(getObservedKeys(innerCb)).toEqual([]);
-    expect(getObservedKeys(outerCb)).toEqual([]);
-    expect(n1).toBe(0);
-    expect(n2).toBe(1);
-  });
-
   // test("notification is not done after unregistration", async () => {
   //   let n = 0;
   //   const observer = () => n++;
@@ -1168,46 +1142,6 @@ describe("Reactivity", () => {
     expect(() => state.a).not.toThrow();
     expect(state.a).toBe(obj.a);
   });
-
-  test("writing on object with reactive in prototype chain doesn't notify", async () => {
-    let n = 0;
-    const state = createReactive({ val: 0 }, () => n++);
-    const nonReactive = Object.create(state);
-    nonReactive.val++;
-    expect(n).toBe(0);
-    expect(toRaw(state)).toEqual({ val: 0 });
-    expect(toRaw(nonReactive)).toEqual({ val: 1 });
-    state.val++;
-    expect(n).toBe(1);
-    expect(toRaw(state)).toEqual({ val: 1 });
-    expect(toRaw(nonReactive)).toEqual({ val: 1 });
-  });
-
-  test("creating key on object with reactive in prototype chain doesn't notify", async () => {
-    let n = 0;
-    const parent = createReactive({}, () => n++);
-    const child = Object.create(parent);
-    Object.keys(parent); // Subscribe to key changes
-    child.val = 0;
-    expect(n).toBe(0);
-  });
-
-  test("reactive of object with reactive in prototype chain is not the object from the prototype chain", async () => {
-    const cb = () => {};
-    const parent = createReactive({ val: 0 }, cb);
-    const child = createReactive(Object.create(parent), cb);
-    expect(child).not.toBe(parent);
-  });
-
-  test("can create reactive of object with non-reactive in prototype chain", async () => {
-    let n = 0;
-    const parent = markRaw({ val: 0 });
-    const child = createReactive(Object.create(parent), () => n++);
-    child.val++;
-    expect(n).toBe(1);
-    expect(parent).toEqual({ val: 0 });
-    expect(child).toEqual({ val: 1 });
-  });
 });
 
 describe("Collections", () => {
@@ -1765,12 +1699,12 @@ describe("toRaw", () => {
     const obj = { value: 1 };
     const reactiveObj = reactive(obj);
     expect(reactiveObj).not.toBe(obj);
-    expect(toRaw(reactiveObj)).toBe(obj);
+    expect(toRaw(reactiveObj as Reactive<typeof obj>)).toBe(obj);
   });
 
   test("giving a non reactive to toRaw return the object itself", () => {
     const obj = { value: 1 };
-    expect(toRaw(obj)).toBe(obj);
+    expect(toRaw(obj as Reactive<typeof obj>)).toBe(obj);
   });
 });
 

tools/compile_xml.js

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

tools/release.js

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