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

package/dist/owl.iife.js

@@ -170,6 +170,10 @@
                 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;
@@ -1290,29 +1294,35 @@
     }
 
     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;
@@ -1323,18 +1333,21 @@
                             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() {
@@ -1342,9 +1355,10 @@
             }
             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();
@@ -1371,798 +1385,786 @@
         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;
@@ -2177,8 +2179,6 @@
     }
     /**
      * 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) {
@@ -2212,61 +2212,6 @@
         }
         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;
@@ -2285,9 +2230,11 @@
             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);
             }
@@ -2400,6 +2347,8 @@
             this.status = 2 /* DESTROYED */;
         }
         async updateAndRender(props, parentFiber) {
+            const rawProps = props;
+            props = Object.assign({}, props);
             // update
             const fiber = makeChildFiber(this, parentFiber);
             this.fiber = fiber;
@@ -2422,6 +2371,7 @@
                 return;
             }
             component.props = props;
+            this.props = rawProps;
             fiber.render();
             const parentRoot = parentFiber.root;
             if (this.willPatch.length) {
@@ -2484,10 +2434,15 @@
             }
         }
         _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() {
@@ -2615,6 +2570,19 @@
         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) {
@@ -2693,6 +2661,7 @@
     // -----------------------------------------------------------------------------
     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;
     }
@@ -2706,6 +2675,9 @@
         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`;
         }
@@ -2791,6 +2763,9 @@
         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)}`;
@@ -2819,6 +2794,7 @@
         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.
@@ -2830,7 +2806,7 @@
         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;
         }
@@ -2850,7 +2826,7 @@
     }
     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];
         }
@@ -2903,13 +2879,14 @@
         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();
@@ -2918,43 +2895,56 @@
     /*
      * 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;
     }
@@ -3030,7 +3020,7 @@
         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");
@@ -3193,7 +3183,7 @@
     });
     // 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;
@@ -3441,15 +3431,17 @@
             .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
@@ -3624,9 +3616,7 @@
                 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;`);
             }
@@ -3642,6 +3632,7 @@
                 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}'}>`);
@@ -3949,8 +3940,8 @@
                 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 {
@@ -4079,16 +4070,24 @@
                 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;
@@ -4281,16 +4280,21 @@
         }
         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);
@@ -4308,7 +4312,7 @@
                 }
                 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,
                 });
@@ -4317,13 +4321,13 @@
                 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) {
@@ -4344,7 +4348,7 @@
                 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};`);
             }
@@ -4362,7 +4366,7 @@
                     value = expr;
                 }
                 this.helpers.add("setContextValue");
-                this.addLine(`setContextValue(ctx, "${ast.name}", ${value});`);
+                this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
             }
         }
         generateComponentKey() {
@@ -4400,21 +4404,20 @@
             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) {
@@ -4437,7 +4440,7 @@
                         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}`);
@@ -4448,11 +4451,7 @@
                 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");
@@ -4484,8 +4483,12 @@
             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})`;
             }
@@ -4524,7 +4527,12 @@
             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})`;
@@ -4565,10 +4573,15 @@
             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);
             }
@@ -4908,10 +4921,12 @@
             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;
@@ -4928,6 +4943,7 @@
             type: 7 /* TCall */,
             name: subTemplate,
             body: body.length ? body : null,
+            context,
         };
     }
     // -----------------------------------------------------------------------------
@@ -5511,6 +5527,55 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
                 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 = {}) {
@@ -5693,9 +5758,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __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';