@odoo/owl 2.0.0-beta-8 → 2.0.0-beta-11

package/dist/owl.cjs.js

@@ -171,6 +171,10 @@ function toClassObj(expr) {
             for (let key in expr) {
                 const value = expr[key];
                 if (value) {
+                    key = trim.call(key);
+                    if (!key) {
+                        continue;
+                    }
                     const words = split.call(key, wordRegexp);
                     for (let word of words) {
                         result[word] = value;
@@ -1291,29 +1295,35 @@ function html(str) {
 }
 
 function createCatcher(eventsSpec) {
-    let setupFns = [];
-    let removeFns = [];
-    for (let name in eventsSpec) {
-        let index = eventsSpec[name];
-        let { setup, remove } = createEventHandler(name);
-        setupFns[index] = setup;
-        removeFns[index] = remove;
-    }
-    let n = setupFns.length;
+    const n = Object.keys(eventsSpec).length;
     class VCatcher {
         constructor(child, handlers) {
+            this.handlerFns = [];
             this.afterNode = null;
             this.child = child;
-            this.handlers = handlers;
+            this.handlerData = handlers;
         }
         mount(parent, afterNode) {
             this.parentEl = parent;
-            this.afterNode = afterNode;
             this.child.mount(parent, afterNode);
+            this.afterNode = document.createTextNode("");
+            parent.insertBefore(this.afterNode, afterNode);
+            this.wrapHandlerData();
+            for (let name in eventsSpec) {
+                const index = eventsSpec[name];
+                const handler = createEventHandler(name);
+                this.handlerFns[index] = handler;
+                handler.setup.call(parent, this.handlerData[index]);
+            }
+        }
+        wrapHandlerData() {
             for (let i = 0; i < n; i++) {
-                let origFn = this.handlers[i][0];
+                let handler = this.handlerData[i];
+                // handler = [...mods, fn, comp], so we need to replace second to last elem
+                let idx = handler.length - 2;
+                let origFn = handler[idx];
                 const self = this;
-                this.handlers[i][0] = function (ev) {
+                handler[idx] = function (ev) {
                     const target = ev.target;
                     let currentNode = self.child.firstNode();
                     const afterNode = self.afterNode;
@@ -1324,18 +1334,21 @@ function createCatcher(eventsSpec) {
                         currentNode = currentNode.nextSibling;
                     }
                 };
-                setupFns[i].call(parent, this.handlers[i]);
             }
         }
         moveBefore(other, afterNode) {
-            this.afterNode = null;
             this.child.moveBefore(other ? other.child : null, afterNode);
+            this.parentEl.insertBefore(this.afterNode, afterNode);
         }
         patch(other, withBeforeRemove) {
             if (this === other) {
                 return;
             }
-            this.handlers = other.handlers;
+            this.handlerData = other.handlerData;
+            this.wrapHandlerData();
+            for (let i = 0; i < n; i++) {
+                this.handlerFns[i].update.call(this.parentEl, this.handlerData[i]);
+            }
             this.child.patch(other.child, withBeforeRemove);
         }
         beforeRemove() {
@@ -1343,9 +1356,10 @@ function createCatcher(eventsSpec) {
         }
         remove() {
             for (let i = 0; i < n; i++) {
-                removeFns[i].call(this.parentEl);
+                this.handlerFns[i].remove.call(this.parentEl);
             }
             this.child.remove();
+            this.afterNode.remove();
         }
         firstNode() {
             return this.child.firstNode();
@@ -1372,798 +1386,786 @@ function remove(vnode, withBeforeRemove = false) {
     vnode.remove();
 }
 
-// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
-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");
-const objectToString = Object.prototype.toString;
-const objectHasOwnProperty = Object.prototype.hasOwnProperty;
-const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
-const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
-/**
- * extract "RawType" from strings like "[object RawType]" => this lets us ignore
- * many native objects such as Promise (whose toString is [object Promise])
- * or Date ([object Date]), while also supporting collections without using
- * instanceof in a loop
- *
- * @param obj the object to check
- * @returns the raw type of the object
- */
-function rawType(obj) {
-    return objectToString.call(obj).slice(8, -1);
-}
-/**
- * Checks whether a given value can be made into a reactive object.
- *
- * @param value the value to check
- * @returns whether the value can be made reactive
- */
-function canBeMadeReactive(value) {
-    if (typeof value !== "object") {
+// Maps fibers to thrown errors
+const fibersInError = new WeakMap();
+const nodeErrorHandlers = new WeakMap();
+function _handleError(node, error) {
+    if (!node) {
         return false;
     }
-    return SUPPORTED_RAW_TYPES.has(rawType(value));
-}
-/**
- * Creates a reactive from the given object/callback if possible and returns it,
- * returns the original object otherwise.
- *
- * @param value the value make reactive
- * @returns a reactive for the given object when possible, the original otherwise
- */
-function possiblyReactive(val, cb) {
-    return canBeMadeReactive(val) ? reactive(val, cb) : val;
-}
-/**
- * Mark an object or array so that it is ignored by the reactivity system
- *
- * @param value the value to mark
- * @returns the object itself
- */
-function markRaw(value) {
-    value[SKIP] = true;
-    return value;
-}
-/**
- * Given a reactive objet, return the raw (non reactive) underlying object
- *
- * @param value a reactive value
- * @returns the underlying value
- */
-function toRaw(value) {
-    return value[TARGET] || value;
-}
-const targetToKeysToCallbacks = new WeakMap();
-/**
- * Observes a given key on a target with an callback. The callback will be
- * called when the given key changes on the target.
- *
- * @param target the target whose key should be observed
- * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
- *  or deletion)
- * @param callback the function to call when the key changes
- */
-function observeTargetKey(target, key, callback) {
-    if (!targetToKeysToCallbacks.get(target)) {
-        targetToKeysToCallbacks.set(target, new Map());
+    const fiber = node.fiber;
+    if (fiber) {
+        fibersInError.set(fiber, error);
     }
-    const keyToCallbacks = targetToKeysToCallbacks.get(target);
-    if (!keyToCallbacks.get(key)) {
-        keyToCallbacks.set(key, new Set());
+    const errorHandlers = nodeErrorHandlers.get(node);
+    if (errorHandlers) {
+        let handled = false;
+        // execute in the opposite order
+        for (let i = errorHandlers.length - 1; i >= 0; i--) {
+            try {
+                errorHandlers[i](error);
+                handled = true;
+                break;
+            }
+            catch (e) {
+                error = e;
+            }
+        }
+        if (handled) {
+            return true;
+        }
     }
-    keyToCallbacks.get(key).add(callback);
-    if (!callbacksToTargets.has(callback)) {
-        callbacksToTargets.set(callback, new Set());
+    return _handleError(node.parent, error);
+}
+function handleError(params) {
+    const error = params.error;
+    const node = "node" in params ? params.node : params.fiber.node;
+    const fiber = "fiber" in params ? params.fiber : node.fiber;
+    // resets the fibers on components if possible. This is important so that
+    // new renderings can be properly included in the initial one, if any.
+    let current = fiber;
+    do {
+        current.node.fiber = current;
+        current = current.parent;
+    } while (current);
+    fibersInError.set(fiber.root, error);
+    const handled = _handleError(node, error);
+    if (!handled) {
+        console.warn(`[Owl] Unhandled error. Destroying the root component`);
+        try {
+            node.app.destroy();
+        }
+        catch (e) {
+            console.error(e);
+        }
     }
-    callbacksToTargets.get(callback).add(target);
+}
+
+function makeChildFiber(node, parent) {
+    let current = node.fiber;
+    if (current) {
+        cancelFibers(current.children);
+        current.root = null;
+    }
+    return new Fiber(node, parent);
 }
-/**
- * Notify Reactives that are observing a given target that a key has changed on
- * the target.
- *
- * @param target target whose Reactives should be notified that the target was
- *  changed.
- * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
- *   or deleted)
- */
-function notifyReactives(target, key) {
-    const keyToCallbacks = targetToKeysToCallbacks.get(target);
-    if (!keyToCallbacks) {
-        return;
+function makeRootFiber(node) {
+    let current = node.fiber;
+    if (current) {
+        let root = current.root;
+        // lock root fiber because canceling children fibers may destroy components,
+        // which means any arbitrary code can be run in onWillDestroy, which may
+        // trigger new renderings
+        root.locked = true;
+        root.setCounter(root.counter + 1 - cancelFibers(current.children));
+        root.locked = false;
+        current.children = [];
+        current.childrenMap = {};
+        current.bdom = null;
+        if (fibersInError.has(current)) {
+            fibersInError.delete(current);
+            fibersInError.delete(root);
+            current.appliedToDom = false;
+        }
+        return current;
     }
-    const callbacks = keyToCallbacks.get(key);
-    if (!callbacks) {
-        return;
+    const fiber = new RootFiber(node, null);
+    if (node.willPatch.length) {
+        fiber.willPatch.push(fiber);
     }
-    // Loop on copy because clearReactivesForCallback will modify the set in place
-    for (const callback of [...callbacks]) {
-        clearReactivesForCallback(callback);
-        callback();
+    if (node.patched.length) {
+        fiber.patched.push(fiber);
     }
+    return fiber;
+}
+function throwOnRender() {
+    throw new Error("Attempted to render cancelled fiber");
 }
-const callbacksToTargets = new WeakMap();
 /**
- * Clears all subscriptions of the Reactives associated with a given callback.
- *
- * @param callback the callback for which the reactives need to be cleared
+ * @returns number of not-yet rendered fibers cancelled
  */
-function clearReactivesForCallback(callback) {
-    const targetsToClear = callbacksToTargets.get(callback);
-    if (!targetsToClear) {
-        return;
-    }
-    for (const target of targetsToClear) {
-        const observedKeys = targetToKeysToCallbacks.get(target);
-        if (!observedKeys) {
-            continue;
+function cancelFibers(fibers) {
+    let result = 0;
+    for (let fiber of fibers) {
+        let node = fiber.node;
+        fiber.render = throwOnRender;
+        if (node.status === 0 /* NEW */) {
+            node.destroy();
+            delete node.parent.children[node.parentKey];
         }
-        for (const callbacks of observedKeys.values()) {
-            callbacks.delete(callback);
+        node.fiber = null;
+        if (fiber.bdom) {
+            // if fiber has been rendered, this means that the component props have
+            // been updated. however, this fiber will not be patched to the dom, so
+            // it could happen that the next render compare the current props with
+            // the same props, and skip the render completely. With the next line,
+            // we kindly request the component code to force a render, so it works as
+            // expected.
+            node.forceNextRender = true;
+        }
+        else {
+            result++;
         }
+        result += cancelFibers(fiber.children);
     }
-    targetsToClear.clear();
-}
-function getSubscriptions(callback) {
-    const targets = callbacksToTargets.get(callback) || [];
-    return [...targets].map((target) => {
-        const keysToCallbacks = targetToKeysToCallbacks.get(target);
-        return {
-            target,
-            keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
-        };
-    });
+    return result;
 }
-const reactiveCache = new WeakMap();
-/**
- * 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
- * notify callback to be called if there are suscriptions to that data. Nested
- * objects and arrays are automatically made reactive as well.
- *
- * Whenever you are notified of a change, all subscriptions are cleared, and if
- * you would like to be notified of any further changes, you should go read
- * the underlying data again. We assume that if you don't go read it again after
- * being notified, it means that you are no longer interested in that data.
- *
- * 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
- *    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.
- *    This is a choice that was made because changing a key's value will trigger
- *    this trap and we do not want to subscribe by writes. This also means that
- *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
- *
- * @param target the object for which to create a reactive proxy
- * @param callback the function to call when an observed property of the
- *  reactive has changed
- * @returns a proxy that tracks changes to it
- */
-function reactive(target, callback = () => { }) {
-    if (!canBeMadeReactive(target)) {
-        throw new Error(`Cannot make the given value reactive`);
+class Fiber {
+    constructor(node, parent) {
+        this.bdom = null;
+        this.children = [];
+        this.appliedToDom = false;
+        this.deep = false;
+        this.childrenMap = {};
+        this.node = node;
+        this.parent = parent;
+        if (parent) {
+            this.deep = parent.deep;
+            const root = parent.root;
+            root.setCounter(root.counter + 1);
+            this.root = root;
+            parent.children.push(this);
+        }
+        else {
+            this.root = this;
+        }
     }
-    if (SKIP in target) {
-        return target;
+    render() {
+        // if some parent has a fiber => register in followup
+        let prev = this.root.node;
+        let scheduler = prev.app.scheduler;
+        let current = prev.parent;
+        while (current) {
+            if (current.fiber) {
+                let root = current.fiber.root;
+                if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
+                    current = root.node;
+                }
+                else {
+                    scheduler.delayedRenders.push(this);
+                    return;
+                }
+            }
+            prev = current;
+            current = current.parent;
+        }
+        // there are no current rendering from above => we can render
+        this._render();
     }
-    const originalTarget = target[TARGET];
-    if (originalTarget) {
-        return reactive(originalTarget, callback);
+    _render() {
+        const node = this.node;
+        const root = this.root;
+        if (root) {
+            try {
+                this.bdom = true;
+                this.bdom = node.renderFn();
+            }
+            catch (e) {
+                handleError({ node, error: e });
+            }
+            root.setCounter(root.counter - 1);
+        }
     }
-    if (!reactiveCache.has(target)) {
-        reactiveCache.set(target, new WeakMap());
+}
+class RootFiber extends Fiber {
+    constructor() {
+        super(...arguments);
+        this.counter = 1;
+        // only add stuff in this if they have registered some hooks
+        this.willPatch = [];
+        this.patched = [];
+        this.mounted = [];
+        // A fiber is typically locked when it is completing and the patch has not, or is being applied.
+        // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
+        this.locked = false;
     }
-    const reactivesForTarget = reactiveCache.get(target);
-    if (!reactivesForTarget.has(callback)) {
-        const targetRawType = rawType(target);
-        const handler = COLLECTION_RAWTYPES.has(targetRawType)
-            ? collectionsProxyHandler(target, callback, targetRawType)
-            : basicProxyHandler(callback);
-        const proxy = new Proxy(target, handler);
-        reactivesForTarget.set(callback, proxy);
+    complete() {
+        const node = this.node;
+        this.locked = true;
+        let current = undefined;
+        try {
+            // Step 1: calling all willPatch lifecycle hooks
+            for (current of this.willPatch) {
+                // because of the asynchronous nature of the rendering, some parts of the
+                // UI may have been rendered, then deleted in a followup rendering, and we
+                // do not want to call onWillPatch in that case.
+                let node = current.node;
+                if (node.fiber === current) {
+                    const component = node.component;
+                    for (let cb of node.willPatch) {
+                        cb.call(component);
+                    }
+                }
+            }
+            current = undefined;
+            // Step 2: patching the dom
+            node._patch();
+            this.locked = false;
+            // Step 4: calling all mounted lifecycle hooks
+            let mountedFibers = this.mounted;
+            while ((current = mountedFibers.pop())) {
+                current = current;
+                if (current.appliedToDom) {
+                    for (let cb of current.node.mounted) {
+                        cb();
+                    }
+                }
+            }
+            // Step 5: calling all patched hooks
+            let patchedFibers = this.patched;
+            while ((current = patchedFibers.pop())) {
+                current = current;
+                if (current.appliedToDom) {
+                    for (let cb of current.node.patched) {
+                        cb();
+                    }
+                }
+            }
+        }
+        catch (e) {
+            this.locked = false;
+            handleError({ fiber: current || this, error: e });
+        }
+    }
+    setCounter(newValue) {
+        this.counter = newValue;
+        if (newValue === 0) {
+            this.node.app.scheduler.flush();
+        }
     }
-    return reactivesForTarget.get(callback);
 }
-/**
- * Creates a basic proxy handler for regular objects and arrays.
- *
- * @param callback @see reactive
- * @returns a proxy handler object
- */
-function basicProxyHandler(callback) {
-    return {
-        get(target, key, proxy) {
-            if (key === TARGET) {
-                return target;
-            }
-            // non-writable non-configurable properties cannot be made reactive
-            const desc = Object.getOwnPropertyDescriptor(target, key);
-            if (desc && !desc.writable && !desc.configurable) {
-                return Reflect.get(target, key, proxy);
+class MountFiber extends RootFiber {
+    constructor(node, target, options = {}) {
+        super(node, null);
+        this.target = target;
+        this.position = options.position || "last-child";
+    }
+    complete() {
+        let current = this;
+        try {
+            const node = this.node;
+            node.children = this.childrenMap;
+            node.app.constructor.validateTarget(this.target);
+            if (node.bdom) {
+                // this is a complicated situation: if we mount a fiber with an existing
+                // bdom, this means that this same fiber was already completed, mounted,
+                // but a crash occurred in some mounted hook. Then, it was handled and
+                // the new rendering is being applied.
+                node.updateDom();
             }
-            observeTargetKey(target, key, callback);
-            return possiblyReactive(Reflect.get(target, key, proxy), 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) {
-                notifyReactives(target, KEYCHANGES);
+            else {
+                node.bdom = this.bdom;
+                if (this.position === "last-child" || this.target.childNodes.length === 0) {
+                    mount$1(node.bdom, this.target);
+                }
+                else {
+                    const firstChild = this.target.childNodes[0];
+                    mount$1(node.bdom, this.target, firstChild);
+                }
             }
-            // 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")) {
-                notifyReactives(target, key);
+            // unregistering the fiber before mounted since it can do another render
+            // and that the current rendering is obviously completed
+            node.fiber = null;
+            node.status = 1 /* MOUNTED */;
+            this.appliedToDom = true;
+            let mountedFibers = this.mounted;
+            while ((current = mountedFibers.pop())) {
+                if (current.appliedToDom) {
+                    for (let cb of current.node.mounted) {
+                        cb();
+                    }
+                }
             }
-            return ret;
-        },
-        deleteProperty(target, key) {
-            const ret = Reflect.deleteProperty(target, key);
-            // TODO: only notify when something was actually deleted
-            notifyReactives(target, KEYCHANGES);
-            notifyReactives(target, key);
-            return ret;
-        },
-        ownKeys(target) {
-            observeTargetKey(target, KEYCHANGES, callback);
-            return Reflect.ownKeys(target);
-        },
-        has(target, key) {
-            // TODO: this observes all key changes instead of only the presence of the argument key
-            // observing the key itself would observe value changes instead of presence changes
-            // so we may need a finer grained system to distinguish observing value vs presence.
-            observeTargetKey(target, KEYCHANGES, callback);
-            return Reflect.has(target, key);
-        },
-    };
-}
+        }
+        catch (e) {
+            handleError({ fiber: current, error: e });
+        }
+    }
+}
+
+// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
+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");
+const objectToString = Object.prototype.toString;
+const objectHasOwnProperty = Object.prototype.hasOwnProperty;
+const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
+const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
 /**
- * Creates a function that will observe the key that is passed to it when called
- * and delegates to the underlying method.
+ * extract "RawType" from strings like "[object RawType]" => this lets us ignore
+ * many native objects such as Promise (whose toString is [object Promise])
+ * or Date ([object Date]), while also supporting collections without using
+ * instanceof in a loop
  *
- * @param methodName name of the method to delegate to
- * @param target @see reactive
- * @param callback @see reactive
+ * @param obj the object to check
+ * @returns the raw type of the object
  */
-function makeKeyObserver(methodName, target, callback) {
-    return (key) => {
-        key = toRaw(key);
-        observeTargetKey(target, key, callback);
-        return possiblyReactive(target[methodName](key), callback);
-    };
+function rawType(obj) {
+    return objectToString.call(obj).slice(8, -1);
 }
 /**
- * Creates an iterable that will delegate to the underlying iteration method and
- * observe keys as necessary.
+ * Checks whether a given value can be made into a reactive object.
  *
- * @param methodName name of the method to delegate to
- * @param target @see reactive
- * @param callback @see reactive
+ * @param value the value to check
+ * @returns whether the value can be made reactive
  */
-function makeIteratorObserver(methodName, target, callback) {
-    return function* () {
-        observeTargetKey(target, KEYCHANGES, callback);
-        const keys = target.keys();
-        for (const item of target[methodName]()) {
-            const key = keys.next().value;
-            observeTargetKey(target, key, callback);
-            yield possiblyReactive(item, callback);
-        }
-    };
+function canBeMadeReactive(value) {
+    if (typeof value !== "object") {
+        return false;
+    }
+    return SUPPORTED_RAW_TYPES.has(rawType(value));
 }
 /**
- * Creates a forEach function that will delegate to forEach on the underlying
- * collection while observing key changes, and keys as they're iterated over,
- * and making the passed keys/values reactive.
+ * Creates a reactive from the given object/callback if possible and returns it,
+ * returns the original object otherwise.
  *
- * @param target @see reactive
- * @param callback @see reactive
+ * @param value the value make reactive
+ * @returns a reactive for the given object when possible, the original otherwise
  */
-function makeForEachObserver(target, callback) {
-    return function forEach(forEachCb, thisArg) {
-        observeTargetKey(target, KEYCHANGES, callback);
-        target.forEach(function (val, key, targetObj) {
-            observeTargetKey(target, key, callback);
-            forEachCb.call(thisArg, possiblyReactive(val, callback), possiblyReactive(key, callback), possiblyReactive(targetObj, callback));
-        }, thisArg);
-    };
+function possiblyReactive(val, cb) {
+    return canBeMadeReactive(val) ? reactive(val, cb) : val;
 }
 /**
- * Creates a function that will delegate to an underlying method, and check if
- * that method has modified the presence or value of a key, and notify the
- * reactives appropriately.
+ * Mark an object or array so that it is ignored by the reactivity system
  *
- * @param setterName name of the method to delegate to
- * @param getterName name of the method which should be used to retrieve the
- *  value before calling the delegate method for comparison purposes
- * @param target @see reactive
+ * @param value the value to mark
+ * @returns the object itself
  */
-function delegateAndNotify(setterName, getterName, target) {
-    return (key, value) => {
-        key = toRaw(key);
-        const hadKey = target.has(key);
-        const originalValue = target[getterName](key);
-        const ret = target[setterName](key, value);
-        const hasKey = target.has(key);
-        if (hadKey !== hasKey) {
-            notifyReactives(target, KEYCHANGES);
-        }
-        if (originalValue !== value) {
-            notifyReactives(target, key);
-        }
-        return ret;
-    };
+function markRaw(value) {
+    value[SKIP] = true;
+    return value;
 }
 /**
- * Creates a function that will clear the underlying collection and notify that
- * the keys of the collection have changed.
+ * Given a reactive objet, return the raw (non reactive) underlying object
  *
- * @param target @see reactive
+ * @param value a reactive value
+ * @returns the underlying value
  */
-function makeClearNotifier(target) {
-    return () => {
-        const allKeys = [...target.keys()];
-        target.clear();
-        notifyReactives(target, KEYCHANGES);
-        for (const key of allKeys) {
-            notifyReactives(target, key);
-        }
-    };
+function toRaw(value) {
+    return value[TARGET] || value;
 }
+const targetToKeysToCallbacks = new WeakMap();
 /**
- * Maps raw type of an object to an object containing functions that can be used
- * to build an appropritate proxy handler for that raw type. Eg: when making a
- * reactive set, calling the has method should mark the key that is being
- * retrieved as observed, and calling the add or delete method should notify the
- * reactives that the key which is being added or deleted has been modified.
- */
-const rawTypeToFuncHandlers = {
-    Set: (target, callback) => ({
-        has: makeKeyObserver("has", target, callback),
-        add: delegateAndNotify("add", "has", target),
-        delete: delegateAndNotify("delete", "has", target),
-        keys: makeIteratorObserver("keys", target, callback),
-        values: makeIteratorObserver("values", target, callback),
-        entries: makeIteratorObserver("entries", target, callback),
-        [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
-        forEach: makeForEachObserver(target, callback),
-        clear: makeClearNotifier(target),
-        get size() {
-            observeTargetKey(target, KEYCHANGES, callback);
-            return target.size;
-        },
-    }),
-    Map: (target, callback) => ({
-        has: makeKeyObserver("has", target, callback),
-        get: makeKeyObserver("get", target, callback),
-        set: delegateAndNotify("set", "get", target),
-        delete: delegateAndNotify("delete", "has", target),
-        keys: makeIteratorObserver("keys", target, callback),
-        values: makeIteratorObserver("values", target, callback),
-        entries: makeIteratorObserver("entries", target, callback),
-        [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
-        forEach: makeForEachObserver(target, callback),
-        clear: makeClearNotifier(target),
-        get size() {
-            observeTargetKey(target, KEYCHANGES, callback);
-            return target.size;
-        },
-    }),
-    WeakMap: (target, callback) => ({
-        has: makeKeyObserver("has", target, callback),
-        get: makeKeyObserver("get", target, callback),
-        set: delegateAndNotify("set", "get", target),
-        delete: delegateAndNotify("delete", "has", target),
-    }),
-};
-/**
- * Creates a proxy handler for collections (Set/Map/WeakMap)
- *
- * @param callback @see reactive
- * @param target @see reactive
- * @returns a proxy handler object
- */
-function collectionsProxyHandler(target, callback, targetRawType) {
-    // TODO: if performance is an issue we can create the special handlers lazily when each
-    // property is read.
-    const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
-    return Object.assign(basicProxyHandler(callback), {
-        get(target, key) {
-            if (key === TARGET) {
-                return target;
-            }
-            if (objectHasOwnProperty.call(specialHandlers, key)) {
-                return specialHandlers[key];
-            }
-            observeTargetKey(target, key, callback);
-            return possiblyReactive(target[key], callback);
-        },
-    });
-}
-
-/**
- * Creates a batched version of a callback so that all calls to it in the same
- * microtick will only call the original callback once.
+ * Observes a given key on a target with an callback. The callback will be
+ * called when the given key changes on the target.
  *
- * @param callback the callback to batch
- * @returns a batched version of the original callback
+ * @param target the target whose key should be observed
+ * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
+ *  or deletion)
+ * @param callback the function to call when the key changes
  */
-function batched(callback) {
-    let called = false;
-    return async () => {
-        // This await blocks all calls to the callback here, then releases them sequentially
-        // in the next microtick. This line decides the granularity of the batch.
-        await Promise.resolve();
-        if (!called) {
-            called = true;
-            // wait for all calls in this microtick to fall through before resetting "called"
-            // so that only the first call to the batched function calls the original callback.
-            // Schedule this before calling the callback so that calls to the batched function
-            // within the callback will proceed only after resetting called to false, and have
-            // a chance to execute the callback again
-            Promise.resolve().then(() => (called = false));
-            callback();
-        }
-    };
-}
-function validateTarget(target) {
-    if (!(target instanceof HTMLElement)) {
-        throw new Error("Cannot mount component: the target is not a valid DOM element");
+function observeTargetKey(target, key, callback) {
+    if (!targetToKeysToCallbacks.get(target)) {
+        targetToKeysToCallbacks.set(target, new Map());
     }
-    if (!document.body.contains(target)) {
-        throw new Error("Cannot mount a component on a detached dom node");
+    const keyToCallbacks = targetToKeysToCallbacks.get(target);
+    if (!keyToCallbacks.get(key)) {
+        keyToCallbacks.set(key, new Set());
+    }
+    keyToCallbacks.get(key).add(callback);
+    if (!callbacksToTargets.has(callback)) {
+        callbacksToTargets.set(callback, new Set());
     }
+    callbacksToTargets.get(callback).add(target);
 }
-class EventBus extends EventTarget {
-    trigger(name, payload) {
-        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+/**
+ * Notify Reactives that are observing a given target that a key has changed on
+ * the target.
+ *
+ * @param target target whose Reactives should be notified that the target was
+ *  changed.
+ * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
+ *   or deleted)
+ */
+function notifyReactives(target, key) {
+    const keyToCallbacks = targetToKeysToCallbacks.get(target);
+    if (!keyToCallbacks) {
+        return;
+    }
+    const callbacks = keyToCallbacks.get(key);
+    if (!callbacks) {
+        return;
+    }
+    // Loop on copy because clearReactivesForCallback will modify the set in place
+    for (const callback of [...callbacks]) {
+        clearReactivesForCallback(callback);
+        callback();
     }
 }
-function whenReady(fn) {
-    return new Promise(function (resolve) {
-        if (document.readyState !== "loading") {
-            resolve(true);
+const callbacksToTargets = new WeakMap();
+/**
+ * Clears all subscriptions of the Reactives associated with a given callback.
+ *
+ * @param callback the callback for which the reactives need to be cleared
+ */
+function clearReactivesForCallback(callback) {
+    const targetsToClear = callbacksToTargets.get(callback);
+    if (!targetsToClear) {
+        return;
+    }
+    for (const target of targetsToClear) {
+        const observedKeys = targetToKeysToCallbacks.get(target);
+        if (!observedKeys) {
+            continue;
         }
-        else {
-            document.addEventListener("DOMContentLoaded", resolve, false);
+        for (const callbacks of observedKeys.values()) {
+            callbacks.delete(callback);
         }
-    }).then(fn || function () { });
-}
-async function loadFile(url) {
-    const result = await fetch(url);
-    if (!result.ok) {
-        throw new Error("Error while fetching xml templates");
     }
-    return await result.text();
+    targetsToClear.clear();
 }
-/*
- * This class just transports the fact that a string is safe
- * to be injected as HTML. Overriding a JS primitive is quite painful though
- * so we need to redfine toString and valueOf.
- */
-class Markup extends String {
+function getSubscriptions(callback) {
+    const targets = callbacksToTargets.get(callback) || [];
+    return [...targets].map((target) => {
+        const keysToCallbacks = targetToKeysToCallbacks.get(target);
+        return {
+            target,
+            keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
+        };
+    });
 }
-/*
- * Marks a value as safe, that is, a value that can be injected as HTML directly.
- * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
+const reactiveCache = new WeakMap();
+/**
+ * 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
+ * notify callback to be called if there are suscriptions to that data. Nested
+ * objects and arrays are automatically made reactive as well.
+ *
+ * Whenever you are notified of a change, all subscriptions are cleared, and if
+ * you would like to be notified of any further changes, you should go read
+ * the underlying data again. We assume that if you don't go read it again after
+ * being notified, it means that you are no longer interested in that data.
+ *
+ * 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
+ *    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.
+ *    This is a choice that was made because changing a key's value will trigger
+ *    this trap and we do not want to subscribe by writes. This also means that
+ *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
+ *
+ * @param target the object for which to create a reactive proxy
+ * @param callback the function to call when an observed property of the
+ *  reactive has changed
+ * @returns a proxy that tracks changes to it
  */
-function markup(value) {
-    return new Markup(value);
-}
-
-class Component {
-    constructor(props, env, node) {
-        this.props = props;
-        this.env = env;
-        this.__owl__ = node;
+function reactive(target, callback = () => { }) {
+    if (!canBeMadeReactive(target)) {
+        throw new Error(`Cannot make the given value reactive`);
     }
-    setup() { }
-    render(deep = false) {
-        this.__owl__.render(deep === true);
+    if (SKIP in target) {
+        return target;
     }
-}
-Component.template = "";
-
-// Maps fibers to thrown errors
-const fibersInError = new WeakMap();
-const nodeErrorHandlers = new WeakMap();
-function _handleError(node, error) {
-    if (!node) {
-        return false;
+    const originalTarget = target[TARGET];
+    if (originalTarget) {
+        return reactive(originalTarget, callback);
     }
-    const fiber = node.fiber;
-    if (fiber) {
-        fibersInError.set(fiber, error);
+    if (!reactiveCache.has(target)) {
+        reactiveCache.set(target, new WeakMap());
     }
-    const errorHandlers = nodeErrorHandlers.get(node);
-    if (errorHandlers) {
-        let handled = false;
-        // execute in the opposite order
-        for (let i = errorHandlers.length - 1; i >= 0; i--) {
-            try {
-                errorHandlers[i](error);
-                handled = true;
-                break;
-            }
-            catch (e) {
-                error = e;
-            }
-        }
-        if (handled) {
-            return true;
-        }
+    const reactivesForTarget = reactiveCache.get(target);
+    if (!reactivesForTarget.has(callback)) {
+        const targetRawType = rawType(target);
+        const handler = COLLECTION_RAWTYPES.has(targetRawType)
+            ? collectionsProxyHandler(target, callback, targetRawType)
+            : basicProxyHandler(callback);
+        const proxy = new Proxy(target, handler);
+        reactivesForTarget.set(callback, proxy);
     }
-    return _handleError(node.parent, error);
+    return reactivesForTarget.get(callback);
 }
-function handleError(params) {
-    const error = params.error;
-    const node = "node" in params ? params.node : params.fiber.node;
-    const fiber = "fiber" in params ? params.fiber : node.fiber;
-    // resets the fibers on components if possible. This is important so that
-    // new renderings can be properly included in the initial one, if any.
-    let current = fiber;
-    do {
-        current.node.fiber = current;
-        current = current.parent;
-    } while (current);
-    fibersInError.set(fiber.root, error);
-    const handled = _handleError(node, error);
-    if (!handled) {
-        console.warn(`[Owl] Unhandled error. Destroying the root component`);
-        try {
-            node.app.destroy();
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }
-}
-
-function makeChildFiber(node, parent) {
-    let current = node.fiber;
-    if (current) {
-        cancelFibers(current.children);
-        current.root = null;
-    }
-    return new Fiber(node, parent);
+/**
+ * Creates a basic proxy handler for regular objects and arrays.
+ *
+ * @param callback @see reactive
+ * @returns a proxy handler object
+ */
+function basicProxyHandler(callback) {
+    return {
+        get(target, key, proxy) {
+            if (key === TARGET) {
+                return target;
+            }
+            // non-writable non-configurable properties cannot be made reactive
+            const desc = Object.getOwnPropertyDescriptor(target, key);
+            if (desc && !desc.writable && !desc.configurable) {
+                return Reflect.get(target, key, proxy);
+            }
+            observeTargetKey(target, key, callback);
+            return possiblyReactive(Reflect.get(target, key, proxy), 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) {
+                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")) {
+                notifyReactives(target, key);
+            }
+            return ret;
+        },
+        deleteProperty(target, key) {
+            const ret = Reflect.deleteProperty(target, key);
+            // TODO: only notify when something was actually deleted
+            notifyReactives(target, KEYCHANGES);
+            notifyReactives(target, key);
+            return ret;
+        },
+        ownKeys(target) {
+            observeTargetKey(target, KEYCHANGES, callback);
+            return Reflect.ownKeys(target);
+        },
+        has(target, key) {
+            // TODO: this observes all key changes instead of only the presence of the argument key
+            // observing the key itself would observe value changes instead of presence changes
+            // so we may need a finer grained system to distinguish observing value vs presence.
+            observeTargetKey(target, KEYCHANGES, callback);
+            return Reflect.has(target, key);
+        },
+    };
 }
-function makeRootFiber(node) {
-    let current = node.fiber;
-    if (current) {
-        let root = current.root;
-        // lock root fiber because canceling children fibers may destroy components,
-        // which means any arbitrary code can be run in onWillDestroy, which may
-        // trigger new renderings
-        root.locked = true;
-        root.setCounter(root.counter + 1 - cancelFibers(current.children));
-        root.locked = false;
-        current.children = [];
-        current.childrenMap = {};
-        current.bdom = null;
-        if (fibersInError.has(current)) {
-            fibersInError.delete(current);
-            fibersInError.delete(root);
-            current.appliedToDom = false;
+/**
+ * Creates a function that will observe the key that is passed to it when called
+ * and delegates to the underlying method.
+ *
+ * @param methodName name of the method to delegate to
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+function makeKeyObserver(methodName, target, callback) {
+    return (key) => {
+        key = toRaw(key);
+        observeTargetKey(target, key, callback);
+        return possiblyReactive(target[methodName](key), callback);
+    };
+}
+/**
+ * Creates an iterable that will delegate to the underlying iteration method and
+ * observe keys as necessary.
+ *
+ * @param methodName name of the method to delegate to
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+function makeIteratorObserver(methodName, target, callback) {
+    return function* () {
+        observeTargetKey(target, KEYCHANGES, callback);
+        const keys = target.keys();
+        for (const item of target[methodName]()) {
+            const key = keys.next().value;
+            observeTargetKey(target, key, callback);
+            yield possiblyReactive(item, callback);
         }
-        return current;
-    }
-    const fiber = new RootFiber(node, null);
-    if (node.willPatch.length) {
-        fiber.willPatch.push(fiber);
-    }
-    if (node.patched.length) {
-        fiber.patched.push(fiber);
-    }
-    return fiber;
+    };
 }
-function throwOnRender() {
-    throw new Error("Attempted to render cancelled fiber");
+/**
+ * Creates a forEach function that will delegate to forEach on the underlying
+ * collection while observing key changes, and keys as they're iterated over,
+ * and making the passed keys/values reactive.
+ *
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+function makeForEachObserver(target, callback) {
+    return function forEach(forEachCb, thisArg) {
+        observeTargetKey(target, KEYCHANGES, callback);
+        target.forEach(function (val, key, targetObj) {
+            observeTargetKey(target, key, callback);
+            forEachCb.call(thisArg, possiblyReactive(val, callback), possiblyReactive(key, callback), possiblyReactive(targetObj, callback));
+        }, thisArg);
+    };
 }
 /**
- * @returns number of not-yet rendered fibers cancelled
+ * Creates a function that will delegate to an underlying method, and check if
+ * that method has modified the presence or value of a key, and notify the
+ * reactives appropriately.
+ *
+ * @param setterName name of the method to delegate to
+ * @param getterName name of the method which should be used to retrieve the
+ *  value before calling the delegate method for comparison purposes
+ * @param target @see reactive
  */
-function cancelFibers(fibers) {
-    let result = 0;
-    for (let fiber of fibers) {
-        let node = fiber.node;
-        fiber.render = throwOnRender;
-        if (node.status === 0 /* NEW */) {
-            node.destroy();
-        }
-        node.fiber = null;
-        if (fiber.bdom) {
-            // if fiber has been rendered, this means that the component props have
-            // been updated. however, this fiber will not be patched to the dom, so
-            // it could happen that the next render compare the current props with
-            // the same props, and skip the render completely. With the next line,
-            // we kindly request the component code to force a render, so it works as
-            // expected.
-            node.forceNextRender = true;
+function delegateAndNotify(setterName, getterName, target) {
+    return (key, value) => {
+        key = toRaw(key);
+        const hadKey = target.has(key);
+        const originalValue = target[getterName](key);
+        const ret = target[setterName](key, value);
+        const hasKey = target.has(key);
+        if (hadKey !== hasKey) {
+            notifyReactives(target, KEYCHANGES);
         }
-        else {
-            result++;
+        if (originalValue !== value) {
+            notifyReactives(target, key);
         }
-        result += cancelFibers(fiber.children);
-    }
-    return result;
+        return ret;
+    };
 }
-class Fiber {
-    constructor(node, parent) {
-        this.bdom = null;
-        this.children = [];
-        this.appliedToDom = false;
-        this.deep = false;
-        this.childrenMap = {};
-        this.node = node;
-        this.parent = parent;
-        if (parent) {
-            this.deep = parent.deep;
-            const root = parent.root;
-            root.setCounter(root.counter + 1);
-            this.root = root;
-            parent.children.push(this);
-        }
-        else {
-            this.root = this;
-        }
-    }
-    render() {
-        // if some parent has a fiber => register in followup
-        let prev = this.root.node;
-        let scheduler = prev.app.scheduler;
-        let current = prev.parent;
-        while (current) {
-            if (current.fiber) {
-                let root = current.fiber.root;
-                if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
-                    current = root.node;
-                }
-                else {
-                    scheduler.delayedRenders.push(this);
-                    return;
-                }
-            }
-            prev = current;
-            current = current.parent;
-        }
-        // there are no current rendering from above => we can render
-        this._render();
-    }
-    _render() {
-        const node = this.node;
-        const root = this.root;
-        if (root) {
-            try {
-                this.bdom = true;
-                this.bdom = node.renderFn();
-            }
-            catch (e) {
-                handleError({ node, error: e });
-            }
-            root.setCounter(root.counter - 1);
+/**
+ * Creates a function that will clear the underlying collection and notify that
+ * the keys of the collection have changed.
+ *
+ * @param target @see reactive
+ */
+function makeClearNotifier(target) {
+    return () => {
+        const allKeys = [...target.keys()];
+        target.clear();
+        notifyReactives(target, KEYCHANGES);
+        for (const key of allKeys) {
+            notifyReactives(target, key);
         }
-    }
+    };
 }
-class RootFiber extends Fiber {
-    constructor() {
-        super(...arguments);
-        this.counter = 1;
-        // only add stuff in this if they have registered some hooks
-        this.willPatch = [];
-        this.patched = [];
-        this.mounted = [];
-        // A fiber is typically locked when it is completing and the patch has not, or is being applied.
-        // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
-        this.locked = false;
-    }
-    complete() {
-        const node = this.node;
-        this.locked = true;
-        let current = undefined;
-        try {
-            // Step 1: calling all willPatch lifecycle hooks
-            for (current of this.willPatch) {
-                // because of the asynchronous nature of the rendering, some parts of the
-                // UI may have been rendered, then deleted in a followup rendering, and we
-                // do not want to call onWillPatch in that case.
-                let node = current.node;
-                if (node.fiber === current) {
-                    const component = node.component;
-                    for (let cb of node.willPatch) {
-                        cb.call(component);
-                    }
-                }
-            }
-            current = undefined;
-            // Step 2: patching the dom
-            node._patch();
-            this.locked = false;
-            // Step 4: calling all mounted lifecycle hooks
-            let mountedFibers = this.mounted;
-            while ((current = mountedFibers.pop())) {
-                current = current;
-                if (current.appliedToDom) {
-                    for (let cb of current.node.mounted) {
-                        cb();
-                    }
-                }
+/**
+ * Maps raw type of an object to an object containing functions that can be used
+ * to build an appropritate proxy handler for that raw type. Eg: when making a
+ * reactive set, calling the has method should mark the key that is being
+ * retrieved as observed, and calling the add or delete method should notify the
+ * reactives that the key which is being added or deleted has been modified.
+ */
+const rawTypeToFuncHandlers = {
+    Set: (target, callback) => ({
+        has: makeKeyObserver("has", target, callback),
+        add: delegateAndNotify("add", "has", target),
+        delete: delegateAndNotify("delete", "has", target),
+        keys: makeIteratorObserver("keys", target, callback),
+        values: makeIteratorObserver("values", target, callback),
+        entries: makeIteratorObserver("entries", target, callback),
+        [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+        forEach: makeForEachObserver(target, callback),
+        clear: makeClearNotifier(target),
+        get size() {
+            observeTargetKey(target, KEYCHANGES, callback);
+            return target.size;
+        },
+    }),
+    Map: (target, callback) => ({
+        has: makeKeyObserver("has", target, callback),
+        get: makeKeyObserver("get", target, callback),
+        set: delegateAndNotify("set", "get", target),
+        delete: delegateAndNotify("delete", "has", target),
+        keys: makeIteratorObserver("keys", target, callback),
+        values: makeIteratorObserver("values", target, callback),
+        entries: makeIteratorObserver("entries", target, callback),
+        [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+        forEach: makeForEachObserver(target, callback),
+        clear: makeClearNotifier(target),
+        get size() {
+            observeTargetKey(target, KEYCHANGES, callback);
+            return target.size;
+        },
+    }),
+    WeakMap: (target, callback) => ({
+        has: makeKeyObserver("has", target, callback),
+        get: makeKeyObserver("get", target, callback),
+        set: delegateAndNotify("set", "get", target),
+        delete: delegateAndNotify("delete", "has", target),
+    }),
+};
+/**
+ * Creates a proxy handler for collections (Set/Map/WeakMap)
+ *
+ * @param callback @see reactive
+ * @param target @see reactive
+ * @returns a proxy handler object
+ */
+function collectionsProxyHandler(target, callback, targetRawType) {
+    // TODO: if performance is an issue we can create the special handlers lazily when each
+    // property is read.
+    const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
+    return Object.assign(basicProxyHandler(callback), {
+        get(target, key) {
+            if (key === TARGET) {
+                return target;
             }
-            // Step 5: calling all patched hooks
-            let patchedFibers = this.patched;
-            while ((current = patchedFibers.pop())) {
-                current = current;
-                if (current.appliedToDom) {
-                    for (let cb of current.node.patched) {
-                        cb();
-                    }
-                }
+            if (objectHasOwnProperty.call(specialHandlers, key)) {
+                return specialHandlers[key];
             }
+            observeTargetKey(target, key, callback);
+            return possiblyReactive(target[key], callback);
+        },
+    });
+}
+
+/**
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ */
+function batched(callback) {
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
         }
-        catch (e) {
-            this.locked = false;
-            handleError({ fiber: current || this, error: e });
-        }
+    };
+}
+function validateTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        throw new Error("Cannot mount component: the target is not a valid DOM element");
     }
-    setCounter(newValue) {
-        this.counter = newValue;
-        if (newValue === 0) {
-            this.node.app.scheduler.flush();
-        }
+    if (!document.body.contains(target)) {
+        throw new Error("Cannot mount a component on a detached dom node");
     }
 }
-class MountFiber extends RootFiber {
-    constructor(node, target, options = {}) {
-        super(node, null);
-        this.target = target;
-        this.position = options.position || "last-child";
+class EventBus extends EventTarget {
+    trigger(name, payload) {
+        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
     }
-    complete() {
-        let current = this;
-        try {
-            const node = this.node;
-            node.children = this.childrenMap;
-            node.app.constructor.validateTarget(this.target);
-            if (node.bdom) {
-                // this is a complicated situation: if we mount a fiber with an existing
-                // bdom, this means that this same fiber was already completed, mounted,
-                // but a crash occurred in some mounted hook. Then, it was handled and
-                // the new rendering is being applied.
-                node.updateDom();
-            }
-            else {
-                node.bdom = this.bdom;
-                if (this.position === "last-child" || this.target.childNodes.length === 0) {
-                    mount$1(node.bdom, this.target);
-                }
-                else {
-                    const firstChild = this.target.childNodes[0];
-                    mount$1(node.bdom, this.target, firstChild);
-                }
-            }
-            // unregistering the fiber before mounted since it can do another render
-            // and that the current rendering is obviously completed
-            node.fiber = null;
-            node.status = 1 /* MOUNTED */;
-            this.appliedToDom = true;
-            let mountedFibers = this.mounted;
-            while ((current = mountedFibers.pop())) {
-                if (current.appliedToDom) {
-                    for (let cb of current.node.mounted) {
-                        cb();
-                    }
-                }
-            }
+}
+function whenReady(fn) {
+    return new Promise(function (resolve) {
+        if (document.readyState !== "loading") {
+            resolve(true);
         }
-        catch (e) {
-            handleError({ fiber: current, error: e });
+        else {
+            document.addEventListener("DOMContentLoaded", resolve, false);
         }
+    }).then(fn || function () { });
+}
+async function loadFile(url) {
+    const result = await fetch(url);
+    if (!result.ok) {
+        throw new Error("Error while fetching xml templates");
     }
+    return await result.text();
+}
+/*
+ * This class just transports the fact that a string is safe
+ * to be injected as HTML. Overriding a JS primitive is quite painful though
+ * so we need to redfine toString and valueOf.
+ */
+class Markup extends String {
+}
+/*
+ * Marks a value as safe, that is, a value that can be injected as HTML directly.
+ * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
+ */
+function markup(value) {
+    return new Markup(value);
 }
 
 let currentNode = null;
@@ -2178,8 +2180,6 @@ function useComponent() {
 }
 /**
  * Apply default props (only top level).
- *
- * Note that this method does modify in place the props
  */
 function applyDefaultProps(props, defaultProps) {
     for (let propName in defaultProps) {
@@ -2213,61 +2213,6 @@ function useState(state) {
     }
     return reactive(state, render);
 }
-function arePropsDifferent(props1, props2) {
-    for (let k in props1) {
-        const prop1 = props1[k] && typeof props1[k] === "object" ? toRaw(props1[k]) : props1[k];
-        const prop2 = props2[k] && typeof props2[k] === "object" ? toRaw(props2[k]) : props2[k];
-        if (prop1 !== prop2) {
-            return true;
-        }
-    }
-    return Object.keys(props1).length !== Object.keys(props2).length;
-}
-function component(name, props, key, ctx, parent) {
-    let node = ctx.children[key];
-    let isDynamic = typeof name !== "string";
-    if (node && node.status === 2 /* DESTROYED */) {
-        node = undefined;
-    }
-    if (isDynamic && node && node.component.constructor !== name) {
-        node = undefined;
-    }
-    const parentFiber = ctx.fiber;
-    if (node) {
-        let shouldRender = node.forceNextRender;
-        if (shouldRender) {
-            node.forceNextRender = false;
-        }
-        else {
-            const currentProps = node.component.props;
-            shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
-        }
-        if (shouldRender) {
-            node.updateAndRender(props, parentFiber);
-        }
-    }
-    else {
-        // new component
-        let C;
-        if (isDynamic) {
-            C = name;
-        }
-        else {
-            C = parent.constructor.components[name];
-            if (!C) {
-                throw new Error(`Cannot find the definition of component "${name}"`);
-            }
-            else if (!(C.prototype instanceof Component)) {
-                throw new Error(`"${name}" is not a Component. It must inherit from the Component class`);
-            }
-        }
-        node = new ComponentNode(C, props, ctx.app, ctx, key);
-        ctx.children[key] = node;
-        node.initiateRender(new Fiber(node, parentFiber));
-    }
-    parentFiber.childrenMap[key] = node;
-    return node;
-}
 class ComponentNode {
     constructor(C, props, app, parent, parentKey) {
         this.fiber = null;
@@ -2286,9 +2231,11 @@ class ComponentNode {
         currentNode = this;
         this.app = app;
         this.parent = parent;
+        this.props = props;
         this.parentKey = parentKey;
         this.level = parent ? parent.level + 1 : 0;
         const defaultProps = C.defaultProps;
+        props = Object.assign({}, props);
         if (defaultProps) {
             applyDefaultProps(props, defaultProps);
         }
@@ -2401,6 +2348,8 @@ class ComponentNode {
         this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
+        const rawProps = props;
+        props = Object.assign({}, props);
         // update
         const fiber = makeChildFiber(this, parentFiber);
         this.fiber = fiber;
@@ -2423,6 +2372,7 @@ class ComponentNode {
             return;
         }
         component.props = props;
+        this.props = rawProps;
         fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
@@ -2485,10 +2435,15 @@ class ComponentNode {
         }
     }
     _patch() {
-        const hasChildren = Object.keys(this.children).length > 0;
-        this.children = this.fiber.childrenMap;
-        this.bdom.patch(this.fiber.bdom, hasChildren);
-        this.fiber.appliedToDom = true;
+        let hasChildren = false;
+        for (let _k in this.children) {
+            hasChildren = true;
+            break;
+        }
+        const fiber = this.fiber;
+        this.children = fiber.childrenMap;
+        this.bdom.patch(fiber.bdom, hasChildren);
+        fiber.appliedToDom = true;
         this.fiber = null;
     }
     beforeRemove() {
@@ -2616,6 +2571,19 @@ function onError(callback) {
     handlers.push(callback.bind(node.component));
 }
 
+class Component {
+    constructor(props, env, node) {
+        this.props = props;
+        this.env = env;
+        this.__owl__ = node;
+    }
+    setup() { }
+    render(deep = false) {
+        this.__owl__.render(deep === true);
+    }
+}
+Component.template = "";
+
 const VText = text("").constructor;
 class VPortal extends VText {
     constructor(selector, realBDom) {
@@ -2694,6 +2662,7 @@ Portal.props = {
 // -----------------------------------------------------------------------------
 const isUnionType = (t) => Array.isArray(t);
 const isBaseType = (t) => typeof t !== "object";
+const isValueType = (t) => typeof t === "object" && t && "value" in t;
 function isOptional(t) {
     return typeof t === "object" && "optional" in t ? t.optional || false : false;
 }
@@ -2707,6 +2676,9 @@ function describe(info) {
     else if (isUnionType(info)) {
         return info.map(describe).join(" or ");
     }
+    else if (isValueType(info)) {
+        return String(info.value);
+    }
     if ("element" in info) {
         return `list of ${describe({ type: info.element, optional: false })}s`;
     }
@@ -2792,6 +2764,9 @@ function validateType(key, value, descr) {
     else if (isBaseType(descr)) {
         return validateBaseType(key, value, descr);
     }
+    else if (isValueType(descr)) {
+        return value === descr.value ? null : `'${key}' is not equal to '${descr.value}'`;
+    }
     else if (isUnionType(descr)) {
         let validDescr = descr.find((p) => !validateType(key, value, p));
         return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
@@ -2820,6 +2795,7 @@ function validateType(key, value, descr) {
     return result;
 }
 
+const ObjectCreate = Object.create;
 /**
  * This file contains utility functions that will be injected in each template,
  * to perform various useful tasks in the compiled code.
@@ -2831,7 +2807,7 @@ function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
     key = key + "__slot_" + name;
     const slots = ctx.props.slots || {};
     const { __render, __ctx, __scope } = slots[name] || {};
-    const slotScope = Object.create(__ctx || {});
+    const slotScope = ObjectCreate(__ctx || {});
     if (__scope) {
         slotScope[__scope] = extra;
     }
@@ -2851,7 +2827,7 @@ function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
 }
 function capture(ctx) {
     const component = ctx.__owl__.component;
-    const result = Object.create(component);
+    const result = ObjectCreate(component);
     for (let k in ctx) {
         result[k] = ctx[k];
     }
@@ -2904,13 +2880,14 @@ function shallowEqual(l1, l2) {
     return true;
 }
 class LazyValue {
-    constructor(fn, ctx, node) {
+    constructor(fn, ctx, component, node) {
         this.fn = fn;
         this.ctx = capture(ctx);
+        this.component = component;
         this.node = node;
     }
     evaluate() {
-        return this.fn(this.ctx, this.node);
+        return this.fn.call(this.component, this.ctx, this.node);
     }
     toString() {
         return this.evaluate().toString();
@@ -2919,43 +2896,56 @@ class LazyValue {
 /*
  * Safely outputs `value` as a block depending on the nature of `value`
  */
-function safeOutput(value) {
-    if (!value) {
-        return value;
+function safeOutput(value, defaultValue) {
+    if (value === undefined) {
+        return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
     }
     let safeKey;
     let block;
-    if (value instanceof Markup) {
-        safeKey = `string_safe`;
-        block = html(value);
-    }
-    else if (value instanceof LazyValue) {
-        safeKey = `lazy_value`;
-        block = value.evaluate();
-    }
-    else if (value instanceof String || typeof value === "string") {
-        safeKey = "string_unsafe";
-        block = text(value);
-    }
-    else {
-        // Assuming it is a block
-        safeKey = "block_safe";
-        block = value;
+    switch (typeof value) {
+        case "object":
+            if (value instanceof Markup) {
+                safeKey = `string_safe`;
+                block = html(value);
+            }
+            else if (value instanceof LazyValue) {
+                safeKey = `lazy_value`;
+                block = value.evaluate();
+            }
+            else if (value instanceof String) {
+                safeKey = "string_unsafe";
+                block = text(value);
+            }
+            else {
+                // Assuming it is a block
+                safeKey = "block_safe";
+                block = value;
+            }
+            break;
+        case "string":
+            safeKey = "string_unsafe";
+            block = text(value);
+            break;
+        default:
+            safeKey = "string_unsafe";
+            block = text(String(value));
     }
     return toggler(safeKey, block);
 }
 let boundFunctions = new WeakMap();
+const WeakMapGet = WeakMap.prototype.get;
+const WeakMapSet = WeakMap.prototype.set;
 function bind(ctx, fn) {
     let component = ctx.__owl__.component;
-    let boundFnMap = boundFunctions.get(component);
+    let boundFnMap = WeakMapGet.call(boundFunctions, component);
     if (!boundFnMap) {
         boundFnMap = new WeakMap();
-        boundFunctions.set(component, boundFnMap);
+        WeakMapSet.call(boundFunctions, component, boundFnMap);
     }
-    let boundFn = boundFnMap.get(fn);
+    let boundFn = WeakMapGet.call(boundFnMap, fn);
     if (!boundFn) {
         boundFn = fn.bind(component);
-        boundFnMap.set(fn, boundFn);
+        WeakMapSet.call(boundFnMap, fn, boundFn);
     }
     return boundFn;
 }
@@ -3031,7 +3021,7 @@ const helpers = {
     markRaw,
 };
 
-const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+const bdom = { text, createBlock, list, multi, html, toggler, comment };
 function parseXML$1(xml) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(xml, "text/xml");
@@ -3194,7 +3184,7 @@ const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
 });
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof. Currently we don't support delete and void
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ".split(",");
+const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
 let tokenizeString = function (expr) {
     let s = expr[0];
     let start = s;
@@ -3442,15 +3432,17 @@ function compileExpr(expr) {
         .map((t) => paddedValues.get(t.value) || t.value)
         .join("");
 }
-const INTERP_REGEXP = /\{\{.*?\}\}/g;
-const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
-function interpolate(s) {
+const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
+function replaceDynamicParts(s, replacer) {
     let matches = s.match(INTERP_REGEXP);
     if (matches && matches[0].length === s.length) {
-        return `(${compileExpr(s.slice(2, -2))})`;
+        return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
     }
-    let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+    let r = s.replace(INTERP_REGEXP, (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}");
     return "`" + r + "`";
+}
+function interpolate(s) {
+    return replaceDynamicParts(s, compileExpr);
 }
 
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
@@ -3625,9 +3617,7 @@ class CodeGenerator {
             tKeyExpr: null,
         });
         // define blocks and utility functions
-        let mainCode = [
-            `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
-        ];
+        let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
         if (this.helpers.size) {
             mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
         }
@@ -3643,6 +3633,7 @@ class CodeGenerator {
             for (let block of this.blocks) {
                 if (block.dom) {
                     let xmlString = block.asXmlString();
+                    xmlString = xmlString.replace(/`/g, "\\`");
                     if (block.dynamicTagName) {
                         xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
                         xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -3950,8 +3941,8 @@ class CodeGenerator {
             this.target.hasRef = true;
             const isDynamic = INTERP_REGEXP.test(ast.ref);
             if (isDynamic) {
-                const str = ast.ref.replace(INTERP_REGEXP, (expr) => "${" + this.captureExpression(expr.slice(2, -2), true) + "}");
-                const idx = block.insertData(`(el) => refs[\`${str}\`] = el`, "ref");
+                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 {
@@ -4080,16 +4071,24 @@ class CodeGenerator {
             this.insertAnchor(block);
         }
         block = this.createBlock(block, "html", ctx);
-        this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
-        let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
-        if (ast.body) {
-            const nextId = BlockDescription.nextBlockId;
+        let blockStr;
+        if (ast.expr === "0") {
+            this.helpers.add("zero");
+            blockStr = `ctx[zero]`;
+        }
+        else if (ast.body) {
+            let bodyValue = null;
+            bodyValue = BlockDescription.nextBlockId;
             const subCtx = createContext(ctx);
             this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
-            this.helpers.add("withDefault");
-            expr = `withDefault(${expr}, b${nextId})`;
+            this.helpers.add("safeOutput");
+            blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
+        }
+        else {
+            this.helpers.add("safeOutput");
+            blockStr = `safeOutput(${compileExpr(ast.expr)})`;
         }
-        this.insertBlock(`${expr}`, block, ctx);
+        this.insertBlock(blockStr, block, ctx);
     }
     compileTIf(ast, ctx, nextNode) {
         let { block, forceNewBlock, index } = ctx;
@@ -4282,16 +4281,21 @@ class CodeGenerator {
     }
     compileTCall(ast, ctx) {
         let { block, forceNewBlock } = ctx;
+        let ctxVar = ctx.ctxVar || "ctx";
+        if (ast.context) {
+            ctxVar = generateId("ctx");
+            this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+        }
         if (ast.body) {
-            this.addLine(`ctx = Object.create(ctx);`);
-            this.addLine(`ctx[isBoundary] = 1;`);
+            this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+            this.addLine(`${ctxVar}[isBoundary] = 1;`);
             this.helpers.add("isBoundary");
             const nextId = BlockDescription.nextBlockId;
-            const subCtx = createContext(ctx, { preventRoot: true });
+            const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
             this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
             if (nextId !== BlockDescription.nextBlockId) {
                 this.helpers.add("zero");
-                this.addLine(`ctx[zero] = b${nextId};`);
+                this.addLine(`${ctxVar}[zero] = b${nextId};`);
             }
         }
         const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -4309,7 +4313,7 @@ class CodeGenerator {
             }
             this.define(templateVar, subTemplate);
             block = this.createBlock(block, "multi", ctx);
-            this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block, {
+            this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block, {
                 ...ctx,
                 forceNewBlock: !block,
             });
@@ -4318,13 +4322,13 @@ class CodeGenerator {
             const id = generateId(`callTemplate_`);
             this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
             block = this.createBlock(block, "multi", ctx);
-            this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block, {
+            this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block, {
                 ...ctx,
                 forceNewBlock: !block,
             });
         }
         if (ast.body && !ctx.isLast) {
-            this.addLine(`ctx = ctx.__proto__;`);
+            this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
         }
     }
     compileTCallBlock(ast, ctx) {
@@ -4345,7 +4349,7 @@ class CodeGenerator {
             this.helpers.add("LazyValue");
             const bodyAst = { type: 3 /* Multi */, content: ast.body };
             const name = this.compileInNewTarget("value", bodyAst, ctx);
-            let value = `new LazyValue(${name}, ctx, node)`;
+            let value = `new LazyValue(${name}, ctx, this, node)`;
             value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
             this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
         }
@@ -4363,7 +4367,7 @@ class CodeGenerator {
                 value = expr;
             }
             this.helpers.add("setContextValue");
-            this.addLine(`setContextValue(ctx, "${ast.name}", ${value});`);
+            this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
         }
     }
     generateComponentKey() {
@@ -4401,21 +4405,20 @@ class CodeGenerator {
         return `${name}: ${value || undefined}`;
     }
     formatPropObject(obj) {
-        const params = [];
-        for (const [n, v] of Object.entries(obj)) {
-            params.push(this.formatProp(n, v));
+        return Object.entries(obj).map(([k, v]) => this.formatProp(k, v));
+    }
+    getPropString(props, dynProps) {
+        let propString = `{${props.join(",")}}`;
+        if (dynProps) {
+            propString = `Object.assign({}, ${compileExpr(dynProps)}${props.length ? ", " + propString : ""})`;
         }
-        return params.join(", ");
+        return propString;
     }
     compileComponent(ast, ctx) {
         let { block } = ctx;
         // props
         const hasSlotsProp = "slots" in (ast.props || {});
-        const props = [];
-        const propExpr = this.formatPropObject(ast.props || {});
-        if (propExpr) {
-            props.push(propExpr);
-        }
+        const props = ast.props ? this.formatPropObject(ast.props) : [];
         // slots
         let slotDef = "";
         if (ast.slots) {
@@ -4438,7 +4441,7 @@ class CodeGenerator {
                     params.push(`__scope: "${scope}"`);
                 }
                 if (ast.slots[slotName].attrs) {
-                    params.push(this.formatPropObject(ast.slots[slotName].attrs));
+                    params.push(...this.formatPropObject(ast.slots[slotName].attrs));
                 }
                 const slotInfo = `{${params.join(", ")}}`;
                 slotStr.push(`'${slotName}': ${slotInfo}`);
@@ -4449,11 +4452,7 @@ class CodeGenerator {
             this.helpers.add("markRaw");
             props.push(`slots: markRaw(${slotDef})`);
         }
-        const propStr = `{${props.join(",")}}`;
-        let propString = propStr;
-        if (ast.dynamicProps) {
-            propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${props.length ? ", " + propStr : ""})`;
-        }
+        let propString = this.getPropString(props, ast.dynamicProps);
         let propVar;
         if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
             propVar = generateId("props");
@@ -4485,8 +4484,12 @@ class CodeGenerator {
         if (ctx.tKeyExpr) {
             keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
         }
-        const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
-        let blockExpr = `component(${blockArgs})`;
+        let id = generateId("comp");
+        this.staticDefs.push({
+            id,
+            expr: `app.createComponent(${ast.isDynamic ? null : expr}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${!ast.props && !ast.dynamicProps})`,
+        });
+        let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
         if (ast.isDynamic) {
             blockExpr = `toggler(${expr}, ${blockExpr})`;
         }
@@ -4525,7 +4528,12 @@ class CodeGenerator {
         else {
             slotName = "'" + ast.name + "'";
         }
-        const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
+        const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
+        if (ast.attrs) {
+            delete ast.attrs["t-props"];
+        }
+        const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
+        const scope = this.getPropString(props, dynProps);
         if (ast.defaultContent) {
             const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
             blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
@@ -4566,10 +4574,15 @@ class CodeGenerator {
         if (this.target.loopLevel || !this.hasSafeContext) {
             ctxStr = generateId("ctx");
             this.helpers.add("capture");
-            this.define(ctxStr, `capture(ctx);`);
+            this.define(ctxStr, `capture(ctx)`);
         }
+        let id = generateId("comp");
+        this.staticDefs.push({
+            id,
+            expr: `app.createComponent(null, false, true, false, false)`,
+        });
         const target = compileExpr(ast.target);
-        const blockString = `component(Portal, {target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
+        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
         if (block) {
             this.insertAnchor(block);
         }
@@ -4909,10 +4922,12 @@ function parseTCall(node, ctx) {
         return null;
     }
     const subTemplate = node.getAttribute("t-call");
+    const context = node.getAttribute("t-call-context");
     node.removeAttribute("t-call");
+    node.removeAttribute("t-call-context");
     if (node.tagName !== "t") {
         const ast = parseNode(node, ctx);
-        const tcall = { type: 7 /* TCall */, name: subTemplate, body: null };
+        const tcall = { type: 7 /* TCall */, name: subTemplate, body: null, context };
         if (ast && ast.type === 2 /* DomNode */) {
             ast.content = [tcall];
             return ast;
@@ -4929,6 +4944,7 @@ function parseTCall(node, ctx) {
         type: 7 /* TCall */,
         name: subTemplate,
         body: body.length ? body : null,
+        context,
     };
 }
 // -----------------------------------------------------------------------------
@@ -5512,6 +5528,55 @@ class App extends TemplateSet {
             this.root.destroy();
         }
     }
+    createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, hasNoProp) {
+        const isDynamic = !isStatic;
+        function _arePropsDifferent(props1, props2) {
+            for (let k in props1) {
+                if (props1[k] !== props2[k]) {
+                    return true;
+                }
+            }
+            return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
+        }
+        const arePropsDifferent = hasSlotsProp
+            ? (_1, _2) => true
+            : hasNoProp
+                ? (_1, _2) => false
+                : _arePropsDifferent;
+        const updateAndRender = ComponentNode.prototype.updateAndRender;
+        const initiateRender = ComponentNode.prototype.initiateRender;
+        return (props, key, ctx, parent, C) => {
+            let children = ctx.children;
+            let node = children[key];
+            if (isDynamic && node && node.component.constructor !== C) {
+                node = undefined;
+            }
+            const parentFiber = ctx.fiber;
+            if (node) {
+                if (arePropsDifferent(node.props, props) || parentFiber.deep || node.forceNextRender) {
+                    node.forceNextRender = false;
+                    updateAndRender.call(node, props, parentFiber);
+                }
+            }
+            else {
+                // new component
+                if (isStatic) {
+                    C = parent.constructor.components[name];
+                    if (!C) {
+                        throw new Error(`Cannot find the definition of component "${name}"`);
+                    }
+                    else if (!(C.prototype instanceof Component)) {
+                        throw new Error(`"${name}" is not a Component. It must inherit from the Component class`);
+                    }
+                }
+                node = new ComponentNode(C, props, this, ctx, key);
+                children[key] = node;
+                initiateRender.call(node, new Fiber(node, parentFiber));
+            }
+            parentFiber.childrenMap[key] = node;
+            return node;
+        };
+    }
 }
 App.validateTarget = validateTarget;
 async function mount(C, target, config = {}) {
@@ -5692,7 +5757,7 @@ exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.version = '2.0.0-beta-8';
-__info__.date = '2022-05-31T12:25:19.319Z';
-__info__.hash = 'b56a9c2';
+__info__.version = '2.0.0-beta-11';
+__info__.date = '2022-06-28T13:28:26.775Z';
+__info__.hash = '76c389a';
 __info__.url = 'https://github.com/odoo/owl';