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

package/dist/owl.es.js

@@ -209,7 +209,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) {
@@ -263,10 +264,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.
@@ -283,7 +288,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;
@@ -508,7 +516,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:
@@ -812,7 +820,7 @@ function updateCtx(ctx, tree) {
                     idx: info.idx,
                     refIdx: info.refIdx,
                     setData: makeRefSetter(index, ctx.refList),
-                    updateData: NO_OP$1,
+                    updateData: NO_OP,
                 });
         }
     }
@@ -1278,6 +1286,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);
 }
@@ -1291,143 +1368,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);
+        },
+    });
 }
 
 /**
@@ -1445,11 +1843,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();
         }
     };
 }
@@ -1496,562 +1896,206 @@ class Markup extends String {
  */
 function markup(value) {
     return new Markup(value);
-}
-
-// 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] || value;
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+const globalTemplates = {};
+function xml(...args) {
+    const name = `__template__${xml.nextId++}`;
+    const value = String.raw(...args);
+    globalTemplates[name] = value;
+    return name;
 }
-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());
+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 keyToCallbacks = targetToKeysToCallbacks.get(target);
-    if (!keyToCallbacks.get(key)) {
-        keyToCallbacks.set(key, new Set());
+    const fiber = node.fiber;
+    if (fiber) {
+        fibersInError.set(fiber, error);
     }
-    keyToCallbacks.get(key).add(callback);
-    if (!callbacksToTargets.has(callback)) {
-        callbacksToTargets.set(callback, new Set());
+    const errorHandlers = nodeErrorHandlers.get(node);
+    if (errorHandlers) {
+        let handled = false;
+        // execute in the opposite order
+        for (let i = errorHandlers.length - 1; i >= 0; i--) {
+            try {
+                errorHandlers[i](error);
+                handled = true;
+                break;
+            }
+            catch (e) {
+                error = e;
+            }
+        }
+        if (handled) {
+            return true;
+        }
     }
-    callbacksToTargets.get(callback).add(target);
+    return _handleError(node.parent, error);
 }
-/**
- * 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;
+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);
+        }
     }
-    // Loop on copy because clearReactivesForCallback will modify the set in place
-    for (const callback of [...callbacks]) {
-        clearReactivesForCallback(callback);
-        callback();
+}
+
+function makeChildFiber(node, parent) {
+    let current = node.fiber;
+    if (current) {
+        cancelFibers(current.children);
+        current.root = null;
     }
+    return new Fiber(node, parent);
 }
-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);
+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;
     }
-    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 fiber = new RootFiber(node, null);
+    if (node.willPatch.length) {
+        fiber.willPatch.push(fiber);
     }
-    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);
+    if (node.patched.length) {
+        fiber.patched.push(fiber);
     }
-    return reactivesForTarget.get(callback);
-}
-
+    return fiber;
+}
 /**
- * This file contains utility functions that will be injected in each template,
- * to perform various useful tasks in the compiled code.
+ * @returns number of not-yet rendered fibers cancelled
  */
-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;
+function cancelFibers(fibers) {
+    let result = 0;
+    for (let fiber of fibers) {
+        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 {
-            child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+            result++;
         }
-        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];
+        result += cancelFibers(fiber.children);
     }
     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);
-    }
-    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;
+class Fiber {
+    constructor(node, parent) {
+        this.bdom = null;
+        this.children = [];
+        this.appliedToDom = false;
+        this.deep = false;
+        this.childrenMap = {};
+        this.node = node;
+        this.parent = parent;
+        if (parent) {
+            this.deep = parent.deep;
+            const root = parent.root;
+            root.setCounter(root.counter + 1);
+            this.root = root;
+            parent.children.push(this);
         }
-        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;
+        else {
+            this.root = this;
         }
     }
-    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);
+    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();
     }
-    toString() {
-        return this.evaluate().toString();
+    _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);
+        }
     }
 }
