@odoo/owl 2.0.0-alpha.2 → 2.0.0-beta-5

package/dist/owl.iife.js

@@ -212,7 +212,8 @@
     }
     function makePropSetter(name) {
         return function setProp(value) {
-            this[name] = value;
+            // support 0, fallback to empty string for other falsy values
+            this[name] = value === 0 ? 0 : value || "";
         };
     }
     function isProp(tag, key) {
@@ -266,10 +267,14 @@
             this[eventKey] = data;
             this.addEventListener(evName, listener, { capture });
         }
+        function remove() {
+            delete this[eventKey];
+            this.removeEventListener(evName, listener, { capture });
+        }
         function update(data) {
             this[eventKey] = data;
         }
-        return { setup, update };
+        return { setup, update, remove };
     }
     // Synthetic handler: a form of event delegation that allows placing only one
     // listener per event type.
@@ -286,7 +291,10 @@
             _data[currentId] = data;
             this[eventKey] = _data;
         }
-        return { setup, update: setup };
+        function remove() {
+            delete this[eventKey];
+        }
+        return { setup, update: setup, remove };
     }
     function nativeToSyntheticEvent(eventKey, event) {
         let dom = event.target;
@@ -511,7 +519,7 @@
     const characterDataSetData = getDescriptor$1(characterDataProto, "data").set;
     const nodeGetFirstChild = getDescriptor$1(nodeProto$2, "firstChild").get;
     const nodeGetNextSibling = getDescriptor$1(nodeProto$2, "nextSibling").get;
-    const NO_OP$1 = () => { };
+    const NO_OP = () => { };
     const cache$1 = {};
     /**
      * Compiling blocks is a multi-step process:
@@ -815,7 +823,7 @@
                         idx: info.idx,
                         refIdx: info.refIdx,
                         setData: makeRefSetter(index, ctx.refList),
-                        updateData: NO_OP$1,
+                        updateData: NO_OP,
                     });
             }
         }
@@ -1281,6 +1289,75 @@
         return new VHtml(str);
     }
 
+    function createCatcher(eventsSpec) {
+        let setupFns = [];
+        let removeFns = [];
+        for (let name in eventsSpec) {
+            let index = eventsSpec[name];
+            let { setup, remove } = createEventHandler(name);
+            setupFns[index] = setup;
+            removeFns[index] = remove;
+        }
+        let n = setupFns.length;
+        class VCatcher {
+            constructor(child, handlers) {
+                this.afterNode = null;
+                this.child = child;
+                this.handlers = handlers;
+            }
+            mount(parent, afterNode) {
+                this.parentEl = parent;
+                this.afterNode = afterNode;
+                this.child.mount(parent, afterNode);
+                for (let i = 0; i < n; i++) {
+                    let origFn = this.handlers[i][0];
+                    const self = this;
+                    this.handlers[i][0] = function (ev) {
+                        const target = ev.target;
+                        let currentNode = self.child.firstNode();
+                        const afterNode = self.afterNode;
+                        while (currentNode !== afterNode) {
+                            if (currentNode.contains(target)) {
+                                return origFn.call(this, ev);
+                            }
+                            currentNode = currentNode.nextSibling;
+                        }
+                    };
+                    setupFns[i].call(parent, this.handlers[i]);
+                }
+            }
+            moveBefore(other, afterNode) {
+                this.afterNode = null;
+                this.child.moveBefore(other ? other.child : null, afterNode);
+            }
+            patch(other, withBeforeRemove) {
+                if (this === other) {
+                    return;
+                }
+                this.handlers = other.handlers;
+                this.child.patch(other.child, withBeforeRemove);
+            }
+            beforeRemove() {
+                this.child.beforeRemove();
+            }
+            remove() {
+                for (let i = 0; i < n; i++) {
+                    removeFns[i].call(this.parentEl);
+                }
+                this.child.remove();
+            }
+            firstNode() {
+                return this.child.firstNode();
+            }
+            toString() {
+                return this.child.toString();
+            }
+        }
+        return function (child, handlers) {
+            return new VCatcher(child, handlers);
+        };
+    }
+
     function mount$1(vnode, fixture, afterNode = null) {
         vnode.mount(fixture, afterNode);
     }
@@ -1294,143 +1371,464 @@
         vnode.remove();
     }
 
+    const mainEventHandler = (data, ev, currentTarget) => {
+        const { data: _data, modifiers } = filterOutModifiersFromData(data);
+        data = _data;
+        let stopped = false;
+        if (modifiers.length) {
+            let selfMode = false;
+            const isSelf = ev.target === currentTarget;
+            for (const mod of modifiers) {
+                switch (mod) {
+                    case "self":
+                        selfMode = true;
+                        if (isSelf) {
+                            continue;
+                        }
+                        else {
+                            return stopped;
+                        }
+                    case "prevent":
+                        if ((selfMode && isSelf) || !selfMode)
+                            ev.preventDefault();
+                        continue;
+                    case "stop":
+                        if ((selfMode && isSelf) || !selfMode)
+                            ev.stopPropagation();
+                        stopped = true;
+                        continue;
+                }
+            }
+        }
+        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
+        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
+        // as expected when there is a handler expression that evaluates to a falsy value
+        if (Object.hasOwnProperty.call(data, 0)) {
+            const handler = data[0];
+            if (typeof handler !== "function") {
+                throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
+            }
+            let node = data[1] ? data[1].__owl__ : null;
+            if (node ? node.status === 1 /* MOUNTED */ : true) {
+                handler.call(node ? node.component : null, ev);
+            }
+        }
+        return stopped;
+    };
+
+    // 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"]);
     /**
-     * Apply default props (only top level).
+     * 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
      *
-     * Note that this method does modify in place the props
+     * @param obj the object to check
+     * @returns the raw type of the object
      */
-    function applyDefaultProps(props, ComponentClass) {
-        const defaultProps = ComponentClass.defaultProps;
-        if (defaultProps) {
-            for (let propName in defaultProps) {
-                if (props[propName] === undefined) {
-                    props[propName] = defaultProps[propName];
-                }
-            }
+    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") {
+            return false;
         }
+        return SUPPORTED_RAW_TYPES.has(rawType(value));
     }
-    //------------------------------------------------------------------------------
-    // Prop validation helper
-    //------------------------------------------------------------------------------
-    function getPropDescription(staticProps) {
-        if (staticProps instanceof Array) {
-            return Object.fromEntries(staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true])));
+    /**
+     * 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());
         }
-        return staticProps || { "*": true };
+        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);
     }
     /**
-     * Validate the component props (or next props) against the (static) props
-     * description.  This is potentially an expensive operation: it may needs to
-     * visit recursively the props and all the children to check if they are valid.
-     * This is why it is only done in 'dev' mode.
+     * 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 validateProps(name, props, parent) {
-        const ComponentClass = typeof name !== "string"
-            ? name
-            : parent.constructor.components[name];
-        if (!ComponentClass) {
-            // this is an error, wrong component. We silently return here instead so the
-            // error is triggered by the usual path ('component' function)
+    function notifyReactives(target, key) {
+        const keyToCallbacks = targetToKeysToCallbacks.get(target);
+        if (!keyToCallbacks) {
             return;
         }
-        applyDefaultProps(props, ComponentClass);
-        const defaultProps = ComponentClass.defaultProps || {};
-        let propsDef = getPropDescription(ComponentClass.props);
-        const allowAdditionalProps = "*" in propsDef;
-        for (let propName in propsDef) {
-            if (propName === "*") {
-                continue;
-            }
-            const propDef = propsDef[propName];
-            let isMandatory = !!propDef;
-            if (typeof propDef === "object" && "optional" in propDef) {
-                isMandatory = !propDef.optional;
-            }
-            if (isMandatory && propName in defaultProps) {
-                throw new Error(`A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`);
-            }
-            if (props[propName] === undefined) {
-                if (isMandatory) {
-                    throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
-                }
-                else {
-                    continue;
-                }
-            }
-            let isValid;
-            try {
-                isValid = isValidProp(props[propName], propDef);
-            }
-            catch (e) {
-                e.message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${e.message})`;
-                throw e;
-            }
-            if (!isValid) {
-                throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
-            }
+        const callbacks = keyToCallbacks.get(key);
+        if (!callbacks) {
+            return;
         }
-        if (!allowAdditionalProps) {
-            for (let propName in props) {
-                if (!(propName in propsDef)) {
-                    throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
-                }
-            }
+        // Loop on copy because clearReactivesForCallback will modify the set in place
+        for (const callback of [...callbacks]) {
+            clearReactivesForCallback(callback);
+            callback();
         }
     }
+    const callbacksToTargets = new WeakMap();
     /**
-     * Check if an invidual prop value matches its (static) prop definition
+     * Clears all subscriptions of the Reactives associated with a given callback.
+     *
+     * @param callback the callback for which the reactives need to be cleared
      */
