@odoo/owl 2.0.0-alpha.3 → 2.0.0-beta-4

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,769 +1899,580 @@
      */
     function markup(value) {
         return new Markup(value);
-    }
+    }
+    // -----------------------------------------------------------------------------
+    //  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;
 
-    // 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") {
+    // Maps fibers to thrown errors
+    const fibersInError = new WeakMap();
+    const nodeErrorHandlers = new WeakMap();
+    function _handleError(node, error, isFirstRound = false) {
+        if (!node) {
             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] || value;
-    }
-    const targetToKeysToCallbacks = new WeakMap();
-    /**
-     * Observes a given key on a target with an callback. The callback will be
-     * called when the given key changes on the target.
-     *
-     * @param target the target whose key should be observed
-     * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
-     *  or deletion)
-     * @param callback the function to call when the key changes
-     */
-    function observeTargetKey(target, key, callback) {
-        if (!targetToKeysToCallbacks.get(target)) {
-            targetToKeysToCallbacks.set(target, new Map());
+        const fiber = node.fiber;
+        if (fiber) {
+            fibersInError.set(fiber, error);
         }
-        const keyToCallbacks = targetToKeysToCallbacks.get(target);
-        if (!keyToCallbacks.get(key)) {
-            keyToCallbacks.set(key, new Set());
+        const errorHandlers = nodeErrorHandlers.get(node);
+        if (errorHandlers) {
+            let 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) {
+                    const root = fiber.root;
+                    root.setCounter(root.counter - 1);
+                }
+                return true;
+            }
         }
-        keyToCallbacks.get(key).add(callback);
-        if (!callbacksToTargets.has(callback)) {
-            callbacksToTargets.set(callback, new Set());
+        return _handleError(node.parent, error);
+    }
+    function handleError(params) {
+        const error = params.error;
+        const node = "node" in params ? params.node : params.fiber.node;
+        const fiber = "fiber" in params ? params.fiber : node.fiber;
+        // resets the fibers on components if possible. This is important so that
+        // new renderings can be properly included in the initial one, if any.
+        let current = fiber;
+        do {
+            current.node.fiber = current;
+            current = current.parent;
+        } while (current);
+        fibersInError.set(fiber.root, error);
+        const handled = _handleError(node, error, true);
+        if (!handled) {
+            console.warn(`[Owl] Unhandled error. Destroying the root component`);
+            try {
+                node.app.destroy();
+            }
+            catch (e) {
+                console.error(e);
+            }
         }
-        callbacksToTargets.get(callback).add(target);
+    }
+
+    function makeChildFiber(node, parent) {
+        let current = node.fiber;
+        if (current) {
+            cancelFibers(current.children);
+            current.root = null;
+            if (current instanceof RootFiber && current.delayedRenders.length) {
+                let root = parent.root;
+                root.delayedRenders = root.delayedRenders.concat(current.delayedRenders);
+            }
+        }
+        return new Fiber(node, parent);
     }
-    /**
-     * Notify Reactives that are observing a given target that a key has changed on
-     * the target.
-     *
-     * @param target target whose Reactives should be notified that the target was
-     *  changed.
-     * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
-     *   or deleted)
-     */
-    function notifyReactives(target, key) {
-        const keyToCallbacks = targetToKeysToCallbacks.get(target);
-        if (!keyToCallbacks) {
-            return;
+    function makeRootFiber(node) {
+        let current = node.fiber;
+        if (current) {
+            let root = current.root;
+            root.setCounter(root.counter + 1 - cancelFibers(current.children));
+            current.children = [];
+            current.bdom = null;
+            if (current === root) {
+                root.reachedChildren = new WeakSet();
+            }
+            if (fibersInError.has(current)) {
+                fibersInError.delete(current);
+                fibersInError.delete(root);
+                current.appliedToDom = false;
+            }
+            return current;
         }
-        const callbacks = keyToCallbacks.get(key);
-        if (!callbacks) {
-            return;
+        const fiber = new RootFiber(node, null);
+        if (node.willPatch.length) {
+            fiber.willPatch.push(fiber);
         }
-        // Loop on copy because clearReactivesForCallback will modify the set in place
-        for (const callback of [...callbacks]) {
-            clearReactivesForCallback(callback);
-            callback();
+        if (node.patched.length) {
+            fiber.patched.push(fiber);
         }
+        return fiber;
     }
-    const callbacksToTargets = new WeakMap();
     /**
-     * Clears all subscriptions of the Reactives associated with a given callback.
-     *
-     * @param callback the callback for which the reactives need to be cleared
+     * @returns number of not-yet rendered fibers cancelled
      */
-    function clearReactivesForCallback(callback) {
-        const targetsToClear = callbacksToTargets.get(callback);
-        if (!targetsToClear) {
-            return;
-        }
-        for (const target of targetsToClear) {
-            const observedKeys = targetToKeysToCallbacks.get(target);
-            if (!observedKeys) {
-                continue;
+    function cancelFibers(fibers) {
+        let result = 0;
+        for (let fiber of fibers) {
+            fiber.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.
+                fiber.node.forceNextRender = true;
             }
-            for (const callbacks of observedKeys.values()) {
-                callbacks.delete(callback);
+            else {
+                result++;
             }
+            result += cancelFibers(fiber.children);
         }
-        targetsToClear.clear();
+        return result;
     }
-    const reactiveCache = new WeakMap();
-    /**
-     * Creates a reactive proxy for an object. Reading data on the reactive object
-     * subscribes to changes to the data. Writing data on the object will cause the
-     * notify callback to be called if there are suscriptions to that data. Nested
-     * objects and arrays are automatically made reactive as well.
-     *
-     * Whenever you are notified of a change, all subscriptions are cleared, and if
-     * you would like to be notified of any further changes, you should go read
-     * the underlying data again. We assume that if you don't go read it again after
-     * being notified, it means that you are no longer interested in that data.
-     *
-     * Subscriptions:
-     * + Reading a property on an object will subscribe you to changes in the value
-     *    of that property.
-     * + Accessing an object keys (eg with Object.keys or with `for..in`) will
-     *    subscribe you to the creation/deletion of keys. Checking the presence of a
-     *    key on the object with 'in' has the same effect.
-     * - getOwnPropertyDescriptor does not currently subscribe you to the property.
-     *    This is a choice that was made because changing a key's value will trigger
-     *    this trap and we do not want to subscribe by writes. This also means that
-     *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
-     *
-     * @param target the object for which to create a reactive proxy
-     * @param callback the function to call when an observed property of the
-     *  reactive has changed
-     * @returns a proxy that tracks changes to it
-     */
-    function reactive(target, callback = () => { }) {
-        if (!canBeMadeReactive(target)) {
-            throw new Error(`Cannot make the given value reactive`);
+    class Fiber {
+        constructor(node, parent) {
+            this.bdom = null;
+            this.children = [];
+            this.appliedToDom = false;
+            this.deep = false;
+            this.node = node;
+            this.parent = parent;
+            if (parent) {
+                this.deep = parent.deep;
+                const root = parent.root;
+                root.setCounter(root.counter + 1);
+                this.root = root;
+                parent.children.push(this);
+            }
+            else {
+                this.root = this;
+            }
         }
-        if (SKIP in target) {
-            return target;
+        render() {
+            // if some parent has a fiber => register in followup
+            let prev = this.root.node;
+            let current = prev.parent;
+            while (current) {
+                if (current.fiber) {
+                    let root = current.fiber.root;
+                    if (root.counter) {
+                        root.delayedRenders.push(this);
+                        return;
+                    }
+                    else {
+                        if (!root.reachedChildren.has(prev)) {
+                            // is dead
+                            this.node.app.scheduler.shouldClear = true;
+                            return;
+                        }
+                        current = root.node;
+                    }
+                }
+                prev = current;
+                current = current.parent;
+            }
+            // there are no current rendering from above => we can render
+            this._render();
         }
-        const originalTarget = target[TARGET];
-        if (originalTarget) {
-            return reactive(originalTarget, callback);
+        _render() {
+            const node = this.node;
+            const root = this.root;
+            if (root) {
+                try {
+                    this.bdom = node.renderFn();
+                    root.setCounter(root.counter - 1);
+                }
+                catch (e) {
+                    handleError({ node, error: e });
+                }
+            }
         }
-        if (!reactiveCache.has(target)) {
-            reactiveCache.set(target, new Map());
+    }
+    class RootFiber extends Fiber {
+        constructor() {
+            super(...arguments);
+            this.counter = 1;
+            // only add stuff in this if they have registered some hooks
+            this.willPatch = [];
+            this.patched = [];
+            this.mounted = [];
+            // A fiber is typically locked when it is completing and the patch has not, or is being applied.
+            // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
+            this.locked = false;
+            this.delayedRenders = [];
+            this.reachedChildren = new WeakSet();
         }
-        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;
+        complete() {
+            const node = this.node;
+            this.locked = true;
+            let current = undefined;
+            try {
+                // Step 1: calling all willPatch lifecycle hooks
+                for (current of this.willPatch) {
+                    // because of the asynchronous nature of the rendering, some parts of the
+                    // UI may have been rendered, then deleted in a followup rendering, and we
+                    // do not want to call onWillPatch in that case.
+                    let node = current.node;
+                    if (node.fiber === current) {
+                        const component = node.component;
+                        for (let cb of node.willPatch) {
+                            cb.call(component);
+                        }
                     }
-                    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);
+                }
+                current = undefined;
+                // Step 2: patching the dom
+                node._patch();
+                this.locked = false;
+                // Step 4: calling all mounted lifecycle hooks
+                let mountedFibers = this.mounted;
+                while ((current = mountedFibers.pop())) {
+                    current = current;
+                    if (current.appliedToDom) {
+                        for (let cb of current.node.mounted) {
+                            cb();
+                        }
                     }
-                    // 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);
+                }
+                // Step 5: calling all patched hooks
+                let patchedFibers = this.patched;
+                while ((current = patchedFibers.pop())) {
+                    current = current;
+                    if (current.appliedToDom) {
+                        for (let cb of current.node.patched) {
+                            cb();
+                        }
                     }
-                    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);
-    }
-
-    /**
-     * 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);
+            catch (e) {
+                this.locked = false;
+                handleError({ fiber: current || this, error: e });
             }
-            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];
+        setCounter(newValue) {
+            this.counter = newValue;
+            if (newValue === 0) {
+                if (this.delayedRenders.length) {
+                    for (let f of this.delayedRenders) {
+                        if (f.root) {
+                            f.render();
+                        }
+                    }
+                    this.delayedRenders = [];
+                }
+                this.node.app.scheduler.flush();
+            }
         }
-        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);
+    class MountFiber extends RootFiber {
+        constructor(node, target, options = {}) {
+            super(node, null);
+            this.target = target;
+            this.position = options.position || "last-child";
         }
-        else {
-            throw new Error("Invalid loop expression");
+        complete() {
+            let current = this;
+            try {
+                const node = this.node;
+                node.app.constructor.validateTarget(this.target);
+                if (node.bdom) {
+                    // this is a complicated situation: if we mount a fiber with an existing
+                    // bdom, this means that this same fiber was already completed, mounted,
+                    // but a crash occurred in some mounted hook. Then, it was handled and
+                    // the new rendering is being applied.
+                    node.updateDom();
+                }
+                else {
+                    node.bdom = this.bdom;
+                    if (this.position === "last-child" || this.target.childNodes.length === 0) {
+                        mount$1(node.bdom, this.target);
+                    }
+                    else {
+                        const firstChild = this.target.childNodes[0];
+                        mount$1(node.bdom, this.target, firstChild);
+                    }
+                }
+                // unregistering the fiber before mounted since it can do another render
+                // and that the current rendering is obviously completed
+                node.fiber = null;
+                node.status = 1 /* MOUNTED */;
+                this.appliedToDom = true;
+                let mountedFibers = this.mounted;
+                while ((current = mountedFibers.pop())) {
+                    if (current.appliedToDom) {
+                        for (let cb of current.node.mounted) {
+                            cb();
+                        }
+                    }
+                }
+            }
+            catch (e) {
+                handleError({ fiber: current, error: e });
+            }
         }
-        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;
+    }
+
+    /**
+     * 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];
+                }
             }
-            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;
-            }
+    //------------------------------------------------------------------------------
+    // 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 true;
+        return staticProps || { "*": true };
     }
-    class LazyValue {
-        constructor(fn, ctx, node) {
-            this.fn = fn;
-            this.ctx = capture(ctx);
-            this.node = node;
+    /**
+     * 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;
         }
-        evaluate() {
-            return this.fn(this.ctx, this.node);
+        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}'`);
+            }
         }
-        toString() {
-            return this.evaluate().toString();
+        if (!allowAdditionalProps) {
+            for (let propName in props) {
+                if (!(propName in propsDef)) {
+                    throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
+                }
+            }
         }
     }
-    /*
-     * Safely outputs `value` as a block depending on the nature of `value`
+    /**
+     * Check if an invidual prop value matches its (static) prop definition
      */
-    function safeOutput(value) {
-        if (!value) {
-            return value;
-        }
-        let safeKey;
-        let block;
-        if (value instanceof Markup) {
-            safeKey = `string_safe`;
-            block = html(value);
+    function isValidProp(prop, propDef) {
+        if (propDef === true) {
+            return true;
         }
-        else if (value instanceof LazyValue) {
-            safeKey = `lazy_value`;
-            block = value.evaluate();
+        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 (value instanceof String || typeof value === "string") {
-            safeKey = "string_unsafe";
-            block = text(value);
+        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;
         }
-        else {
-            // Assuming it is a block
-            safeKey = "block_safe";
-            block = value;
+        // propsDef is an object
+        if (propDef.optional && prop === undefined) {
+            return true;
         }
-        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 result = propDef.type ? isValidProp(prop, propDef.type) : true;
+        if (propDef.validate) {
+            result = result && propDef.validate(prop);
         }
-        let boundFn = boundFnMap.get(fn);
-        if (!boundFn) {
-            boundFn = fn.bind(component);
-            boundFnMap.set(fn, boundFn);
+        if (propDef.type === Array && propDef.element) {
+            for (let i = 0, iLen = prop.length; i < iLen; i++) {
+                result = result && isValidProp(prop[i], propDef.element);
+            }
         }
-        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 (propDef.type === Object && propDef.shape) {
+            const shape = propDef.shape;
+            for (let key in shape) {
+                result = result && isValidProp(prop[key], shape[key]);
             }
-            if (count === 0 || el) {
-                refs[name] = el;
+            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;
     }
-    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);
+    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));
         }
-        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 reactive(state, render);
+    }
+    function arePropsDifferent(props1, props2) {
+        for (let k in props1) {
+            if (props1[k] !== props2[k]) {
                 return true;
             }
         }
-        return _handleError(node.parent, error);
+        return Object.keys(props1).length !== Object.keys(props2).length;
     }
-    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();
+    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;
             }
-            catch (e) {
-                console.error(e);
+            else if (node.status === 2 /* DESTROYED */) {
+                node = undefined;
             }
         }
-    }
-
-    function makeChildFiber(node, parent) {
-        let current = node.fiber;
-        if (current) {
-            cancelFibers(current.children);
-            current.root = null;
+        if (isDynamic && node && node.component.constructor !== name) {
+            node = undefined;
         }
-        return new Fiber(node, parent);
-    }
-    function makeRootFiber(node) {
-        let current = node.fiber;
-        if (current) {
-            let root = current.root;
-            root.counter = root.counter + 1 - cancelFibers(current.children);
-            current.children = [];
-            current.bdom = null;
-            if (fibersInError.has(current)) {
-                fibersInError.delete(current);
-                fibersInError.delete(root);
-                current.appliedToDom = false;
+        const parentFiber = ctx.fiber;
+        if (node) {
+            let shouldRender = node.forceNextRender;
+            if (shouldRender) {
+                node.forceNextRender = 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;
-    }
-    /**
-     * @returns number of not-yet rendered fibers cancelled
-     */
-    function cancelFibers(fibers) {
-        let result = 0;
-        for (let fiber of fibers) {
-            fiber.node.fiber = null;
-            if (!fiber.bdom) {
-                result++;
+            else {
+                const currentProps = node.component.props[TARGET];
+                shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
+            }
+            if (shouldRender) {
+                node.updateAndRender(props, parentFiber);
             }
-            result += cancelFibers(fiber.children);
         }
-        return result;
-    }
-    class Fiber {
-        constructor(node, parent) {
-            this.bdom = null;
-            this.children = [];
-            this.appliedToDom = false;
-            this.deep = false;
-            this.node = node;
-            this.parent = parent;
-            if (parent) {
-                this.deep = parent.deep;
-                const root = parent.root;
-                root.counter++;
-                this.root = root;
-                parent.children.push(this);
+        else {
+            // new component
+            let C;
+            if (isDynamic) {
+                C = name;
             }
             else {
-                this.root = this;
+                C = parent.constructor.components[name];
+                if (!C) {
+                    throw new Error(`Cannot find the definition of component "${name}"`);
+                }
             }
+            node = new ComponentNode(C, props, ctx.app, ctx);
+            ctx.children[key] = node;
+            node.initiateRender(new Fiber(node, parentFiber));
         }
+        parentFiber.root.reachedChildren.add(node);
+        return node;
     }
-    class RootFiber extends Fiber {
-        constructor() {
-            super(...arguments);
-            this.counter = 1;
-            // only add stuff in this if they have registered some hooks
+    class ComponentNode {
+        constructor(C, props, app, parent) {
+            this.fiber = null;
+            this.bdom = null;
+            this.status = 0 /* NEW */;
+            this.forceNextRender = false;
+            this.children = Object.create(null);
+            this.refs = {};
+            this.willStart = [];
+            this.willUpdateProps = [];
+            this.willUnmount = [];
+            this.mounted = [];
             this.willPatch = [];
             this.patched = [];
-            this.mounted = [];
-            // A fiber is typically locked when it is completing and the patch has not, or is being applied.
-            // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
-            this.locked = false;
-        }
-        complete() {
-            const node = this.node;
-            this.locked = true;
-            let current = undefined;
-            try {
-                // Step 1: calling all willPatch lifecycle hooks
-                for (current of this.willPatch) {
-                    // because of the asynchronous nature of the rendering, some parts of the
-                    // UI may have been rendered, then deleted in a followup rendering, and we
-                    // do not want to call onWillPatch in that case.
-                    let node = current.node;
-                    if (node.fiber === current) {
-                        const component = node.component;
-                        for (let cb of node.willPatch) {
-                            cb.call(component);
-                        }
-                    }
-                }
-                current = undefined;
-                // Step 2: patching the dom
-                node._patch();
-                this.locked = false;
-                // Step 4: calling all mounted lifecycle hooks
-                let mountedFibers = this.mounted;
-                while ((current = mountedFibers.pop())) {
-                    current = current;
-                    if (current.appliedToDom) {
-                        for (let cb of current.node.mounted) {
-                            cb();
-                        }
-                    }
-                }
-                // Step 5: calling all patched hooks
-                let patchedFibers = this.patched;
-                while ((current = patchedFibers.pop())) {
-                    current = current;
-                    if (current.appliedToDom) {
-                        for (let cb of current.node.patched) {
-                            cb();
-                        }
-                    }
-                }
-            }
-            catch (e) {
-                this.locked = false;
-                handleError({ fiber: current || this, error: e });
-            }
-        }
-    }
-    class MountFiber extends RootFiber {
-        constructor(node, target, options = {}) {
-            super(node, null);
-            this.target = target;
-            this.position = options.position || "last-child";
-        }
-        complete() {
-            let current = this;
-            try {
-                const node = this.node;
-                node.app.constructor.validateTarget(this.target);
-                if (node.bdom) {
-                    // this is a complicated situation: if we mount a fiber with an existing
-                    // bdom, this means that this same fiber was already completed, mounted,
-                    // but a crash occurred in some mounted hook. Then, it was handled and
-                    // the new rendering is being applied.
-                    node.updateDom();
-                }
-                else {
-                    node.bdom = this.bdom;
-                    if (this.position === "last-child" || this.target.childNodes.length === 0) {
-                        mount$1(node.bdom, this.target);
-                    }
-                    else {
-                        const firstChild = this.target.childNodes[0];
-                        mount$1(node.bdom, this.target, firstChild);
-                    }
-                }
-                // unregistering the fiber before mounted since it can do another render
-                // and that the current rendering is obviously completed
-                node.fiber = null;
-                node.status = 1 /* MOUNTED */;
-                this.appliedToDom = true;
-                let mountedFibers = this.mounted;
-                while ((current = mountedFibers.pop())) {
-                    if (current.appliedToDom) {
-                        for (let cb of current.node.mounted) {
-                            cb();
-                        }
-                    }
-                }
-            }
-            catch (e) {
-                handleError({ fiber: current, error: e });
-            }
-        }
-    }
-
-    let currentNode = null;
-    function getCurrent() {
-        if (!currentNode) {
-            throw new Error("No active component (a hook function should only be called in 'setup')");
-        }
-        return currentNode;
-    }
-    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 (isDynamic && node && node.component.constructor !== name) {
-            node = undefined;
-        }
-        const parentFiber = ctx.fiber;
-        if (node) {
-            const currentProps = node.component.props[TARGET];
-            if (parentFiber.deep || arePropsDifferent(currentProps, props)) {
-                node.updateAndRender(props, parentFiber);
-            }
-        }
-        else {
-            // new component
-            let C;
-            if (isDynamic) {
-                C = name;
-            }
-            else {
-                C = parent.constructor.components[name];
-                if (!C) {
-                    throw new Error(`Cannot find the definition of component "${name}"`);
-                }
-            }
-            node = new ComponentNode(C, props, ctx.app, ctx);
-            ctx.children[key] = node;
-            node.initiateRender(new Fiber(node, parentFiber));
-        }
-        return node;
-    }
-    class ComponentNode {
-        constructor(C, props, app, parent) {
-            this.fiber = null;
-            this.bdom = null;
-            this.status = 0 /* NEW */;
-            this.children = Object.create(null);
-            this.refs = {};
-            this.willStart = [];
-            this.willUpdateProps = [];
-            this.willUnmount = [];
-            this.mounted = [];
-            this.willPatch = [];
-            this.patched = [];
-            this.willDestroy = [];
-            currentNode = this;
-            this.app = app;
-            this.parent = parent || null;
-            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();
-            currentNode = null;
+            this.willDestroy = [];
+            currentNode = this;
+            this.app = app;
+            this.parent = parent || null;
+            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();
+            currentNode = null;
         }
         mountComponent(target, options) {
             const fiber = new MountFiber(this, target, options);
@@ -2282,7 +2493,7 @@
                 return;
             }
             if (this.status === 0 /* NEW */ && this.fiber === fiber) {
-                this._render(fiber);
+                fiber.render();
             }
         }
         async render(deep = false) {
@@ -2326,16 +2537,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() {
@@ -2375,7 +2577,7 @@
                 return;
             }
             component.props = props;
-            this._render(fiber);
+            fiber.render();
             const parentRoot = parentFiber.root;
             if (this.willPatch.length) {
                 parentRoot.willPatch.push(fiber);
@@ -2463,98 +2665,76 @@
                 }
             }
         }
+        // ---------------------------------------------------------------------------
+        // Some debug helpers
+        // ---------------------------------------------------------------------------
+        get name() {
+            return this.component.constructor.name;
+        }
+        get subscriptions() {
+            const render = batchedRenderFunctions.get(this);
+            return render ? getSubscriptions(render) : [];
+        }
     }
 
-    function wrapError(fn, hookName) {
-        const error = new Error(`The following error occurred in ${hookName}: `);
-        return (...args) => {
-            try {
-                const result = fn(...args);
-                if (result instanceof Promise) {
-                    return result.catch((cause) => {
-                        error.cause = cause;
-                        if (cause instanceof Error) {
-                            error.message += `"${cause.message}"`;
+    // -----------------------------------------------------------------------------
+    //  Scheduler
+    // -----------------------------------------------------------------------------
+    class Scheduler {
+        constructor() {
+            this.tasks = new Set();
+            this.frame = 0;
+            this.shouldClear = false;
+            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+        }
+        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.frame === 0) {
+                this.frame = this.requestAnimationFrame(() => {
+                    this.frame = 0;
+                    this.tasks.forEach((fiber) => this.processFiber(fiber));
+                    if (this.shouldClear) {
+                        this.shouldClear = false;
+                        for (let task of this.tasks) {
+                            if (task.node.status === 2 /* DESTROYED */) {
+                                this.tasks.delete(task);
+                            }
                         }
-                        throw error;
-                    });
-                }
-                return result;
+                    }
+                });
             }
-            catch (cause) {
-                if (cause instanceof Error) {
-                    error.message += `"${cause.message}"`;
+        }
+        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();
                 }
-                throw error;
+                this.tasks.delete(fiber);
             }
-        };
+        }
     }
-    // -----------------------------------------------------------------------------
-    //  hooks
-    // -----------------------------------------------------------------------------
-    function onWillStart(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
-    }
-    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;
-        node.renderFn = decorate(() => {
-            fn.call(node.component);
-            return renderFn();
-        }, "onWillRender");
-    }
-    function onRendered(fn) {
-        const node = getCurrent();
-        const renderFn = node.renderFn;
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.renderFn = decorate(() => {
-            const result = renderFn();
-            fn.call(node.component);
-            return result;
-        }, "onRendered");
-    }
-    function onError(callback) {
-        const node = getCurrent();
-        let handlers = nodeErrorHandlers.get(node);
-        if (!handlers) {
-            handlers = [];
-            nodeErrorHandlers.set(node, handlers);
-        }
-        handlers.push(callback.bind(node.component));
-    }
+    // 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
@@ -2708,24 +2888,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;
     }
@@ -2930,7 +3117,7 @@
         }, params);
     }
     class CodeTarget {
-        constructor(name) {
+        constructor(name, on) {
             this.indentLevel = 0;
             this.loopLevel = 0;
             this.code = [];
@@ -2941,6 +3128,7 @@
             this.refInfo = {};
             this.shouldProtectScope = false;
             this.name = name;
+            this.on = on || null;
         }
         addLine(line, idx) {
             const prefix = new Array(this.indentLevel + 2).join("  ");
@@ -2990,7 +3178,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) {
@@ -3033,8 +3221,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) {
@@ -3070,19 +3258,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;
@@ -3124,10 +3314,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);
             }
         }
         /**
@@ -3155,7 +3348,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);
                 }
@@ -3294,7 +3487,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;
                 }
             }
@@ -3376,10 +3569,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) {
@@ -3389,7 +3582,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");
@@ -3437,14 +3630,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);
                 }
             }
         }
@@ -3532,14 +3725,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(", ");
@@ -3560,10 +3753,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++;
@@ -3580,7 +3773,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}}\`)}`);
@@ -3590,8 +3783,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})) {`);
@@ -3619,7 +3812,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,
@@ -3664,14 +3857,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(", ");
@@ -3702,7 +3895,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, {
@@ -3713,7 +3906,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,
@@ -3807,26 +4000,25 @@
         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 slotAst = ast.slots[slotName];
+                    const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
                     const params = [`__render: ${name}, __ctx: ${ctxStr}`];
                     const scope = ast.slots[slotName].scope;
                     if (scope) {
@@ -3852,7 +4044,7 @@
             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)) {
@@ -3864,7 +4056,7 @@
             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}\``;
@@ -3885,9 +4077,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;
@@ -3909,13 +4120,17 @@
             else {
                 if (dynamic) {
                     let name = this.generateId("slot");
-                    this.addLine(`const ${name} = ${slotName};`);
+                    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);
             }
@@ -3936,7 +4151,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) {
@@ -4070,8 +4285,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);
@@ -4079,6 +4294,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")) {
@@ -4116,6 +4332,7 @@
                     targetAttr: isCheckboxInput ? "checked" : "value",
                     specialInitTargetAttr: isRadioInput ? "checked" : null,
                     eventType,
+                    hasDynamicChildren: false,
                     shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
                     shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
                 };
@@ -4136,6 +4353,7 @@
                 if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
                     tModel.hasDynamicChildren = true;
                 }
+                attrs = attrs || {};
                 attrs[attr] = value;
             }
         }
@@ -4286,7 +4504,7 @@
             if (ast && ast.type === 11 /* TComponent */) {
                 return {
                     ...ast,
-                    slots: { default: { content: tcall } },
+                    slots: { default: { content: tcall, scope: null, on: null, attrs: null } },
                 };
             }
         }
@@ -4370,7 +4588,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.",
@@ -4399,18 +4616,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
@@ -4438,246 +4663,614 @@
                 slotNode.remove();
                 const slotAst = parseNode(slotNode, ctx);
                 if (slotAst) {
-                    const slotInfo = { content: slotAst };
-                    const attrs = {};
+                    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") {
-                            slotInfo.scope = value;
+                            scope = value;
                             continue;
                         }
-                        attrs[attributeName] = value;
+                        else if (attributeName.startsWith("t-on-")) {
+                            on = on || {};
+                            on[attributeName.slice(5)] = value;
+                        }
+                        else {
+                            attrs = attrs || {};
+                            attrs[attributeName] = value;
+                        }
+                    }
+                    slots = slots || {};
+                    slots[name] = { content: slotAst, on, attrs, scope };
+                }
+            }
+            // default slot
+            const defaultContent = parseChildNodes(clone, ctx);
+            if (defaultContent) {
+                slots = slots || {};
+                slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
+            }
+        }
+        return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
+    }
+    // -----------------------------------------------------------------------------
+    // Slots
+    // -----------------------------------------------------------------------------
+    function parseTSlot(node, ctx) {
+        if (!node.hasAttribute("t-slot")) {
+            return null;
+        }
+        const name = node.getAttribute("t-slot");
+        node.removeAttribute("t-slot");
+        let attrs = null;
+        let on = null;
+        for (let attributeName of node.getAttributeNames()) {
+            const value = node.getAttribute(attributeName);
+            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),
+        };
+    }
+    function parseTTranslation(node, ctx) {
+        if (node.getAttribute("t-translation") !== "off") {
+            return null;
+        }
+        node.removeAttribute("t-translation");
+        return {
+            type: 16 /* TTranslation */,
+            content: parseNode(node, ctx),
+        };
+    }
+    // -----------------------------------------------------------------------------
+    // Portal
+    // -----------------------------------------------------------------------------
+    function parseTPortal(node, ctx) {
+        if (!node.hasAttribute("t-portal")) {
+            return null;
+        }
+        const target = node.getAttribute("t-portal");
+        node.removeAttribute("t-portal");
+        const content = parseNode(node, ctx);
+        if (!content) {
+            return {
+                type: 0 /* Text */,
+                value: "",
+            };
+        }
+        return {
+            type: 17 /* TPortal */,
+            target,
+            content,
+        };
+    }
+    // -----------------------------------------------------------------------------
+    // helpers
+    // -----------------------------------------------------------------------------
+    /**
+     * Parse all the child nodes of a given node and return a list of ast elements
+     */
+    function parseChildren(node, ctx) {
+        const children = [];
+        for (let child of node.childNodes) {
+            const childAst = parseNode(child, ctx);
+            if (childAst) {
+                if (childAst.type === 3 /* Multi */) {
+                    children.push(...childAst.content);
+                }
+                else {
+                    children.push(childAst);
+                }
+            }
+        }
+        return children;
+    }
+    /**
+     * Parse all the child nodes of a given node and return an ast if possible.
+     * In the case there are multiple children, they are wrapped in a astmulti.
+     */
+    function parseChildNodes(node, ctx) {
+        const children = parseChildren(node, ctx);
+        switch (children.length) {
+            case 0:
+                return null;
+            case 1:
+                return children[0];
+            default:
+                return { type: 3 /* Multi */, content: children };
+        }
+    }
+    /**
+     * Normalizes the content of an Element so that t-if/t-elif/t-else directives
+     * immediately follow one another (by removing empty text nodes or comments).
+     * Throws an error when a conditional branching statement is malformed. This
+     * function modifies the Element in place.
+     *
+     * @param el the element containing the tree that should be normalized
+     */
+    function normalizeTIf(el) {
+        let tbranch = el.querySelectorAll("[t-elif], [t-else]");
+        for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
+            let node = tbranch[i];
+            let prevElem = node.previousElementSibling;
+            let pattr = (name) => prevElem.getAttribute(name);
+            let nattr = (name) => +!!node.getAttribute(name);
+            if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
+                if (pattr("t-foreach")) {
+                    throw new Error("t-if cannot stay at the same level as t-foreach when using t-elif or t-else");
+                }
+                if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
+                    return a + b;
+                }) > 1) {
+                    throw new Error("Only one conditional branching directive is allowed per node");
+                }
+                // All text (with only spaces) and comment nodes (nodeType 8) between
+                // branch nodes are removed
+                let textNode;
+                while ((textNode = node.previousSibling) !== prevElem) {
+                    if (textNode.nodeValue.trim().length && textNode.nodeType !== 8) {
+                        throw new Error("text is not allowed between branching directives");
+                    }
+                    textNode.remove();
+                }
+            }
+            else {
+                throw new Error("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
+            }
+        }
+    }
+    /**
+     * Normalizes the content of an Element so that t-esc directives on components
+     * are removed and instead places a <t t-esc=""> as the default slot of the
+     * component. Also throws if the component already has content. This function
+     * modifies the Element in place.
+     *
+     * @param el the element containing the tree that should be normalized
+     */
+    function normalizeTEsc(el) {
+        const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+        for (const el of elements) {
+            if (el.childNodes.length) {
+                throw new Error("Cannot have t-esc on a component that already has content");
+            }
+            const value = el.getAttribute("t-esc");
+            el.removeAttribute("t-esc");
+            const t = el.ownerDocument.createElement("t");
+            if (value != null) {
+                t.setAttribute("t-esc", value);
+            }
+            el.appendChild(t);
+        }
+    }
+    /**
+     * Normalizes the tree inside a given element and do some preliminary validation
+     * on it. This function modifies the Element in place.
+     *
+     * @param el the element containing the tree that should be normalized
+     */
+    function normalizeXML(el) {
+        normalizeTIf(el);
+        normalizeTEsc(el);
+    }
+    /**
+     * Parses an XML string into an XML document, throwing errors on parser errors
+     * instead of returning an XML document containing the parseerror.
+     *
+     * @param xml the string to parse
+     * @returns an XML document corresponding to the content of the string
+     */
+    function parseXML$1(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)}^`;
+                        }
                     }
-                    if (Object.keys(attrs).length) {
-                        slotInfo.attrs = attrs;
+                }
+            }
+            throw new Error(msg);
+        }
+        return doc;
+    }
+
+    function compile(template, options = {}) {
+        // parsing
+        const ast = parse(template);
+        // some work
+        const hasSafeContext = template instanceof Node
+            ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
+            : !template.includes("t-set") && !template.includes("t-call");
+        // code generation
+        const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
+        const code = codeGenerator.generateCode();
+        // template function
+        return new Function("bdom, helpers", code);
+    }
+
+    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);
+                            }
+                        });
                     }
-                    slots[name] = slotInfo;
+                    return result.catch((cause) => {
+                        error.cause = cause;
+                        if (cause instanceof Error) {
+                            error.message += `"${cause.message}"`;
+                        }
+                        throw error;
+                    });
                 }
+                return result;
+            }
+            catch (cause) {
+                if (cause instanceof Error) {
+                    error.message += `"${cause.message}"`;
+                }
+                throw error;
+            }
+        };
+    }
+    // -----------------------------------------------------------------------------
+    //  hooks
+    // -----------------------------------------------------------------------------
+    function onWillStart(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
+    }
+    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) {
+            this.props = props;
+            this.env = env;
+            this.__owl__ = node;
+        }
+        setup() { }
+        render(deep = false) {
+            this.__owl__.render(deep);
+        }
+    }
+    Component.template = "";
+
+    const VText = text("").constructor;
+    class VPortal extends VText {
+        constructor(selector, realBDom) {
+            super("");
+            this.target = null;
+            this.selector = selector;
+            this.realBDom = realBDom;
+        }
+        mount(parent, anchor) {
+            super.mount(parent, anchor);
+            this.target = document.querySelector(this.selector);
+            if (!this.target) {
+                let el = this.el;
+                while (el && el.parentElement instanceof HTMLElement) {
+                    el = el.parentElement;
+                }
+                this.target = el && el.querySelector(this.selector);
+                if (!this.target) {
+                    throw new Error("invalid portal target");
+                }
+            }
+            this.realBDom.mount(this.target, null);
+        }
+        beforeRemove() {
+            this.realBDom.beforeRemove();
+        }
+        remove() {
+            if (this.realBDom) {
+                super.remove();
+                this.realBDom.remove();
+                this.realBDom = null;
+            }
+        }
+        patch(other) {
+            super.patch(other);
+            if (this.realBDom) {
+                this.realBDom.patch(other.realBDom, true);
             }
-            // default slot
-            const defaultContent = parseChildNodes(clone, ctx);
-            if (defaultContent) {
-                slots.default = { content: defaultContent };
-                if (defaultSlotScope) {
-                    slots.default.scope = defaultSlotScope;
-                }
+            else {
+                this.realBDom = other.realBDom;
+                this.realBDom.mount(this.target, null);
             }
         }
-        return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots };
     }
-    // -----------------------------------------------------------------------------
-    // Slots
-    // -----------------------------------------------------------------------------
-    function parseTSlot(node, ctx) {
-        if (!node.hasAttribute("t-slot")) {
-            return null;
+    class Portal extends Component {
+        setup() {
+            const node = this.__owl__;
+            const renderFn = node.renderFn;
+            node.renderFn = () => new VPortal(this.props.target, renderFn());
+            onWillUnmount(() => {
+                if (node.bdom) {
+                    node.bdom.remove();
+                }
+            });
         }
-        const name = node.getAttribute("t-slot");
-        node.removeAttribute("t-slot");
-        const attrs = {};
-        for (let attributeName of node.getAttributeNames()) {
-            const value = node.getAttribute(attributeName);
-            attrs[attributeName] = value;
+    }
+    Portal.template = xml `<t t-slot="default"/>`;
+    Portal.props = {
+        target: {
+            type: String,
+        },
+        slots: true,
+    };
+
+    /**
+     * 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;
         }
-        return {
-            type: 14 /* TSlot */,
-            name,
-            attrs,
-            defaultContent: parseChildNodes(node, ctx),
-        };
+        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 parseTTranslation(node, ctx) {
-        if (node.getAttribute("t-translation") !== "off") {
-            return null;
+    function capture(ctx) {
+        const component = ctx.__owl__.component;
+        const result = Object.create(component);
+        for (let k in ctx) {
+            result[k] = ctx[k];
         }
-        node.removeAttribute("t-translation");
-        return {
-            type: 16 /* TTranslation */,
-            content: parseNode(node, ctx),
-        };
+        return result;
     }
-    // -----------------------------------------------------------------------------
-    // Portal
-    // -----------------------------------------------------------------------------
-    function parseTPortal(node, ctx) {
-        if (!node.hasAttribute("t-portal")) {
-            return null;
+    function withKey(elem, k) {
+        elem.key = k;
+        return elem;
+    }
+    function prepareList(collection) {
+        let keys;
+        let values;
+        if (Array.isArray(collection)) {
+            keys = collection;
+            values = collection;
         }
-        const target = node.getAttribute("t-portal");
-        node.removeAttribute("t-portal");
-        const content = parseNode(node, ctx);
-        if (!content) {
-            return {
-                type: 0 /* Text */,
-                value: "",
-            };
+        else if (collection) {
+            values = Object.keys(collection);
+            keys = Object.values(collection);
         }
-        return {
-            type: 17 /* TPortal */,
-            target,
-            content,
-        };
+        else {
+            throw new Error("Invalid loop expression");
+        }
+        const n = values.length;
+        return [keys, values, n, new Array(n)];
     }
-    // -----------------------------------------------------------------------------
-    // helpers
-    // -----------------------------------------------------------------------------
-    /**
-     * Parse all the child nodes of a given node and return a list of ast elements
-     */
-    function parseChildren(node, ctx) {
-        const children = [];
-        for (let child of node.childNodes) {
-            const childAst = parseNode(child, ctx);
-            if (childAst) {
-                if (childAst.type === 3 /* Multi */) {
-                    children.push(...childAst.content);
-                }
-                else {
-                    children.push(childAst);
-                }
+    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;
         }
-        return children;
+        ctx[key] = value;
     }
-    /**
-     * Parse all the child nodes of a given node and return an ast if possible.
-     * In the case there are multiple children, they are wrapped in a astmulti.
-     */
-    function parseChildNodes(node, ctx) {
-        const children = parseChildren(node, ctx);
-        switch (children.length) {
-            case 0:
-                return null;
-            case 1:
-                return children[0];
-            default:
-                return { type: 3 /* Multi */, content: children };
-        }
+    function toNumber(val) {
+        const n = parseFloat(val);
+        return isNaN(n) ? val : n;
     }
-    /**
-     * Normalizes the content of an Element so that t-if/t-elif/t-else directives
-     * immediately follow one another (by removing empty text nodes or comments).
-     * Throws an error when a conditional branching statement is malformed. This
-     * function modifies the Element in place.
-     *
-     * @param el the element containing the tree that should be normalized
-     */
-    function normalizeTIf(el) {
-        let tbranch = el.querySelectorAll("[t-elif], [t-else]");
-        for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
-            let node = tbranch[i];
-            let prevElem = node.previousElementSibling;
-            let pattr = (name) => prevElem.getAttribute(name);
-            let nattr = (name) => +!!node.getAttribute(name);
-            if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
-                if (pattr("t-foreach")) {
-                    throw new Error("t-if cannot stay at the same level as t-foreach when using t-elif or t-else");
-                }
-                if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
-                    return a + b;
-                }) > 1) {
-                    throw new Error("Only one conditional branching directive is allowed per node");
-                }
-                // All text (with only spaces) and comment nodes (nodeType 8) between
-                // branch nodes are removed
-                let textNode;
-                while ((textNode = node.previousSibling) !== prevElem) {
-                    if (textNode.nodeValue.trim().length && textNode.nodeType !== 8) {
-                        throw new Error("text is not allowed between branching directives");
-                    }
-                    textNode.remove();
-                }
-            }
-            else {
-                throw new Error("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
+    function shallowEqual(l1, l2) {
+        for (let i = 0, l = l1.length; i < l; i++) {
+            if (l1[i] !== l2[i]) {
+                return false;
             }
         }
+        return true;
     }
-    /**
-     * Normalizes the content of an Element so that t-esc directives on components
-     * are removed and instead places a <t t-esc=""> as the default slot of the
-     * component. Also throws if the component already has content. This function
-     * modifies the Element in place.
-     *
-     * @param el the element containing the tree that should be normalized
+    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 normalizeTEsc(el) {
-        const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
-        for (const el of elements) {
-            if (el.childNodes.length) {
-                throw new Error("Cannot have t-esc on a component that already has content");
-            }
-            const value = el.getAttribute("t-esc");
-            el.removeAttribute("t-esc");
-            const t = el.ownerDocument.createElement("t");
-            if (value != null) {
-                t.setAttribute("t-esc", value);
-            }
-            el.appendChild(t);
+    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);
     }
-    /**
-     * Normalizes the tree inside a given element and do some preliminary validation
-     * on it. This function modifies the Element in place.
-     *
-     * @param el the element containing the tree that should be normalized
-     */
-    function normalizeXML(el) {
-        normalizeTIf(el);
-        normalizeTEsc(el);
+    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;
     }
-    /**
-     * Parses an XML string into an XML document, throwing errors on parser errors
-     * instead of returning an XML document containing the parseerror.
-     *
-     * @param xml the string to parse
-     * @returns an XML document corresponding to the content of the string
-     */
-    function parseXML$1(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)}^`;
-                        }
-                    }
+    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");
                 }
             }