-/*
- * 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) {
-        cancelFibers(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 = root.counter + 1 - cancelFibers(current.children);
-        current.children = [];
-        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;
-}
-/**
- * @returns number of not-yet rendered fibers cancelled
- */
-function cancelFibers(fibers) {
-    let result = 0;
-    for (let fiber of fibers) {
-        fiber.node.fiber = null;
-        if (!fiber.bdom) {
-            result++;
-        }
-        result += cancelFibers(fiber.children);
-    }
-    return result;
-}
-class Fiber {
-    constructor(node, parent) {
-        this.bdom = null;
-        this.children = [];
-        this.appliedToDom = false;
-        this.deep = false;
-        this.node = node;
-        this.parent = parent;
-        if (parent) {
-            this.deep = parent.deep;
-            const root = parent.root;
-            root.counter++;
-            this.root = root;
-            parent.children.push(this);
-        }
-        else {
-            this.root = this;
-        }
-    }
-}
-class RootFiber extends Fiber {
-    constructor() {
-        super(...arguments);
-        this.counter = 1;
-        // only add stuff in this if they have registered some hooks
-        this.willPatch = [];
-        this.patched = [];
-        this.mounted = [];
-        // A fiber is typically locked when it is completing and the patch has not, or is being applied.
-        // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
-        this.locked = false;
+class RootFiber extends Fiber {
+    constructor() {
+        super(...arguments);
+        this.counter = 1;
+        // only add stuff in this if they have registered some hooks
+        this.willPatch = [];
+        this.patched = [];
+        this.mounted = [];
+        // A fiber is typically locked when it is completing and the patch has not, or is being applied.
+        // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
+        this.locked = false;
     }
     complete() {
         const node = this.node;
@@ -2101,6 +2145,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 = {}) {
@@ -2112,6 +2162,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
@@ -2150,23 +2201,162 @@ class MountFiber extends RootFiber {
     }
 }
 
-let currentNode = null;
-function getCurrent() {
-    if (!currentNode) {
-        throw new Error("No active component (a hook function should only be called in 'setup')");
+/**
+ * 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];
+            }
+        }
     }
-    return currentNode;
 }
-function useComponent() {
-    return currentNode.component;
+//------------------------------------------------------------------------------
+// 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 };
 }
-// -----------------------------------------------------------------------------
-// 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
+ * 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;
+}
+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
@@ -2178,7 +2368,7 @@ function useState(state) {
     const node = getCurrent();
     let render = batchedRenderFunctions.get(node);
     if (!render) {
-        render = batched(node.render.bind(node));
+        render = batched(node.render.bind(node, false));
         batchedRenderFunctions.set(node, render);
         // manual implementation of onWillDestroy to break cyclic dependency
         node.willDestroy.push(clearReactivesForCallback.bind(null, render));
@@ -2196,22 +2386,23 @@ function arePropsDifferent(props1, props2) {
 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) {
-        const currentProps = node.component.props[TARGET];
-        if (parentFiber.deep || arePropsDifferent(currentProps, props)) {
+        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);
         }
     }
@@ -2227,17 +2418,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;
         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 = [];
@@ -2249,7 +2442,8 @@ 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;
@@ -2279,12 +2473,12 @@ class ComponentNode {
             return;
         }
         if (this.status === 0 /* NEW */ && this.fiber === fiber) {
-            this._render(fiber);
+            fiber.render();
         }
     }
-    async render(deep = false) {
+    async render(deep) {
         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;
@@ -2323,16 +2517,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() {
@@ -2352,8 +2537,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 */;
     }
@@ -2372,7 +2564,7 @@ class ComponentNode {
             return;
         }
         component.props = props;
-        this._render(fiber);
+        fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
             parentRoot.willPatch.push(fiber);
@@ -2419,6 +2611,7 @@ 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) {
@@ -2434,10 +2627,8 @@ class ComponentNode {
     }
     _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;
     }
@@ -2447,111 +2638,82 @@ 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) : [];
     }
 }
 
-function wrapError(fn, hookName) {
-    const error = new Error(`The following error occurred in ${hookName}: `);
-    return (...args) => {
-        try {
-            const result = fn(...args);
-            if (result instanceof Promise) {
-                return result.catch((cause) => {
-                    error.cause = cause;
-                    if (cause instanceof Error) {
-                        error.message += `"${cause.message}"`;
-                    }
-                    throw error;
-                });
+// -----------------------------------------------------------------------------
+//  Scheduler
+// -----------------------------------------------------------------------------
+class Scheduler {
+    constructor() {
+        this.tasks = new Set();
+        this.frame = 0;
+        this.delayedRenders = [];
+        this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+    }
+    addFiber(fiber) {
+        this.tasks.add(fiber.root);
+    }
+    /**
+     * Process all current tasks. This only applies to the fibers that are ready.
+     * Other tasks are left unchanged.
+     */
+    flush() {
+        if (this.delayedRenders.length) {
+            let renders = this.delayedRenders;
+            this.delayedRenders = [];
+            for (let f of renders) {
+                if (f.root && f.node.status !== 2 /* DESTROYED */) {
+                    f.render();
+                }
             }
-            return result;
         }
-        catch (cause) {
-            if (cause instanceof Error) {
-                error.message += `"${cause.message}"`;
+        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();
             }
-            throw error;
+            this.tasks.delete(fiber);
         }
-    };
-}
-// -----------------------------------------------------------------------------
-//  hooks
-// -----------------------------------------------------------------------------
-function onWillStart(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
-}
-function onWillUpdateProps(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
-}
-function onMounted(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
-}
-function onWillPatch(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
-}
-function onPatched(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.patched.push(decorate(fn.bind(node.component), "onPatched"));
-}
-function onWillUnmount(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
-}
-function onWillDestroy(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
-}
-function onWillRender(fn) {
-    const node = getCurrent();
-    const renderFn = node.renderFn;
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.renderFn = decorate(() => {
-        fn.call(node.component);
-        return renderFn();
-    }, "onWillRender");
+    }
 }
-function onRendered(fn) {
-    const node = getCurrent();
-    const renderFn = node.renderFn;
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.renderFn = decorate(() => {
-        const result = renderFn();
-        fn.call(node.component);
-        return result;
-    }, "onRendered");
-}
-function onError(callback) {
-    const node = getCurrent();
-    let handlers = nodeErrorHandlers.get(node);
-    if (!handlers) {
-        handlers = [];
-        nodeErrorHandlers.set(node, handlers);
-    }
-    handlers.push(callback.bind(node.component));
-}
+// capture the value of requestAnimationFrame as soon as possible, to avoid
+// interactions with other code, such as test frameworks that override them
+Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
 
 /**
  * Owl QWeb Expression Parser
@@ -2705,24 +2867,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;
 }
@@ -2927,7 +3096,7 @@ function createContext(parentCtx, params) {
     }, params);
 }
 class CodeTarget {
-    constructor(name) {
+    constructor(name, on) {
         this.indentLevel = 0;
         this.loopLevel = 0;
         this.code = [];
@@ -2938,6 +3107,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("  ");
@@ -2987,7 +3157,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) {
@@ -3030,8 +3200,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) {
@@ -3067,19 +3237,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;
@@ -3121,10 +3293,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);
         }
     }
     /**
@@ -3152,7 +3327,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);
             }
@@ -3291,7 +3466,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;
             }
         }
@@ -3373,10 +3548,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) {
@@ -3386,7 +3561,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");
@@ -3434,14 +3609,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);
             }
         }
     }
@@ -3529,14 +3704,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(", ");
@@ -3557,10 +3732,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++;
@@ -3577,7 +3752,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}}\`)}`);
@@ -3587,8 +3762,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})) {`);
@@ -3616,7 +3791,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,
@@ -3661,14 +3836,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(", ");
@@ -3699,7 +3874,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, {
@@ -3710,7 +3885,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,
@@ -3804,27 +3979,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}"`);
@@ -3849,7 +4026,7 @@ class CodeGenerator {
         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)) {
@@ -3861,7 +4038,7 @@ class CodeGenerator {
         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}\``;
@@ -3882,9 +4059,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;
@@ -3906,13 +4102,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);
         }
@@ -3933,7 +4133,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) {
@@ -4067,8 +4267,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);
@@ -4076,6 +4276,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")) {
@@ -4113,6 +4314,7 @@ function parseDOMNode(node, ctx) {
                 targetAttr: isCheckboxInput ? "checked" : "value",
                 specialInitTargetAttr: isRadioInput ? "checked" : null,
                 eventType,
+                hasDynamicChildren: false,
                 shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
                 shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
             };
@@ -4133,6 +4335,7 @@ function parseDOMNode(node, ctx) {
             if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
                 tModel.hasDynamicChildren = true;
             }
+            attrs = attrs || {};
             attrs[attr] = value;
         }
     }
@@ -4283,7 +4486,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 } },
             };
         }
     }
@@ -4367,7 +4570,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.",
@@ -4396,18 +4598,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
@@ -4434,33 +4644,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;
+                }
+                else if (attributeName.startsWith("t-on-")) {
+                    on = on || {};
+                    on[attributeName.slice(5)] = value;
                 }
-                if (Object.keys(attrs).length) {
-                    slotInfo.attrs = attrs;
+                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
@@ -4471,15 +4683,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),
     };
 }
@@ -4613,68 +4834,423 @@ function normalizeTEsc(el) {
         el.appendChild(t);
     }
 }
-/**
- * Normalizes the tree inside a given element and do some preliminary validation
- * on it. This function modifies the Element in place.
- *
- * @param el the element containing the tree that should be normalized
- */
-function normalizeXML(el) {
-    normalizeTIf(el);
-    normalizeTEsc(el);
+/**
+ * Normalizes the tree inside a given element and do some preliminary validation
+ * on it. This function modifies the Element in place.
+ *
+ * @param el the element containing the tree that should be normalized
+ */
+function normalizeXML(el) {
+    normalizeTIf(el);
+    normalizeTEsc(el);
+}
+/**
+ * Parses an XML string into an XML document, throwing errors on parser errors
+ * instead of returning an XML document containing the parseerror.
+ *
+ * @param xml the string to parse
+ * @returns an XML document corresponding to the content of the string
+ */
+function parseXML$1(xml) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xml, "text/xml");
+    if (doc.getElementsByTagName("parsererror").length) {
+        let msg = "Invalid XML in template.";
+        const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+        if (parsererrorText) {
+            msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+            const re = /\d+/g;
+            const firstMatch = re.exec(parsererrorText);
+            if (firstMatch) {
+                const lineNumber = Number(firstMatch[0]);
+                const line = xml.split("\n")[lineNumber - 1];
+                const secondMatch = re.exec(parsererrorText);
+                if (line && secondMatch) {
+                    const columnIndex = Number(secondMatch[0]) - 1;
+                    if (line[columnIndex]) {
+                        msg +=
+                            `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+                                `${line}\n${"-".repeat(columnIndex - 1)}^`;
+                    }
+                }
+            }
+        }
+        throw new Error(msg);
+    }
+    return doc;
+}
+
+function compile(template, options = {}) {
+    // parsing
+    const ast = parse(template);
+    // some work
+    const hasSafeContext = template instanceof Node
+        ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
+        : !template.includes("t-set") && !template.includes("t-call");
+    // code generation
+    const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
+    const code = codeGenerator.generateCode();
+    // template function
+    return new Function("bdom, helpers", code);
+}
+
+const TIMEOUT = Symbol("timeout");
+function wrapError(fn, hookName) {
+    const error = new Error(`The following error occurred in ${hookName}: `);
+    const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+    const node = getCurrent();
+    return (...args) => {
+        try {
+            const result = fn(...args);
+            if (result instanceof Promise) {
+                if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+                    const fiber = node.fiber;
+                    Promise.race([
+                        result,
+                        new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+                    ]).then((res) => {
+                        if (res === TIMEOUT && node.fiber === fiber) {
+                            console.warn(timeoutError);
+                        }
+                    });
+                }
+                return result.catch((cause) => {
+                    error.cause = cause;
+                    if (cause instanceof Error) {
+                        error.message += `"${cause.message}"`;
+                    }
+                    throw error;
+                });
+            }
+            return result;
+        }
+        catch (cause) {
+            if (cause instanceof Error) {
+                error.message += `"${cause.message}"`;
+            }
+            throw error;
+        }
+    };
+}
+// -----------------------------------------------------------------------------
+//  hooks
+// -----------------------------------------------------------------------------
+function onWillStart(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
+}
+function onWillUpdateProps(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+}
+function onMounted(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+}
+function onWillPatch(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+}
+function onPatched(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+}
+function onWillUnmount(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+}
+function onWillDestroy(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
+}
+function onWillRender(fn) {
+    const node = getCurrent();
+    const renderFn = node.renderFn;
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    fn = decorate(fn.bind(node.component), "onWillRender");
+    node.renderFn = () => {
+        fn();
+        return renderFn();
+    };
+}
+function onRendered(fn) {
+    const node = getCurrent();
+    const renderFn = node.renderFn;
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    fn = decorate(fn.bind(node.component), "onRendered");
+    node.renderFn = () => {
+        const result = renderFn();
+        fn();
+        return result;
+    };
+}
+function onError(callback) {
+    const node = getCurrent();
+    let handlers = nodeErrorHandlers.get(node);
+    if (!handlers) {
+        handlers = [];
+        nodeErrorHandlers.set(node, handlers);
+    }
+    handlers.push(callback.bind(node.component));
+}
+
+class Component {
+    constructor(props, env, node) {
+        this.props = props;
+        this.env = env;
+        this.__owl__ = node;
+    }
+    setup() { }
+    render(deep = false) {
+        this.__owl__.render(deep === true);
+    }
+}
+Component.template = "";
+
+const VText = text("").constructor;
+class VPortal extends VText {
+    constructor(selector, realBDom) {
+        super("");
+        this.target = null;
+        this.selector = selector;
+        this.realBDom = realBDom;
+    }
+    mount(parent, anchor) {
+        super.mount(parent, anchor);
+        this.target = document.querySelector(this.selector);
+        if (!this.target) {
+            let el = this.el;
+            while (el && el.parentElement instanceof HTMLElement) {
+                el = el.parentElement;
+            }
+            this.target = el && el.querySelector(this.selector);
+            if (!this.target) {
+                throw new Error("invalid portal target");
+            }
+        }
+        this.realBDom.mount(this.target, null);
+    }
+    beforeRemove() {
+        this.realBDom.beforeRemove();
+    }
+    remove() {
+        if (this.realBDom) {
+            super.remove();
+            this.realBDom.remove();
+            this.realBDom = null;
+        }
+    }
+    patch(other) {
+        super.patch(other);
+        if (this.realBDom) {
+            this.realBDom.patch(other.realBDom, true);
+        }
+        else {
+            this.realBDom = other.realBDom;
+            this.realBDom.mount(this.target, null);
+        }
+    }
+}
+class Portal extends Component {
+    setup() {
+        const node = this.__owl__;
+        const renderFn = node.renderFn;
+        node.renderFn = () => new VPortal(this.props.target, renderFn());
+        onWillUnmount(() => {
+            if (node.bdom) {
+                node.bdom.remove();
+            }
+        });
+    }
+}
+Portal.template = xml `<t t-slot="default"/>`;
+Portal.props = {
+    target: {
+        type: String,
+    },
+    slots: true,
+};
+
+/**
+ * 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);
+    }
+    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;
 }
-/**
- * Parses an XML string into an XML document, throwing errors on parser errors
- * instead of returning an XML document containing the parseerror.
- *
- * @param xml the string to parse
- * @returns an XML document corresponding to the content of the string
- */
-function parseXML$1(xml) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(xml, "text/xml");
-    if (doc.getElementsByTagName("parsererror").length) {
-        let msg = "Invalid XML in template.";
-        const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-        if (parsererrorText) {
-            msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-            const re = /\d+/g;
-            const firstMatch = re.exec(parsererrorText);
-            if (firstMatch) {
-                const lineNumber = Number(firstMatch[0]);
-                const line = xml.split("\n")[lineNumber - 1];
-                const secondMatch = re.exec(parsererrorText);
-                if (line && secondMatch) {
-                    const columnIndex = Number(secondMatch[0]) - 1;
-                    if (line[columnIndex]) {
-                        msg +=
-                            `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-                                `${line}\n${"-".repeat(columnIndex - 1)}^`;
-                    }
-                }
+function multiRefSetter(refs, name) {
+    let count = 0;
+    return (el) => {
+        if (el) {
+            count++;
+            if (count > 1) {
+                throw new Error("Cannot have 2 elements with same ref name at the same time");
             }
         }
-        throw new Error(msg);
-    }
-    return doc;
-}
-
-function compile(template, options = {}) {
-    // parsing
-    const ast = parse(template);
-    // some work
-    const hasSafeContext = template instanceof Node
-        ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
-        : !template.includes("t-set") && !template.includes("t-call");
-    // code generation
-    const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
-    const code = codeGenerator.generateCode();
-    // template function
-    return new Function("bdom, helpers", code);
-}
+        if (count === 0 || el) {
+            refs[name] = el;
+        }
+    };
+}
+const helpers = {
+    withDefault,
+    zero: Symbol("zero"),
+    isBoundary,
+    callSlot,
+    capture,
+    withKey,
+    prepareList,
+    setContextValue,
+    multiRefSetter,
+    shallowEqual,
+    toNumber,
+    validateProps,
+    LazyValue,
+    safeOutput,
+    bind,
+    createCatcher,
+};
 
 const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
-const globalTemplates = {};
 function parseXML(xml) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(xml, "text/xml");
@@ -4703,23 +5279,32 @@ function parseXML(xml) {
     }
     return doc;
 }
+/**
+ * Returns the helpers object that will be injected in each template closure
+ * function
+ */
+function makeHelpers(getTemplate) {
+    return Object.assign({}, helpers, {
+        Portal,
+        markRaw,
+        getTemplate,
+        call: (owner, subTemplate, ctx, parent, key) => {
+            const template = getTemplate(subTemplate);
+            return toggler(subTemplate, template.call(owner, ctx, parent, key));
+        },
+    });
+}
 class TemplateSet {
     constructor(config = {}) {
         this.rawTemplates = Object.create(globalTemplates);
         this.templates = {};
-        this.utils = Object.assign({}, UTILS, {
-            call: (owner, subTemplate, ctx, parent, key) => {
-                const template = this.getTemplate(subTemplate);
-                return toggler(subTemplate, template.call(owner, ctx, parent, key));
-            },
-            getTemplate: (name) => this.getTemplate(name),
-        });
         this.dev = config.dev || false;
         this.translateFn = config.translateFn;
         this.translatableAttributes = config.translatableAttributes;
         if (config.templates) {
             this.addTemplates(config.templates);
         }
+        this.helpers = makeHelpers(this.getTemplate.bind(this));
     }
     addTemplate(name, template, options = {}) {
         if (name in this.rawTemplates && !options.allowDuplicate) {
@@ -4757,7 +5342,7 @@ class TemplateSet {
             this.templates[name] = function (context, parent) {
                 return templates[name].call(this, context, parent);
             };
-            const template = templateFn(bdom, this.utils);
+            const template = templateFn(bdom, this.helpers);
             this.templates[name] = template;
         }
         return this.templates[name];
@@ -4770,160 +5355,9 @@ class TemplateSet {
             translatableAttributes: this.translatableAttributes,
         });
     }
-}
-// -----------------------------------------------------------------------------
-//  xml tag helper
-// -----------------------------------------------------------------------------
-function xml(...args) {
-    const name = `__template__${xml.nextId++}`;
-    const value = String.raw(...args);
-    globalTemplates[name] = value;
-    return name;
-}
-xml.nextId = 1;
-
-class Component {
-    constructor(props, env, node) {
-        this.props = props;
-        this.env = env;
-        this.__owl__ = node;
-    }
-    setup() { }
-    render(deep = false) {
-        this.__owl__.render(deep);
-    }
-}
-Component.template = "";
-
-const VText = text("").constructor;
-class VPortal extends VText {
-    constructor(selector, realBDom) {
-        super("");
-        this.target = null;
-        this.selector = selector;
-        this.realBDom = realBDom;
-    }
-    mount(parent, anchor) {
-        super.mount(parent, anchor);
-        this.target = document.querySelector(this.selector);
-        if (!this.target) {
-            let el = this.el;
-            while (el && el.parentElement instanceof HTMLElement) {
-                el = el.parentElement;
-            }
-            this.target = el && el.querySelector(this.selector);
-            if (!this.target) {
-                throw new Error("invalid portal target");
-            }
-        }
-        this.realBDom.mount(this.target, null);
-    }
-    beforeRemove() {
-        this.realBDom.beforeRemove();
-    }
-    remove() {
-        if (this.realBDom) {
-            super.remove();
-            this.realBDom.remove();
-            this.realBDom = null;
-        }
-    }
-    patch(other) {
-        super.patch(other);
-        if (this.realBDom) {
-            this.realBDom.patch(other.realBDom, true);
-        }
-        else {
-            this.realBDom = other.realBDom;
-            this.realBDom.mount(this.target, null);
-        }
-    }
-}
-class Portal extends Component {
-    setup() {
-        const node = this.__owl__;
-        const renderFn = node.renderFn;
-        node.renderFn = () => new VPortal(this.props.target, renderFn());
-        onWillUnmount(() => {
-            if (node.bdom) {
-                node.bdom.remove();
-            }
-        });
-    }
-}
-Portal.template = xml `<t t-slot="default"/>`;
-Portal.props = {
-    target: {
-        type: String,
-    },
-    slots: true,
-};
-
-// -----------------------------------------------------------------------------
-//  Scheduler
-// -----------------------------------------------------------------------------
-class Scheduler {
-    constructor() {
-        this.tasks = new Set();
-        this.isRunning = false;
-        this.requestAnimationFrame = Scheduler.requestAnimationFrame;
-    }
-    start() {
-        this.isRunning = true;
-        this.scheduleTasks();
-    }
-    stop() {
-        this.isRunning = false;
-    }
-    addFiber(fiber) {
-        this.tasks.add(fiber.root);
-        if (!this.isRunning) {
-            this.start();
-        }
-    }
-    /**
-     * Process all current tasks. This only applies to the fibers that are ready.
-     * Other tasks are left unchanged.
-     */
-    flush() {
-        this.tasks.forEach((fiber) => {
-            if (fiber.root !== fiber) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            const hasError = fibersInError.has(fiber);
-            if (hasError && fiber.counter !== 0) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            if (fiber.node.status === 2 /* DESTROYED */) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            if (fiber.counter === 0) {
-                if (!hasError) {
-                    fiber.complete();
-                }
-                this.tasks.delete(fiber);
-            }
-        });
-        if (this.tasks.size === 0) {
-            this.stop();
-        }
-    }
-    scheduleTasks() {
-        this.requestAnimationFrame(() => {
-            this.flush();
-            if (this.isRunning) {
-                this.scheduleTasks();
-            }
-        });
-    }
-}
-// capture the value of requestAnimationFrame as soon as possible, to avoid
-// interactions with other code, such as test frameworks that override them
-Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
+}
 
+let hasBeenLogged = false;
 const DEV_MSG = () => {
     const hash = window.owl ? window.owl.__info__.hash : "master";
     return `Owl is running in 'dev' mode.
@@ -4940,11 +5374,13 @@ class App extends TemplateSet {
         if (config.test) {
             this.dev = true;
         }
-        if (this.dev && !config.test) {
+        if (this.dev && !config.test && !hasBeenLogged) {
             console.info(DEV_MSG());
+            hasBeenLogged = true;
         }
-        const descrs = Object.getOwnPropertyDescriptors(config.env || {});
-        this.env = Object.freeze(Object.defineProperties({}, descrs));
+        const env = config.env || {};
+        const descrs = Object.getOwnPropertyDescriptors(env);
+        this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
         this.props = config.props || {};
     }
     mount(target, options) {
@@ -4955,7 +5391,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) => {
@@ -4987,6 +5423,7 @@ class App extends TemplateSet {
     }
     destroy() {
         if (this.root) {
+            this.scheduler.flush();
             this.root.destroy();
         }
     }
@@ -5007,45 +5444,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;
-}
-
 // -----------------------------------------------------------------------------
 // useRef
 // -----------------------------------------------------------------------------
@@ -5091,10 +5489,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
@@ -5112,18 +5506,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
@@ -5150,8 +5546,6 @@ function useExternalListener(target, eventName, handler, eventParams) {
 
 config.shouldNormalizeDom = false;
 config.mainEventHandler = mainEventHandler;
-UTILS.Portal = Portal;
-UTILS.markRaw = markRaw;
 const blockDom = {
     config,
     // bdom entry points
@@ -5169,10 +5563,10 @@ const blockDom = {
 };
 const __info__ = {};
 
-export { App, Component, EventBus, Memo, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, whenReady, xml };
+export { App, Component, EventBus, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, whenReady, xml };
 
 
-__info__.version = '2.0.0-alpha.3';
-__info__.date = '2022-02-25T09:57:37.893Z';
-__info__.hash = '076b0d7';
+__info__.version = '2.0.0-beta-6';
+__info__.date = '2022-04-11T09:01:42.605Z';
+__info__.hash = '41344ef';
 __info__.url = 'https://github.com/odoo/owl';