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

package/dist/owl.cjs.js

@@ -213,7 +213,8 @@ function updateClass(val, oldVal) {
 }
 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) {
@@ -267,10 +268,14 @@ function createElementHandler(evName, capture = false) {
         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.
@@ -287,7 +292,10 @@ function createSyntheticHandler(evName, capture = false) {
         _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;
@@ -512,7 +520,7 @@ const characterDataProto = CharacterData.prototype;
 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:
@@ -816,7 +824,7 @@ function updateCtx(ctx, tree) {
                     idx: info.idx,
                     refIdx: info.refIdx,
                     setData: makeRefSetter(index, ctx.refList),
-                    updateData: NO_OP$1,
+                    updateData: NO_OP,
                 });
         }
     }
@@ -1282,6 +1290,75 @@ function html(str) {
     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);
 }
@@ -1295,143 +1372,464 @@ function remove(vnode, withBeforeRemove = false) {
     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);
+        },
+    });
 }
 
 /**
@@ -1449,11 +1847,13 @@ function batched(callback) {
         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();
         }
     };
 }
@@ -1500,327 +1900,135 @@ class Markup extends String {
  */
 function markup(value) {
     return new Markup(value);
-}
-
-/**
- * This file contains utility functions that will be injected in each template,
- * to perform various useful tasks in the compiled code.
- */
-function withDefault(value, defaultValue) {
-    return value === undefined || value === null || value === false ? defaultValue : value;
 }