-    function isValidProp(prop, propDef) {
-        if (propDef === true) {
-            return true;
+    function clearReactivesForCallback(callback) {
+        const targetsToClear = callbacksToTargets.get(callback);
+        if (!targetsToClear) {
+            return;
         }
-        if (typeof propDef === "function") {
-            // Check if a value is constructed by some Constructor.  Note that there is a
-            // slight abuse of language: we want to consider primitive values as well.
-            //
-            // So, even though 1 is not an instance of Number, we want to consider that
-            // it is valid.
-            if (typeof prop === "object") {
-                return prop instanceof propDef;
+        for (const target of targetsToClear) {
+            const observedKeys = targetToKeysToCallbacks.get(target);
+            if (!observedKeys) {
+                continue;
             }
-            return typeof prop === propDef.name.toLowerCase();
-        }
-        else if (propDef instanceof Array) {
-            // If this code is executed, this means that we want to check if a prop
-            // matches at least one of its descriptor.
-            let result = false;
-            for (let i = 0, iLen = propDef.length; i < iLen; i++) {
-                result = result || isValidProp(prop, propDef[i]);
+            for (const callbacks of observedKeys.values()) {
+                callbacks.delete(callback);
             }
-            return result;
         }
-        // propsDef is an object
-        if (propDef.optional && prop === undefined) {
-            return true;
+        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()] : [],
+            };
+        });
+    }
+    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`);
         }
-        let result = propDef.type ? isValidProp(prop, propDef.type) : true;
-        if (propDef.validate) {
-            result = result && propDef.validate(prop);
+        if (SKIP in target) {
+            return target;
         }
-        if (propDef.type === Array && propDef.element) {
-            for (let i = 0, iLen = prop.length; i < iLen; i++) {
-                result = result && isValidProp(prop[i], propDef.element);
-            }
+        const originalTarget = target[TARGET];
+        if (originalTarget) {
+            return reactive(originalTarget, callback);
         }
-        if (propDef.type === Object && propDef.shape) {
-            const shape = propDef.shape;
-            for (let key in shape) {
-                result = result && isValidProp(prop[key], shape[key]);
-            }
-            if (result) {
-                for (let propName in prop) {
-                    if (!(propName in shape)) {
-                        throw new Error(`unknown prop '${propName}'`);
-                    }
+        if (!reactiveCache.has(target)) {
+            reactiveCache.set(target, new Map());
+        }
+        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 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);
+                }
+                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);
+            },
+        };
+    }
+    /**
+     * 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 result;
+        };
+    }
+    /**
+     * 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);
+        };
+    }
+    /**
+     * 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 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;
+        };
+    }
+    /**
+     * 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);
+            }
+        };
+    }
+    /**
+     * 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);
+            },
+        });
     }
 
     /**
@@ -1448,11 +1846,13 @@
             await Promise.resolve();
             if (!called) {
                 called = true;
-                callback();
                 // 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
-                await Promise.resolve();
-                called = false;
+                // 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();
             }
         };
     }
@@ -1499,327 +1899,135 @@
      */
     function markup(value) {
         return new Markup(value);
-    }
-
-    /**
-     * This file contains utility functions that will be injected in each template,
-     * to perform various useful tasks in the compiled code.
-     */
-    function withDefault(value, defaultValue) {
-        return value === undefined || value === null || value === false ? defaultValue : value;
     }
-    function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
-        key = key + "__slot_" + name;
-        const slots = (ctx.props && ctx.props.slots) || {};
-        const { __render, __ctx, __scope } = slots[name] || {};
-        const slotScope = Object.create(__ctx || {});
-        if (__scope) {
-            slotScope[__scope] = extra || {};
+    // -----------------------------------------------------------------------------
+    //  xml tag helper
+    // -----------------------------------------------------------------------------
+    const globalTemplates = {};
+    function xml(...args) {
+        const name = `__template__${xml.nextId++}`;
+        const value = String.raw(...args);
+        globalTemplates[name] = value;
+        return name;
+    }
+    xml.nextId = 1;
+
+    // Maps fibers to thrown errors
+    const fibersInError = new WeakMap();
+    const nodeErrorHandlers = new WeakMap();
+    function _handleError(node, error) {
+        if (!node) {
+            return false;
         }
-        const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
-        if (defaultContent) {
-            let child1 = undefined;
-            let child2 = undefined;
-            if (slotBDom) {
-                child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+        const fiber = node.fiber;
+        if (fiber) {
+            fibersInError.set(fiber, error);
+        }
+        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;
+                }
             }
-            else {
-                child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+            if (handled) {
+                return true;
             }
-            return multi([child1, child2]);
         }
-        return slotBDom || text("");
+        return _handleError(node.parent, error);
     }
-    function capture(ctx) {
-        const component = ctx.__owl__.component;
-        const result = Object.create(component);
-        for (let k in ctx) {
-            result[k] = ctx[k];
+    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);
+            }
         }
-        return result;
-    }
-    function withKey(elem, k) {
-        elem.key = k;
-        return elem;
+    }
+
+    function makeChildFiber(node, parent) {
+        let current = node.fiber;
+        if (current) {
+            cancelFibers(current.children);
+            current.root = null;
+        }
+        return new Fiber(node, parent);
     }
-    function prepareList(collection) {
-        let keys;
-        let values;
-        if (Array.isArray(collection)) {
-            keys = collection;
-            values = collection;
+    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;
         }
-        else if (collection) {
-            values = Object.keys(collection);
-            keys = Object.values(collection);
+        const fiber = new RootFiber(node, null);
+        if (node.willPatch.length) {
+            fiber.willPatch.push(fiber);
         }
-        else {
-            throw new Error("Invalid loop expression");
+        if (node.patched.length) {
+            fiber.patched.push(fiber);
         }
-        const n = values.length;
-        return [keys, values, n, new Array(n)];
-    }
-    const isBoundary = Symbol("isBoundary");
-    function setContextValue(ctx, key, value) {
-        const ctx0 = ctx;
-        while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
-            const newCtx = ctx.__proto__;
-            if (!newCtx) {
-                ctx = ctx0;
-                break;
-            }
-            ctx = newCtx;
-        }
-        ctx[key] = value;
-    }
-    function toNumber(val) {
-        const n = parseFloat(val);
-        return isNaN(n) ? val : n;
-    }
-    function shallowEqual$1(l1, l2) {
-        for (let i = 0, l = l1.length; i < l; i++) {
-            if (l1[i] !== l2[i]) {
-                return false;
-            }
-        }
-        return true;
-    }
-    class LazyValue {
-        constructor(fn, ctx, node) {
-            this.fn = fn;
-            this.ctx = capture(ctx);
-            this.node = node;
-        }
-        evaluate() {
-            return this.fn(this.ctx, this.node);
-        }
-        toString() {
-            return this.evaluate().toString();
-        }
-    }
-    /*
-     * Safely outputs `value` as a block depending on the nature of `value`
-     */
-    function safeOutput(value) {
-        if (!value) {
-            return value;
-        }
-        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;
-        }
-        return toggler(safeKey, block);
-    }
-    let boundFunctions = new WeakMap();
-    function bind(ctx, fn) {
-        let component = ctx.__owl__.component;
-        let boundFnMap = boundFunctions.get(component);
-        if (!boundFnMap) {
-            boundFnMap = new WeakMap();
-            boundFunctions.set(component, boundFnMap);
-        }
-        let boundFn = boundFnMap.get(fn);
-        if (!boundFn) {
-            boundFn = fn.bind(component);
-            boundFnMap.set(fn, boundFn);
-        }
-        return boundFn;
-    }
-    function multiRefSetter(refs, name) {
-        let count = 0;
-        return (el) => {
-            if (el) {
-                count++;
-                if (count > 1) {
-                    throw new Error("Cannot have 2 elements with same ref name at the same time");
-                }
-            }
-            if (count === 0 || el) {
-                refs[name] = el;
-            }
-        };
-    }
-    const UTILS = {
-        withDefault,
-        zero: Symbol("zero"),
-        isBoundary,
-        callSlot,
-        capture,
-        withKey,
-        prepareList,
-        setContextValue,
-        multiRefSetter,
-        shallowEqual: shallowEqual$1,
-        toNumber,
-        validateProps,
-        LazyValue,
-        safeOutput,
-        bind,
-    };
-
-    const mainEventHandler = (data, ev, currentTarget) => {
-        const { data: _data, modifiers } = filterOutModifiersFromData(data);
-        data = _data;
-        let stopped = false;
-        if (modifiers.length) {
-            let selfMode = false;
-            const isSelf = ev.target === currentTarget;
-            for (const mod of modifiers) {
-                switch (mod) {
-                    case "self":
-                        selfMode = true;
-                        if (isSelf) {
-                            continue;
-                        }
-                        else {
-                            return stopped;
-                        }
-                    case "prevent":
-                        if ((selfMode && isSelf) || !selfMode)
-                            ev.preventDefault();
-                        continue;
-                    case "stop":
-                        if ((selfMode && isSelf) || !selfMode)
-                            ev.stopPropagation();
-                        stopped = true;
-                        continue;
-                }
-            }
-        }
-        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
-        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
-        // as expected when there is a handler expression that evaluates to a falsy value
-        if (Object.hasOwnProperty.call(data, 0)) {
-            const handler = data[0];
-            if (typeof handler !== "function") {
-                throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
-            }
-            let node = data[1] ? data[1].__owl__ : null;
-            if (node ? node.status === 1 /* MOUNTED */ : true) {
-                handler.call(node ? node.component : null, ev);
-            }
-        }
-        return stopped;
-    };
-
-    // Maps fibers to thrown errors
-    const fibersInError = new WeakMap();
-    const nodeErrorHandlers = new WeakMap();
-    function _handleError(node, error, isFirstRound = false) {
-        if (!node) {
-            return false;
-        }
-        const fiber = node.fiber;
-        if (fiber) {
-            fibersInError.set(fiber, error);
-        }
-        const errorHandlers = nodeErrorHandlers.get(node);
-        if (errorHandlers) {
-            let stopped = false;
-            // execute in the opposite order
-            for (let i = errorHandlers.length - 1; i >= 0; i--) {
-                try {
-                    errorHandlers[i](error);
-                    stopped = true;
-                    break;
-                }
-                catch (e) {
-                    error = e;
-                }
-            }
-            if (stopped) {
-                if (isFirstRound && fiber && fiber.node.fiber) {
-                    fiber.root.counter--;
-                }
-                return true;
-            }
-        }
-        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, true);
-        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) {
-            let root = parent.root;
-            cancelFibers(root, current.children);
-            current.root = null;
-        }
-        return new Fiber(node, parent);
-    }
-    function makeRootFiber(node) {
-        let current = node.fiber;
-        if (current) {
-            let root = current.root;
-            root.counter -= cancelFibers(root, current.children);
-            current.children = [];
-            root.counter++;
-            current.bdom = null;
-            if (fibersInError.has(current)) {
-                fibersInError.delete(current);
-                fibersInError.delete(root);
-                current.appliedToDom = false;
-            }
-            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;
+        return fiber;
     }
     /**
      * @returns number of not-yet rendered fibers cancelled
      */
-    function cancelFibers(root, fibers) {
+    function cancelFibers(fibers) {
         let result = 0;
         for (let fiber of fibers) {
-            fiber.node.fiber = null;
-            fiber.root = root;
-            if (!fiber.bdom) {
+            let node = fiber.node;
+            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;
+            }
+            else {
                 result++;
             }
-            result += cancelFibers(root, fiber.children);
+            result += cancelFibers(fiber.children);
         }
         return result;
     }
@@ -1828,11 +2036,14 @@
             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.counter++;
+                root.setCounter(root.counter + 1);
                 this.root = root;
                 parent.children.push(this);
             }
@@ -1840,6 +2051,42 @@
                 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);
+            }
+        }
     }
     class RootFiber extends Fiber {
         constructor() {
@@ -1873,7 +2120,7 @@
                 }
                 current = undefined;
                 // Step 2: patching the dom
-                node.patch();
+                node._patch();
                 this.locked = false;
                 // Step 4: calling all mounted lifecycle hooks
                 let mountedFibers = this.mounted;
@@ -1901,6 +2148,12 @@
                 handleError({ fiber: current || this, error: e });
             }
         }
+        setCounter(newValue) {
+            this.counter = newValue;
+            if (newValue === 0) {
+                this.node.app.scheduler.flush();
+            }
+        }
     }
     class MountFiber extends RootFiber {
         constructor(node, target, options = {}) {
@@ -1912,6 +2165,7 @@
             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
@@ -1950,9 +2204,148 @@
         }
     }
 
-    let currentNode = null;
-    function getCurrent() {
-        if (!currentNode) {
+    /**
+     * Apply default props (only top level).
+     *
+     * Note that this method does modify in place the props
+     */
+    function applyDefaultProps(props, ComponentClass) {
+        const defaultProps = ComponentClass.defaultProps;
+        if (defaultProps) {
+            for (let propName in defaultProps) {
+                if (props[propName] === undefined) {
+                    props[propName] = defaultProps[propName];
+                }
+            }
+        }
+    }
+    //------------------------------------------------------------------------------
+    // Prop validation helper
+    //------------------------------------------------------------------------------
+    function getPropDescription(staticProps) {
+        if (staticProps instanceof Array) {
+            return Object.fromEntries(staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true])));
+        }
+        return staticProps || { "*": true };
+    }
+    /**
+     * Validate the component props (or next props) against the (static) props
+     * description.  This is potentially an expensive operation: it may needs to
+     * visit recursively the props and all the children to check if they are valid.
+     * This is why it is only done in 'dev' mode.
+     */
+    function validateProps(name, props, parent) {
+        const ComponentClass = typeof name !== "string"
+            ? name
+            : parent.constructor.components[name];
+        if (!ComponentClass) {
+            // this is an error, wrong component. We silently return here instead so the
+            // error is triggered by the usual path ('component' function)
+            return;
+        }
+        applyDefaultProps(props, ComponentClass);
+        const defaultProps = ComponentClass.defaultProps || {};
+        let propsDef = getPropDescription(ComponentClass.props);
+        const allowAdditionalProps = "*" in propsDef;
+        for (let propName in propsDef) {
+            if (propName === "*") {
+                continue;
+            }
+            const propDef = propsDef[propName];
+            let isMandatory = !!propDef;
+            if (typeof propDef === "object" && "optional" in propDef) {
+                isMandatory = !propDef.optional;
+            }
+            if (isMandatory && propName in defaultProps) {
+                throw new Error(`A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`);
+            }
+            if (props[propName] === undefined) {
+                if (isMandatory) {
+                    throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
+                }
+                else {
+                    continue;
+                }
+            }
+            let isValid;
+            try {
+                isValid = isValidProp(props[propName], propDef);
+            }
+            catch (e) {
+                e.message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${e.message})`;
+                throw e;
+            }
+            if (!isValid) {
+                throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
+            }
+        }
+        if (!allowAdditionalProps) {
+            for (let propName in props) {
+                if (!(propName in propsDef)) {
+                    throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
+                }
+            }
+        }
+    }
+    /**
+     * Check if an invidual prop value matches its (static) prop definition
+     */
+    function isValidProp(prop, propDef) {
+        if (propDef === true) {
+            return true;
+        }
+        if (typeof propDef === "function") {
+            // Check if a value is constructed by some Constructor.  Note that there is a
+            // slight abuse of language: we want to consider primitive values as well.
+            //
+            // So, even though 1 is not an instance of Number, we want to consider that
+            // it is valid.
+            if (typeof prop === "object") {
+                return prop instanceof propDef;
+            }
+            return typeof prop === propDef.name.toLowerCase();
+        }
+        else if (propDef instanceof Array) {
+            // If this code is executed, this means that we want to check if a prop
+            // matches at least one of its descriptor.
+            let result = false;
+            for (let i = 0, iLen = propDef.length; i < iLen; i++) {
+                result = result || isValidProp(prop, propDef[i]);
+            }
+            return result;
+        }
+        // propsDef is an object
+        if (propDef.optional && prop === undefined) {
+            return true;
+        }
+        let result = propDef.type ? isValidProp(prop, propDef.type) : true;
+        if (propDef.validate) {
+            result = result && propDef.validate(prop);
+        }
+        if (propDef.type === Array && propDef.element) {
+            for (let i = 0, iLen = prop.length; i < iLen; i++) {
+                result = result && isValidProp(prop[i], propDef.element);
+            }
+        }
+        if (propDef.type === Object && propDef.shape) {
+            const shape = propDef.shape;
+            for (let key in shape) {
+                result = result && isValidProp(prop[key], shape[key]);
+            }
+            if (result) {
+                for (let propName in prop) {
+                    if (!(propName in shape)) {
+                        throw new Error(`unknown prop '${propName}'`);
+                    }
+                }
+            }
+        }
+        return result;
+    }
+
+    let currentNode = null;
+    function getCurrent() {
+        if (!currentNode) {
             throw new Error("No active component (a hook function should only be called in 'setup')");
         }
         return currentNode;
@@ -1960,24 +2353,61 @@
     function useComponent() {
         return currentNode.component;
     }
+    // -----------------------------------------------------------------------------
+    // Integration with reactivity system (useState)
+    // -----------------------------------------------------------------------------
+    const batchedRenderFunctions = new WeakMap();
+    /**
+     * Creates a reactive object that will be observed by the current component.
+     * Reading data from the returned object (eg during rendering) will cause the
+     * component to subscribe to that data and be rerendered when it changes.
+     *
+     * @param state the state to observe
+     * @returns a reactive object that will cause the component to re-render on
+     *  relevant changes
+     * @see reactive
+     */
+    function useState(state) {
+        const node = getCurrent();
+        let render = batchedRenderFunctions.get(node);
+        if (!render) {
+            render = batched(node.render.bind(node));
+            batchedRenderFunctions.set(node, render);
+            // manual implementation of onWillDestroy to break cyclic dependency
+            node.willDestroy.push(clearReactivesForCallback.bind(null, render));
+        }
+        return reactive(state, render);
+    }
+    function arePropsDifferent(props1, props2) {
+        for (let k in props1) {
+            if (props1[k] !== props2[k]) {
+                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) {
-            if (node.status < 1 /* MOUNTED */) {
-                node.destroy();
-                node = undefined;
-            }
-            else if (node.status === 2 /* DESTROYED */) {
-                node = undefined;
-            }
+        if (node && node.status === 2 /* DESTROYED */) {
+            node = undefined;
         }
         if (isDynamic && node && node.component.constructor !== name) {
             node = undefined;
         }
         const parentFiber = ctx.fiber;
         if (node) {
-            node.updateAndRender(props, parentFiber);
+            let shouldRender = node.forceNextRender;
+            if (shouldRender) {
+                node.forceNextRender = false;
+            }
+            else {
+                const currentProps = node.component.props[TARGET];
+                shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
+            }
+            if (shouldRender) {
+                node.updateAndRender(props, parentFiber);
+            }
         }
         else {
             // new component
@@ -1991,18 +2421,19 @@
                     throw new Error(`Cannot find the definition of component "${name}"`);
                 }
             }
-            node = new ComponentNode(C, props, ctx.app, ctx);
+            node = new ComponentNode(C, props, ctx.app, ctx, key);
             ctx.children[key] = node;
-            const fiber = makeChildFiber(node, parentFiber);
-            node.initiateRender(fiber);
+            node.initiateRender(new Fiber(node, parentFiber));
         }
+        parentFiber.childrenMap[key] = node;
         return node;
     }
     class ComponentNode {
-        constructor(C, props, app, parent) {
+        constructor(C, props, app, parent, parentKey) {
             this.fiber = null;
             this.bdom = null;
             this.status = 0 /* NEW */;
+            this.forceNextRender = false;
             this.children = Object.create(null);
             this.refs = {};
             this.willStart = [];
@@ -2014,11 +2445,13 @@
             this.willDestroy = [];
             currentNode = this;
             this.app = app;
-            this.parent = parent || null;
+            this.parent = parent;
+            this.parentKey = parentKey;
             this.level = parent ? parent.level + 1 : 0;
             applyDefaultProps(props, C);
             const env = (parent && parent.childEnv) || app.env;
             this.childEnv = env;
+            props = useState(props);
             this.component = new C(props, env, this);
             this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
             this.component.setup();
@@ -2043,23 +2476,32 @@
                 return;
             }
             if (this.status === 0 /* NEW */ && this.fiber === fiber) {
-                this._render(fiber);
+                fiber.render();
             }
         }
-        async render() {
+        async render(deep = false) {
             let current = this.fiber;
-            if (current && current.root.locked) {
+            if (current && (current.root.locked || current.bdom === true)) {
                 await Promise.resolve();
                 // situation may have changed after the microtask tick
                 current = this.fiber;
             }
-            if (current && !current.bdom && !fibersInError.has(current)) {
-                return;
+            if (current) {
+                if (!current.bdom && !fibersInError.has(current)) {
+                    if (deep) {
+                        // we want the render from this point on to be with deep=true
+                        current.deep = deep;
+                    }
+                    return;
+                }
+                // if current rendering was with deep=true, we want this one to be the same
+                deep = deep || current.deep;
             }
-            if (!this.bdom && !current) {
+            else if (!this.bdom) {
                 return;
             }
             const fiber = makeRootFiber(this);
+            fiber.deep = deep;
             this.fiber = fiber;
             this.app.scheduler.addFiber(fiber);
             await Promise.resolve();
@@ -2078,16 +2520,7 @@
             //   embedded in a rendering coming from above, so the fiber will be rendered
             //   in the next microtick anyway, so we should not render it again.
             if (this.fiber === fiber && (current || !fiber.parent)) {
-                this._render(fiber);
-            }
-        }
-        _render(fiber) {
-            try {
-                fiber.bdom = this.renderFn();
-                fiber.root.counter--;
-            }
-            catch (e) {
-                handleError({ node: this, error: e });
+                fiber.render();
             }
         }
         destroy() {
@@ -2107,8 +2540,15 @@
             for (let child of Object.values(this.children)) {
                 child._destroy();
             }
-            for (let cb of this.willDestroy) {
-                cb.call(component);
+            if (this.willDestroy.length) {
+                try {
+                    for (let cb of this.willDestroy) {
+                        cb.call(component);
+                    }
+                }
+                catch (e) {
+                    handleError({ error: e, node: this });
+                }
             }
             this.status = 2 /* DESTROYED */;
         }
@@ -2118,13 +2558,16 @@
             this.fiber = fiber;
             const component = this.component;
             applyDefaultProps(props, component.constructor);
+            currentNode = this;
+            props = useState(props);
+            currentNode = null;
             const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
             await prom;
             if (fiber !== this.fiber) {
                 return;
             }
             component.props = props;
-            this._render(fiber);
+            fiber.render();
             const parentRoot = parentFiber.root;
             if (this.willPatch.length) {
                 parentRoot.willPatch.push(fiber);
@@ -2171,17 +2614,24 @@
             bdom.mount(parent, anchor);
             this.status = 1 /* MOUNTED */;
             this.fiber.appliedToDom = true;
+            this.children = this.fiber.childrenMap;
             this.fiber = null;
         }
         moveBefore(other, afterNode) {
             this.bdom.moveBefore(other ? other.bdom : null, afterNode);
         }
         patch() {
+            if (this.fiber && this.fiber.parent) {
+                // we only patch here renderings coming from above. renderings initiated
+                // by the component will be patched independently in the appropriate
+                // fiber.complete
+                this._patch();
+            }
+        }
+        _patch() {
             const hasChildren = Object.keys(this.children).length > 0;
+            this.children = this.fiber.childrenMap;
             this.bdom.patch(this.fiber.bdom, hasChildren);
-            if (hasChildren) {
-                this.cleanOutdatedChildren();
-            }
             this.fiber.appliedToDom = true;
             this.fiber = null;
         }
@@ -2191,85 +2641,89 @@
         remove() {
             this.bdom.remove();
         }
-        cleanOutdatedChildren() {
-            const children = this.children;
-            for (const key in children) {
-                const node = children[key];
-                const status = node.status;
-                if (status !== 1 /* MOUNTED */) {
-                    delete children[key];
-                    if (status !== 2 /* DESTROYED */) {
-                        node.destroy();
-                    }
-                }
-            }
+        // ---------------------------------------------------------------------------
+        // Some debug helpers
+        // ---------------------------------------------------------------------------
+        get name() {
+            return this.component.constructor.name;
+        }
+        get subscriptions() {
+            const render = batchedRenderFunctions.get(this);
+            return render ? getSubscriptions(render) : [];
         }
     }
 
     // -----------------------------------------------------------------------------
-    //  hooks
+    //  Scheduler
     // -----------------------------------------------------------------------------
-    function onWillStart(fn) {
-        const node = getCurrent();
-        node.willStart.push(fn.bind(node.component));
-    }
-    function onWillUpdateProps(fn) {
-        const node = getCurrent();
-        node.willUpdateProps.push(fn.bind(node.component));
-    }
-    function onMounted(fn) {
-        const node = getCurrent();
-        node.mounted.push(fn.bind(node.component));
-    }
-    function onWillPatch(fn) {
-        const node = getCurrent();
-        node.willPatch.unshift(fn.bind(node.component));
-    }
-    function onPatched(fn) {
-        const node = getCurrent();
-        node.patched.push(fn.bind(node.component));
-    }
-    function onWillUnmount(fn) {
-        const node = getCurrent();
-        node.willUnmount.unshift(fn.bind(node.component));
-    }
-    function onWillDestroy(fn) {
-        const node = getCurrent();
-        node.willDestroy.push(fn.bind(node.component));
-    }
-    function onWillRender(fn) {
-        const node = getCurrent();
-        const renderFn = node.renderFn;
-        node.renderFn = () => {
-            fn.call(node.component);
-            return renderFn();
-        };
-    }
-    function onRendered(fn) {
-        const node = getCurrent();
-        const renderFn = node.renderFn;
-        node.renderFn = () => {
-            const result = renderFn();
-            fn.call(node.component);
-            return result;
-        };
-    }
-    function onError(callback) {
-        const node = getCurrent();
-        let handlers = nodeErrorHandlers.get(node);
-        if (!handlers) {
-            handlers = [];
-            nodeErrorHandlers.set(node, handlers);
+    class Scheduler {
+        constructor() {
+            this.tasks = new Set();
+            this.frame = 0;
+            this.delayedRenders = [];
+            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
         }
-        handlers.push(callback.bind(node.component));
-    }
-
-    /**
-     * Owl QWeb Expression Parser
-     *
-     * Owl needs in various contexts to be able to understand the structure of a
-     * string representing a javascript expression.  The usual goal is to be able
-     * to rewrite some variables.  For example, if a template has
+        addFiber(fiber) {
+            this.tasks.add(fiber.root);
+        }
+        /**
+         * Process all current tasks. This only applies to the fibers that are ready.
+         * Other tasks are left unchanged.
+         */
+        flush() {
+            if (this.delayedRenders.length) {
+                let renders = this.delayedRenders;
+                this.delayedRenders = [];
+                for (let f of renders) {
+                    if (f.root && f.node.status !== 2 /* DESTROYED */) {
+                        f.render();
+                    }
+                }
+            }
+            if (this.frame === 0) {
+                this.frame = this.requestAnimationFrame(() => {
+                    this.frame = 0;
+                    this.tasks.forEach((fiber) => this.processFiber(fiber));
+                    for (let task of this.tasks) {
+                        if (task.node.status === 2 /* DESTROYED */) {
+                            this.tasks.delete(task);
+                        }
+                    }
+                });
+            }
+        }
+        processFiber(fiber) {
+            if (fiber.root !== fiber) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            const hasError = fibersInError.has(fiber);
+            if (hasError && fiber.counter !== 0) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            if (fiber.node.status === 2 /* DESTROYED */) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            if (fiber.counter === 0) {
+                if (!hasError) {
+                    fiber.complete();
+                }
+                this.tasks.delete(fiber);
+            }
+        }
+    }
+    // capture the value of requestAnimationFrame as soon as possible, to avoid
+    // interactions with other code, such as test frameworks that override them
+    Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
+
+    /**
+     * Owl QWeb Expression Parser
+     *
+     * Owl needs in various contexts to be able to understand the structure of a
+     * string representing a javascript expression.  The usual goal is to be able
+     * to rewrite some variables.  For example, if a template has
      *
      *  ```xml
      *  <t t-if="computeSomething({val: state.val})">...</t>
@@ -2416,24 +2870,31 @@
     function tokenize(expr) {
         const result = [];
         let token = true;
-        while (token) {
-            expr = expr.trim();
-            if (expr) {
-                for (let tokenizer of TOKENIZERS) {
-                    token = tokenizer(expr);
-                    if (token) {
-                        result.push(token);
-                        expr = expr.slice(token.size || token.value.length);
-                        break;
+        let error;
+        let current = expr;
+        try {
+            while (token) {
+                current = current.trim();
+                if (current) {
+                    for (let tokenizer of TOKENIZERS) {
+                        token = tokenizer(current);
+                        if (token) {
+                            result.push(token);
+                            current = current.slice(token.size || token.value.length);
+                            break;
+                        }
                     }
                 }
-            }
-            else {
-                token = false;
+                else {
+                    token = false;
+                }
             }
         }
-        if (expr.length) {
-            throw new Error(`Tokenizer error: could not tokenize "${expr}"`);
+        catch (e) {
+            error = e; // Silence all errors and throw a generic error below
+        }
+        if (current.length || error) {
+            throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
         }
         return result;
     }
@@ -2638,7 +3099,7 @@
         }, params);
     }
     class CodeTarget {
-        constructor(name) {
+        constructor(name, on) {
             this.indentLevel = 0;
             this.loopLevel = 0;
             this.code = [];
@@ -2649,6 +3110,7 @@
             this.refInfo = {};
             this.shouldProtectScope = false;
             this.name = name;
+            this.on = on || null;
         }
         addLine(line, idx) {
             const prefix = new Array(this.indentLevel + 2).join("  ");
@@ -2698,7 +3160,7 @@
             this.targets = [];
             this.target = new CodeTarget("template");
             this.translatableAttributes = TRANSLATABLE_ATTRS;
-            this.staticCalls = [];
+            this.staticDefs = [];
             this.helpers = new Set();
             this.translateFn = options.translateFn || ((s) => s);
             if (options.translatableAttributes) {
@@ -2741,8 +3203,8 @@
             if (this.templateName) {
                 mainCode.push(`// Template name: "${this.templateName}"`);
             }
-            for (let { id, template } of this.staticCalls) {
-                mainCode.push(`const ${id} = getTemplate(${template});`);
+            for (let { id, expr } of this.staticDefs) {
+                mainCode.push(`const ${id} = ${expr};`);
             }
             // define all blocks
             if (this.blocks.length) {
@@ -2778,19 +3240,21 @@
             }
             return code;
         }
-        compileInNewTarget(prefix, ast, ctx) {
+        compileInNewTarget(prefix, ast, ctx, on) {
             const name = this.generateId(prefix);
             const initialTarget = this.target;
-            const target = new CodeTarget(name);
+            const target = new CodeTarget(name, on);
             this.targets.push(target);
             this.target = target;
-            const subCtx = createContext(ctx);
-            this.compileAST(ast, subCtx);
+            this.compileAST(ast, createContext(ctx));
             this.target = initialTarget;
             return name;
         }
-        addLine(line) {
-            this.target.addLine(line);
+        addLine(line, idx) {
+            this.target.addLine(line, idx);
+        }
+        define(varName, expr) {
+            this.addLine(`const ${varName} = ${expr};`);
         }
         generateId(prefix = "") {
             this.ids[prefix] = (this.ids[prefix] || 0) + 1;
@@ -2832,10 +3296,13 @@
                 blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
             }
             if (block.isRoot && !ctx.preventRoot) {
+                if (this.target.on) {
+                    blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
+                }
                 this.addLine(`return ${blockExpr};`);
             }
             else {
-                this.addLine(`let ${block.varName} = ${blockExpr};`);
+                this.define(block.varName, blockExpr);
             }
         }
         /**
@@ -2863,7 +3330,7 @@
                     if (!mapping.has(tok.varName)) {
                         const varId = this.generateId("v");
                         mapping.set(tok.varName, varId);
-                        this.addLine(`const ${varId} = ${tok.value};`);
+                        this.define(varId, tok.value);
                     }
                     tok.value = mapping.get(tok.varName);
                 }
@@ -3002,7 +3469,7 @@
                 this.blocks.push(block);
                 if (ast.dynamicTag) {
                     const tagExpr = this.generateId("tag");
-                    this.addLine(`let ${tagExpr} = ${compileExpr(ast.dynamicTag)};`);
+                    this.define(tagExpr, compileExpr(ast.dynamicTag));
                     block.dynamicTagName = tagExpr;
                 }
             }
@@ -3084,10 +3551,10 @@
                 const { hasDynamicChildren, baseExpr, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
                 const baseExpression = compileExpr(baseExpr);
                 const bExprId = this.generateId("bExpr");
-                this.addLine(`const ${bExprId} = ${baseExpression};`);
+                this.define(bExprId, baseExpression);
                 const expression = compileExpr(expr);
                 const exprId = this.generateId("expr");
-                this.addLine(`const ${exprId} = ${expression};`);
+                this.define(exprId, expression);
                 const fullExpression = `${bExprId}[${exprId}]`;
                 let idx;
                 if (specialInitTargetAttr) {
@@ -3097,7 +3564,7 @@
                 else if (hasDynamicChildren) {
                     const bValueId = this.generateId("bValue");
                     tModelSelectedExpr = `${bValueId}`;
-                    this.addLine(`let ${tModelSelectedExpr} = ${fullExpression}`);
+                    this.define(tModelSelectedExpr, fullExpression);
                 }
                 else {
                     idx = block.insertData(`${fullExpression}`, "attr");
@@ -3145,14 +3612,14 @@
                     const children = block.children.slice();
                     let current = children.shift();
                     for (let i = codeIdx; i < code.length; i++) {
-                        if (code[i].trimStart().startsWith(`let ${current.varName} `)) {
-                            code[i] = code[i].replace(`let ${current.varName}`, current.varName);
+                        if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+                            code[i] = code[i].replace(`const ${current.varName}`, current.varName);
                             current = children.shift();
                             if (!current)
                                 break;
                         }
                     }
-                    this.target.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
+                    this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
                 }
             }
         }
@@ -3240,14 +3707,14 @@
                     const children = block.children.slice();
                     let current = children.shift();
                     for (let i = codeIdx; i < code.length; i++) {
-                        if (code[i].trimStart().startsWith(`let ${current.varName} `)) {
-                            code[i] = code[i].replace(`let ${current.varName}`, current.varName);
+                        if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+                            code[i] = code[i].replace(`const ${current.varName}`, current.varName);
                             current = children.shift();
                             if (!current)
                                 break;
                         }
                     }
-                    this.target.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
+                    this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
                 }
                 // note: this part is duplicated from end of compilemulti:
                 const args = block.children.map((c) => c.varName).join(", ");
@@ -3268,10 +3735,10 @@
             const l = `l_block${block.id}`;
             const c = `c_block${block.id}`;
             this.helpers.add("prepareList");
-            this.addLine(`const [${keys}, ${vals}, ${l}, ${c}] = prepareList(${compileExpr(ast.collection)});`);
+            this.define(`[${keys}, ${vals}, ${l}, ${c}]`, `prepareList(${compileExpr(ast.collection)});`);
             // Throw errors on duplicate keys in dev mode
             if (this.dev) {
-                this.addLine(`const keys${block.id} = new Set();`);
+                this.define(`keys${block.id}`, `new Set()`);
             }
             this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
             this.target.indentLevel++;
@@ -3288,7 +3755,7 @@
             if (!ast.hasNoValue) {
                 this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
             }
-            this.addLine(`let key${this.target.loopLevel} = ${ast.key ? compileExpr(ast.key) : loopVar};`);
+            this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
             if (this.dev) {
                 // Throw error on duplicate keys in dev mode
                 this.addLine(`if (keys${block.id}.has(key${this.target.loopLevel})) { throw new Error(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
@@ -3298,8 +3765,8 @@
             if (ast.memo) {
                 this.target.hasCache = true;
                 id = this.generateId();
-                this.addLine(`let memo${id} = ${compileExpr(ast.memo)}`);
-                this.addLine(`let vnode${id} = cache[key${this.target.loopLevel}];`);
+                this.define(`memo${id}`, compileExpr(ast.memo));
+                this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
                 this.addLine(`if (vnode${id}) {`);
                 this.target.indentLevel++;
                 this.addLine(`if (shallowEqual(vnode${id}.memo, memo${id})) {`);
@@ -3327,7 +3794,7 @@
         }
         compileTKey(ast, ctx) {
             const tKeyExpr = this.generateId("tKey_");
-            this.addLine(`const ${tKeyExpr} = ${compileExpr(ast.expr)};`);
+            this.define(tKeyExpr, compileExpr(ast.expr));
             ctx = createContext(ctx, {
                 tKeyExpr,
                 block: ctx.block,
@@ -3372,14 +3839,14 @@
                         const children = block.children.slice();
                         let current = children.shift();
                         for (let i = codeIdx; i < code.length; i++) {
-                            if (code[i].trimStart().startsWith(`let ${current.varName} `)) {
-                                code[i] = code[i].replace(`let ${current.varName}`, current.varName);
+                            if (code[i].trimStart().startsWith(`const ${current.varName} `)) {
+                                code[i] = code[i].replace(`const ${current.varName}`, current.varName);
                                 current = children.shift();
                                 if (!current)
                                     break;
                             }
                         }
-                        this.target.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
+                        this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
                     }
                 }
                 const args = block.children.map((c) => c.varName).join(", ");
@@ -3410,7 +3877,7 @@
             const key = `key + \`${this.generateComponentKey()}\``;
             if (isDynamic) {
                 const templateVar = this.generateId("template");
-                this.addLine(`const ${templateVar} = ${subTemplate};`);
+                this.define(templateVar, subTemplate);
                 block = this.createBlock(block, "multi", ctx);
                 this.helpers.add("call");
                 this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block, {
@@ -3421,7 +3888,7 @@
             else {
                 const id = this.generateId(`callTemplate_`);
                 this.helpers.add("getTemplate");
-                this.staticCalls.push({ id, template: subTemplate });
+                this.staticDefs.push({ id, expr: `getTemplate(${subTemplate})` });
                 block = this.createBlock(block, "multi", ctx);
                 this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block, {
                     ...ctx,
@@ -3515,27 +3982,29 @@
         compileComponent(ast, ctx) {
             let { block } = ctx;
             // props
-            const hasSlotsProp = "slots" in ast.props;
+            const hasSlotsProp = "slots" in (ast.props || {});
             const props = [];
-            const propExpr = this.formatPropObject(ast.props);
+            const propExpr = this.formatPropObject(ast.props || {});
             if (propExpr) {
                 props.push(propExpr);
             }
             // slots
-            const hasSlot = !!Object.keys(ast.slots).length;
             let slotDef = "";
-            if (hasSlot) {
+            if (ast.slots) {
                 let ctxStr = "ctx";
                 if (this.target.loopLevel || !this.hasSafeContext) {
                     ctxStr = this.generateId("ctx");
                     this.helpers.add("capture");
-                    this.addLine(`const ${ctxStr} = capture(ctx);`);
+                    this.define(ctxStr, `capture(ctx)`);
                 }
                 let slotStr = [];
                 for (let slotName in ast.slots) {
-                    const slotAst = ast.slots[slotName].content;
-                    const name = this.compileInNewTarget("slot", slotAst, ctx);
-                    const params = [`__render: ${name}, __ctx: ${ctxStr}`];
+                    const slotAst = ast.slots[slotName];
+                    const params = [];
+                    if (slotAst.content) {
+                        const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+                        params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+                    }
                     const scope = ast.slots[slotName].scope;
                     if (scope) {
                         params.push(`__scope: "${scope}"`);
@@ -3549,33 +4018,30 @@
                 slotDef = `{${slotStr.join(", ")}}`;
             }
             if (slotDef && !(ast.dynamicProps || hasSlotsProp)) {
-                props.push(`slots: ${slotDef}`);
+                this.helpers.add("markRaw");
+                props.push(`slots: markRaw(${slotDef})`);
             }
             const propStr = `{${props.join(",")}}`;
             let propString = propStr;
             if (ast.dynamicProps) {
-                if (!props.length) {
-                    propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)})`;
-                }
-                else {
-                    propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}, ${propStr})`;
-                }
+                propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${props.length ? ", " + propStr : ""})`;
             }
             let propVar;
             if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
                 propVar = this.generateId("props");
-                this.addLine(`const ${propVar} = ${propString};`);
+                this.define(propVar, propString);
                 propString = propVar;
             }
             if (slotDef && (ast.dynamicProps || hasSlotsProp)) {
-                this.addLine(`${propVar}.slots = Object.assign(${slotDef}, ${propVar}.slots)`);
+                this.helpers.add("markRaw");
+                this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
             }
             // cmap key
             const key = this.generateComponentKey();
             let expr;
             if (ast.isDynamic) {
                 expr = this.generateId("Comp");
-                this.addLine(`let ${expr} = ${compileExpr(ast.name)};`);
+                this.define(expr, compileExpr(ast.name));
             }
             else {
                 expr = `\`${ast.name}\``;
@@ -3596,9 +4062,28 @@
             if (ast.isDynamic) {
                 blockExpr = `toggler(${expr}, ${blockExpr})`;
             }
+            // event handling
+            if (ast.on) {
+                blockExpr = this.wrapWithEventCatcher(blockExpr, ast.on);
+            }
             block = this.createBlock(block, "multi", ctx);
             this.insertBlock(blockExpr, block, ctx);
         }
+        wrapWithEventCatcher(expr, on) {
+            this.helpers.add("createCatcher");
+            let name = this.generateId("catcher");
+            let spec = {};
+            let handlers = [];
+            for (let ev in on) {
+                let handlerId = this.generateId("hdlr");
+                let idx = handlers.push(handlerId) - 1;
+                spec[ev] = idx;
+                const handler = this.generateHandlerCode(ev, on[ev]);
+                this.define(handlerId, handler);
+            }
+            this.staticDefs.push({ id: name, expr: `createCatcher(${JSON.stringify(spec)})` });
+            return `${name}(${expr}, [${handlers.join(",")}])`;
+        }
         compileTSlot(ast, ctx) {
             this.helpers.add("callSlot");
             let { block } = ctx;
@@ -3620,13 +4105,17 @@
             else {
                 if (dynamic) {
                     let name = this.generateId("slot");
-                    this.addLine(`const ${name} = ${slotName};`);
-                    blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`;
+                    this.define(name, slotName);
+                    blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
                 }
                 else {
                     blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
                 }
             }
+            // event handling
+            if (ast.on) {
+                blockString = this.wrapWithEventCatcher(blockString, ast.on);
+            }
             if (block) {
                 this.insertAnchor(block);
             }
@@ -3647,7 +4136,7 @@
             if (this.target.loopLevel || !this.hasSafeContext) {
                 ctxStr = this.generateId("ctx");
                 this.helpers.add("capture");
-                this.addLine(`const ${ctxStr} = capture(ctx);`);
+                this.define(ctxStr, `capture(ctx);`);
             }
             const blockString = `component(Portal, {target: ${ast.target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
             if (block) {
@@ -3768,6 +4257,9 @@
         if (tagName === "t" && !dynamicTag) {
             return null;
         }
+        if (tagName.startsWith("block-")) {
+            throw new Error(`Invalid tag name: '${tagName}'`);
+        }
         ctx = Object.assign({}, ctx);
         if (tagName === "pre") {
             ctx.inPreTag = true;
@@ -3778,8 +4270,8 @@
         const ref = node.getAttribute("t-ref");
         node.removeAttribute("t-ref");
         const nodeAttrsNames = node.getAttributeNames();
-        const attrs = {};
-        const on = {};
+        let attrs = null;
+        let on = null;
         let model = null;
         for (let attr of nodeAttrsNames) {
             const value = node.getAttribute(attr);
@@ -3787,6 +4279,7 @@
                 if (attr === "t-on") {
                     throw new Error("Missing event name with t-on directive");
                 }
+                on = on || {};
                 on[attr.slice(5)] = value;
             }
             else if (attr.startsWith("t-model")) {
@@ -3824,6 +4317,7 @@
                     targetAttr: isCheckboxInput ? "checked" : "value",
                     specialInitTargetAttr: isRadioInput ? "checked" : null,
                     eventType,
+                    hasDynamicChildren: false,
                     shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
                     shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
                 };
@@ -3833,6 +4327,9 @@
                     ctx.tModelInfo = model;
                 }
             }
+            else if (attr.startsWith("block-")) {
+                throw new Error(`Invalid attribute: '${attr}'`);
+            }
             else if (attr !== "t-name") {
                 if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
                     throw new Error(`Unknown QWeb directive: '${attr}'`);
@@ -3841,6 +4338,7 @@
                 if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
                     tModel.hasDynamicChildren = true;
                 }
+                attrs = attrs || {};
                 attrs[attr] = value;
             }
         }
@@ -3991,7 +4489,7 @@
             if (ast && ast.type === 11 /* TComponent */) {
                 return {
                     ...ast,
-                    slots: { default: { content: tcall } },
+                    slots: { default: { content: tcall, scope: null, on: null, attrs: null } },
                 };
             }
         }
@@ -4075,7 +4573,6 @@
     // -----------------------------------------------------------------------------
     // Error messages when trying to use an unsupported directive on a component
     const directiveErrorMap = new Map([
-        ["t-on", "t-on is no longer supported on components. Consider passing a callback in props."],
         [
             "t-ref",
             "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop.",
@@ -4104,18 +4601,26 @@
         node.removeAttribute("t-props");
         const defaultSlotScope = node.getAttribute("t-slot-scope");
         node.removeAttribute("t-slot-scope");
-        const props = {};
+        let on = null;
+        let props = null;
         for (let name of node.getAttributeNames()) {
             const value = node.getAttribute(name);
             if (name.startsWith("t-")) {
-                const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-                throw new Error(message || `unsupported directive on Component: ${name}`);
+                if (name.startsWith("t-on-")) {
+                    on = on || {};
+                    on[name.slice(5)] = value;
+                }
+                else {
+                    const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
+                    throw new Error(message || `unsupported directive on Component: ${name}`);
+                }
             }
             else {
+                props = props || {};
                 props[name] = value;
             }
         }
-        const slots = {};
+        let slots = null;
         if (node.hasChildNodes()) {
             const clone = node.cloneNode(true);
             // named slots
@@ -4142,33 +4647,35 @@
                 slotNode.removeAttribute("t-set-slot");
                 slotNode.remove();
                 const slotAst = parseNode(slotNode, ctx);
-                if (slotAst) {
-                    const slotInfo = { content: slotAst };
-                    const attrs = {};
-                    for (let attributeName of slotNode.getAttributeNames()) {
-                        const value = slotNode.getAttribute(attributeName);
-                        if (attributeName === "t-slot-scope") {
-                            slotInfo.scope = value;
-                            continue;
-                        }
-                        attrs[attributeName] = value;
+                let on = null;
+                let attrs = null;
+                let scope = null;
+                for (let attributeName of slotNode.getAttributeNames()) {
+                    const value = slotNode.getAttribute(attributeName);
+                    if (attributeName === "t-slot-scope") {
+                        scope = value;
+                        continue;
                     }
-                    if (Object.keys(attrs).length) {
-                        slotInfo.attrs = attrs;
+                    else if (attributeName.startsWith("t-on-")) {
+                        on = on || {};
+                        on[attributeName.slice(5)] = value;
+                    }
+                    else {
+                        attrs = attrs || {};
+                        attrs[attributeName] = value;
                     }
-                    slots[name] = slotInfo;
                 }
+                slots = slots || {};
+                slots[name] = { content: slotAst, on, attrs, scope };
             }
             // default slot
             const defaultContent = parseChildNodes(clone, ctx);
             if (defaultContent) {
-                slots.default = { content: defaultContent };
-                if (defaultSlotScope) {
-                    slots.default.scope = defaultSlotScope;
-                }
+                slots = slots || {};
+                slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
             }
         }
-        return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots };
+        return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
     }
     // -----------------------------------------------------------------------------
     // Slots
@@ -4179,15 +4686,24 @@
         }
         const name = node.getAttribute("t-slot");
         node.removeAttribute("t-slot");
-        const attrs = {};
+        let attrs = null;
+        let on = null;
         for (let attributeName of node.getAttributeNames()) {
             const value = node.getAttribute(attributeName);
-            attrs[attributeName] = value;
+            if (attributeName.startsWith("t-on-")) {
+                on = on || {};
+                on[attributeName.slice(5)] = value;
+            }
+            else {
+                attrs = attrs || {};
+                attrs[attributeName] = value;
+            }
         }
         return {
             type: 14 /* TSlot */,
             name,
             attrs,
+            on,
             defaultContent: parseChildNodes(node, ctx),
         };
     }
@@ -4381,108 +4897,112 @@
         return new Function("bdom, helpers", code);
     }
 
-    const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
-    const globalTemplates = {};
-    function parseXML(xml) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(xml, "text/xml");
-        if (doc.getElementsByTagName("parsererror").length) {
-            let msg = "Invalid XML in template.";
-            const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-            if (parsererrorText) {
-                msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-                const re = /\d+/g;
-                const firstMatch = re.exec(parsererrorText);
-                if (firstMatch) {
-                    const lineNumber = Number(firstMatch[0]);
-                    const line = xml.split("\n")[lineNumber - 1];
-                    const secondMatch = re.exec(parsererrorText);
-                    if (line && secondMatch) {
-                        const columnIndex = Number(secondMatch[0]) - 1;
-                        if (line[columnIndex]) {
-                            msg +=
-                                `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-                                    `${line}\n${"-".repeat(columnIndex - 1)}^`;
-                        }
+    const TIMEOUT = Symbol("timeout");
+    function wrapError(fn, hookName) {
+        const error = new Error(`The following error occurred in ${hookName}: `);
+        const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+        const node = getCurrent();
+        return (...args) => {
+            try {
+                const result = fn(...args);
+                if (result instanceof Promise) {
+                    if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+                        const fiber = node.fiber;
+                        Promise.race([
+                            result,
+                            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+                        ]).then((res) => {
+                            if (res === TIMEOUT && node.fiber === fiber) {
+                                console.warn(timeoutError);
+                            }
+                        });
                     }
+                    return result.catch((cause) => {
+                        error.cause = cause;
+                        if (cause instanceof Error) {
+                            error.message += `"${cause.message}"`;
+                        }
+                        throw error;
+                    });
                 }
+                return result;
             }
-            throw new Error(msg);
-        }
-        return doc;
-    }
-    class TemplateSet {
-        constructor(config = {}) {
-            this.rawTemplates = Object.create(globalTemplates);
-            this.templates = {};
-            this.utils = Object.assign({}, UTILS, {
-                call: (owner, subTemplate, ctx, parent, key) => {
-                    const template = this.getTemplate(subTemplate);
-                    return toggler(subTemplate, template.call(owner, ctx, parent, key));
-                },
-                getTemplate: (name) => this.getTemplate(name),
-            });
-            this.dev = config.dev || false;
-            this.translateFn = config.translateFn;
-            this.translatableAttributes = config.translatableAttributes;
-            if (config.templates) {
-                this.addTemplates(config.templates);
-            }
-        }
-        addTemplate(name, template, options = {}) {
-            if (name in this.rawTemplates && !options.allowDuplicate) {
-                throw new Error(`Template ${name} already defined`);
-            }
-            this.rawTemplates[name] = template;
-        }
-        addTemplates(xml, options = {}) {
-            if (!xml) {
-                // empty string
-                return;
-            }
-            xml = xml instanceof Document ? xml : parseXML(xml);
-            for (const template of xml.querySelectorAll("[t-name]")) {
-                const name = template.getAttribute("t-name");
-                this.addTemplate(name, template, options);
-            }
-        }
-        getTemplate(name) {
-            if (!(name in this.templates)) {
-                const rawTemplate = this.rawTemplates[name];
-                if (rawTemplate === undefined) {
-                    throw new Error(`Missing template: "${name}"`);
+            catch (cause) {
+                if (cause instanceof Error) {
+                    error.message += `"${cause.message}"`;
                 }
-                const templateFn = this._compileTemplate(name, rawTemplate);
-                // first add a function to lazily get the template, in case there is a
-                // recursive call to the template name
-                const templates = this.templates;
-                this.templates[name] = function (context, parent) {
-                    return templates[name].call(this, context, parent);
-                };
-                const template = templateFn(bdom, this.utils);
-                this.templates[name] = template;
+                throw error;
             }
-            return this.templates[name];
-        }
-        _compileTemplate(name, template) {
-            return compile(template, {
-                name,
-                dev: this.dev,
-                translateFn: this.translateFn,
-                translatableAttributes: this.translatableAttributes,
-            });
-        }
+        };
     }
     // -----------------------------------------------------------------------------
-    //  xml tag helper
+    //  hooks
     // -----------------------------------------------------------------------------
-    function xml(...args) {
-        const name = `__template__${xml.nextId++}`;
-        const value = String.raw(...args);
-        globalTemplates[name] = value;
-        return name;
+    function onWillStart(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
     }
-    xml.nextId = 1;
+    function onWillUpdateProps(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+    }
+    function onMounted(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+    }
+    function onWillPatch(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+    }
+    function onPatched(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+    }
+    function onWillUnmount(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+    }
+    function onWillDestroy(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
+    }
+    function onWillRender(fn) {
+        const node = getCurrent();
+        const renderFn = node.renderFn;
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        fn = decorate(fn.bind(node.component), "onWillRender");
+        node.renderFn = () => {
+            fn();
+            return renderFn();
+        };
+    }
+    function onRendered(fn) {
+        const node = getCurrent();
+        const renderFn = node.renderFn;
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        fn = decorate(fn.bind(node.component), "onRendered");
+        node.renderFn = () => {
+            const result = renderFn();
+            fn();
+            return result;
+        };
+    }
+    function onError(callback) {
+        const node = getCurrent();
+        let handlers = nodeErrorHandlers.get(node);
+        if (!handlers) {
+            handlers = [];
+            nodeErrorHandlers.set(node, handlers);
+        }
+        handlers.push(callback.bind(node.component));
+    }
 
     class Component {
         constructor(props, env, node) {
@@ -4491,8 +5011,8 @@
             this.__owl__ = node;
         }
         setup() { }
-        render() {
-            this.__owl__.render();
+        render(deep = false) {
+            this.__owl__.render(deep);
         }
     }
     Component.template = "";
@@ -4561,75 +5081,293 @@
         slots: true,
     };
 
-    // -----------------------------------------------------------------------------
-    //  Scheduler
-    // -----------------------------------------------------------------------------
-    class Scheduler {
-        constructor() {
-            this.tasks = new Set();
-            this.isRunning = false;
-            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+    /**
+     * This file contains utility functions that will be injected in each template,
+     * to perform various useful tasks in the compiled code.
+     */
+    function withDefault(value, defaultValue) {
+        return value === undefined || value === null || value === false ? defaultValue : value;
+    }
+    function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
+        key = key + "__slot_" + name;
+        const slots = ctx.props[TARGET].slots || {};
+        const { __render, __ctx, __scope } = slots[name] || {};
+        const slotScope = Object.create(__ctx || {});
+        if (__scope) {
+            slotScope[__scope] = extra;
+        }
+        const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+        if (defaultContent) {
+            let child1 = undefined;
+            let child2 = undefined;
+            if (slotBDom) {
+                child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+            }
+            else {
+                child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+            }
+            return multi([child1, child2]);
+        }
+        return slotBDom || text("");
+    }
+    function capture(ctx) {
+        const component = ctx.__owl__.component;
+        const result = Object.create(component);
+        for (let k in ctx) {
+            result[k] = ctx[k];
+        }
+        return result;
+    }
+    function withKey(elem, k) {
+        elem.key = k;
+        return elem;
+    }
+    function prepareList(collection) {
+        let keys;
+        let values;
+        if (Array.isArray(collection)) {
+            keys = collection;
+            values = collection;
+        }
+        else if (collection) {
+            values = Object.keys(collection);
+            keys = Object.values(collection);
         }
-        start() {
-            this.isRunning = true;
-            this.scheduleTasks();
+        else {
+            throw new Error("Invalid loop expression");
+        }
+        const n = values.length;
+        return [keys, values, n, new Array(n)];
+    }
+    const isBoundary = Symbol("isBoundary");
+    function setContextValue(ctx, key, value) {
+        const ctx0 = ctx;
+        while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+            const newCtx = ctx.__proto__;
+            if (!newCtx) {
+                ctx = ctx0;
+                break;
+            }
+            ctx = newCtx;
+        }
+        ctx[key] = value;
+    }
+    function toNumber(val) {
+        const n = parseFloat(val);
+        return isNaN(n) ? val : n;
+    }
+    function shallowEqual(l1, l2) {
+        for (let i = 0, l = l1.length; i < l; i++) {
+            if (l1[i] !== l2[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    class LazyValue {
+        constructor(fn, ctx, node) {
+            this.fn = fn;
+            this.ctx = capture(ctx);
+            this.node = node;
+        }
+        evaluate() {
+            return this.fn(this.ctx, this.node);
+        }
+        toString() {
+            return this.evaluate().toString();
+        }
+    }
+    /*
+     * Safely outputs `value` as a block depending on the nature of `value`
+     */
+    function safeOutput(value) {
+        if (!value) {
+            return value;
+        }
+        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;
+        }
+        return toggler(safeKey, block);
+    }
+    let boundFunctions = new WeakMap();
+    function bind(ctx, fn) {
+        let component = ctx.__owl__.component;
+        let boundFnMap = boundFunctions.get(component);
+        if (!boundFnMap) {
+            boundFnMap = new WeakMap();
+            boundFunctions.set(component, boundFnMap);
+        }
+        let boundFn = boundFnMap.get(fn);
+        if (!boundFn) {
+            boundFn = fn.bind(component);
+            boundFnMap.set(fn, boundFn);
+        }
+        return boundFn;
+    }
+    function multiRefSetter(refs, name) {
+        let count = 0;
+        return (el) => {
+            if (el) {
+                count++;
+                if (count > 1) {
+                    throw new Error("Cannot have 2 elements with same ref name at the same time");
+                }
+            }
+            if (count === 0 || el) {
+                refs[name] = el;
+            }
+        };
+    }
+    const helpers = {
+        withDefault,
+        zero: Symbol("zero"),
+        isBoundary,
+        callSlot,
+        capture,
+        withKey,
+        prepareList,
+        setContextValue,
+        multiRefSetter,
+        shallowEqual,
+        toNumber,
+        validateProps,
+        LazyValue,
+        safeOutput,
+        bind,
+        createCatcher,
+    };
+
+    const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+    function parseXML(xml) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(xml, "text/xml");
+        if (doc.getElementsByTagName("parsererror").length) {
+            let msg = "Invalid XML in template.";
+            const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+            if (parsererrorText) {
+                msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+                const re = /\d+/g;
+                const firstMatch = re.exec(parsererrorText);
+                if (firstMatch) {
+                    const lineNumber = Number(firstMatch[0]);
+                    const line = xml.split("\n")[lineNumber - 1];
+                    const secondMatch = re.exec(parsererrorText);
+                    if (line && secondMatch) {
+                        const columnIndex = Number(secondMatch[0]) - 1;
+                        if (line[columnIndex]) {
+                            msg +=
+                                `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+                                    `${line}\n${"-".repeat(columnIndex - 1)}^`;
+                        }
+                    }
+                }
+            }
+            throw new Error(msg);
+        }
+        return doc;
+    }
+    /**
+     * Returns the helpers object that will be injected in each template closure
+     * function
+     */
+    function makeHelpers(getTemplate) {
+        return Object.assign({}, helpers, {
+            Portal,
+            markRaw,
+            getTemplate,
+            call: (owner, subTemplate, ctx, parent, key) => {
+                const template = getTemplate(subTemplate);
+                return toggler(subTemplate, template.call(owner, ctx, parent, key));
+            },
+        });
+    }
+    class TemplateSet {
+        constructor(config = {}) {
+            this.rawTemplates = Object.create(globalTemplates);
+            this.templates = {};
+            this.dev = config.dev || false;
+            this.translateFn = config.translateFn;
+            this.translatableAttributes = config.translatableAttributes;
+            if (config.templates) {
+                this.addTemplates(config.templates);
+            }
+            this.helpers = makeHelpers(this.getTemplate.bind(this));
         }
-        stop() {
-            this.isRunning = false;
+        addTemplate(name, template, options = {}) {
+            if (name in this.rawTemplates && !options.allowDuplicate) {
+                throw new Error(`Template ${name} already defined`);
+            }
+            this.rawTemplates[name] = template;
         }
-        addFiber(fiber) {
-            this.tasks.add(fiber.root);
-            if (!this.isRunning) {
-                this.start();
+        addTemplates(xml, options = {}) {
+            if (!xml) {
+                // empty string
+                return;
+            }
+            xml = xml instanceof Document ? xml : parseXML(xml);
+            for (const template of xml.querySelectorAll("[t-name]")) {
+                const name = template.getAttribute("t-name");
+                this.addTemplate(name, template, options);
             }
         }
-        /**
-         * Process all current tasks. This only applies to the fibers that are ready.
-         * Other tasks are left unchanged.
-         */
-        flush() {
-            this.tasks.forEach((fiber) => {
-                if (fiber.root !== fiber) {
-                    this.tasks.delete(fiber);
-                    return;
-                }
-                const hasError = fibersInError.has(fiber);
-                if (hasError && fiber.counter !== 0) {
-                    this.tasks.delete(fiber);
-                    return;
-                }
-                if (fiber.node.status === 2 /* DESTROYED */) {
-                    this.tasks.delete(fiber);
-                    return;
-                }
-                if (fiber.counter === 0) {
-                    if (!hasError) {
-                        fiber.complete();
+        getTemplate(name) {
+            if (!(name in this.templates)) {
+                const rawTemplate = this.rawTemplates[name];
+                if (rawTemplate === undefined) {
+                    let extraInfo = "";
+                    try {
+                        const componentName = getCurrent().component.constructor.name;
+                        extraInfo = ` (for component "${componentName}")`;
                     }
-                    this.tasks.delete(fiber);
+                    catch { }
+                    throw new Error(`Missing template: "${name}"${extraInfo}`);
                 }
-            });
-            if (this.tasks.size === 0) {
-                this.stop();
+                const templateFn = this._compileTemplate(name, rawTemplate);
+                // first add a function to lazily get the template, in case there is a
+                // recursive call to the template name
+                const templates = this.templates;
+                this.templates[name] = function (context, parent) {
+                    return templates[name].call(this, context, parent);
+                };
+                const template = templateFn(bdom, this.helpers);
+                this.templates[name] = template;
             }
+            return this.templates[name];
         }
-        scheduleTasks() {
-            this.requestAnimationFrame(() => {
-                this.flush();
-                if (this.isRunning) {
-                    this.scheduleTasks();
-                }
+        _compileTemplate(name, template) {
+            return compile(template, {
+                name,
+                dev: this.dev,
+                translateFn: this.translateFn,
+                translatableAttributes: this.translatableAttributes,
             });
         }
-    }
-    // capture the value of requestAnimationFrame as soon as possible, to avoid
-    // interactions with other code, such as test frameworks that override them
-    Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
+    }
 
-    const DEV_MSG = `Owl is running in 'dev' mode.
+    let hasBeenLogged = false;
+    const DEV_MSG = () => {
+        const hash = window.owl ? window.owl.__info__.hash : "master";
+        return `Owl is running in 'dev' mode.
 
 This is not suitable for production use.
-See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for more information.`;
+See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
+    };
     class App extends TemplateSet {
         constructor(Root, config = {}) {
             super(config);
@@ -4639,11 +5377,13 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
             if (config.test) {
                 this.dev = true;
             }
-            if (this.dev && !config.test) {
-                console.info(DEV_MSG);
+            if (this.dev && !config.test && !hasBeenLogged) {
+                console.info(DEV_MSG());
+                hasBeenLogged = true;
             }
-            const descrs = Object.getOwnPropertyDescriptors(config.env || {});
-            this.env = Object.freeze(Object.defineProperties({}, descrs));
+            const env = config.env || {};
+            const descrs = Object.getOwnPropertyDescriptors(env);
+            this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
             this.props = config.props || {};
         }
         mount(target, options) {
@@ -4654,7 +5394,7 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
             return prom;
         }
         makeNode(Component, props) {
-            return new ComponentNode(Component, props, this);
+            return new ComponentNode(Component, props, this, null, null);
         }
         mountNode(node, target, options) {
             const promise = new Promise((resolve, reject) => {
@@ -4686,6 +5426,7 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
         }
         destroy() {
             if (this.root) {
+                this.scheduler.flush();
                 this.root.destroy();
             }
         }
@@ -4706,270 +5447,6 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
         }
     }
 
-    class Memo extends Component {
-        constructor(props, env, node) {
-            super(props, env, node);
-            // prevent patching process conditionally
-            let applyPatch = false;
-            const patchFn = node.patch;
-            node.patch = () => {
-                if (applyPatch) {
-                    patchFn.call(node);
-                    applyPatch = false;
-                }
-            };
-            // check props change, and render/apply patch if it changed
-            let prevProps = props;
-            const updateAndRender = node.updateAndRender;
-            node.updateAndRender = function (props, parentFiber) {
-                const shouldUpdate = !shallowEqual(prevProps, props);
-                if (shouldUpdate) {
-                    prevProps = props;
-                    updateAndRender.call(node, props, parentFiber);
-                    applyPatch = true;
-                }
-                return Promise.resolve();
-            };
-        }
-    }
-    Memo.template = xml `<t t-slot="default"/>`;
-    /**
-     * we assume that each object have the same set of keys
-     */
-    function shallowEqual(p1, p2) {
-        for (let k in p1) {
-            if (k !== "slots" && p1[k] !== p2[k]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    // 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;
-    /**
-     * 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") {
-            return false;
-        }
-        // 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]).
-        const rawType = objectToString.call(value).slice(8, -1);
-        return rawType === "Object" || rawType === "Array";
-    }
-    /**
-     * 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];
-    }
-    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 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);
-    }
-    /**
-     * 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();
-        }
-    }
-    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;
-            }
-            for (const callbacks of observedKeys.values()) {
-                callbacks.delete(callback);
-            }
-        }
-        targetsToClear.clear();
-    }
-    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`);
-        }
-        if (SKIP in target) {
-            return target;
-        }
-        const originalTarget = target[TARGET];
-        if (originalTarget) {
-            return reactive(originalTarget, callback);
-        }
-        if (!reactiveCache.has(target)) {
-            reactiveCache.set(target, new Map());
-        }
-        const reactivesForTarget = reactiveCache.get(target);
-        if (!reactivesForTarget.has(callback)) {
-            const proxy = new Proxy(target, {
-                get(target, key, proxy) {
-                    if (key === TARGET) {
-                        return target;
-                    }
-                    observeTargetKey(target, key, callback);
-                    const value = Reflect.get(target, key, proxy);
-                    if (!canBeMadeReactive(value)) {
-                        return value;
-                    }
-                    return reactive(value, callback);
-                },
-                set(target, key, value, proxy) {
-                    const isNewKey = !Object.hasOwnProperty.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);
-                    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
-                    observeTargetKey(target, KEYCHANGES, callback);
-                    return Reflect.has(target, key);
-                },
-            });
-            reactivesForTarget.set(callback, proxy);
-        }
-        return reactivesForTarget.get(callback);
-    }
-    const batchedRenderFunctions = new WeakMap();
-    /**
-     * Creates a reactive object that will be observed by the current component.
-     * Reading data from the returned object (eg during rendering) will cause the
-     * component to subscribe to that data and be rerendered when it changes.
-     *
-     * @param state the state to observe
-     * @returns a reactive object that will cause the component to re-render on
-     *  relevant changes
-     * @see reactive
-     */
-    function useState(state) {
-        const node = getCurrent();
-        if (!batchedRenderFunctions.has(node)) {
-            batchedRenderFunctions.set(node, batched(() => node.render()));
-            onWillDestroy(() => clearReactivesForCallback(render));
-        }
-        const render = batchedRenderFunctions.get(node);
-        const reactiveState = reactive(state, render);
-        return reactiveState;
-    }
-
     // -----------------------------------------------------------------------------
     // useRef
     // -----------------------------------------------------------------------------
@@ -5015,10 +5492,6 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
         const node = getCurrent();
         node.childEnv = extendEnv(node.childEnv, envExtension);
     }
-    // -----------------------------------------------------------------------------
-    // useEffect
-    // -----------------------------------------------------------------------------
-    const NO_OP = () => { };
     /**
      * This hook will run a callback when a component is mounted and patched, and
      * will run a cleanup function before patching and before unmounting the
@@ -5036,18 +5509,20 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
         let dependencies;
         onMounted(() => {
             dependencies = computeDependencies();
-            cleanup = effect(...dependencies) || NO_OP;
+            cleanup = effect(...dependencies);
         });
         onPatched(() => {
             const newDeps = computeDependencies();
             const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
             if (shouldReapply) {
                 dependencies = newDeps;
-                cleanup();
-                cleanup = effect(...dependencies) || NO_OP;
+                if (cleanup) {
+                    cleanup();
+                }
+                cleanup = effect(...dependencies);
             }
         });
-        onWillUnmount(() => cleanup());
+        onWillUnmount(() => cleanup && cleanup());
     }
     // -----------------------------------------------------------------------------
     // useExternalListener
@@ -5074,7 +5549,6 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
 
     config.shouldNormalizeDom = false;
     config.mainEventHandler = mainEventHandler;
-    UTILS.Portal = Portal;
     const blockDom = {
         config,
         // bdom entry points
@@ -5095,7 +5569,6 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
     exports.App = App;
     exports.Component = Component;
     exports.EventBus = EventBus;
-    exports.Memo = Memo;
     exports.__info__ = __info__;
     exports.blockDom = blockDom;
     exports.loadFile = loadFile;
@@ -5129,9 +5602,9 @@ See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for mor
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.version = '2.0.0-alpha.2';
-    __info__.date = '2022-02-14T12:42:47.468Z';
-    __info__.hash = '4a922ed';
+    __info__.version = '2.0.0-beta-5';
+    __info__.date = '2022-04-07T13:36:37.300Z';
+    __info__.hash = '1179e84';
     __info__.url = 'https://github.com/odoo/owl';