-            throw new Error(msg);
-        }
-        return doc;
-    }
-
-    function compile(template, options = {}) {
-        // parsing
-        const ast = parse(template);
-        // some work
-        const hasSafeContext = template instanceof Node
-            ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
-            : !template.includes("t-set") && !template.includes("t-call");
-        // code generation
-        const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
-        const code = codeGenerator.generateCode();
-        // template function
-        return new Function("bdom, helpers", code);
-    }
+            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 };
-    const globalTemplates = {};
     function parseXML(xml) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(xml, "text/xml");
@@ -4706,23 +5299,32 @@
         }
         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.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);
             }
+            this.helpers = makeHelpers(this.getTemplate.bind(this));
         }
         addTemplate(name, template, options = {}) {
             if (name in this.rawTemplates && !options.allowDuplicate) {
@@ -4760,7 +5362,7 @@
                 this.templates[name] = function (context, parent) {
                     return templates[name].call(this, context, parent);
                 };
-                const template = templateFn(bdom, this.utils);
+                const template = templateFn(bdom, this.helpers);
                 this.templates[name] = template;
             }
             return this.templates[name];
@@ -4773,160 +5375,9 @@
                 translatableAttributes: this.translatableAttributes,
             });
         }
-    }
-    // -----------------------------------------------------------------------------
-    //  xml tag helper
-    // -----------------------------------------------------------------------------
-    function xml(...args) {
-        const name = `__template__${xml.nextId++}`;
-        const value = String.raw(...args);
-        globalTemplates[name] = value;
-        return name;
-    }
-    xml.nextId = 1;
-
-    class Component {
-        constructor(props, env, node) {
-            this.props = props;
-            this.env = env;
-            this.__owl__ = node;
-        }
-        setup() { }
-        render(deep = false) {
-            this.__owl__.render(deep);
-        }
-    }
-    Component.template = "";
-
-    const VText = text("").constructor;
-    class VPortal extends VText {
-        constructor(selector, realBDom) {
-            super("");
-            this.target = null;
-            this.selector = selector;
-            this.realBDom = realBDom;
-        }
-        mount(parent, anchor) {
-            super.mount(parent, anchor);
-            this.target = document.querySelector(this.selector);
-            if (!this.target) {
-                let el = this.el;
-                while (el && el.parentElement instanceof HTMLElement) {
-                    el = el.parentElement;
-                }
-                this.target = el && el.querySelector(this.selector);
-                if (!this.target) {
-                    throw new Error("invalid portal target");
-                }
-            }
-            this.realBDom.mount(this.target, null);
-        }
-        beforeRemove() {
-            this.realBDom.beforeRemove();
-        }
-        remove() {
-            if (this.realBDom) {
-                super.remove();
-                this.realBDom.remove();
-                this.realBDom = null;
-            }
-        }
-        patch(other) {
-            super.patch(other);
-            if (this.realBDom) {
-                this.realBDom.patch(other.realBDom, true);
-            }
-            else {
-                this.realBDom = other.realBDom;
-                this.realBDom.mount(this.target, null);
-            }
-        }
-    }
-    class Portal extends Component {
-        setup() {
-            const node = this.__owl__;
-            const renderFn = node.renderFn;
-            node.renderFn = () => new VPortal(this.props.target, renderFn());
-            onWillUnmount(() => {
-                if (node.bdom) {
-                    node.bdom.remove();
-                }
-            });
-        }
-    }
-    Portal.template = xml `<t t-slot="default"/>`;
-    Portal.props = {
-        target: {
-            type: String,
-        },
-        slots: true,
-    };
-
-    // -----------------------------------------------------------------------------
-    //  Scheduler
-    // -----------------------------------------------------------------------------
-    class Scheduler {
-        constructor() {
-            this.tasks = new Set();
-            this.isRunning = false;
-            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
-        }
-        start() {
-            this.isRunning = true;
-            this.scheduleTasks();
-        }
-        stop() {
-            this.isRunning = false;
-        }
-        addFiber(fiber) {
-            this.tasks.add(fiber.root);
-            if (!this.isRunning) {
-                this.start();
-            }
-        }
-        /**
-         * 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();
-                    }
-                    this.tasks.delete(fiber);
-                }
-            });
-            if (this.tasks.size === 0) {
-                this.stop();
-            }
-        }
-        scheduleTasks() {
-            this.requestAnimationFrame(() => {
-                this.flush();
-                if (this.isRunning) {
-                    this.scheduleTasks();
-                }
-            });
-        }
-    }
-    // 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);
+    }
 
+    let hasBeenLogged = false;
     const DEV_MSG = () => {
         const hash = window.owl ? window.owl.__info__.hash : "master";
         return `Owl is running in 'dev' mode.
@@ -4943,11 +5394,13 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
             if (config.test) {
                 this.dev = true;
             }
-            if (this.dev && !config.test) {
+            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) {
@@ -4990,6 +5443,7 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         }
         destroy() {
             if (this.root) {
+                this.scheduler.flush();
                 this.root.destroy();
             }
         }
@@ -5010,45 +5464,6 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         }
     }
 
-    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;
-    }
-
     // -----------------------------------------------------------------------------
     // useRef
     // -----------------------------------------------------------------------------
@@ -5094,10 +5509,6 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         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
@@ -5115,18 +5526,20 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         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
@@ -5153,8 +5566,6 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
 
     config.shouldNormalizeDom = false;
     config.mainEventHandler = mainEventHandler;
-    UTILS.Portal = Portal;
-    UTILS.markRaw = markRaw;
     const blockDom = {
         config,
         // bdom entry points
@@ -5175,7 +5586,6 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     exports.App = App;
     exports.Component = Component;
     exports.EventBus = EventBus;
-    exports.Memo = Memo;
     exports.__info__ = __info__;
     exports.blockDom = blockDom;
     exports.loadFile = loadFile;
@@ -5209,9 +5619,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.version = '2.0.0-alpha.3';
-    __info__.date = '2022-02-25T09:57:37.893Z';
-    __info__.hash = '076b0d7';
+    __info__.version = '2.0.0-beta-4';
+    __info__.date = '2022-03-29T13:50:04.545Z';
+    __info__.hash = '55dbc01';
     __info__.url = 'https://github.com/odoo/owl';