-function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
-    key = key + "__slot_" + name;
-    const slots = (ctx.props && ctx.props.slots) || {};
-    const { __render, __ctx, __scope } = slots[name] || {};
-    const slotScope = Object.create(__ctx || {});
-    if (__scope) {
-        slotScope[__scope] = extra || {};
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+const globalTemplates = {};
+function xml(...args) {
+    const name = `__template__${xml.nextId++}`;
+    const value = String.raw(...args);
+    globalTemplates[name] = value;
+    return name;
+}
+xml.nextId = 1;
+
+// Maps fibers to thrown errors
+const fibersInError = new WeakMap();
+const nodeErrorHandlers = new WeakMap();
+function _handleError(node, error) {
+    if (!node) {
+        return false;
     }
-    const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
-    if (defaultContent) {
-        let child1 = undefined;
-        let child2 = undefined;
-        if (slotBDom) {
-            child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+    const fiber = node.fiber;
+    if (fiber) {
+        fibersInError.set(fiber, error);
+    }
+    const errorHandlers = nodeErrorHandlers.get(node);
+    if (errorHandlers) {
+        let handled = false;
+        // execute in the opposite order
+        for (let i = errorHandlers.length - 1; i >= 0; i--) {
+            try {
+                errorHandlers[i](error);
+                handled = true;
+                break;
+            }
+            catch (e) {
+                error = e;
+            }
         }
-        else {
-            child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+        if (handled) {
+            return true;
         }
-        return multi([child1, child2]);
     }
-    return slotBDom || text("");
+    return _handleError(node.parent, error);
 }
-function capture(ctx) {
-    const component = ctx.__owl__.component;
-    const result = Object.create(component);
-    for (let k in ctx) {
-        result[k] = ctx[k];
+function handleError(params) {
+    const error = params.error;
+    const node = "node" in params ? params.node : params.fiber.node;
+    const fiber = "fiber" in params ? params.fiber : node.fiber;
+    // resets the fibers on components if possible. This is important so that
+    // new renderings can be properly included in the initial one, if any.
+    let current = fiber;
+    do {
+        current.node.fiber = current;
+        current = current.parent;
+    } while (current);
+    fibersInError.set(fiber.root, error);
+    const handled = _handleError(node, error);
+    if (!handled) {
+        console.warn(`[Owl] Unhandled error. Destroying the root component`);
+        try {
+            node.app.destroy();
+        }
+        catch (e) {
+            console.error(e);
+        }
     }
-    return result;
-}
-function withKey(elem, k) {
-    elem.key = k;
-    return elem;
+}
+
+function makeChildFiber(node, parent) {
+    let current = node.fiber;
+    if (current) {
+        cancelFibers(current.children);
+        current.root = null;
+    }
+    return new Fiber(node, parent);
 }
-function prepareList(collection) {
-    let keys;
-    let values;
-    if (Array.isArray(collection)) {
-        keys = collection;
-        values = collection;
+function makeRootFiber(node) {
+    let current = node.fiber;
+    if (current) {
+        let root = current.root;
+        // lock root fiber because canceling children fibers may destroy components,
+        // which means any arbitrary code can be run in onWillDestroy, which may
+        // trigger new renderings
+        root.locked = true;
+        root.setCounter(root.counter + 1 - cancelFibers(current.children));
+        root.locked = false;
+        current.children = [];
+        current.childrenMap = {};
+        current.bdom = null;
+        if (fibersInError.has(current)) {
+            fibersInError.delete(current);
+            fibersInError.delete(root);
+            current.appliedToDom = false;
+        }
+        return current;
     }
-    else if (collection) {
-        values = Object.keys(collection);
-        keys = Object.values(collection);
+    const fiber = new RootFiber(node, null);
+    if (node.willPatch.length) {
+        fiber.willPatch.push(fiber);
     }
-    else {
-        throw new Error("Invalid loop expression");
+    if (node.patched.length) {
+        fiber.patched.push(fiber);
     }
-    const n = values.length;
-    return [keys, values, n, new Array(n)];
-}
-const isBoundary = Symbol("isBoundary");
-function setContextValue(ctx, key, value) {
-    const ctx0 = ctx;
-    while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
-        const newCtx = ctx.__proto__;
-        if (!newCtx) {
-            ctx = ctx0;
-            break;
-        }
-        ctx = newCtx;
-    }
-    ctx[key] = value;
-}
-function toNumber(val) {
-    const n = parseFloat(val);
-    return isNaN(n) ? val : n;
-}
-function shallowEqual$1(l1, l2) {
-    for (let i = 0, l = l1.length; i < l; i++) {
-        if (l1[i] !== l2[i]) {
-            return false;
-        }
-    }
-    return true;
-}
-class LazyValue {
-    constructor(fn, ctx, node) {
-        this.fn = fn;
-        this.ctx = capture(ctx);
-        this.node = node;
-    }
-    evaluate() {
-        return this.fn(this.ctx, this.node);
-    }
-    toString() {
-        return this.evaluate().toString();
-    }
-}
-/*
- * Safely outputs `value` as a block depending on the nature of `value`
- */
-function safeOutput(value) {
-    if (!value) {
-        return value;
-    }
-    let safeKey;
-    let block;
-    if (value instanceof Markup) {
-        safeKey = `string_safe`;
-        block = html(value);
-    }
-    else if (value instanceof LazyValue) {
-        safeKey = `lazy_value`;
-        block = value.evaluate();
-    }
-    else if (value instanceof String || typeof value === "string") {
-        safeKey = "string_unsafe";
-        block = text(value);
-    }
-    else {
-        // Assuming it is a block
-        safeKey = "block_safe";
-        block = value;
-    }
-    return toggler(safeKey, block);
-}
-let boundFunctions = new WeakMap();
-function bind(ctx, fn) {
-    let component = ctx.__owl__.component;
-    let boundFnMap = boundFunctions.get(component);
-    if (!boundFnMap) {
-        boundFnMap = new WeakMap();
-        boundFunctions.set(component, boundFnMap);
-    }
-    let boundFn = boundFnMap.get(fn);
-    if (!boundFn) {
-        boundFn = fn.bind(component);
-        boundFnMap.set(fn, boundFn);
-    }
-    return boundFn;
-}
-function multiRefSetter(refs, name) {
-    let count = 0;
-    return (el) => {
-        if (el) {
-            count++;
-            if (count > 1) {
-                throw new Error("Cannot have 2 elements with same ref name at the same time");
-            }
-        }
-        if (count === 0 || el) {
-            refs[name] = el;
-        }
-    };
-}
-const UTILS = {
-    withDefault,
-    zero: Symbol("zero"),
-    isBoundary,
-    callSlot,
-    capture,
-    withKey,
-    prepareList,
-    setContextValue,
-    multiRefSetter,
-    shallowEqual: shallowEqual$1,
-    toNumber,
-    validateProps,
-    LazyValue,
-    safeOutput,
-    bind,
-};
-
-const mainEventHandler = (data, ev, currentTarget) => {
-    const { data: _data, modifiers } = filterOutModifiersFromData(data);
-    data = _data;
-    let stopped = false;
-    if (modifiers.length) {
-        let selfMode = false;
-        const isSelf = ev.target === currentTarget;
-        for (const mod of modifiers) {
-            switch (mod) {
-                case "self":
-                    selfMode = true;
-                    if (isSelf) {
-                        continue;
-                    }
-                    else {
-                        return stopped;
-                    }
-                case "prevent":
-                    if ((selfMode && isSelf) || !selfMode)
-                        ev.preventDefault();
-                    continue;
-                case "stop":
-                    if ((selfMode && isSelf) || !selfMode)
-                        ev.stopPropagation();
-                    stopped = true;
-                    continue;
-            }
-        }
-    }
-    // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
-    // We check this rather than data[0] being truthy (or typeof function) so that it crashes
-    // as expected when there is a handler expression that evaluates to a falsy value
-    if (Object.hasOwnProperty.call(data, 0)) {
-        const handler = data[0];
-        if (typeof handler !== "function") {
-            throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
-        }
-        let node = data[1] ? data[1].__owl__ : null;
-        if (node ? node.status === 1 /* MOUNTED */ : true) {
-            handler.call(node ? node.component : null, ev);
-        }
-    }
-    return stopped;
-};
-
-// Maps fibers to thrown errors
-const fibersInError = new WeakMap();
-const nodeErrorHandlers = new WeakMap();
-function _handleError(node, error, isFirstRound = false) {
-    if (!node) {
-        return false;
-    }
-    const fiber = node.fiber;
-    if (fiber) {
-        fibersInError.set(fiber, error);
-    }
-    const errorHandlers = nodeErrorHandlers.get(node);
-    if (errorHandlers) {
-        let stopped = false;
-        // execute in the opposite order
-        for (let i = errorHandlers.length - 1; i >= 0; i--) {
-            try {
-                errorHandlers[i](error);
-                stopped = true;
-                break;
-            }
-            catch (e) {
-                error = e;
-            }
-        }
-        if (stopped) {
-            if (isFirstRound && fiber && fiber.node.fiber) {
-                fiber.root.counter--;
-            }
-            return true;
-        }
-    }
-    return _handleError(node.parent, error);
-}
-function handleError(params) {
-    const error = params.error;
-    const node = "node" in params ? params.node : params.fiber.node;
-    const fiber = "fiber" in params ? params.fiber : node.fiber;
-    // resets the fibers on components if possible. This is important so that
-    // new renderings can be properly included in the initial one, if any.
-    let current = fiber;
-    do {
-        current.node.fiber = current;
-        current = current.parent;
-    } while (current);
-    fibersInError.set(fiber.root, error);
-    const handled = _handleError(node, error, true);
-    if (!handled) {
-        console.warn(`[Owl] Unhandled error. Destroying the root component`);
-        try {
-            node.app.destroy();
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }
-}
-
-function makeChildFiber(node, parent) {
-    let current = node.fiber;
-    if (current) {
-        let root = parent.root;
-        cancelFibers(root, current.children);
-        current.root = null;
-    }
-    return new Fiber(node, parent);
-}
-function makeRootFiber(node) {
-    let current = node.fiber;
-    if (current) {
-        let root = current.root;
-        root.counter -= cancelFibers(root, current.children);
-        current.children = [];
-        root.counter++;
-        current.bdom = null;
-        if (fibersInError.has(current)) {
-            fibersInError.delete(current);
-            fibersInError.delete(root);
-            current.appliedToDom = false;
-        }
-        return current;
-    }
-    const fiber = new RootFiber(node, null);
-    if (node.willPatch.length) {
-        fiber.willPatch.push(fiber);
-    }
-    if (node.patched.length) {
-        fiber.patched.push(fiber);
-    }
-    return fiber;
+    return fiber;
 }
 /**
  * @returns number of not-yet rendered fibers cancelled
  */
-function cancelFibers(root, fibers) {
+function cancelFibers(fibers) {
     let result = 0;
     for (let fiber of fibers) {
-        fiber.node.fiber = null;
-        fiber.root = root;
-        if (!fiber.bdom) {
+        let node = fiber.node;
+        if (node.status === 0 /* NEW */) {
+            node.destroy();
+        }
+        node.fiber = null;
+        if (fiber.bdom) {
+            // if fiber has been rendered, this means that the component props have
+            // been updated. however, this fiber will not be patched to the dom, so
+            // it could happen that the next render compare the current props with
+            // the same props, and skip the render completely. With the next line,
+            // we kindly request the component code to force a render, so it works as
+            // expected.
+            node.forceNextRender = true;
+        }
+        else {
             result++;
         }
-        result += cancelFibers(root, fiber.children);
+        result += cancelFibers(fiber.children);
     }
     return result;
 }
@@ -1829,11 +2037,14 @@ class Fiber {
         this.bdom = null;
         this.children = [];
         this.appliedToDom = false;
+        this.deep = false;
+        this.childrenMap = {};
         this.node = node;
         this.parent = parent;
         if (parent) {
+            this.deep = parent.deep;
             const root = parent.root;
-            root.counter++;
+            root.setCounter(root.counter + 1);
             this.root = root;
             parent.children.push(this);
         }
@@ -1841,6 +2052,42 @@ class Fiber {
             this.root = this;
         }
     }
+    render() {
+        // if some parent has a fiber => register in followup
+        let prev = this.root.node;
+        let scheduler = prev.app.scheduler;
+        let current = prev.parent;
+        while (current) {
+            if (current.fiber) {
+                let root = current.fiber.root;
+                if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
+                    current = root.node;
+                }
+                else {
+                    scheduler.delayedRenders.push(this);
+                    return;
+                }
+            }
+            prev = current;
+            current = current.parent;
+        }
+        // there are no current rendering from above => we can render
+        this._render();
+    }
+    _render() {
+        const node = this.node;
+        const root = this.root;
+        if (root) {
+            try {
+                this.bdom = true;
+                this.bdom = node.renderFn();
+            }
+            catch (e) {
+                handleError({ node, error: e });
+            }
+            root.setCounter(root.counter - 1);
+        }
+    }
 }
 class RootFiber extends Fiber {
     constructor() {
@@ -1874,7 +2121,7 @@ class RootFiber extends Fiber {
             }
             current = undefined;
             // Step 2: patching the dom
-            node.patch();
+            node._patch();
             this.locked = false;
             // Step 4: calling all mounted lifecycle hooks
             let mountedFibers = this.mounted;
@@ -1902,6 +2149,12 @@ class RootFiber extends Fiber {
             handleError({ fiber: current || this, error: e });
         }
     }
+    setCounter(newValue) {
+        this.counter = newValue;
+        if (newValue === 0) {
+            this.node.app.scheduler.flush();
+        }
+    }
 }
 class MountFiber extends RootFiber {
     constructor(node, target, options = {}) {
@@ -1913,6 +2166,7 @@ class MountFiber extends RootFiber {
         let current = this;
         try {
             const node = this.node;
+            node.children = this.childrenMap;
             node.app.constructor.validateTarget(this.target);
             if (node.bdom) {
                 // this is a complicated situation: if we mount a fiber with an existing
@@ -1951,9 +2205,148 @@ class MountFiber extends RootFiber {
     }
 }
 
-let currentNode = null;
-function getCurrent() {
-    if (!currentNode) {
+/**
+ * Apply default props (only top level).
+ *
+ * Note that this method does modify in place the props
+ */
+function applyDefaultProps(props, ComponentClass) {
+    const defaultProps = ComponentClass.defaultProps;
+    if (defaultProps) {
+        for (let propName in defaultProps) {
+            if (props[propName] === undefined) {
+                props[propName] = defaultProps[propName];
+            }
+        }
+    }
+}
+//------------------------------------------------------------------------------
+// Prop validation helper
+//------------------------------------------------------------------------------
+function getPropDescription(staticProps) {
+    if (staticProps instanceof Array) {
+        return Object.fromEntries(staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true])));
+    }
+    return staticProps || { "*": true };
+}
+/**
+ * Validate the component props (or next props) against the (static) props
+ * description.  This is potentially an expensive operation: it may needs to
+ * visit recursively the props and all the children to check if they are valid.
+ * This is why it is only done in 'dev' mode.
+ */
+function validateProps(name, props, parent) {
+    const ComponentClass = typeof name !== "string"
+        ? name
+        : parent.constructor.components[name];
+    if (!ComponentClass) {
+        // this is an error, wrong component. We silently return here instead so the
+        // error is triggered by the usual path ('component' function)
+        return;
+    }
+    applyDefaultProps(props, ComponentClass);
+    const defaultProps = ComponentClass.defaultProps || {};
+    let propsDef = getPropDescription(ComponentClass.props);
+    const allowAdditionalProps = "*" in propsDef;
+    for (let propName in propsDef) {
+        if (propName === "*") {
+            continue;
+        }
+        const propDef = propsDef[propName];
+        let isMandatory = !!propDef;
+        if (typeof propDef === "object" && "optional" in propDef) {
+            isMandatory = !propDef.optional;
+        }
+        if (isMandatory && propName in defaultProps) {
+            throw new Error(`A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`);
+        }
+        if (props[propName] === undefined) {
+            if (isMandatory) {
+                throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
+            }
+            else {
+                continue;
+            }
+        }
+        let isValid;
+        try {
+            isValid = isValidProp(props[propName], propDef);
+        }
+        catch (e) {
+            e.message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${e.message})`;
+            throw e;
+        }
+        if (!isValid) {
+            throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
+        }
+    }
+    if (!allowAdditionalProps) {
+        for (let propName in props) {
+            if (!(propName in propsDef)) {
+                throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
+            }
+        }
+    }
+}
+/**
+ * Check if an invidual prop value matches its (static) prop definition
+ */
+function isValidProp(prop, propDef) {
+    if (propDef === true) {
+        return true;
+    }
+    if (typeof propDef === "function") {
+        // Check if a value is constructed by some Constructor.  Note that there is a
+        // slight abuse of language: we want to consider primitive values as well.
+        //
+        // So, even though 1 is not an instance of Number, we want to consider that
+        // it is valid.
+        if (typeof prop === "object") {
+            return prop instanceof propDef;
+        }
+        return typeof prop === propDef.name.toLowerCase();
+    }
+    else if (propDef instanceof Array) {
+        // If this code is executed, this means that we want to check if a prop
+        // matches at least one of its descriptor.
+        let result = false;
+        for (let i = 0, iLen = propDef.length; i < iLen; i++) {
+            result = result || isValidProp(prop, propDef[i]);
+        }
+        return result;
+    }
+    // propsDef is an object
+    if (propDef.optional && prop === undefined) {
+        return true;
+    }
+    let result = propDef.type ? isValidProp(prop, propDef.type) : true;
+    if (propDef.validate) {
+        result = result && propDef.validate(prop);
+    }
+    if (propDef.type === Array && propDef.element) {
+        for (let i = 0, iLen = prop.length; i < iLen; i++) {
+            result = result && isValidProp(prop[i], propDef.element);
+        }
+    }
+    if (propDef.type === Object && propDef.shape) {
+        const shape = propDef.shape;
+        for (let key in shape) {
+            result = result && isValidProp(prop[key], shape[key]);
+        }
+        if (result) {
+            for (let propName in prop) {
+                if (!(propName in shape)) {
+                    throw new Error(`unknown prop '${propName}'`);
+                }
+            }
+        }
+    }
+    return result;
+}
+
+let currentNode = null;
+function getCurrent() {
+    if (!currentNode) {
         throw new Error("No active component (a hook function should only be called in 'setup')");
     }
     return currentNode;
@@ -1961,24 +2354,61 @@ function getCurrent() {
 function useComponent() {
     return currentNode.component;
 }
+// -----------------------------------------------------------------------------
+// Integration with reactivity system (useState)
+// -----------------------------------------------------------------------------
+const batchedRenderFunctions = new WeakMap();
+/**
+ * Creates a reactive object that will be observed by the current component.
+ * Reading data from the returned object (eg during rendering) will cause the
+ * component to subscribe to that data and be rerendered when it changes.
+ *
+ * @param state the state to observe
+ * @returns a reactive object that will cause the component to re-render on
+ *  relevant changes
+ * @see reactive
+ */
+function useState(state) {
+    const node = getCurrent();
+    let render = batchedRenderFunctions.get(node);
+    if (!render) {
+        render = batched(node.render.bind(node));
+        batchedRenderFunctions.set(node, render);
+        // manual implementation of onWillDestroy to break cyclic dependency
+        node.willDestroy.push(clearReactivesForCallback.bind(null, render));
+    }
+    return reactive(state, render);
+}
+function arePropsDifferent(props1, props2) {
+    for (let k in props1) {
+        if (props1[k] !== props2[k]) {
+            return true;
+        }
+    }
+    return Object.keys(props1).length !== Object.keys(props2).length;
+}
 function component(name, props, key, ctx, parent) {
     let node = ctx.children[key];
     let isDynamic = typeof name !== "string";
-    if (node) {
-        if (node.status < 1 /* MOUNTED */) {
-            node.destroy();
-            node = undefined;
-        }
-        else if (node.status === 2 /* DESTROYED */) {
-            node = undefined;
-        }
+    if (node && node.status === 2 /* DESTROYED */) {
+        node = undefined;
     }
     if (isDynamic && node && node.component.constructor !== name) {
         node = undefined;
     }
     const parentFiber = ctx.fiber;
     if (node) {
-        node.updateAndRender(props, parentFiber);
+        let shouldRender = node.forceNextRender;
+        if (shouldRender) {
+            node.forceNextRender = false;
+        }
+        else {
+            const currentProps = node.component.props[TARGET];
+            shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
+        }
+        if (shouldRender) {
+            node.updateAndRender(props, parentFiber);
+        }
     }
     else {
         // new component
@@ -1992,18 +2422,19 @@ function component(name, props, key, ctx, parent) {
                 throw new Error(`Cannot find the definition of component "${name}"`);
             }
         }
-        node = new ComponentNode(C, props, ctx.app, ctx);
+        node = new ComponentNode(C, props, ctx.app, ctx, key);
         ctx.children[key] = node;
-        const fiber = makeChildFiber(node, parentFiber);
-        node.initiateRender(fiber);
+        node.initiateRender(new Fiber(node, parentFiber));
     }
+    parentFiber.childrenMap[key] = node;
     return node;
 }
 class ComponentNode {
-    constructor(C, props, app, parent) {
+    constructor(C, props, app, parent, parentKey) {
         this.fiber = null;
         this.bdom = null;
         this.status = 0 /* NEW */;
+        this.forceNextRender = false;
         this.children = Object.create(null);
         this.refs = {};
         this.willStart = [];
@@ -2015,11 +2446,13 @@ class ComponentNode {
         this.willDestroy = [];
         currentNode = this;
         this.app = app;
-        this.parent = parent || null;
+        this.parent = parent;
+        this.parentKey = parentKey;
         this.level = parent ? parent.level + 1 : 0;
         applyDefaultProps(props, C);
         const env = (parent && parent.childEnv) || app.env;
         this.childEnv = env;
+        props = useState(props);
         this.component = new C(props, env, this);
         this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
         this.component.setup();
@@ -2044,23 +2477,32 @@ class ComponentNode {
             return;
         }
         if (this.status === 0 /* NEW */ && this.fiber === fiber) {
-            this._render(fiber);
+            fiber.render();
         }
     }
-    async render() {
+    async render(deep = false) {
         let current = this.fiber;
-        if (current && current.root.locked) {
+        if (current && (current.root.locked || current.bdom === true)) {
             await Promise.resolve();
             // situation may have changed after the microtask tick
             current = this.fiber;
         }
-        if (current && !current.bdom && !fibersInError.has(current)) {
-            return;
+        if (current) {
+            if (!current.bdom && !fibersInError.has(current)) {
+                if (deep) {
+                    // we want the render from this point on to be with deep=true
+                    current.deep = deep;
+                }
+                return;
+            }
+            // if current rendering was with deep=true, we want this one to be the same
+            deep = deep || current.deep;
         }
-        if (!this.bdom && !current) {
+        else if (!this.bdom) {
             return;
         }
         const fiber = makeRootFiber(this);
+        fiber.deep = deep;
         this.fiber = fiber;
         this.app.scheduler.addFiber(fiber);
         await Promise.resolve();
@@ -2079,16 +2521,7 @@ class ComponentNode {
         //   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() {
@@ -2108,8 +2541,15 @@ class ComponentNode {
         for (let child of Object.values(this.children)) {
             child._destroy();
         }
-        for (let cb of this.willDestroy) {
-            cb.call(component);
+        if (this.willDestroy.length) {
+            try {
+                for (let cb of this.willDestroy) {
+                    cb.call(component);
+                }
+            }
+            catch (e) {
+                handleError({ error: e, node: this });
+            }
         }
         this.status = 2 /* DESTROYED */;
     }
@@ -2119,13 +2559,16 @@ class ComponentNode {
         this.fiber = fiber;
         const component = this.component;
         applyDefaultProps(props, component.constructor);
+        currentNode = this;
+        props = useState(props);
+        currentNode = null;
         const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
         await prom;
         if (fiber !== this.fiber) {
             return;
         }
         component.props = props;
-        this._render(fiber);
+        fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
             parentRoot.willPatch.push(fiber);
@@ -2172,17 +2615,24 @@ class ComponentNode {
         bdom.mount(parent, anchor);
         this.status = 1 /* MOUNTED */;
         this.fiber.appliedToDom = true;
+        this.children = this.fiber.childrenMap;
         this.fiber = null;
     }
     moveBefore(other, afterNode) {
         this.bdom.moveBefore(other ? other.bdom : null, afterNode);
     }
     patch() {
+        if (this.fiber && this.fiber.parent) {
+            // we only patch here renderings coming from above. renderings initiated
+            // by the component will be patched independently in the appropriate
+            // fiber.complete
+            this._patch();
+        }
+    }
+    _patch() {
         const hasChildren = Object.keys(this.children).length > 0;
+        this.children = this.fiber.childrenMap;
         this.bdom.patch(this.fiber.bdom, hasChildren);
-        if (hasChildren) {
-            this.cleanOutdatedChildren();
-        }
         this.fiber.appliedToDom = true;
         this.fiber = null;
     }
@@ -2192,85 +2642,89 @@ class ComponentNode {
     remove() {
         this.bdom.remove();
     }
-    cleanOutdatedChildren() {
-        const children = this.children;
-        for (const key in children) {
-            const node = children[key];
-            const status = node.status;
-            if (status !== 1 /* MOUNTED */) {
-                delete children[key];
-                if (status !== 2 /* DESTROYED */) {
-                    node.destroy();
-                }
-            }
-        }
+    // ---------------------------------------------------------------------------
+    // Some debug helpers
+    // ---------------------------------------------------------------------------
+    get name() {
+        return this.component.constructor.name;
+    }
+    get subscriptions() {
+        const render = batchedRenderFunctions.get(this);
+        return render ? getSubscriptions(render) : [];
     }
 }
 
 // -----------------------------------------------------------------------------
-//  hooks
+//  Scheduler
 // -----------------------------------------------------------------------------
-function onWillStart(fn) {
-    const node = getCurrent();
-    node.willStart.push(fn.bind(node.component));
-}
-function onWillUpdateProps(fn) {
-    const node = getCurrent();
-    node.willUpdateProps.push(fn.bind(node.component));
-}
-function onMounted(fn) {
-    const node = getCurrent();
-    node.mounted.push(fn.bind(node.component));
-}
-function onWillPatch(fn) {
-    const node = getCurrent();
-    node.willPatch.unshift(fn.bind(node.component));
-}
-function onPatched(fn) {
-    const node = getCurrent();
-    node.patched.push(fn.bind(node.component));
-}
-function onWillUnmount(fn) {
-    const node = getCurrent();
-    node.willUnmount.unshift(fn.bind(node.component));
-}
-function onWillDestroy(fn) {
-    const node = getCurrent();
-    node.willDestroy.push(fn.bind(node.component));
-}
-function onWillRender(fn) {
-    const node = getCurrent();
-    const renderFn = node.renderFn;
-    node.renderFn = () => {
-        fn.call(node.component);
-        return renderFn();
-    };
-}
-function onRendered(fn) {
-    const node = getCurrent();
-    const renderFn = node.renderFn;
-    node.renderFn = () => {
-        const result = renderFn();
-        fn.call(node.component);
-        return result;
-    };
-}
-function onError(callback) {
-    const node = getCurrent();
-    let handlers = nodeErrorHandlers.get(node);
-    if (!handlers) {
-        handlers = [];
-        nodeErrorHandlers.set(node, handlers);
+class Scheduler {
+    constructor() {
+        this.tasks = new Set();
+        this.frame = 0;
+        this.delayedRenders = [];
+        this.requestAnimationFrame = Scheduler.requestAnimationFrame;
     }
-    handlers.push(callback.bind(node.component));
-}
-
-/**
- * Owl QWeb Expression Parser
- *
- * Owl needs in various contexts to be able to understand the structure of a
- * string representing a javascript expression.  The usual goal is to be able
- * to rewrite some variables.  For example, if a template has
+    addFiber(fiber) {
+        this.tasks.add(fiber.root);
+    }
+    /**
+     * Process all current tasks. This only applies to the fibers that are ready.
+     * Other tasks are left unchanged.
+     */
+    flush() {
+        if (this.delayedRenders.length) {
+            let renders = this.delayedRenders;
+            this.delayedRenders = [];
+            for (let f of renders) {
+                if (f.root && f.node.status !== 2 /* DESTROYED */) {
+                    f.render();
+                }
+            }
+        }
+        if (this.frame === 0) {
+            this.frame = this.requestAnimationFrame(() => {
+                this.frame = 0;
+                this.tasks.forEach((fiber) => this.processFiber(fiber));
+                for (let task of this.tasks) {
+                    if (task.node.status === 2 /* DESTROYED */) {
+                        this.tasks.delete(task);
+                    }
+                }
+            });
+        }
+    }
+    processFiber(fiber) {
+        if (fiber.root !== fiber) {
+            this.tasks.delete(fiber);
+            return;
+        }
+        const hasError = fibersInError.has(fiber);
+        if (hasError && fiber.counter !== 0) {
+            this.tasks.delete(fiber);
+            return;
+        }
+        if (fiber.node.status === 2 /* DESTROYED */) {
+            this.tasks.delete(fiber);
+            return;
+        }
+        if (fiber.counter === 0) {
+            if (!hasError) {
+                fiber.complete();
+            }
+            this.tasks.delete(fiber);
+        }
+    }
+}
+// capture the value of requestAnimationFrame as soon as possible, to avoid
+// interactions with other code, such as test frameworks that override them
+Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
+
+/**
+ * Owl QWeb Expression Parser
+ *
+ * Owl needs in various contexts to be able to understand the structure of a
+ * string representing a javascript expression.  The usual goal is to be able
+ * to rewrite some variables.  For example, if a template has
  *
  *  ```xml
  *  <t t-if="computeSomething({val: state.val})">...</t>
@@ -2417,24 +2871,31 @@ const TOKENIZERS = [
 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;
 }
@@ -2639,7 +3100,7 @@ function createContext(parentCtx, params) {
     }, params);
 }
 class CodeTarget {
-    constructor(name) {
+    constructor(name, on) {
         this.indentLevel = 0;
         this.loopLevel = 0;
         this.code = [];
@@ -2650,6 +3111,7 @@ class CodeTarget {
         this.refInfo = {};
         this.shouldProtectScope = false;
         this.name = name;
+        this.on = on || null;
     }
     addLine(line, idx) {
         const prefix = new Array(this.indentLevel + 2).join("  ");
@@ -2699,7 +3161,7 @@ class CodeGenerator {
         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) {
@@ -2742,8 +3204,8 @@ class CodeGenerator {
         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) {
@@ -2779,19 +3241,21 @@ class CodeGenerator {
         }
         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;
@@ -2833,10 +3297,13 @@ class CodeGenerator {
             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);
         }
     }
     /**
@@ -2864,7 +3331,7 @@ class CodeGenerator {
                 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);
             }
@@ -3003,7 +3470,7 @@ class CodeGenerator {
             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;
             }
         }
@@ -3085,10 +3552,10 @@ class CodeGenerator {
             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) {
@@ -3098,7 +3565,7 @@ class CodeGenerator {
             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");
@@ -3146,14 +3613,14 @@ class CodeGenerator {
                 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);
             }
         }
     }
@@ -3241,14 +3708,14 @@ class CodeGenerator {
                 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(", ");
@@ -3269,10 +3736,10 @@ class CodeGenerator {
         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++;
@@ -3289,7 +3756,7 @@ class CodeGenerator {
         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}}\`)}`);
@@ -3299,8 +3766,8 @@ class CodeGenerator {
         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})) {`);
@@ -3328,7 +3795,7 @@ class CodeGenerator {
     }
     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,
@@ -3373,14 +3840,14 @@ class CodeGenerator {
                     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(", ");
@@ -3411,7 +3878,7 @@ class CodeGenerator {
         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, {
@@ -3422,7 +3889,7 @@ class CodeGenerator {
         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,
@@ -3516,27 +3983,29 @@ class CodeGenerator {
     compileComponent(ast, ctx) {
         let { block } = ctx;
         // props
-        const hasSlotsProp = "slots" in ast.props;
+        const hasSlotsProp = "slots" in (ast.props || {});
         const props = [];
-        const propExpr = this.formatPropObject(ast.props);
+        const propExpr = this.formatPropObject(ast.props || {});
         if (propExpr) {
             props.push(propExpr);
         }
         // slots
-        const hasSlot = !!Object.keys(ast.slots).length;
         let slotDef = "";
-        if (hasSlot) {
+        if (ast.slots) {
             let ctxStr = "ctx";
             if (this.target.loopLevel || !this.hasSafeContext) {
                 ctxStr = this.generateId("ctx");
                 this.helpers.add("capture");
-                this.addLine(`const ${ctxStr} = capture(ctx);`);
+                this.define(ctxStr, `capture(ctx)`);
             }
             let slotStr = [];
             for (let slotName in ast.slots) {
-                const slotAst = ast.slots[slotName].content;
-                const name = this.compileInNewTarget("slot", slotAst, ctx);
-                const params = [`__render: ${name}, __ctx: ${ctxStr}`];
+                const slotAst = ast.slots[slotName];
+                const params = [];
+                if (slotAst.content) {
+                    const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+                    params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+                }
                 const scope = ast.slots[slotName].scope;
                 if (scope) {
                     params.push(`__scope: "${scope}"`);
@@ -3550,33 +4019,30 @@ class CodeGenerator {
             slotDef = `{${slotStr.join(", ")}}`;
         }
         if (slotDef && !(ast.dynamicProps || hasSlotsProp)) {
-            props.push(`slots: ${slotDef}`);
+            this.helpers.add("markRaw");
+            props.push(`slots: markRaw(${slotDef})`);
         }
         const propStr = `{${props.join(",")}}`;
         let propString = propStr;
         if (ast.dynamicProps) {
-            if (!props.length) {
-                propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)})`;
-            }
-            else {
-                propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}, ${propStr})`;
-            }
+            propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${props.length ? ", " + propStr : ""})`;
         }
         let propVar;
         if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
             propVar = this.generateId("props");
-            this.addLine(`const ${propVar} = ${propString};`);
+            this.define(propVar, propString);
             propString = propVar;
         }
         if (slotDef && (ast.dynamicProps || hasSlotsProp)) {
-            this.addLine(`${propVar}.slots = Object.assign(${slotDef}, ${propVar}.slots)`);
+            this.helpers.add("markRaw");
+            this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
         }
         // cmap key
         const key = this.generateComponentKey();
         let expr;
         if (ast.isDynamic) {
             expr = this.generateId("Comp");
-            this.addLine(`let ${expr} = ${compileExpr(ast.name)};`);
+            this.define(expr, compileExpr(ast.name));
         }
         else {
             expr = `\`${ast.name}\``;
@@ -3597,9 +4063,28 @@ class CodeGenerator {
         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;
@@ -3621,13 +4106,17 @@ class CodeGenerator {
         else {
             if (dynamic) {
                 let name = this.generateId("slot");
-                this.addLine(`const ${name} = ${slotName};`);
-                blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`;
+                this.define(name, slotName);
+                blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
             }
             else {
                 blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
             }
         }
+        // event handling
+        if (ast.on) {
+            blockString = this.wrapWithEventCatcher(blockString, ast.on);
+        }
         if (block) {
             this.insertAnchor(block);
         }
@@ -3648,7 +4137,7 @@ class CodeGenerator {
         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) {
@@ -3769,6 +4258,9 @@ function parseDOMNode(node, ctx) {
     if (tagName === "t" && !dynamicTag) {
         return null;
     }
+    if (tagName.startsWith("block-")) {
+        throw new Error(`Invalid tag name: '${tagName}'`);
+    }
     ctx = Object.assign({}, ctx);
     if (tagName === "pre") {
         ctx.inPreTag = true;
@@ -3779,8 +4271,8 @@ function parseDOMNode(node, ctx) {
     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);
@@ -3788,6 +4280,7 @@ function parseDOMNode(node, ctx) {
             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")) {
@@ -3825,6 +4318,7 @@ function parseDOMNode(node, ctx) {
                 targetAttr: isCheckboxInput ? "checked" : "value",
                 specialInitTargetAttr: isRadioInput ? "checked" : null,
                 eventType,
+                hasDynamicChildren: false,
                 shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
                 shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
             };
@@ -3834,6 +4328,9 @@ function parseDOMNode(node, ctx) {
                 ctx.tModelInfo = model;
             }
         }
+        else if (attr.startsWith("block-")) {
+            throw new Error(`Invalid attribute: '${attr}'`);
+        }
         else if (attr !== "t-name") {
             if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
                 throw new Error(`Unknown QWeb directive: '${attr}'`);
@@ -3842,6 +4339,7 @@ function parseDOMNode(node, ctx) {
             if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
                 tModel.hasDynamicChildren = true;
             }
+            attrs = attrs || {};
             attrs[attr] = value;
         }
     }
@@ -3992,7 +4490,7 @@ function parseTCall(node, ctx) {
         if (ast && ast.type === 11 /* TComponent */) {
             return {
                 ...ast,
-                slots: { default: { content: tcall } },
+                slots: { default: { content: tcall, scope: null, on: null, attrs: null } },
             };
         }
     }
@@ -4076,7 +4574,6 @@ function parseTSetNode(node, ctx) {
 // -----------------------------------------------------------------------------
 // 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.",
@@ -4105,18 +4602,26 @@ function parseComponent(node, ctx) {
     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
@@ -4143,33 +4648,35 @@ function parseComponent(node, ctx) {
             slotNode.removeAttribute("t-set-slot");
             slotNode.remove();
             const slotAst = parseNode(slotNode, ctx);
-            if (slotAst) {
-                const slotInfo = { content: slotAst };
-                const attrs = {};
-                for (let attributeName of slotNode.getAttributeNames()) {
-                    const value = slotNode.getAttribute(attributeName);
-                    if (attributeName === "t-slot-scope") {
-                        slotInfo.scope = value;
-                        continue;
-                    }
-                    attrs[attributeName] = value;
+            let on = null;
+            let attrs = null;
+            let scope = null;
+            for (let attributeName of slotNode.getAttributeNames()) {
+                const value = slotNode.getAttribute(attributeName);
+                if (attributeName === "t-slot-scope") {
+                    scope = value;
+                    continue;
                 }
-                if (Object.keys(attrs).length) {
-                    slotInfo.attrs = attrs;
+                else if (attributeName.startsWith("t-on-")) {
+                    on = on || {};
+                    on[attributeName.slice(5)] = value;
+                }
+                else {
+                    attrs = attrs || {};
+                    attrs[attributeName] = value;
                 }
-                slots[name] = slotInfo;
             }
+            slots = slots || {};
+            slots[name] = { content: slotAst, on, attrs, scope };
         }
         // default slot
         const defaultContent = parseChildNodes(clone, ctx);
         if (defaultContent) {
-            slots.default = { content: defaultContent };
-            if (defaultSlotScope) {
-                slots.default.scope = defaultSlotScope;
-            }
+            slots = slots || {};
+            slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
         }
     }
-    return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots };
+    return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
 }
 // -----------------------------------------------------------------------------
 // Slots
@@ -4180,15 +4687,24 @@ function parseTSlot(node, ctx) {
     }
     const name = node.getAttribute("t-slot");
     node.removeAttribute("t-slot");
-    const attrs = {};
+    let attrs = null;
+    let on = null;
     for (let attributeName of node.getAttributeNames()) {
         const value = node.getAttribute(attributeName);
-        attrs[attributeName] = value;
+        if (attributeName.startsWith("t-on-")) {
+            on = on || {};
+            on[attributeName.slice(5)] = value;
+        }
+        else {
+            attrs = attrs || {};
+            attrs[attributeName] = value;
+        }
     }
     return {
         type: 14 /* TSlot */,
         name,
         attrs,
+        on,
         defaultContent: parseChildNodes(node, ctx),
     };
 }
@@ -4382,108 +4898,112 @@ function compile(template, options = {}) {
     return new Function("bdom, helpers", code);
 }
 
-const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
-const globalTemplates = {};
-function parseXML(xml) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(xml, "text/xml");
-    if (doc.getElementsByTagName("parsererror").length) {
-        let msg = "Invalid XML in template.";
-        const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-        if (parsererrorText) {
-            msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-            const re = /\d+/g;
-            const firstMatch = re.exec(parsererrorText);
-            if (firstMatch) {
-                const lineNumber = Number(firstMatch[0]);
-                const line = xml.split("\n")[lineNumber - 1];
-                const secondMatch = re.exec(parsererrorText);
-                if (line && secondMatch) {
-                    const columnIndex = Number(secondMatch[0]) - 1;
-                    if (line[columnIndex]) {
-                        msg +=
-                            `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-                                `${line}\n${"-".repeat(columnIndex - 1)}^`;
-                    }
+const TIMEOUT = Symbol("timeout");
+function wrapError(fn, hookName) {
+    const error = new Error(`The following error occurred in ${hookName}: `);
+    const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+    const node = getCurrent();
+    return (...args) => {
+        try {
+            const result = fn(...args);
+            if (result instanceof Promise) {
+                if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+                    const fiber = node.fiber;
+                    Promise.race([
+                        result,
+                        new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+                    ]).then((res) => {
+                        if (res === TIMEOUT && node.fiber === fiber) {
+                            console.warn(timeoutError);
+                        }
+                    });
                 }
+                return result.catch((cause) => {
+                    error.cause = cause;
+                    if (cause instanceof Error) {
+                        error.message += `"${cause.message}"`;
+                    }
+                    throw error;
+                });
             }
+            return result;
         }
-        throw new Error(msg);
-    }
-    return doc;
-}
-class TemplateSet {
-    constructor(config = {}) {
-        this.rawTemplates = Object.create(globalTemplates);
-        this.templates = {};
-        this.utils = Object.assign({}, UTILS, {
-            call: (owner, subTemplate, ctx, parent, key) => {
-                const template = this.getTemplate(subTemplate);
-                return toggler(subTemplate, template.call(owner, ctx, parent, key));
-            },
-            getTemplate: (name) => this.getTemplate(name),
-        });
-        this.dev = config.dev || false;
-        this.translateFn = config.translateFn;
-        this.translatableAttributes = config.translatableAttributes;
-        if (config.templates) {
-            this.addTemplates(config.templates);
-        }
-    }
-    addTemplate(name, template, options = {}) {
-        if (name in this.rawTemplates && !options.allowDuplicate) {
-            throw new Error(`Template ${name} already defined`);
-        }
-        this.rawTemplates[name] = template;
-    }
-    addTemplates(xml, options = {}) {
-        if (!xml) {
-            // empty string
-            return;
-        }
-        xml = xml instanceof Document ? xml : parseXML(xml);
-        for (const template of xml.querySelectorAll("[t-name]")) {
-            const name = template.getAttribute("t-name");
-            this.addTemplate(name, template, options);
-        }
-    }
-    getTemplate(name) {
-        if (!(name in this.templates)) {
-            const rawTemplate = this.rawTemplates[name];
-            if (rawTemplate === undefined) {
-                throw new Error(`Missing template: "${name}"`);
+        catch (cause) {
+            if (cause instanceof Error) {
+                error.message += `"${cause.message}"`;
             }
-            const templateFn = this._compileTemplate(name, rawTemplate);
-            // first add a function to lazily get the template, in case there is a
-            // recursive call to the template name
-            const templates = this.templates;
-            this.templates[name] = function (context, parent) {
-                return templates[name].call(this, context, parent);
-            };
-            const template = templateFn(bdom, this.utils);
-            this.templates[name] = template;
+            throw error;
         }
-        return this.templates[name];
-    }
-    _compileTemplate(name, template) {
-        return compile(template, {
-            name,
-            dev: this.dev,
-            translateFn: this.translateFn,
-            translatableAttributes: this.translatableAttributes,
-        });
-    }
+    };
 }
 // -----------------------------------------------------------------------------
-//  xml tag helper
+//  hooks
 // -----------------------------------------------------------------------------
-function xml(...args) {
-    const name = `__template__${xml.nextId++}`;
-    const value = String.raw(...args);
-    globalTemplates[name] = value;
-    return name;
+function onWillStart(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
 }
-xml.nextId = 1;
+function onWillUpdateProps(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+}
+function onMounted(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+}
+function onWillPatch(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+}
+function onPatched(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+}
+function onWillUnmount(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+}
+function onWillDestroy(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
+}
+function onWillRender(fn) {
+    const node = getCurrent();
+    const renderFn = node.renderFn;
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    fn = decorate(fn.bind(node.component), "onWillRender");
+    node.renderFn = () => {
+        fn();
+        return renderFn();
+    };
+}
+function onRendered(fn) {
+    const node = getCurrent();
+    const renderFn = node.renderFn;
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    fn = decorate(fn.bind(node.component), "onRendered");
+    node.renderFn = () => {
+        const result = renderFn();
+        fn();
+        return result;
+    };
+}
+function onError(callback) {
+    const node = getCurrent();
+    let handlers = nodeErrorHandlers.get(node);
+    if (!handlers) {
+        handlers = [];
+        nodeErrorHandlers.set(node, handlers);
+    }
+    handlers.push(callback.bind(node.component));
+}
 
 class Component {
     constructor(props, env, node) {
@@ -4492,8 +5012,8 @@ class Component {
         this.__owl__ = node;
     }
     setup() { }
-    render() {
-        this.__owl__.render();
+    render(deep = false) {
+        this.__owl__.render(deep);
     }
 }
 Component.template = "";
@@ -4562,75 +5082,293 @@ Portal.props = {
     slots: true,
 };
 
-// -----------------------------------------------------------------------------
-//  Scheduler
-// -----------------------------------------------------------------------------
-class Scheduler {
-    constructor() {
-        this.tasks = new Set();
-        this.isRunning = false;
-        this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+/**
+ * This file contains utility functions that will be injected in each template,
+ * to perform various useful tasks in the compiled code.
+ */
+function withDefault(value, defaultValue) {
+    return value === undefined || value === null || value === false ? defaultValue : value;
+}
+function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
+    key = key + "__slot_" + name;
+    const slots = ctx.props[TARGET].slots || {};
+    const { __render, __ctx, __scope } = slots[name] || {};
+    const slotScope = Object.create(__ctx || {});
+    if (__scope) {
+        slotScope[__scope] = extra;
+    }
+    const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+    if (defaultContent) {
+        let child1 = undefined;
+        let child2 = undefined;
+        if (slotBDom) {
+            child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+        }
+        else {
+            child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+        }
+        return multi([child1, child2]);
+    }
+    return slotBDom || text("");
+}
+function capture(ctx) {
+    const component = ctx.__owl__.component;
+    const result = Object.create(component);
+    for (let k in ctx) {
+        result[k] = ctx[k];
+    }
+    return result;
+}
+function withKey(elem, k) {
+    elem.key = k;
+    return elem;
+}
+function prepareList(collection) {
+    let keys;
+    let values;
+    if (Array.isArray(collection)) {
+        keys = collection;
+        values = collection;
+    }
+    else if (collection) {
+        values = Object.keys(collection);
+        keys = Object.values(collection);
     }
-    start() {
-        this.isRunning = true;
-        this.scheduleTasks();
+    else {
+        throw new Error("Invalid loop expression");
+    }
+    const n = values.length;
+    return [keys, values, n, new Array(n)];
+}
+const isBoundary = Symbol("isBoundary");
+function setContextValue(ctx, key, value) {
+    const ctx0 = ctx;
+    while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+        const newCtx = ctx.__proto__;
+        if (!newCtx) {
+            ctx = ctx0;
+            break;
+        }
+        ctx = newCtx;
+    }
+    ctx[key] = value;
+}
+function toNumber(val) {
+    const n = parseFloat(val);
+    return isNaN(n) ? val : n;
+}
+function shallowEqual(l1, l2) {
+    for (let i = 0, l = l1.length; i < l; i++) {
+        if (l1[i] !== l2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+class LazyValue {
+    constructor(fn, ctx, node) {
+        this.fn = fn;
+        this.ctx = capture(ctx);
+        this.node = node;
+    }
+    evaluate() {
+        return this.fn(this.ctx, this.node);
+    }
+    toString() {
+        return this.evaluate().toString();
+    }
+}
+/*
+ * Safely outputs `value` as a block depending on the nature of `value`
+ */
+function safeOutput(value) {
+    if (!value) {
+        return value;
+    }
+    let safeKey;
+    let block;
+    if (value instanceof Markup) {
+        safeKey = `string_safe`;
+        block = html(value);
+    }
+    else if (value instanceof LazyValue) {
+        safeKey = `lazy_value`;
+        block = value.evaluate();
+    }
+    else if (value instanceof String || typeof value === "string") {
+        safeKey = "string_unsafe";
+        block = text(value);
+    }
+    else {
+        // Assuming it is a block
+        safeKey = "block_safe";
+        block = value;
+    }
+    return toggler(safeKey, block);
+}
+let boundFunctions = new WeakMap();
+function bind(ctx, fn) {
+    let component = ctx.__owl__.component;
+    let boundFnMap = boundFunctions.get(component);
+    if (!boundFnMap) {
+        boundFnMap = new WeakMap();
+        boundFunctions.set(component, boundFnMap);
+    }
+    let boundFn = boundFnMap.get(fn);
+    if (!boundFn) {
+        boundFn = fn.bind(component);
+        boundFnMap.set(fn, boundFn);
+    }
+    return boundFn;
+}
+function multiRefSetter(refs, name) {
+    let count = 0;
+    return (el) => {
+        if (el) {
+            count++;
+            if (count > 1) {
+                throw new Error("Cannot have 2 elements with same ref name at the same time");
+            }
+        }
+        if (count === 0 || el) {
+            refs[name] = el;
+        }
+    };
+}
+const helpers = {
+    withDefault,
+    zero: Symbol("zero"),
+    isBoundary,
+    callSlot,
+    capture,
+    withKey,
+    prepareList,
+    setContextValue,
+    multiRefSetter,
+    shallowEqual,
+    toNumber,
+    validateProps,
+    LazyValue,
+    safeOutput,
+    bind,
+    createCatcher,
+};
+
+const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+function parseXML(xml) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xml, "text/xml");
+    if (doc.getElementsByTagName("parsererror").length) {
+        let msg = "Invalid XML in template.";
+        const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+        if (parsererrorText) {
+            msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+            const re = /\d+/g;
+            const firstMatch = re.exec(parsererrorText);
+            if (firstMatch) {
+                const lineNumber = Number(firstMatch[0]);
+                const line = xml.split("\n")[lineNumber - 1];
+                const secondMatch = re.exec(parsererrorText);
+                if (line && secondMatch) {
+                    const columnIndex = Number(secondMatch[0]) - 1;
+                    if (line[columnIndex]) {
+                        msg +=
+                            `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+                                `${line}\n${"-".repeat(columnIndex - 1)}^`;
+                    }
+                }
+            }
+        }
+        throw new Error(msg);
+    }
+    return doc;
+}
+/**
+ * Returns the helpers object that will be injected in each template closure
+ * function
+ */
+function makeHelpers(getTemplate) {
+    return Object.assign({}, helpers, {
+        Portal,
+        markRaw,
+        getTemplate,
+        call: (owner, subTemplate, ctx, parent, key) => {
+            const template = getTemplate(subTemplate);
+            return toggler(subTemplate, template.call(owner, ctx, parent, key));
+        },
+    });
+}
+class TemplateSet {
+    constructor(config = {}) {
+        this.rawTemplates = Object.create(globalTemplates);
+        this.templates = {};
+        this.dev = config.dev || false;
+        this.translateFn = config.translateFn;
+        this.translatableAttributes = config.translatableAttributes;
+        if (config.templates) {
+            this.addTemplates(config.templates);
+        }
+        this.helpers = makeHelpers(this.getTemplate.bind(this));
     }
-    stop() {
-        this.isRunning = false;
+    addTemplate(name, template, options = {}) {
+        if (name in this.rawTemplates && !options.allowDuplicate) {
+            throw new Error(`Template ${name} already defined`);
+        }
+        this.rawTemplates[name] = template;
     }
-    addFiber(fiber) {
-        this.tasks.add(fiber.root);
-        if (!this.isRunning) {
-            this.start();
+    addTemplates(xml, options = {}) {
+        if (!xml) {
+            // empty string
+            return;
+        }
+        xml = xml instanceof Document ? xml : parseXML(xml);
+        for (const template of xml.querySelectorAll("[t-name]")) {
+            const name = template.getAttribute("t-name");
+            this.addTemplate(name, template, options);
         }
     }
-    /**
-     * Process all current tasks. This only applies to the fibers that are ready.
-     * Other tasks are left unchanged.
-     */
-    flush() {
-        this.tasks.forEach((fiber) => {
-            if (fiber.root !== fiber) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            const hasError = fibersInError.has(fiber);
-            if (hasError && fiber.counter !== 0) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            if (fiber.node.status === 2 /* DESTROYED */) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            if (fiber.counter === 0) {
-                if (!hasError) {
-                    fiber.complete();
+    getTemplate(name) {
+        if (!(name in this.templates)) {
+            const rawTemplate = this.rawTemplates[name];
+            if (rawTemplate === undefined) {
+                let extraInfo = "";
+                try {
+                    const componentName = getCurrent().component.constructor.name;
+                    extraInfo = ` (for component "${componentName}")`;
                 }
-                this.tasks.delete(fiber);
+                catch { }
+                throw new Error(`Missing template: "${name}"${extraInfo}`);
             }
-        });
-        if (this.tasks.size === 0) {
-            this.stop();
+            const templateFn = this._compileTemplate(name, rawTemplate);
+            // first add a function to lazily get the template, in case there is a
+            // recursive call to the template name
+            const templates = this.templates;
+            this.templates[name] = function (context, parent) {
+                return templates[name].call(this, context, parent);
+            };
+            const template = templateFn(bdom, this.helpers);
+            this.templates[name] = template;
         }
+        return this.templates[name];
     }
-    scheduleTasks() {
-        this.requestAnimationFrame(() => {
-            this.flush();
-            if (this.isRunning) {
-                this.scheduleTasks();
-            }
+    _compileTemplate(name, template) {
+        return compile(template, {
+            name,
+            dev: this.dev,
+            translateFn: this.translateFn,
+            translatableAttributes: this.translatableAttributes,
         });
     }
-}
-// capture the value of requestAnimationFrame as soon as possible, to avoid
-// interactions with other code, such as test frameworks that override them
-Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
+}
 
-const DEV_MSG = `Owl is running in 'dev' mode.
+let hasBeenLogged = false;
+const DEV_MSG = () => {
+    const hash = window.owl ? window.owl.__info__.hash : "master";
+    return `Owl is running in 'dev' mode.
 
 This is not suitable for production use.
-See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for more information.`;
+See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
+};
 class App extends TemplateSet {
     constructor(Root, config = {}) {
         super(config);
@@ -4640,11 +5378,13 @@ class App extends TemplateSet {
         if (config.test) {
             this.dev = true;
         }
-        if (this.dev && !config.test) {
-            console.info(DEV_MSG);
+        if (this.dev && !config.test && !hasBeenLogged) {
+            console.info(DEV_MSG());
+            hasBeenLogged = true;
         }
-        const descrs = Object.getOwnPropertyDescriptors(config.env || {});
-        this.env = Object.freeze(Object.defineProperties({}, descrs));
+        const env = config.env || {};
+        const descrs = Object.getOwnPropertyDescriptors(env);
+        this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
         this.props = config.props || {};
     }
     mount(target, options) {
@@ -4655,7 +5395,7 @@ class App extends TemplateSet {
         return prom;
     }
     makeNode(Component, props) {
-        return new ComponentNode(Component, props, this);
+        return new ComponentNode(Component, props, this, null, null);
     }
     mountNode(node, target, options) {
         const promise = new Promise((resolve, reject) => {
@@ -4687,6 +5427,7 @@ class App extends TemplateSet {
     }
     destroy() {
         if (this.root) {
+            this.scheduler.flush();
             this.root.destroy();
         }
     }
@@ -4707,270 +5448,6 @@ function status(component) {
     }
 }
 
-class Memo extends Component {
-    constructor(props, env, node) {
-        super(props, env, node);
-        // prevent patching process conditionally
-        let applyPatch = false;
-        const patchFn = node.patch;
-        node.patch = () => {
-            if (applyPatch) {
-                patchFn.call(node);
-                applyPatch = false;
-            }
-        };
-        // check props change, and render/apply patch if it changed
-        let prevProps = props;
-        const updateAndRender = node.updateAndRender;
-        node.updateAndRender = function (props, parentFiber) {
-            const shouldUpdate = !shallowEqual(prevProps, props);
-            if (shouldUpdate) {
-                prevProps = props;
-                updateAndRender.call(node, props, parentFiber);
-                applyPatch = true;
-            }
-            return Promise.resolve();
-        };
-    }
-}
-Memo.template = xml `<t t-slot="default"/>`;
-/**
- * we assume that each object have the same set of keys
- */
-function shallowEqual(p1, p2) {
-    for (let k in p1) {
-        if (k !== "slots" && p1[k] !== p2[k]) {
-            return false;
-        }
-    }
-    return true;
-}
-
-// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
-const TARGET = Symbol("Target");
-// Escape hatch to prevent reactivity system to turn something into a reactive
-const SKIP = Symbol("Skip");
-// Special key to subscribe to, to be notified of key creation/deletion
-const KEYCHANGES = Symbol("Key changes");
-const objectToString = Object.prototype.toString;
-/**
- * Checks whether a given value can be made into a reactive object.
- *
- * @param value the value to check
- * @returns whether the value can be made reactive
- */
-function canBeMadeReactive(value) {
-    if (typeof value !== "object") {
-        return false;
-    }
-    // extract "RawType" from strings like "[object RawType]" => this lets us
-    // ignore many native objects such as Promise (whose toString is [object Promise])
-    // or Date ([object Date]).
-    const rawType = objectToString.call(value).slice(8, -1);
-    return rawType === "Object" || rawType === "Array";
-}
-/**
- * Mark an object or array so that it is ignored by the reactivity system
- *
- * @param value the value to mark
- * @returns the object itself
- */
-function markRaw(value) {
-    value[SKIP] = true;
-    return value;
-}
-/**
- * Given a reactive objet, return the raw (non reactive) underlying object
- *
- * @param value a reactive value
- * @returns the underlying value
- */
-function toRaw(value) {
-    return value[TARGET];
-}
-const targetToKeysToCallbacks = new WeakMap();
-/**
- * Observes a given key on a target with an callback. The callback will be
- * called when the given key changes on the target.
- *
- * @param target the target whose key should be observed
- * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
- *  or deletion)
- * @param callback the function to call when the key changes
- */
-function observeTargetKey(target, key, callback) {
-    if (!targetToKeysToCallbacks.get(target)) {
-        targetToKeysToCallbacks.set(target, new Map());
-    }
-    const keyToCallbacks = targetToKeysToCallbacks.get(target);
-    if (!keyToCallbacks.get(key)) {
-        keyToCallbacks.set(key, new Set());
-    }
-    keyToCallbacks.get(key).add(callback);
-    if (!callbacksToTargets.has(callback)) {
-        callbacksToTargets.set(callback, new Set());
-    }
-    callbacksToTargets.get(callback).add(target);
-}
-/**
- * Notify Reactives that are observing a given target that a key has changed on
- * the target.
- *
- * @param target target whose Reactives should be notified that the target was
- *  changed.
- * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
- *   or deleted)
- */
-function notifyReactives(target, key) {
-    const keyToCallbacks = targetToKeysToCallbacks.get(target);
-    if (!keyToCallbacks) {
-        return;
-    }
-    const callbacks = keyToCallbacks.get(key);
-    if (!callbacks) {
-        return;
-    }
-    // Loop on copy because clearReactivesForCallback will modify the set in place
-    for (const callback of [...callbacks]) {
-        clearReactivesForCallback(callback);
-        callback();
-    }
-}
-const callbacksToTargets = new WeakMap();
-/**
- * Clears all subscriptions of the Reactives associated with a given callback.
- *
- * @param callback the callback for which the reactives need to be cleared
- */
-function clearReactivesForCallback(callback) {
-    const targetsToClear = callbacksToTargets.get(callback);
-    if (!targetsToClear) {
-        return;
-    }
-    for (const target of targetsToClear) {
-        const observedKeys = targetToKeysToCallbacks.get(target);
-        if (!observedKeys) {
-            continue;
-        }
-        for (const callbacks of observedKeys.values()) {
-            callbacks.delete(callback);
-        }
-    }
-    targetsToClear.clear();
-}
-const reactiveCache = new WeakMap();
-/**
- * Creates a reactive proxy for an object. Reading data on the reactive object
- * subscribes to changes to the data. Writing data on the object will cause the
- * notify callback to be called if there are suscriptions to that data. Nested
- * objects and arrays are automatically made reactive as well.
- *
- * Whenever you are notified of a change, all subscriptions are cleared, and if
- * you would like to be notified of any further changes, you should go read
- * the underlying data again. We assume that if you don't go read it again after
- * being notified, it means that you are no longer interested in that data.
- *
- * Subscriptions:
- * + Reading a property on an object will subscribe you to changes in the value
- *    of that property.
- * + Accessing an object keys (eg with Object.keys or with `for..in`) will
- *    subscribe you to the creation/deletion of keys. Checking the presence of a
- *    key on the object with 'in' has the same effect.
- * - getOwnPropertyDescriptor does not currently subscribe you to the property.
- *    This is a choice that was made because changing a key's value will trigger
- *    this trap and we do not want to subscribe by writes. This also means that
- *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
- *
- * @param target the object for which to create a reactive proxy
- * @param callback the function to call when an observed property of the
- *  reactive has changed
- * @returns a proxy that tracks changes to it
- */
-function reactive(target, callback = () => { }) {
-    if (!canBeMadeReactive(target)) {
-        throw new Error(`Cannot make the given value reactive`);
-    }
-    if (SKIP in target) {
-        return target;
-    }
-    const originalTarget = target[TARGET];
-    if (originalTarget) {
-        return reactive(originalTarget, callback);
-    }
-    if (!reactiveCache.has(target)) {
-        reactiveCache.set(target, new Map());
-    }
-    const reactivesForTarget = reactiveCache.get(target);
-    if (!reactivesForTarget.has(callback)) {
-        const proxy = new Proxy(target, {
-            get(target, key, proxy) {
-                if (key === TARGET) {
-                    return target;
-                }
-                observeTargetKey(target, key, callback);
-                const value = Reflect.get(target, key, proxy);
-                if (!canBeMadeReactive(value)) {
-                    return value;
-                }
-                return reactive(value, callback);
-            },
-            set(target, key, value, proxy) {
-                const isNewKey = !Object.hasOwnProperty.call(target, key);
-                const originalValue = Reflect.get(target, key, proxy);
-                const ret = Reflect.set(target, key, value, proxy);
-                if (isNewKey) {
-                    notifyReactives(target, KEYCHANGES);
-                }
-                // While Array length may trigger the set trap, it's not actually set by this
-                // method but is updated behind the scenes, and the trap is not called with the
-                // new value. We disable the "same-value-optimization" for it because of that.
-                if (originalValue !== value || (Array.isArray(target) && key === "length")) {
-                    notifyReactives(target, key);
-                }
-                return ret;
-            },
-            deleteProperty(target, key) {
-                const ret = Reflect.deleteProperty(target, key);
-                notifyReactives(target, KEYCHANGES);
-                notifyReactives(target, key);
-                return ret;
-            },
-            ownKeys(target) {
-                observeTargetKey(target, KEYCHANGES, callback);
-                return Reflect.ownKeys(target);
-            },
-            has(target, key) {
-                // TODO: this observes all key changes instead of only the presence of the argument key
-                observeTargetKey(target, KEYCHANGES, callback);
-                return Reflect.has(target, key);
-            },
-        });
-        reactivesForTarget.set(callback, proxy);
-    }
-    return reactivesForTarget.get(callback);
-}
-const batchedRenderFunctions = new WeakMap();
-/**
- * Creates a reactive object that will be observed by the current component.
- * Reading data from the returned object (eg during rendering) will cause the
- * component to subscribe to that data and be rerendered when it changes.
- *
- * @param state the state to observe
- * @returns a reactive object that will cause the component to re-render on
- *  relevant changes
- * @see reactive
- */
-function useState(state) {
-    const node = getCurrent();
-    if (!batchedRenderFunctions.has(node)) {
-        batchedRenderFunctions.set(node, batched(() => node.render()));
-        onWillDestroy(() => clearReactivesForCallback(render));
-    }
-    const render = batchedRenderFunctions.get(node);
-    const reactiveState = reactive(state, render);
-    return reactiveState;
-}
-
 // -----------------------------------------------------------------------------
 // useRef
 // -----------------------------------------------------------------------------
@@ -5016,10 +5493,6 @@ function useChildSubEnv(envExtension) {
     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
@@ -5037,18 +5510,20 @@ function useEffect(effect, computeDependencies = () => [NaN]) {
     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
@@ -5075,7 +5550,6 @@ function useExternalListener(target, eventName, handler, eventParams) {
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
-UTILS.Portal = Portal;
 const blockDom = {
     config,
     // bdom entry points
@@ -5096,7 +5570,6 @@ const __info__ = {};
 exports.App = App;
 exports.Component = Component;
 exports.EventBus = EventBus;
-exports.Memo = Memo;
 exports.__info__ = __info__;
 exports.blockDom = blockDom;
 exports.loadFile = loadFile;
@@ -5128,7 +5601,7 @@ exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.version = '2.0.0-alpha.2';
-__info__.date = '2022-02-14T12:42:47.468Z';
-__info__.hash = '4a922ed';
+__info__.version = '2.0.0-beta-5';
+__info__.date = '2022-04-07T13:36:37.300Z';
+__info__.hash = '1179e84';
 __info__.url = 'https://github.com/odoo/owl';