[IMP] slots: make defaultContent of slot available to slot as zero

In some cases, it is useful for a slot to be able to keep the default
content of the slot it is supposed to replace and simply add extra
content instead of simply replacing it entirely. This commit makes the
default content of a slot available in the context as `zero` similar to
how t-call can access the content that was inside the t-call.

doc/learning/tutorial_todoapp.md

@@ -502,6 +502,10 @@ deleteTask(task) {
 Notice that the `onDelete` prop is defined with a `.bind` suffix: this is a special
 suffix that makes sure the function callback is bound to the component.
 
+Notice also that we have two functions named `deleteTask`. The one in the Task
+component just delegates the work to the Root component that owns the task list
+via the `onDelete` property.
+
 ## 10. Using a store
 
 Looking at the code, it is apparent that all the code handling tasks is scattered

doc/reference/reactivity.md

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

package.json

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

src/compiler/code_generator.ts

@@ -191,7 +191,7 @@ class CodeTarget {
     let result: string[] = [];
     result.push(`function ${this.name}(ctx, node, key = "") {`);
     if (this.hasRef) {
-      result.push(`  const refs = ctx.__owl__.refs;`);
+      result.push(`  const refs = this.__owl__.refs;`);
       for (let name in this.refInfo) {
         const [id, expr] = this.refInfo[name];
         result.push(`  const ${id} = ${expr};`);
@@ -294,7 +294,7 @@ export class CodeGenerator {
       for (let block of this.blocks) {
         if (block.dom) {
           let xmlString = block.asXmlString();
-          xmlString = xmlString.replace(/`/g, "\\`");
+          xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
           if (block.dynamicTagName) {
             xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
             xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -606,39 +606,6 @@ 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) {
@@ -685,6 +652,39 @@ export class CodeGenerator {
       attrs[`block-handler-${idx}`] = eventType;
     }
 
+    // event handlers
+    for (let ev in ast.on) {
+      const name = this.generateHandlerCode(ev, ast.on[ev]);
+      const idx = block!.insertData(name, "hdlr");
+      attrs[`block-handler-${idx}`] = ev;
+    }
+
+    // t-ref
+    if (ast.ref) {
+      this.target.hasRef = true;
+      const isDynamic = INTERP_REGEXP.test(ast.ref);
+      if (isDynamic) {
+        const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+        const idx = block!.insertData(`(el) => refs[${str}] = el`, "ref");
+        attrs["block-ref"] = String(idx);
+      } else {
+        let name = ast.ref;
+        if (name in this.target.refInfo) {
+          // ref has already been defined
+          this.helpers.add("multiRefSetter");
+          const info = this.target.refInfo[name];
+          const index = block!.data.push(info[0]) - 1;
+          attrs["block-ref"] = String(index);
+          info[1] = `multiRefSetter(refs, \`${name}\`)`;
+        } else {
+          let id = generateId("ref");
+          this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
+          const index = block!.data.push(id) - 1;
+          attrs["block-ref"] = String(index);
+        }
+      }
+    }
+
     const dom = xmlDoc.createElement(ast.tag);
     for (const [attr, val] of Object.entries(attrs)) {
       if (!(attr === "class" && val === "")) {
@@ -877,9 +877,9 @@ export class CodeGenerator {
       // Throw error on duplicate keys in dev mode
       this.helpers.add("OwlError");
       this.addLine(
-        `if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
+        `if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`
       );
-      this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
+      this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
     }
     let id: string;
     if (ast.memo) {
@@ -1104,7 +1104,7 @@ export class CodeGenerator {
       if (suffix === "bind") {
         this.helpers.add("bind");
         name = _name;
-        value = `bind(ctx, ${value || undefined})`;
+        value = `bind(this, ${value || undefined})`;
       } else {
         throw new OwlError("Invalid prop suffix");
       }
@@ -1148,7 +1148,7 @@ export class CodeGenerator {
         const params = [];
         if (slotAst.content) {
           const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+          params.push(`__render: ${name}.bind(this), __ctx: ${ctxStr}`);
         }
         const scope = ast.slots[slotName].scope;
         if (scope) {
@@ -1275,7 +1275,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})`;
+      blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name}.bind(this))`;
     } else {
       if (dynamic) {
         let name = generateId("slot");
@@ -1325,7 +1325,7 @@ export class CodeGenerator {
     });
 
     const target = compileExpr(ast.target);
-    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
     if (block) {
       this.insertAnchor(block);
     }

src/compiler/parser.ts

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

src/runtime/app.ts

@@ -151,7 +151,13 @@ export class App<
       } else {
         // new component
         if (isStatic) {
-          C = parent.constructor.components[name as any];
+          const components = parent.constructor.components;
+          if (!components) {
+            throw new OwlError(
+              `Cannot find the definition of component "${name}", missing static components key in parent`
+            );
+          }
+          C = components[name as any];
           if (!C) {
             throw new OwlError(`Cannot find the definition of component "${name}"`);
           } else if (!(C.prototype instanceof Component)) {

src/runtime/blockdom/block_compiler.ts

@@ -517,9 +517,13 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBefore(other: Block | null, afterNode: Node | null) {
-      const target = other ? other.el! : afterNode;
-      nodeInsertBefore.call(this.parentEl, this.el!, target);
+    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+      this.parentEl = parent;
+      nodeInsertBefore.call(parent, this.el!, node);
+    }
+
+    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
+      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
     }
 
     toString() {

src/runtime/blockdom/event_catcher.ts

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

src/runtime/blockdom/html.ts

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

src/runtime/blockdom/index.ts

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

src/runtime/blockdom/list.ts

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

src/runtime/blockdom/multi.ts

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

src/runtime/blockdom/text.ts

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

src/runtime/blockdom/toggler.ts

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

src/runtime/component_node.ts

@@ -3,14 +3,7 @@ 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,
-  NonReactive,
-  Reactive,
-  reactive,
-  TARGET,
-} from "./reactivity";
+import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
 import { STATUS } from "./status";
 import { batched, Callback } from "./utils";
 
@@ -52,7 +45,7 @@ const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
  *  relevant changes
  * @see reactive
  */
-export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
+export function useState<T extends object>(state: T): T {
   const node = getCurrent();
   let render = batchedRenderFunctions.get(node)!;
   if (!render) {
@@ -116,7 +109,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.childEnv = env;
     for (const key in props) {
       const prop = props[key];
-      if (prop && typeof prop === "object" && prop[TARGET]) {
+      if (prop && typeof prop === "object" && targets.has(prop)) {
         props[key] = useState(prop);
       }
     }
@@ -240,7 +233,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     currentNode = this;
     for (const key in props) {
       const prop = props[key];
-      if (prop && typeof prop === "object" && prop[TARGET]) {
+      if (prop && typeof prop === "object" && targets.has(prop)) {
         props[key] = useState(prop);
       }
     }
@@ -306,8 +299,12 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.fiber = null;
   }
 
-  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
-    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void {
+    this.bdom!.moveBeforeDOMNode(node, parent);
+  }
+
+  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
+    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
   }
 
   patch() {

src/runtime/index.ts

@@ -12,7 +12,6 @@ import {
   comment,
 } from "./blockdom";
 import { mainEventHandler } from "./event_handling";
-export type { Reactive } from "./reactivity";
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;

src/runtime/portal.ts

@@ -75,7 +75,7 @@ export class Portal extends Component {
       if (!portal.target) {
         const target: HTMLElement = document.querySelector(this.props.target);
         if (target) {
-          portal.content!.moveBefore(target, null);
+          portal.content!.moveBeforeDOMNode(target.firstChild, target);
         } else {
           throw new OwlError("invalid portal target");
         }

src/runtime/reactivity.ts

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

src/runtime/template_helpers.ts

@@ -29,17 +29,24 @@ function callSlot(
   const slots = ctx.props.slots || {};
   const { __render, __ctx, __scope } = slots[name] || {};
   const slotScope = ObjectCreate(__ctx || {});
+  if (defaultContent) {
+    Object.defineProperty(slotScope, helpers.zero, {
+      get() {
+        return defaultContent(ctx, parent, key);
+      },
+    });
+  }
   if (__scope) {
     slotScope[__scope] = extra;
   }
-  const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+  const slotBDom = __render ? __render(slotScope, parent, key) : null;
   if (defaultContent) {
     let child1: BDom | undefined = undefined;
     let child2: BDom | undefined = undefined;
     if (slotBDom) {
       child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
     } else {
-      child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+      child2 = defaultContent(ctx, parent, key);
     }
     return multi([child1, child2]);
   }
@@ -47,8 +54,7 @@ function callSlot(
 }
 
 function capture(ctx: any): any {
-  const component = ctx.__owl__.component;
-  const result = ObjectCreate(component);
+  const result = ObjectCreate(ctx);
   for (let k in ctx) {
     result[k] = ctx[k];
   }
@@ -171,8 +177,7 @@ let boundFunctions = new WeakMap();
 const WeakMapGet = WeakMap.prototype.get;
 const WeakMapSet = WeakMap.prototype.set;
 
-function bind(ctx: any, fn: Function): Function {
-  let component = ctx.__owl__.component;
+function bind(component: any, fn: Function): Function {
   let boundFnMap = WeakMapGet.call(boundFunctions, component);
   if (!boundFnMap) {
     boundFnMap = new WeakMap();

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

@@ -430,6 +430,19 @@ exports[`attributes static attributes on void elements 1`] = `
 }"
 `;
 
+exports[`attributes static attributes with backslash or backtick 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div foo=\\"\\\\\\\\a\\" bar=\\"\\\\\\\\n\\" baz=\\"\\\\\`\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`attributes static attributes with backticks 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -217,7 +217,7 @@ exports[`misc other complex template 1`] = `
   let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const refs = ctx.__owl__.refs;
+    const refs = this.__owl__.refs;
     const ref1 = (el) => refs[\`search_input\`] = el;
     const ref2 = (el) => refs[\`settings_menu\`] = el;
     let b2,b4,b14,b17,b22,b23,b24,b25;

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

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

tests/compiler/attributes.test.ts

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

tests/compiler/t_ref.test.ts

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

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

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

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

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

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

@@ -283,7 +283,7 @@ exports[`bound functions is referentially equal after update 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({val: ctx['state'].val,fn: bind(ctx, ctx['someFunction'])}, key + \`__1\`, node, this, null);
+    return comp1({val: ctx['state'].val,fn: bind(this, ctx['someFunction'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -307,7 +307,7 @@ exports[`can bind function prop with bind suffix 1`] = `
   const comp1 = app.createComponent(\`Child\`, true, false, false, false);
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({doSomething: bind(ctx, ctx['doSomething'])}, key + \`__1\`, node, this, null);
+    return comp1({doSomething: bind(this, ctx['doSomething'])}, key + \`__1\`, node, this, null);
   }
 }"
 `;

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

@@ -695,7 +695,7 @@ exports[`props validation can validate through slots 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const props2 = {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})};
+    const props2 = {slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})};
     helpers.validateProps(\`Wrapper\`, props2, this);
     return comp2(props2, key + \`__2\`, node, this, null);
   }

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

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

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);
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
     return block1([], [b3]);
   }
 }"
@@ -55,7 +55,7 @@ exports[`slots can define and call slots 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}, 'footer': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}, 'footer': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -90,7 +90,7 @@ exports[`slots can define and call slots with bound params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'abc': {__render: slot1, __ctx: ctx1, getValue: bind(ctx, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'abc': {__render: slot1.bind(this), __ctx: ctx1, getValue: bind(this, ctx['getValue'])}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -130,7 +130,7 @@ exports[`slots can define and call slots with params 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b4 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2, __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
+    const b4 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1, param: ctx['var']}, 'footer': {__render: slot2.bind(this), __ctx: ctx1, param: '5'}})}, key + \`__1\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -165,7 +165,7 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
   let block2 = createBlock(\`<div block-ref=\\"0\\"/>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    const refs = ctx.__owl__.refs;
+    const refs = this.__owl__.refs;
     const ref1 = (el) => refs[\`div\`] = el;
     const b2 = block2([ref1]);
     const b3 = comp1({}, key + \`__1\`, node, this, null);
@@ -173,7 +173,7 @@ exports[`slots can render node with t-ref and Component in same slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -226,7 +226,7 @@ exports[`slots can use component in default-content of t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
   }
 }"
 `;
@@ -266,7 +266,7 @@ exports[`slots can use t-call in default-content of t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
   }
 }"
 `;
@@ -296,7 +296,7 @@ exports[`slots content is the default slot (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -328,7 +328,7 @@ exports[`slots content is the default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -349,6 +349,42 @@ exports[`slots content is the default slot 2`] = `
 }"
 `;
 
+exports[`slots default content is available as 0 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { zero, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Dialog\`, true, true, false, true);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    const b2 = text(\`Before - \`);
+    const b3 = ctx[zero];
+    const b4 = text(\` - After\`);
+    return multi([b2, b3, b4]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`slots default content is available as 0 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  function defaultContent1(ctx, node, key = \\"\\") {
+    return text(\`default content\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+  }
+}"
+`;
+
 exports[`slots default content is not rendered if named slot is provided 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -364,7 +400,7 @@ exports[`slots default content is not rendered if named slot is provided 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'header': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'header': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -383,7 +419,7 @@ exports[`slots default content is not rendered if named slot is provided 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
     return block1([], [b3]);
   }
 }"
@@ -403,7 +439,7 @@ exports[`slots default content is not rendered if slot is provided 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -422,7 +458,7 @@ exports[`slots default content is not rendered if slot is provided 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
     return block1([], [b3]);
   }
 }"
@@ -443,7 +479,7 @@ exports[`slots default slot next to named slot, with default content 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -466,8 +502,8 @@ exports[`slots default slot next to named slot, with default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
-    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2);
+    const b3 = callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
+    const b5 = callSlot(ctx, node, key, 'footer', false, {}, defaultContent2.bind(this));
     return block1([], [b3, b5]);
   }
 }"
@@ -485,7 +521,7 @@ exports[`slots default slot with params with - in it 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -520,7 +556,7 @@ exports[`slots default slot with slot scope: shorthand syntax 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -552,7 +588,7 @@ exports[`slots default slot work with text nodes (variation) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -583,7 +619,7 @@ exports[`slots default slot work with text nodes 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -620,7 +656,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, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({location: ctx['state'].location,slots: markRaw({'coffee': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -686,7 +722,7 @@ exports[`slots dynamic t-slot call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -733,7 +769,7 @@ exports[`slots dynamic t-slot call with default 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1, __ctx: ctx1}, 'slot2': {__render: slot2, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b6 = comp1({slots: markRaw({'slot1': {__render: slot1.bind(this), __ctx: ctx1}, 'slot2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b6]);
   }
 }"
@@ -753,7 +789,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);
+    const b3 = callSlot(ctx, node, key + \`__1\`, (ctx['current'].slot), true, {}, defaultContent1.bind(this));
     return block1([hdlr1], [b3]);
   }
 }"
@@ -771,7 +807,7 @@ exports[`slots fun: two calls to the same slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -866,7 +902,7 @@ exports[`slots mix of slots, t-call, t-call with body, and giving own props chil
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -952,7 +988,7 @@ exports[`slots multiple roots are allowed in a default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -992,7 +1028,7 @@ exports[`slots multiple roots are allowed in a named slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b5 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1032,7 +1068,7 @@ exports[`slots multiple slots containing components 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp3({slots: markRaw({'s1': {__render: slot1, __ctx: ctx1}, 's2': {__render: slot2, __ctx: ctx1}})}, key + \`__3\`, node, this, null);
+    return comp3({slots: markRaw({'s1': {__render: slot1.bind(this), __ctx: ctx1}, 's2': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__3\`, node, this, null);
   }
 }"
 `;
@@ -1086,7 +1122,7 @@ exports[`slots named slot inside slot 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1096,7 +1132,7 @@ exports[`slots named slot inside slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1137,7 +1173,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1147,7 +1183,7 @@ exports[`slots named slot inside slot, part 3 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1197,7 +1233,7 @@ exports[`slots named slots can define a default content 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1);
+    const b3 = callSlot(ctx, node, key, 'header', false, {}, defaultContent1.bind(this));
     return block1([], [b3]);
   }
 }"
@@ -1222,7 +1258,7 @@ exports[`slots named slots inside slot, again 1`] = `
   
   function slot2(ctx, node, key = \\"\\") {
     const ctx2 = capture(ctx);
-    return comp1({slots: markRaw({'brol2': {__render: slot3, __ctx: ctx2}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'brol2': {__render: slot3.bind(this), __ctx: ctx2}})}, key + \`__1\`, node, this, null);
   }
   
   function slot3(ctx, node, key = \\"\\") {
@@ -1232,7 +1268,7 @@ exports[`slots named slots inside slot, again 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1, __ctx: ctx1}, 'default': {__render: slot2, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b5 = comp2({slots: markRaw({'brol1': {__render: slot1.bind(this), __ctx: ctx1}, 'default': {__render: slot2.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b5]);
   }
 }"
@@ -1255,8 +1291,8 @@ exports[`slots named slots inside slot, again 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1);
-    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2);
+    const b3 = callSlot(ctx, node, key, 'brol1', false, {}, defaultContent1.bind(this));
+    const b5 = callSlot(ctx, node, key, 'brol2', false, {}, defaultContent2.bind(this));
     const b6 = callSlot(ctx, node, key, 'default', false, {});
     return block1([], [b3, b5, b6]);
   }
@@ -1275,7 +1311,7 @@ exports[`slots nested slots in same template 1`] = `
   let block1 = createBlock(\`<span id=\\"parent\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -1283,7 +1319,7 @@ exports[`slots nested slots in same template 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp3({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, this, null);
+    const b4 = comp3({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__3\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -1345,7 +1381,7 @@ exports[`slots nested slots: evaluation context and parented relationship 1`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1362,7 +1398,7 @@ exports[`slots nested slots: evaluation context and parented relationship 2`] =
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1435,7 +1471,7 @@ exports[`slots simple default slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1473,7 +1509,7 @@ exports[`slots simple default slot with params 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1505,7 +1541,7 @@ exports[`slots simple default slot with params and bound function 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1517,7 +1553,7 @@ exports[`slots simple default slot with params and bound function 2`] = `
   let { callSlot, bind } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {fn: bind(ctx, ctx['getValue'])});
+    return callSlot(ctx, node, key, 'default', false, {fn: bind(this, ctx['getValue'])});
   }
 }"
 `;
@@ -1534,7 +1570,7 @@ exports[`slots simple default slot, variation 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1570,7 +1606,7 @@ exports[`slots simple dynamic slot with slot scope 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1618,7 +1654,7 @@ exports[`slots simple named and empty slot -- 2 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1);
+    const b3 = callSlot(ctx, node, key, 'myEmptySlot', false, {}, defaultContent1.bind(this));
     return block1([], [b3]);
   }
 }"
@@ -1637,7 +1673,7 @@ exports[`slots simple named and empty slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'myEmptySlot': {}, 'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1677,7 +1713,7 @@ exports[`slots simple slot with slot scope 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"slotScope\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -1713,7 +1749,7 @@ exports[`slots slot and (inline) t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1763,7 +1799,7 @@ exports[`slots slot and t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1811,7 +1847,7 @@ exports[`slots slot and t-esc 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -1849,7 +1885,7 @@ exports[`slots slot are properly rendered if inner props are changed 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
     let txt1 = ctx['state'].val;
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([hdlr1, txt1], [b3]);
   }
 }"
@@ -1897,7 +1933,7 @@ exports[`slots slot content has different key from other content -- dynamic slot
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1945,7 +1981,7 @@ exports[`slots slot content has different key from other content -- static slot
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -1998,7 +2034,7 @@ exports[`slots slot content is bound to caller (variation) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2033,7 +2069,7 @@ exports[`slots slot content is bound to caller 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2068,7 +2104,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({location: ctx['state'].location,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2123,7 +2159,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, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    return comp2({list: ctx['state'].list,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2180,7 +2216,7 @@ exports[`slots slot preserves properly parented relationship 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2225,7 +2261,7 @@ exports[`slots slot preserves properly parented relationship, even through t-cal
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2286,7 +2322,7 @@ exports[`slots slot with slot scope and t-props 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'slotName': {__render: slot1, __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'slotName': {__render: slot1.bind(this), __ctx: ctx1, __scope: \\"info\\"}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2315,7 +2351,7 @@ exports[`slots slots and wrapper components 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -2365,7 +2401,7 @@ exports[`slots slots are properly bound to correct component 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1);
+    return callSlot(ctx, node, key, 'default', false, {}, defaultContent1.bind(this));
   }
 }"
 `;
@@ -2388,7 +2424,7 @@ exports[`slots slots are rendered with proper context 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'footer': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([txt1], [b3]);
   }
 }"
@@ -2432,7 +2468,7 @@ exports[`slots slots are rendered with proper context, part 2 1`] = `
       ctx[\`user\`] = v_block2[i1];
       const key1 = ctx['user'].id;
       const ctx1 = capture(ctx);
-      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
+      const b7 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b7]), key1);
     }
     const b2 = list(c_block2);
@@ -2481,7 +2517,7 @@ exports[`slots slots are rendered with proper context, part 3 1`] = `
       const key1 = ctx['user'].id;
       setContextValue(ctx, \\"userdescr\\", 'User '+ctx['user'].name);
       const ctx1 = capture(ctx);
-      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
+      const b5 = comp1({to: '/user/'+ctx['user'].id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null);
       c_block2[i1] = withKey(block3([], [b5]), key1);
     }
     const b2 = list(c_block2);
@@ -2524,7 +2560,7 @@ exports[`slots slots are rendered with proper context, part 4 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"userdescr\\", 'User '+ctx['state'].user.name);
     const ctx1 = capture(ctx);
-    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({to: '/user/'+ctx['state'].user.id,slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2566,7 +2602,7 @@ exports[`slots slots in slots, with vars 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"test\\", ctx['state'].name);
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2586,7 +2622,7 @@ exports[`slots slots in slots, with vars 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2628,7 +2664,7 @@ exports[`slots slots in t-foreach and re-rendering 1`] = `
       ctx[\`n_index\`] = i1;
       const key1 = ctx['n_index'];
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -2683,7 +2719,7 @@ exports[`slots slots in t-foreach in t-foreach 1`] = `
         ctx[\`node2\`] = v_block6[i2];
         const key2 = ctx['node2'].key;
         const ctx1 = capture(ctx);
-        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
+        c_block6[i2] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}__\${key2}\`, node, this, null), key2);
       }
       ctx = ctx.__proto__;
       const b6 = list(c_block6);
@@ -2735,7 +2771,7 @@ exports[`slots slots in t-foreach with t-set and re-rendering 1`] = `
       const key1 = ctx['n_index'];
       setContextValue(ctx, \\"dummy\\", ctx['n_index']);
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
+      c_block2[i1] = withKey(comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -2775,7 +2811,7 @@ exports[`slots t-debug on a t-set-slot (defining a slot) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'content': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'content': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2814,7 +2850,7 @@ exports[`slots t-set t-value in a slot 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2835,6 +2871,36 @@ exports[`slots t-set t-value in a slot 2`] = `
 }"
 `;
 
+exports[`slots t-set-slot=default has priority over rest of the content 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { capture, markRaw } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, true, false, true);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return text(\`some other text\`);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const ctx1 = capture(ctx);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`slots t-set-slot=default has priority over rest of the content 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'default', false, {});
+  }
+}"
+`;
+
 exports[`slots t-slot in recursive templates 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -2876,7 +2942,7 @@ exports[`slots t-slot in recursive templates 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -2911,7 +2977,7 @@ exports[`slots t-slot nested within another slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -2928,7 +2994,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   let block1 = createBlock(\`<span id=\\"c2\\"><block-child-0/></span>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot2, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot2.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
   
   function slot2(ctx, node, key = \\"\\") {
@@ -2936,7 +3002,7 @@ exports[`slots t-slot nested within another slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b4 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b4]);
   }
 }"
@@ -2999,7 +3065,7 @@ exports[`slots t-slot scope context 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -3020,7 +3086,7 @@ exports[`slots t-slot scope context 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, this, null);
+    return comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__1\`, node, this, null);
   }
 }"
 `;
@@ -3054,7 +3120,7 @@ exports[`slots t-slot within dynamic t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    const b3 = comp1({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    const b3 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -3118,7 +3184,7 @@ exports[`slots template can just return a slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"

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

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

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

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

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

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

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

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

tests/components/__snapshots__/t_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, __ctx: ctx1}})}, key + \`__1\`, node, this, null);
+    const b2 = comp1({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__1\`, node, this, null);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -71,7 +71,7 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -128,7 +128,7 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;
@@ -179,7 +179,7 @@ exports[`t-set slots with an unused t-set with a component in body 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const ctx1 = capture(ctx);
-    return comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2\`, node, this, null);
+    return comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx1}})}, key + \`__2\`, node, this, null);
   }
 }"
 `;

tests/components/error_handling.test.ts

@@ -126,6 +126,23 @@ 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/slots.test.ts

@@ -45,6 +45,23 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("some text");
   });
 
+  test("t-set-slot=default has priority over rest of the content", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="default"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child>
+        some text
+        <t t-set-slot="default">some other text</t>
+      </Child>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("some other text");
+  });
+
   test("simple slot with slot scope", async () => {
     let child: any;
     class Child extends Component {
@@ -1916,4 +1933,17 @@ describe("slots", () => {
       "<p>1 hello <div>child</div></p><p>2 hello <div>child</div></p>"
     );
   });
+
+  test("default content is available as 0", async () => {
+    class Dialog extends Component {
+      static template = xml`<t t-slot="default">default content</t>`;
+    }
+    class Parent extends Component {
+      static template = xml`<Dialog>Before - <t t-out="0"/> - After</Dialog>`;
+      static components = { Dialog };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("Before - default content - After");
+  });
 });

tests/components/t_call.test.ts

@@ -304,7 +304,7 @@ describe("t-call", () => {
     }
 
     await mount(Root, fixture, {
-      dev: true,
+      test: true,
       templates: `
         <templates>
           <t t-name="someTemplate">
@@ -315,4 +315,72 @@ 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="this.__owl__.name"/>
+              <div t-esc="test"/>
+            </Child>
+          </t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe(
+      "<div>outside slot</div><div>I'm the default slot</div><div>Root</div><div>3</div>"
+    );
+    expect(Object.keys(child.__owl__.refs)).toEqual([]);
+    expect(Object.keys(root.__owl__.refs)).toEqual(["myRef", "myRef2"]);
+  });
+
+  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("");
+  });
 });

tests/components/t_foreach.test.ts

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

tests/components/t_on.test.ts

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

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)(context, node);
+  return fn(app as any, blockDom, helpers).call(context, 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, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     return list(c_block1);
   }
@@ -50,7 +50,7 @@ exports[`Portal Add and remove portals on div 1`] = `
       ctx[\`portalId\`] = v_block1[i1];
       const key1 = ctx['portalId'];
       const ctx1 = capture(ctx);
-      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block1[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     return list(c_block1);
   }
@@ -81,7 +81,7 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
       const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
       const ctx1 = capture(ctx);
-      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
       c_block1[i1] = withKey(block2([txt1], [b6]), key1);
     }
     return list(c_block1);
@@ -113,7 +113,7 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
       const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
       const ctx1 = capture(ctx);
-      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const b6 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
       c_block1[i1] = withKey(block2([txt1], [b6]), key1);
     }
     return list(c_block1);
@@ -146,7 +146,7 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
       const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
       const ctx1 = capture(ctx);
-      const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
+      const b7 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal);
       c_block2[i1] = withKey(block3([txt1], [b7]), key1);
     }
     const b2 = list(c_block2);
@@ -187,7 +187,7 @@ exports[`Portal Child and Portal 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = block2();
-    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return multi([b2, b4]);
   }
 }"
@@ -208,7 +208,7 @@ exports[`Portal Portal composed with t-slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, this, null);
+    const b3 = comp2({slots: markRaw({'default': {__render: slot1.bind(this), __ctx: ctx}})}, key + \`__2\`, node, this, null);
     return block1([], [b3]);
   }
 }"
@@ -227,7 +227,7 @@ exports[`Portal Portal composed with t-slot 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    return comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    return comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
   }
 }"
 `;
@@ -261,7 +261,7 @@ exports[`Portal basic use of portal 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -282,7 +282,7 @@ exports[`Portal basic use of portal in dev mode 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -303,7 +303,7 @@ exports[`Portal basic use of portal on div 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -324,7 +324,7 @@ exports[`Portal basic use of portal, variation 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: ctx['target'],slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -348,7 +348,7 @@ exports[`Portal conditional use of Portal (with sub Component) 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+      b4 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     }
     return multi([b2, b4]);
   }
@@ -387,7 +387,7 @@ exports[`Portal conditional use of Portal 1`] = `
     let b2,b4;
     b2 = block2();
     if (ctx['state'].hasPortal) {
-      b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+      b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     }
     return multi([b2, b4]);
   }
@@ -432,7 +432,7 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
       ctx[\`elem\`] = v_block2[i1];
       const key1 = ctx['elem'];
       const ctx1 = capture(ctx);
-      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block2[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     const b2 = list(c_block2);
     return block1([], [b2]);
@@ -482,7 +482,7 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
       ctx[\`elem\`] = v_block3[i1];
       const key1 = ctx['elem'];
       const ctx1 = capture(ctx);
-      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
+      c_block3[i1] = withKey(comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx, Portal), key1);
     }
     const b3 = list(c_block3);
     return multi([b2, b3]);
@@ -507,7 +507,7 @@ exports[`Portal conditional use of Portal with div 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasPortal) {
-      const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+      const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
       b2 = block2([], [b4]);
     }
     return multi([b2]);
@@ -532,7 +532,7 @@ exports[`Portal lifecycle hooks of portal sub component are properly called 1`]
   return function template(ctx, node, key = \\"\\") {
     let b3;
     if (ctx['state'].hasChild) {
-      b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+      b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     }
     return block1([], [b3]);
   }
@@ -585,7 +585,7 @@ exports[`Portal portal and Child 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const b2 = block2();
-    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '.portal',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return multi([b2, b4]);
   }
 }"
@@ -611,7 +611,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b4]);
   }
 }"
@@ -632,7 +632,7 @@ exports[`Portal portal destroys on crash 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -667,7 +667,7 @@ exports[`Portal portal with child and props 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -710,7 +710,7 @@ exports[`Portal portal with dynamic body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b5]);
   }
 }"
@@ -734,7 +734,7 @@ exports[`Portal portal with many children 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b5 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b5]);
   }
 }"
@@ -758,7 +758,7 @@ exports[`Portal portal with no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b4 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b4]);
   }
 }"
@@ -778,7 +778,7 @@ exports[`Portal portal with only text as content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -799,7 +799,7 @@ exports[`Portal portal with target not in dom 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#does-not-exist',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -820,7 +820,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -875,7 +875,7 @@ exports[`Portal simple catchError with portal 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -896,7 +896,7 @@ exports[`Portal with target in template (after portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -917,7 +917,7 @@ exports[`Portal with target in template (before portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: '#local-target',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -938,7 +938,7 @@ exports[`Portal: Props validation target must be a valid selector 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: ' ',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: ' ',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -959,7 +959,7 @@ exports[`Portal: Props validation target must be a valid selector 2 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
+    const b3 = comp1({target: 'aa',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__1\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"
@@ -980,7 +980,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
+    const b3 = comp2({target: '#outside',slots: {'default': {__render: slot1.bind(this), __ctx: ctx}}}, key + \`__2\`, node, ctx, Portal);
     return block1([], [b3]);
   }
 }"

tests/misc/portal.test.ts

@@ -892,7 +892,7 @@ describe("Portal", () => {
     }
     await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe(
-      '<span>child</span><div class="portal"></div><span>portal</span>'
+      '<span>child</span><div class="portal"><span>portal</span></div>'
     );
   });
 

tests/reactivity.test.ts

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