@odoo/owl 2.0.0-beta.3 → 2.0.0

package/dist/owl.es.js

@@ -77,6 +77,69 @@ function toggler(key, child) {
     return new VToggler(key, child);
 }
 
+// Custom error class that wraps error that happen in the owl lifecycle
+class OwlError extends Error {
+}
+// Maps fibers to thrown errors
+const fibersInError = new WeakMap();
+const nodeErrorHandlers = new WeakMap();
+function _handleError(node, error) {
+    if (!node) {
+        return false;
+    }
+    const fiber = node.fiber;
+    if (fiber) {
+        fibersInError.set(fiber, error);
+    }
+    const errorHandlers = nodeErrorHandlers.get(node);
+    if (errorHandlers) {
+        let handled = false;
+        // execute in the opposite order
+        for (let i = errorHandlers.length - 1; i >= 0; i--) {
+            try {
+                errorHandlers[i](error);
+                handled = true;
+                break;
+            }
+            catch (e) {
+                error = e;
+            }
+        }
+        if (handled) {
+            return true;
+        }
+    }
+    return _handleError(node.parent, error);
+}
+function handleError(params) {
+    let { error } = params;
+    // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
+    if (!(error instanceof OwlError)) {
+        error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: 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);
+        }
+        throw error;
+    }
+}
+
 const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
 const tokenList = DOMTokenList.prototype;
 const tokenListAdd = tokenList.add;
@@ -167,6 +230,10 @@ function toClassObj(expr) {
             for (let key in expr) {
                 const value = expr[key];
                 if (value) {
+                    key = trim.call(key);
+                    if (!key) {
+                        continue;
+                    }
                     const words = split.call(key, wordRegexp);
                     for (let word of words) {
                         result[word] = value;
@@ -209,7 +276,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 ? value.valueOf() : "";
     };
 }
 function isProp(tag, key) {
@@ -252,7 +320,7 @@ function createElementHandler(evName, capture = false) {
     }
     function listener(ev) {
         const currentTarget = ev.currentTarget;
-        if (!currentTarget || !document.contains(currentTarget))
+        if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget))
             return;
         const data = currentTarget[eventKey];
         if (!data)
@@ -515,7 +583,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:
@@ -604,6 +672,15 @@ function buildTree(node, parent = null, domParentTree = null) {
                     : document.createElement(tagName);
             }
             if (el instanceof Element) {
+                if (!domParentTree) {
+                    // some html elements may have side effects when setting their attributes.
+                    // For example, setting the src attribute of an <img/> will trigger a
+                    // request to get the corresponding image. This is something that we
+                    // don't want at compile time. We avoid that by putting the content of
+                    // the block in a <template/> element
+                    const fragment = document.createElement("template").content;
+                    fragment.appendChild(el);
+                }
                 for (let i = 0; i < attrs.length; i++) {
                     const attrName = attrs[i].name;
                     const attrValue = attrs[i].value;
@@ -693,7 +770,7 @@ function buildTree(node, parent = null, domParentTree = null) {
             };
         }
     }
-    throw new Error("boom");
+    throw new OwlError("boom");
 }
 function addRef(tree) {
     tree.isRef = true;
@@ -819,7 +896,7 @@ function updateCtx(ctx, tree) {
                     idx: info.idx,
                     refIdx: info.refIdx,
                     setData: makeRefSetter(index, ctx.refList),
-                    updateData: NO_OP$1,
+                    updateData: NO_OP,
                 });
         }
     }
@@ -1286,29 +1363,35 @@ function html(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;
+    const n = Object.keys(eventsSpec).length;
     class VCatcher {
         constructor(child, handlers) {
+            this.handlerFns = [];
             this.afterNode = null;
             this.child = child;
-            this.handlers = handlers;
+            this.handlerData = handlers;
         }
         mount(parent, afterNode) {
             this.parentEl = parent;
-            this.afterNode = afterNode;
             this.child.mount(parent, afterNode);
+            this.afterNode = document.createTextNode("");
+            parent.insertBefore(this.afterNode, afterNode);
+            this.wrapHandlerData();
+            for (let name in eventsSpec) {
+                const index = eventsSpec[name];
+                const handler = createEventHandler(name);
+                this.handlerFns[index] = handler;
+                handler.setup.call(parent, this.handlerData[index]);
+            }
+        }
+        wrapHandlerData() {
             for (let i = 0; i < n; i++) {
-                let origFn = this.handlers[i][0];
+                let handler = this.handlerData[i];
+                // handler = [...mods, fn, comp], so we need to replace second to last elem
+                let idx = handler.length - 2;
+                let origFn = handler[idx];
                 const self = this;
-                this.handlers[i][0] = function (ev) {
+                handler[idx] = function (ev) {
                     const target = ev.target;
                     let currentNode = self.child.firstNode();
                     const afterNode = self.afterNode;
@@ -1319,18 +1402,21 @@ function createCatcher(eventsSpec) {
                         currentNode = currentNode.nextSibling;
                     }
                 };
-                setupFns[i].call(parent, this.handlers[i]);
             }
         }
         moveBefore(other, afterNode) {
-            this.afterNode = null;
             this.child.moveBefore(other ? other.child : null, afterNode);
+            this.parentEl.insertBefore(this.afterNode, afterNode);
         }
         patch(other, withBeforeRemove) {
             if (this === other) {
                 return;
             }
-            this.handlers = other.handlers;
+            this.handlerData = other.handlerData;
+            this.wrapHandlerData();
+            for (let i = 0; i < n; i++) {
+                this.handlerFns[i].update.call(this.parentEl, this.handlerData[i]);
+            }
             this.child.patch(other.child, withBeforeRemove);
         }
         beforeRemove() {
@@ -1338,9 +1424,10 @@ function createCatcher(eventsSpec) {
         }
         remove() {
             for (let i = 0; i < n; i++) {
-                removeFns[i].call(this.parentEl);
+                this.handlerFns[i].remove.call(this.parentEl);
             }
             this.child.remove();
+            this.afterNode.remove();
         }
         firstNode() {
             return this.child.firstNode();
@@ -1367,142 +1454,339 @@ 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;
-            }
-        }
+function makeChildFiber(node, parent) {
+    let current = node.fiber;
+    if (current) {
+        cancelFibers(current.children);
+        current.root = null;
     }
-    // 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 new Fiber(node, parent);
+}
+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;
     }
-    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"]);
-/**
- * extract "RawType" from strings like "[object RawType]" => this lets us ignore
- * many native objects such as Promise (whose toString is [object Promise])
- * or Date ([object Date]), while also supporting collections without using
- * instanceof in a loop
- *
- * @param obj the object to check
- * @returns the raw type of the object
- */
-function rawType(obj) {
-    return objectToString.call(obj).slice(8, -1);
-}
-/**
- * Checks whether a given value can be made into a reactive object.
- *
- * @param value the value to check
- * @returns whether the value can be made reactive
- */
-function canBeMadeReactive(value) {
-    if (typeof value !== "object") {
-        return false;
+    const fiber = new RootFiber(node, null);
+    if (node.willPatch.length) {
+        fiber.willPatch.push(fiber);
     }
-    return SUPPORTED_RAW_TYPES.has(rawType(value));
-}
-/**
- * Creates a reactive from the given object/callback if possible and returns it,
- * returns the original object otherwise.
- *
- * @param value the value make reactive
- * @returns a reactive for the given object when possible, the original otherwise
- */
-function possiblyReactive(val, cb) {
-    return canBeMadeReactive(val) ? reactive(val, cb) : val;
+    if (node.patched.length) {
+        fiber.patched.push(fiber);
+    }
+    return fiber;
 }
-/**
- * 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;
+function throwOnRender() {
+    throw new OwlError("Attempted to render cancelled fiber");
 }
 /**
- * Given a reactive objet, return the raw (non reactive) underlying object
- *
- * @param value a reactive value
- * @returns the underlying value
+ * @returns number of not-yet rendered fibers cancelled
  */
-function toRaw(value) {
-    return value[TARGET] || value;
+function cancelFibers(fibers) {
+    let result = 0;
+    for (let fiber of fibers) {
+        let node = fiber.node;
+        fiber.render = throwOnRender;
+        if (node.status === 0 /* NEW */) {
+            node.destroy();
+            delete node.parent.children[node.parentKey];
+        }
+        node.fiber = null;
+        if (fiber.bdom) {
+            // if fiber has been rendered, this means that the component props have
+            // been updated. however, this fiber will not be patched to the dom, so
+            // it could happen that the next render compare the current props with
+            // the same props, and skip the render completely. With the next line,
+            // we kindly request the component code to force a render, so it works as
+            // expected.
+            node.forceNextRender = true;
+        }
+        else {
+            result++;
+        }
+        result += cancelFibers(fiber.children);
+    }
+    return result;
 }
-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());
+class Fiber {
+    constructor(node, parent) {
+        this.bdom = null;
+        this.children = [];
+        this.appliedToDom = false;
+        this.deep = false;
+        this.childrenMap = {};
+        this.node = node;
+        this.parent = parent;
+        if (parent) {
+            this.deep = parent.deep;
+            const root = parent.root;
+            root.setCounter(root.counter + 1);
+            this.root = root;
+            parent.children.push(this);
+        }
+        else {
+            this.root = this;
+        }
     }
-    const keyToCallbacks = targetToKeysToCallbacks.get(target);
-    if (!keyToCallbacks.get(key)) {
-        keyToCallbacks.set(key, new Set());
+    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();
     }
-    keyToCallbacks.get(key).add(callback);
-    if (!callbacksToTargets.has(callback)) {
-        callbacksToTargets.set(callback, new Set());
+    _render() {
+        const node = this.node;
+        const root = this.root;
+        if (root) {
+            try {
+                this.bdom = true;
+                this.bdom = node.renderFn();
+            }
+            catch (e) {
+                node.app.handleError({ node, error: e });
+            }
+            root.setCounter(root.counter - 1);
+        }
     }
-    callbacksToTargets.get(callback).add(target);
 }
-/**
- * Notify Reactives that are observing a given target that a key has changed on
- * the target.
- *
+class RootFiber extends Fiber {
+    constructor() {
+        super(...arguments);
+        this.counter = 1;
+        // only add stuff in this if they have registered some hooks
+        this.willPatch = [];
+        this.patched = [];
+        this.mounted = [];
+        // A fiber is typically locked when it is completing and the patch has not, or is being applied.
+        // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
+        this.locked = false;
+    }
+    complete() {
+        const node = this.node;
+        this.locked = true;
+        let current = undefined;
+        try {
+            // Step 1: calling all willPatch lifecycle hooks
+            for (current of this.willPatch) {
+                // because of the asynchronous nature of the rendering, some parts of the
+                // UI may have been rendered, then deleted in a followup rendering, and we
+                // do not want to call onWillPatch in that case.
+                let node = current.node;
+                if (node.fiber === current) {
+                    const component = node.component;
+                    for (let cb of node.willPatch) {
+                        cb.call(component);
+                    }
+                }
+            }
+            current = undefined;
+            // Step 2: patching the dom
+            node._patch();
+            this.locked = false;
+            // Step 4: calling all mounted lifecycle hooks
+            let mountedFibers = this.mounted;
+            while ((current = mountedFibers.pop())) {
+                current = current;
+                if (current.appliedToDom) {
+                    for (let cb of current.node.mounted) {
+                        cb();
+                    }
+                }
+            }
+            // Step 5: calling all patched hooks
+            let patchedFibers = this.patched;
+            while ((current = patchedFibers.pop())) {
+                current = current;
+                if (current.appliedToDom) {
+                    for (let cb of current.node.patched) {
+                        cb();
+                    }
+                }
+            }
+        }
+        catch (e) {
+            this.locked = false;
+            node.app.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 = {}) {
+        super(node, null);
+        this.target = target;
+        this.position = options.position || "last-child";
+    }
+    complete() {
+        let current = this;
+        try {
+            const node = this.node;
+            node.children = this.childrenMap;
+            node.app.constructor.validateTarget(this.target);
+            if (node.bdom) {
+                // this is a complicated situation: if we mount a fiber with an existing
+                // bdom, this means that this same fiber was already completed, mounted,
+                // but a crash occurred in some mounted hook. Then, it was handled and
+                // the new rendering is being applied.
+                node.updateDom();
+            }
+            else {
+                node.bdom = this.bdom;
+                if (this.position === "last-child" || this.target.childNodes.length === 0) {
+                    mount$1(node.bdom, this.target);
+                }
+                else {
+                    const firstChild = this.target.childNodes[0];
+                    mount$1(node.bdom, this.target, firstChild);
+                }
+            }
+            // unregistering the fiber before mounted since it can do another render
+            // and that the current rendering is obviously completed
+            node.fiber = null;
+            node.status = 1 /* MOUNTED */;
+            this.appliedToDom = true;
+            let mountedFibers = this.mounted;
+            while ((current = mountedFibers.pop())) {
+                if (current.appliedToDom) {
+                    for (let cb of current.node.mounted) {
+                        cb();
+                    }
+                }
+            }
+        }
+        catch (e) {
+            this.node.app.handleError({ fiber: current, error: e });
+        }
+    }
+}
+
+// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
+const TARGET = Symbol("Target");
+// Escape hatch to prevent reactivity system to turn something into a reactive
+const SKIP = Symbol("Skip");
+// Special key to subscribe to, to be notified of key creation/deletion
+const KEYCHANGES = Symbol("Key changes");
+const objectToString = Object.prototype.toString;
+const objectHasOwnProperty = Object.prototype.hasOwnProperty;
+const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
+const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
+/**
+ * extract "RawType" from strings like "[object RawType]" => this lets us ignore
+ * many native objects such as Promise (whose toString is [object Promise])
+ * or Date ([object Date]), while also supporting collections without using
+ * instanceof in a loop
+ *
+ * @param obj the object to check
+ * @returns the raw type of the object
+ */
+function rawType(obj) {
+    return objectToString.call(obj).slice(8, -1);
+}
+/**
+ * Checks whether a given value can be made into a reactive object.
+ *
+ * @param value the value to check
+ * @returns whether the value can be made reactive
+ */
+function canBeMadeReactive(value) {
+    if (typeof value !== "object") {
+        return false;
+    }
+    return SUPPORTED_RAW_TYPES.has(rawType(value));
+}
+/**
+ * Creates a reactive from the given object/callback if possible and returns it,
+ * returns the original object otherwise.
+ *
+ * @param value the value make reactive
+ * @returns a reactive for the given object when possible, the original otherwise
+ */
+function possiblyReactive(val, cb) {
+    return canBeMadeReactive(val) ? reactive(val, cb) : val;
+}
+/**
+ * Mark an object or array so that it is ignored by the reactivity system
+ *
+ * @param value the value to mark
+ * @returns the object itself
+ */
+function markRaw(value) {
+    value[SKIP] = true;
+    return value;
+}
+/**
+ * Given a reactive objet, return the raw (non reactive) underlying object
+ *
+ * @param value a reactive value
+ * @returns the underlying value
+ */
+function toRaw(value) {
+    return value[TARGET] || value;
+}
+const targetToKeysToCallbacks = new WeakMap();
+/**
+ * Observes a given key on a target with an callback. The callback will be
+ * called when the given key changes on the target.
+ *
+ * @param target the target whose key should be observed
+ * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
+ *  or deletion)
+ * @param callback the function to call when the key changes
+ */
+function observeTargetKey(target, key, callback) {
+    if (!targetToKeysToCallbacks.get(target)) {
+        targetToKeysToCallbacks.set(target, new Map());
+    }
+    const keyToCallbacks = targetToKeysToCallbacks.get(target);
+    if (!keyToCallbacks.get(key)) {
+        keyToCallbacks.set(key, new Set());
+    }
+    keyToCallbacks.get(key).add(callback);
+    if (!callbacksToTargets.has(callback)) {
+        callbacksToTargets.set(callback, new Set());
+    }
+    callbacksToTargets.get(callback).add(target);
+}
+/**
+ * Notify Reactives that are observing a given target that a key has changed on
+ * the target.
+ *
  * @param target target whose Reactives should be notified that the target was
  *  changed.
  * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
@@ -1585,7 +1869,7 @@ const reactiveCache = new WeakMap();
  */
 function reactive(target, callback = () => { }) {
     if (!canBeMadeReactive(target)) {
-        throw new Error(`Cannot make the given value reactive`);
+        throw new OwlError(`Cannot make the given value reactive`);
     }
     if (SKIP in target) {
         return target;
@@ -1595,7 +1879,7 @@ function reactive(target, callback = () => { }) {
         return reactive(originalTarget, callback);
     }
     if (!reactiveCache.has(target)) {
-        reactiveCache.set(target, new Map());
+        reactiveCache.set(target, new WeakMap());
     }
     const reactivesForTarget = reactiveCache.get(target);
     if (!reactivesForTarget.has(callback)) {
@@ -1620,6 +1904,11 @@ function basicProxyHandler(callback) {
             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);
         },
@@ -1692,6 +1981,23 @@ function makeIteratorObserver(methodName, target, callback) {
         }
     };
 }
+/**
+ * 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
@@ -1750,6 +2056,7 @@ const rawTypeToFuncHandlers = {
         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);
@@ -1765,6 +2072,7 @@ const rawTypeToFuncHandlers = {
         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);
@@ -1818,21 +2126,29 @@ 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();
         }
     };
 }
 function validateTarget(target) {
-    if (!(target instanceof HTMLElement)) {
-        throw new Error("Cannot mount component: the target is not a valid DOM element");
-    }
-    if (!document.body.contains(target)) {
-        throw new Error("Cannot mount a component on a detached dom node");
+    // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+    const document = target && target.ownerDocument;
+    if (document) {
+        const HTMLElement = document.defaultView.HTMLElement;
+        if (target instanceof HTMLElement) {
+            if (!document.body.contains(target)) {
+                throw new OwlError("Cannot mount a component on a detached dom node");
+            }
+            return;
+        }
     }
+    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }
 class EventBus extends EventTarget {
     trigger(name, payload) {
@@ -1852,7 +2168,7 @@ function whenReady(fn) {
 async function loadFile(url) {
     const result = await fetch(url);
     if (!result.ok) {
-        throw new Error("Error while fetching xml templates");
+        throw new OwlError("Error while fetching xml templates");
     }
     return await result.text();
 }
@@ -1869,861 +2185,1054 @@ class Markup extends String {
  */
 function markup(value) {
     return new Markup(value);
-}
-// -----------------------------------------------------------------------------
-//  xml tag helper
-// -----------------------------------------------------------------------------
-const globalTemplates = {};
-function xml(...args) {
-    const name = `__template__${xml.nextId++}`;
-    const value = String.raw(...args);
-    globalTemplates[name] = value;
-    return name;
-}
-xml.nextId = 1;
+}
 
-// Maps fibers to thrown errors
-const fibersInError = new WeakMap();
-const nodeErrorHandlers = new WeakMap();
-function _handleError(node, error, isFirstRound = false) {
-    if (!node) {
-        return false;
+let currentNode = null;
+function getCurrent() {
+    if (!currentNode) {
+        throw new OwlError("No active component (a hook function should only be called in 'setup')");
     }
-    const fiber = node.fiber;
-    if (fiber) {
-        fibersInError.set(fiber, error);
+    return currentNode;
+}
+function useComponent() {
+    return currentNode.component;
+}
+/**
+ * Apply default props (only top level).
+ */
+function applyDefaultProps(props, defaultProps) {
+    for (let propName in defaultProps) {
+        if (props[propName] === undefined) {
+            props[propName] = defaultProps[propName];
+        }
     }
-    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;
-            }
+}
+// -----------------------------------------------------------------------------
+// Integration with reactivity system (useState)
+// -----------------------------------------------------------------------------
+const batchedRenderFunctions = new WeakMap();
+/**
+ * Creates a reactive object that will be observed by the current component.
+ * Reading data from the returned object (eg during rendering) will cause the
+ * component to subscribe to that data and be rerendered when it changes.
+ *
+ * @param state the state to observe
+ * @returns a reactive object that will cause the component to re-render on
+ *  relevant changes
+ * @see reactive
+ */
+function useState(state) {
+    const node = getCurrent();
+    let render = batchedRenderFunctions.get(node);
+    if (!render) {
+        render = batched(node.render.bind(node, false));
+        batchedRenderFunctions.set(node, render);
+        // manual implementation of onWillDestroy to break cyclic dependency
+        node.willDestroy.push(clearReactivesForCallback.bind(null, render));
+    }
+    return reactive(state, render);
+}
+class ComponentNode {
+    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 = [];
+        this.willUpdateProps = [];
+        this.willUnmount = [];
+        this.mounted = [];
+        this.willPatch = [];
+        this.patched = [];
+        this.willDestroy = [];
+        currentNode = this;
+        this.app = app;
+        this.parent = parent;
+        this.props = props;
+        this.parentKey = parentKey;
+        const defaultProps = C.defaultProps;
+        props = Object.assign({}, props);
+        if (defaultProps) {
+            applyDefaultProps(props, defaultProps);
         }
-        if (stopped) {
-            if (isFirstRound && fiber && fiber.node.fiber) {
-                fiber.root.counter--;
+        const env = (parent && parent.childEnv) || app.env;
+        this.childEnv = env;
+        for (const key in props) {
+            const prop = props[key];
+            if (prop && typeof prop === "object" && prop[TARGET]) {
+                props[key] = useState(prop);
             }
-            return true;
         }
+        this.component = new C(props, env, this);
+        this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
+        this.component.setup();
+        currentNode = null;
     }
-    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`);
+    mountComponent(target, options) {
+        const fiber = new MountFiber(this, target, options);
+        this.app.scheduler.addFiber(fiber);
+        this.initiateRender(fiber);
+    }
+    async initiateRender(fiber) {
+        this.fiber = fiber;
+        if (this.mounted.length) {
+            fiber.root.mounted.push(fiber);
+        }
+        const component = this.component;
         try {
-            node.app.destroy();
+            await Promise.all(this.willStart.map((f) => f.call(component)));
         }
         catch (e) {
-            console.error(e);
+            this.app.handleError({ node: this, error: e });
+            return;
         }
-    }
-}
-
-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;
+        if (this.status === 0 /* NEW */ && this.fiber === fiber) {
+            fiber.render();
         }
-        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) {
-            // if fiber has been rendered, this means that the component props have
-            // been updated. however, this fiber will not be patched to the dom, so
-            // it could happen that the next render compare the current props with
-            // the same props, and skip the render completely. With the next line,
-            // we kindly request the component code to force a render, so it works as
-            // expected.
-            fiber.node.forceNextRender = true;
+    async render(deep) {
+        let current = this.fiber;
+        if (current && (current.root.locked || current.bdom === true)) {
+            await Promise.resolve();
+            // situation may have changed after the microtask tick
+            current = this.fiber;
         }
-        else {
-            result++;
+        if (current) {
+            if (!current.bdom && !fibersInError.has(current)) {
+                if (deep) {
+                    // we want the render from this point on to be with deep=true
+                    current.deep = deep;
+                }
+                return;
+            }
+            // if current rendering was with deep=true, we want this one to be the same
+            deep = deep || current.deep;
         }
-        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 if (!this.bdom) {
+            return;
         }
-        else {
-            this.root = this;
+        const fiber = makeRootFiber(this);
+        fiber.deep = deep;
+        this.fiber = fiber;
+        this.app.scheduler.addFiber(fiber);
+        await Promise.resolve();
+        if (this.status === 2 /* DESTROYED */) {
+            return;
+        }
+        // We only want to actually render the component if the following two
+        // conditions are true:
+        // * this.fiber: it could be null, in which case the render has been cancelled
+        // * (current || !fiber.parent): if current is not null, this means that the
+        //   render function was called when a render was already occurring. In this
+        //   case, the pending rendering was cancelled, and the fiber needs to be
+        //   rendered to complete the work.  If current is null, we check that the
+        //   fiber has no parent.  If that is the case, the fiber was downgraded from
+        //   a root fiber to a child fiber in the previous microtick, because it was
+        //   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)) {
+            fiber.render();
         }
     }
-}
-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;
+    destroy() {
+        let shouldRemove = this.status === 1 /* MOUNTED */;
+        this._destroy();
+        if (shouldRemove) {
+            this.bdom.remove();
+        }
     }
-    complete() {
-        const node = this.node;
-        this.locked = true;
-        let current = undefined;
-        try {
-            // Step 1: calling all willPatch lifecycle hooks
-            for (current of this.willPatch) {
-                // because of the asynchronous nature of the rendering, some parts of the
-                // UI may have been rendered, then deleted in a followup rendering, and we
-                // do not want to call onWillPatch in that case.
-                let node = current.node;
-                if (node.fiber === current) {
-                    const component = node.component;
-                    for (let cb of node.willPatch) {
-                        cb.call(component);
-                    }
-                }
+    _destroy() {
+        const component = this.component;
+        if (this.status === 1 /* MOUNTED */) {
+            for (let cb of this.willUnmount) {
+                cb.call(component);
             }
-            current = undefined;
-            // Step 2: patching the dom
-            node._patch();
-            this.locked = false;
-            // Step 4: calling all mounted lifecycle hooks
-            let mountedFibers = this.mounted;
-            while ((current = mountedFibers.pop())) {
-                current = current;
-                if (current.appliedToDom) {
-                    for (let cb of current.node.mounted) {
-                        cb();
-                    }
+        }
+        for (let child of Object.values(this.children)) {
+            child._destroy();
+        }
+        if (this.willDestroy.length) {
+            try {
+                for (let cb of this.willDestroy) {
+                    cb.call(component);
                 }
             }
-            // Step 5: calling all patched hooks
-            let patchedFibers = this.patched;
-            while ((current = patchedFibers.pop())) {
-                current = current;
-                if (current.appliedToDom) {
-                    for (let cb of current.node.patched) {
-                        cb();
-                    }
-                }
+            catch (e) {
+                this.app.handleError({ error: e, node: this });
             }
         }
-        catch (e) {
-            this.locked = false;
-            handleError({ fiber: current || this, error: e });
-        }
-    }
-}
-class MountFiber extends RootFiber {
-    constructor(node, target, options = {}) {
-        super(node, null);
-        this.target = target;
-        this.position = options.position || "last-child";
+        this.status = 2 /* DESTROYED */;
     }
-    complete() {
-        let current = this;
-        try {
-            const node = this.node;
-            node.app.constructor.validateTarget(this.target);
-            if (node.bdom) {
-                // this is a complicated situation: if we mount a fiber with an existing
-                // bdom, this means that this same fiber was already completed, mounted,
-                // but a crash occurred in some mounted hook. Then, it was handled and
-                // the new rendering is being applied.
-                node.updateDom();
-            }
-            else {
-                node.bdom = this.bdom;
-                if (this.position === "last-child" || this.target.childNodes.length === 0) {
-                    mount$1(node.bdom, this.target);
-                }
-                else {
-                    const firstChild = this.target.childNodes[0];
-                    mount$1(node.bdom, this.target, firstChild);
-                }
-            }
-            // unregistering the fiber before mounted since it can do another render
-            // and that the current rendering is obviously completed
-            node.fiber = null;
-            node.status = 1 /* MOUNTED */;
-            this.appliedToDom = true;
-            let mountedFibers = this.mounted;
-            while ((current = mountedFibers.pop())) {
-                if (current.appliedToDom) {
-                    for (let cb of current.node.mounted) {
-                        cb();
-                    }
-                }
-            }
-        }
-        catch (e) {
-            handleError({ fiber: current, error: e });
+    async updateAndRender(props, parentFiber) {
+        const rawProps = props;
+        props = Object.assign({}, props);
+        // update
+        const fiber = makeChildFiber(this, parentFiber);
+        this.fiber = fiber;
+        const component = this.component;
+        const defaultProps = component.constructor.defaultProps;
+        if (defaultProps) {
+            applyDefaultProps(props, defaultProps);
         }
-    }
-}
-
-/**
- * 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];
+        currentNode = this;
+        for (const key in props) {
+            const prop = props[key];
+            if (prop && typeof prop === "object" && prop[TARGET]) {
+                props[key] = useState(prop);
             }
         }
-    }
-}
-//------------------------------------------------------------------------------
-// Prop validation helper
-//------------------------------------------------------------------------------
-function getPropDescription(staticProps) {
-    if (staticProps instanceof Array) {
-        return Object.fromEntries(staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true])));
-    }
-    return staticProps || { "*": true };
-}
-/**
- * Validate the component props (or next props) against the (static) props
- * description.  This is potentially an expensive operation: it may needs to
- * visit recursively the props and all the children to check if they are valid.
- * This is why it is only done in 'dev' mode.
- */
-function validateProps(name, props, parent) {
-    const ComponentClass = typeof name !== "string"
-        ? name
-        : parent.constructor.components[name];
-    if (!ComponentClass) {
-        // this is an error, wrong component. We silently return here instead so the
-        // error is triggered by the usual path ('component' function)
-        return;
-    }
-    applyDefaultProps(props, ComponentClass);
-    const defaultProps = ComponentClass.defaultProps || {};
-    let propsDef = getPropDescription(ComponentClass.props);
-    const allowAdditionalProps = "*" in propsDef;
-    for (let propName in propsDef) {
-        if (propName === "*") {
-            continue;
-        }
-        const propDef = propsDef[propName];
-        let isMandatory = !!propDef;
-        if (typeof propDef === "object" && "optional" in propDef) {
-            isMandatory = !propDef.optional;
+        currentNode = null;
+        const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+        await prom;
+        if (fiber !== this.fiber) {
+            return;
         }
-        if (isMandatory && propName in defaultProps) {
-            throw new Error(`A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`);
+        component.props = props;
+        this.props = rawProps;
+        fiber.render();
+        const parentRoot = parentFiber.root;
+        if (this.willPatch.length) {
+            parentRoot.willPatch.push(fiber);
         }
-        if (props[propName] === undefined) {
-            if (isMandatory) {
-                throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
-            }
-            else {
-                continue;
-            }
+        if (this.patched.length) {
+            parentRoot.patched.push(fiber);
         }
-        let isValid;
-        try {
-            isValid = isValidProp(props[propName], propDef);
+    }
+    /**
+     * Finds a child that has dom that is not yet updated, and update it. This
+     * method is meant to be used only in the context of repatching the dom after
+     * a mounted hook failed and was handled.
+     */
+    updateDom() {
+        if (!this.fiber) {
+            return;
         }
-        catch (e) {
-            e.message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${e.message})`;
-            throw e;
+        if (this.bdom === this.fiber.bdom) {
+            // If the error was handled by some child component, we need to find it to
+            // apply its change
+            for (let k in this.children) {
+                const child = this.children[k];
+                child.updateDom();
+            }
         }
-        if (!isValid) {
-            throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
+        else {
+            // if we get here, this is the component that handled the error and rerendered
+            // itself, so we can simply patch the dom
+            this.bdom.patch(this.fiber.bdom, false);
+            this.fiber.appliedToDom = true;
+            this.fiber = null;
         }
     }
-    if (!allowAdditionalProps) {
-        for (let propName in props) {
-            if (!(propName in propsDef)) {
-                throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
-            }
+    // ---------------------------------------------------------------------------
+    // Block DOM methods
+    // ---------------------------------------------------------------------------
+    firstNode() {
+        const bdom = this.bdom;
+        return bdom ? bdom.firstNode() : undefined;
+    }
+    mount(parent, anchor) {
+        const bdom = this.fiber.bdom;
+        this.bdom = bdom;
+        bdom.mount(parent, anchor);
+        this.status = 1 /* MOUNTED */;
+        this.fiber.appliedToDom = true;
+        this.children = this.fiber.childrenMap;
+        this.fiber = null;
+    }
+    moveBefore(other, afterNode) {
+        this.bdom.moveBefore(other ? other.bdom : null, afterNode);
+    }
+    patch() {
+        if (this.fiber && this.fiber.parent) {
+            // we only patch here renderings coming from above. renderings initiated
+            // by the component will be patched independently in the appropriate
+            // fiber.complete
+            this._patch();
         }
     }
-}
-/**
- * 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]);
+    _patch() {
+        let hasChildren = false;
+        for (let _k in this.children) {
+            hasChildren = true;
+            break;
         }
-        return result;
+        const fiber = this.fiber;
+        this.children = fiber.childrenMap;
+        this.bdom.patch(fiber.bdom, hasChildren);
+        fiber.appliedToDom = true;
+        this.fiber = null;
     }
-    // propsDef is an object
-    if (propDef.optional && prop === undefined) {
-        return true;
+    beforeRemove() {
+        this._destroy();
     }
-    let result = propDef.type ? isValidProp(prop, propDef.type) : true;
-    if (propDef.validate) {
-        result = result && propDef.validate(prop);
+    remove() {
+        this.bdom.remove();
     }
-    if (propDef.type === Array && propDef.element) {
-        for (let i = 0, iLen = prop.length; i < iLen; i++) {
-            result = result && isValidProp(prop[i], propDef.element);
-        }
+    // ---------------------------------------------------------------------------
+    // Some debug helpers
+    // ---------------------------------------------------------------------------
+    get name() {
+        return this.component.constructor.name;
     }
-    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}'`);
-                }
-            }
-        }
+    get subscriptions() {
+        const render = batchedRenderFunctions.get(this);
+        return render ? getSubscriptions(render) : [];
     }
-    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;
+const TIMEOUT = Symbol("timeout");
+function wrapError(fn, hookName) {
+    const error = new OwlError(`The following error occurred in ${hookName}: `);
+    const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
+    const node = getCurrent();
+    return (...args) => {
+        const onError = (cause) => {
+            error.cause = cause;
+            if (cause instanceof Error) {
+                error.message += `"${cause.message}"`;
+            }
+            else {
+                error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
+            }
+            throw error;
+        };
+        try {
+            const result = fn(...args);
+            if (result instanceof Promise) {
+                if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+                    const fiber = node.fiber;
+                    Promise.race([
+                        result.catch(() => { }),
+                        new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+                    ]).then((res) => {
+                        if (res === TIMEOUT && node.fiber === fiber) {
+                            console.warn(timeoutError);
+                        }
+                    });
+                }
+                return result.catch(onError);
+            }
+            return result;
+        }
+        catch (cause) {
+            onError(cause);
+        }
+    };
 }
 // -----------------------------------------------------------------------------
-// Integration with reactivity system (useState)
+//  hooks
 // -----------------------------------------------------------------------------
-const batchedRenderFunctions = new WeakMap();
-/**
- * Creates a reactive object that will be observed by the current component.
- * Reading data from the returned object (eg during rendering) will cause the
- * component to subscribe to that data and be rerendered when it changes.
- *
- * @param state the state to observe
- * @returns a reactive object that will cause the component to re-render on
- *  relevant changes
- * @see reactive
- */
-function useState(state) {
+function onWillStart(fn) {
     const node = getCurrent();
-    let render = batchedRenderFunctions.get(node);
-    if (!render) {
-        render = batched(node.render.bind(node));
-        batchedRenderFunctions.set(node, render);
-        // manual implementation of onWillDestroy to break cyclic dependency
-        node.willDestroy.push(clearReactivesForCallback.bind(null, render));
-        if (node.app.dev) {
-            Object.defineProperty(node, "subscriptions", {
-                get() {
-                    return getSubscriptions(render);
-                },
-            });
-        }
-    }
-    return reactive(state, render);
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
 }
-function arePropsDifferent(props1, props2) {
-    for (let k in props1) {
-        if (props1[k] !== props2[k]) {
-            return true;
-        }
-    }
-    return Object.keys(props1).length !== Object.keys(props2).length;
+function onWillUpdateProps(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
 }
-function component(name, props, key, ctx, parent) {
-    let node = ctx.children[key];
-    let isDynamic = typeof name !== "string";
-    if (node) {
-        if (node.status < 1 /* MOUNTED */) {
-            node.destroy();
-            node = undefined;
-        }
-        else if (node.status === 2 /* DESTROYED */) {
-            node = undefined;
-        }
-    }
-    if (isDynamic && node && node.component.constructor !== name) {
-        node = undefined;
-    }
-    const parentFiber = ctx.fiber;
-    if (node) {
-        let shouldRender = node.forceNextRender;
-        if (shouldRender) {
-            node.forceNextRender = false;
-        }
-        else {
-            const currentProps = node.component.props[TARGET];
-            shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
-        }
-        if (shouldRender) {
-            node.updateAndRender(props, parentFiber);
-        }
-    }
-    else {
-        // new component
-        let C;
-        if (isDynamic) {
-            C = name;
-        }
-        else {
-            C = parent.constructor.components[name];
-            if (!C) {
-                throw new Error(`Cannot find the definition of component "${name}"`);
-            }
-        }
-        node = new ComponentNode(C, props, ctx.app, ctx);
-        ctx.children[key] = node;
-        node.initiateRender(new Fiber(node, parentFiber));
-    }
-    return node;
+function onMounted(fn) {
+    const node = getCurrent();
+    const decorate = node.app.dev ? wrapError : (fn) => fn;
+    node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
 }
-class ComponentNode {
-    constructor(C, props, app, parent) {
-        this.fiber = null;
-        this.bdom = null;
-        this.status = 0 /* NEW */;
-        this.forceNextRender = false;
-        this.children = Object.create(null);
-        this.refs = {};
-        this.willStart = [];
-        this.willUpdateProps = [];
-        this.willUnmount = [];
-        this.mounted = [];
-        this.willPatch = [];
-        this.patched = [];
-        this.willDestroy = [];
-        currentNode = this;
-        this.app = app;
-        this.parent = parent || null;
-        this.level = parent ? parent.level + 1 : 0;
-        applyDefaultProps(props, C);
-        const env = (parent && parent.childEnv) || app.env;
-        this.childEnv = env;
-        props = useState(props);
-        this.component = new C(props, env, this);
-        this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
-        this.component.setup();
-        currentNode = null;
+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);
     }
-    mountComponent(target, options) {
-        const fiber = new MountFiber(this, target, options);
-        this.app.scheduler.addFiber(fiber);
-        this.initiateRender(fiber);
+    handlers.push(callback.bind(node.component));
+}
+
+class Component {
+    constructor(props, env, node) {
+        this.props = props;
+        this.env = env;
+        this.__owl__ = node;
     }
-    async initiateRender(fiber) {
-        this.fiber = fiber;
-        if (this.mounted.length) {
-            fiber.root.mounted.push(fiber);
-        }
-        const component = this.component;
-        try {
-            await Promise.all(this.willStart.map((f) => f.call(component)));
+    setup() { }
+    render(deep = false) {
+        this.__owl__.render(deep === true);
+    }
+}
+Component.template = "";
+
+const VText = text("").constructor;
+class VPortal extends VText {
+    constructor(selector, content) {
+        super("");
+        this.target = null;
+        this.selector = selector;
+        this.content = content;
+    }
+    mount(parent, anchor) {
+        super.mount(parent, anchor);
+        this.target = document.querySelector(this.selector);
+        if (this.target) {
+            this.content.mount(this.target, null);
         }
-        catch (e) {
-            handleError({ node: this, error: e });
-            return;
+        else {
+            this.content.mount(parent, anchor);
         }
-        if (this.status === 0 /* NEW */ && this.fiber === fiber) {
-            this._render(fiber);
+    }
+    beforeRemove() {
+        this.content.beforeRemove();
+    }
+    remove() {
+        if (this.content) {
+            super.remove();
+            this.content.remove();
+            this.content = null;
         }
     }
-    async render(deep = false) {
-        let current = this.fiber;
-        if (current && current.root.locked) {
-            await Promise.resolve();
-            // situation may have changed after the microtask tick
-            current = this.fiber;
+    patch(other) {
+        super.patch(other);
+        if (this.content) {
+            this.content.patch(other.content, true);
         }
-        if (current) {
-            if (!current.bdom && !fibersInError.has(current)) {
-                if (deep) {
-                    // we want the render from this point on to be with deep=true
-                    current.deep = deep;
+        else {
+            this.content = other.content;
+            this.content.mount(this.target, null);
+        }
+    }
+}
+/**
+ * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
+ */
+function portalTemplate(app, bdom, helpers) {
+    let { callSlot } = helpers;
+    return function template(ctx, node, key = "") {
+        return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
+    };
+}
+class Portal extends Component {
+    setup() {
+        const node = this.__owl__;
+        onMounted(() => {
+            const portal = node.bdom;
+            if (!portal.target) {
+                const target = document.querySelector(this.props.target);
+                if (target) {
+                    portal.content.moveBefore(target, null);
+                }
+                else {
+                    throw new OwlError("invalid portal target");
                 }
-                return;
             }
-            // if current rendering was with deep=true, we want this one to be the same
-            deep = deep || current.deep;
-        }
-        else if (!this.bdom) {
-            return;
-        }
-        const fiber = makeRootFiber(this);
-        fiber.deep = deep;
-        this.fiber = fiber;
-        this.app.scheduler.addFiber(fiber);
-        await Promise.resolve();
-        if (this.status === 2 /* DESTROYED */) {
-            return;
-        }
-        // We only want to actually render the component if the following two
-        // conditions are true:
-        // * this.fiber: it could be null, in which case the render has been cancelled
-        // * (current || !fiber.parent): if current is not null, this means that the
-        //   render function was called when a render was already occurring. In this
-        //   case, the pending rendering was cancelled, and the fiber needs to be
-        //   rendered to complete the work.  If current is null, we check that the
-        //   fiber has no parent.  If that is the case, the fiber was downgraded from
-        //   a root fiber to a child fiber in the previous microtick, because it was
-        //   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);
-        }
+        });
+        onWillUnmount(() => {
+            const portal = node.bdom;
+            portal.remove();
+        });
     }
-    _render(fiber) {
-        try {
-            fiber.bdom = this.renderFn();
-            fiber.root.counter--;
-        }
-        catch (e) {
-            handleError({ node: this, error: e });
-        }
+}
+Portal.template = "__portal__";
+Portal.props = {
+    target: {
+        type: String,
+    },
+    slots: true,
+};
+
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+const isUnionType = (t) => Array.isArray(t);
+const isBaseType = (t) => typeof t !== "object";
+const isValueType = (t) => typeof t === "object" && t && "value" in t;
+function isOptional(t) {
+    return typeof t === "object" && "optional" in t ? t.optional || false : false;
+}
+function describeType(type) {
+    return type === "*" || type === true ? "value" : type.name.toLowerCase();
+}
+function describe(info) {
+    if (isBaseType(info)) {
+        return describeType(info);
     }
-    destroy() {
-        let shouldRemove = this.status === 1 /* MOUNTED */;
-        this._destroy();
-        if (shouldRemove) {
-            this.bdom.remove();
-        }
+    else if (isUnionType(info)) {
+        return info.map(describe).join(" or ");
     }
-    _destroy() {
-        const component = this.component;
-        if (this.status === 1 /* MOUNTED */) {
-            for (let cb of this.willUnmount) {
-                cb.call(component);
+    else if (isValueType(info)) {
+        return String(info.value);
+    }
+    if ("element" in info) {
+        return `list of ${describe({ type: info.element, optional: false })}s`;
+    }
+    if ("shape" in info) {
+        return `object`;
+    }
+    return describe(info.type || "*");
+}
+function toSchema(spec) {
+    return Object.fromEntries(spec.map((e) => e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]));
+}
+/**
+ * Main validate function
+ */
+function validate(obj, spec) {
+    let errors = validateSchema(obj, spec);
+    if (errors.length) {
+        throw new OwlError("Invalid object: " + errors.join(", "));
+    }
+}
+/**
+ * Helper validate function, to get the list of errors. useful if one want to
+ * manipulate the errors without parsing an error object
+ */
+function validateSchema(obj, schema) {
+    if (Array.isArray(schema)) {
+        schema = toSchema(schema);
+    }
+    let errors = [];
+    // check if each value in obj has correct shape
+    for (let key in obj) {
+        if (key in schema) {
+            let result = validateType(key, obj[key], schema[key]);
+            if (result) {
+                errors.push(result);
             }
         }
-        for (let child of Object.values(this.children)) {
-            child._destroy();
+        else if (!("*" in schema)) {
+            errors.push(`unknown key '${key}'`);
         }
-        for (let cb of this.willDestroy) {
-            cb.call(component);
+    }
+    // check that all specified keys are defined in obj
+    for (let key in schema) {
+        const spec = schema[key];
+        if (key !== "*" && !isOptional(spec) && !(key in obj)) {
+            const isObj = typeof spec === "object" && !Array.isArray(spec);
+            const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
+            let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
+            errors.push(`'${key}' is missing${detail}`);
         }
-        this.status = 2 /* DESTROYED */;
     }
-    async updateAndRender(props, parentFiber) {
-        // update
-        const fiber = makeChildFiber(this, parentFiber);
-        this.fiber = fiber;
-        const component = this.component;
-        applyDefaultProps(props, component.constructor);
-        currentNode = this;
-        props = useState(props);
-        currentNode = null;
-        const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
-        await prom;
-        if (fiber !== this.fiber) {
-            return;
+    return errors;
+}
+function validateBaseType(key, value, type) {
+    if (typeof type === "function") {
+        if (typeof value === "object") {
+            if (!(value instanceof type)) {
+                return `'${key}' is not a ${describeType(type)}`;
+            }
         }
-        component.props = props;
-        this._render(fiber);
-        const parentRoot = parentFiber.root;
-        if (this.willPatch.length) {
-            parentRoot.willPatch.push(fiber);
+        else if (typeof value !== type.name.toLowerCase()) {
+            return `'${key}' is not a ${describeType(type)}`;
         }
-        if (this.patched.length) {
-            parentRoot.patched.push(fiber);
+    }
+    return null;
+}
+function validateArrayType(key, value, descr) {
+    if (!Array.isArray(value)) {
+        return `'${key}' is not a list of ${describe(descr)}s`;
+    }
+    for (let i = 0; i < value.length; i++) {
+        const error = validateType(`${key}[${i}]`, value[i], descr);
+        if (error) {
+            return error;
         }
     }
-    /**
-     * Finds a child that has dom that is not yet updated, and update it. This
-     * method is meant to be used only in the context of repatching the dom after
-     * a mounted hook failed and was handled.
-     */
-    updateDom() {
-        if (!this.fiber) {
-            return;
+    return null;
+}
+function validateType(key, value, descr) {
+    if (value === undefined) {
+        return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
+    }
+    else if (isBaseType(descr)) {
+        return validateBaseType(key, value, descr);
+    }
+    else if (isValueType(descr)) {
+        return value === descr.value ? null : `'${key}' is not equal to '${descr.value}'`;
+    }
+    else if (isUnionType(descr)) {
+        let validDescr = descr.find((p) => !validateType(key, value, p));
+        return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
+    }
+    let result = null;
+    if ("element" in descr) {
+        result = validateArrayType(key, value, descr.element);
+    }
+    else if ("shape" in descr && !result) {
+        if (typeof value !== "object" || Array.isArray(value)) {
+            result = `'${key}' is not an object`;
         }
-        if (this.bdom === this.fiber.bdom) {
-            // If the error was handled by some child component, we need to find it to
-            // apply its change
-            for (let k in this.children) {
-                const child = this.children[k];
-                child.updateDom();
+        else {
+            const errors = validateSchema(value, descr.shape);
+            if (errors.length) {
+                result = `'${key}' has not the correct shape (${errors.join(", ")})`;
             }
         }
-        else {
-            // if we get here, this is the component that handled the error and rerendered
-            // itself, so we can simply patch the dom
-            this.bdom.patch(this.fiber.bdom, false);
-            this.fiber.appliedToDom = true;
-            this.fiber = null;
-        }
     }
-    // ---------------------------------------------------------------------------
-    // Block DOM methods
-    // ---------------------------------------------------------------------------
-    firstNode() {
-        const bdom = this.bdom;
-        return bdom ? bdom.firstNode() : undefined;
+    if ("type" in descr && !result) {
+        result = validateType(key, value, descr.type);
     }
-    mount(parent, anchor) {
-        const bdom = this.fiber.bdom;
-        this.bdom = bdom;
-        bdom.mount(parent, anchor);
-        this.status = 1 /* MOUNTED */;
-        this.fiber.appliedToDom = true;
-        this.fiber = null;
+    if ("validate" in descr && !result) {
+        result = !descr.validate(value) ? `'${key}' is not valid` : null;
     }
-    moveBefore(other, afterNode) {
-        this.bdom.moveBefore(other ? other.bdom : null, afterNode);
+    return result;
+}
+
+const ObjectCreate = Object.create;
+/**
+ * This file contains utility functions that will be injected in each template,
+ * to perform various useful tasks in the compiled code.
+ */
+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.slots || {};
+    const { __render, __ctx, __scope } = slots[name] || {};
+    const slotScope = ObjectCreate(__ctx || {});
+    if (__scope) {
+        slotScope[__scope] = extra;
     }
-    patch() {
-        if (this.fiber && this.fiber.parent) {
-            // we only patch here renderings coming from above. renderings initiated
-            // by the component will be patched independently in the appropriate
-            // fiber.complete
-            this._patch();
+    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;
         }
-    }
-    _patch() {
-        const hasChildren = Object.keys(this.children).length > 0;
-        this.bdom.patch(this.fiber.bdom, hasChildren);
-        if (hasChildren) {
-            this.cleanOutdatedChildren();
+        else {
+            child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
         }
-        this.fiber.appliedToDom = true;
-        this.fiber = null;
+        return multi([child1, child2]);
     }
-    beforeRemove() {
-        this._destroy();
+    return slotBDom || text("");
+}
+function capture(ctx) {
+    const component = ctx.__owl__.component;
+    const result = ObjectCreate(component);
+    for (let k in ctx) {
+        result[k] = ctx[k];
     }
-    remove() {
-        this.bdom.remove();
+    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;
     }
-    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();
-                }
-            }
+    else if (collection) {
+        values = Object.keys(collection);
+        keys = Object.values(collection);
+    }
+    else {
+        throw new OwlError("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;
     }
-}
-
-// -----------------------------------------------------------------------------
-//  Scheduler
-// -----------------------------------------------------------------------------
-class Scheduler {
-    constructor() {
-        this.tasks = new Set();
-        this.isRunning = false;
-        this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+    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;
+        }
     }
-    start() {
-        this.isRunning = true;
-        this.scheduleTasks();
+    return true;
+}
+class LazyValue {
+    constructor(fn, ctx, component, node, key) {
+        this.fn = fn;
+        this.ctx = capture(ctx);
+        this.component = component;
+        this.node = node;
+        this.key = key;
     }
-    stop() {
-        this.isRunning = false;
+    evaluate() {
+        return this.fn.call(this.component, this.ctx, this.node, this.key);
     }
-    addFiber(fiber) {
-        this.tasks.add(fiber.root);
-        if (!this.isRunning) {
-            this.start();
-        }
+    toString() {
+        return this.evaluate().toString();
     }
-    /**
-     * 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;
+}
+/*
+ * Safely outputs `value` as a block depending on the nature of `value`
+ */
+function safeOutput(value, defaultValue) {
+    if (value === undefined) {
+        return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
+    }
+    let safeKey;
+    let block;
+    switch (typeof value) {
+        case "object":
+            if (value instanceof Markup) {
+                safeKey = `string_safe`;
+                block = html(value);
             }
-            const hasError = fibersInError.has(fiber);
-            if (hasError && fiber.counter !== 0) {
-                this.tasks.delete(fiber);
-                return;
+            else if (value instanceof LazyValue) {
+                safeKey = `lazy_value`;
+                block = value.evaluate();
             }
-            if (fiber.node.status === 2 /* DESTROYED */) {
-                this.tasks.delete(fiber);
-                return;
+            else if (value instanceof String) {
+                safeKey = "string_unsafe";
+                block = text(value);
             }
-            if (fiber.counter === 0) {
-                if (!hasError) {
-                    fiber.complete();
-                }
-                this.tasks.delete(fiber);
+            else {
+                // Assuming it is a block
+                safeKey = "block_safe";
+                block = value;
             }
-        });
-        if (this.tasks.size === 0) {
-            this.stop();
-        }
+            break;
+        case "string":
+            safeKey = "string_unsafe";
+            block = text(value);
+            break;
+        default:
+            safeKey = "string_unsafe";
+            block = text(String(value));
     }
-    scheduleTasks() {
-        this.requestAnimationFrame(() => {
-            this.flush();
-            if (this.isRunning) {
-                this.scheduleTasks();
-            }
-        });
+    return toggler(safeKey, block);
+}
+let boundFunctions = new WeakMap();
+const WeakMapGet = WeakMap.prototype.get;
+const WeakMapSet = WeakMap.prototype.set;
+function bind(ctx, fn) {
+    let component = ctx.__owl__.component;
+    let boundFnMap = WeakMapGet.call(boundFunctions, component);
+    if (!boundFnMap) {
+        boundFnMap = new WeakMap();
+        WeakMapSet.call(boundFunctions, component, boundFnMap);
     }
+    let boundFn = WeakMapGet.call(boundFnMap, fn);
+    if (!boundFn) {
+        boundFn = fn.bind(component);
+        WeakMapSet.call(boundFnMap, fn, boundFn);
+    }
+    return boundFn;
+}
+function multiRefSetter(refs, name) {
+    let count = 0;
+    return (el) => {
+        if (el) {
+            count++;
+            if (count > 1) {
+                throw new OwlError("Cannot have 2 elements with same ref name at the same time");
+            }
+        }
+        if (count === 0 || el) {
+            refs[name] = el;
+        }
+    };
 }
-// capture the value of requestAnimationFrame as soon as possible, to avoid
-// interactions with other code, such as test frameworks that override them
-Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
-
 /**
- * Owl QWeb Expression Parser
- *
- * Owl needs in various contexts to be able to understand the structure of a
- * string representing a javascript expression.  The usual goal is to be able
- * to rewrite some variables.  For example, if a template has
- *
- *  ```xml
- *  <t t-if="computeSomething({val: state.val})">...</t>
- * ```
- *
- * this needs to be translated in something like this:
- *
- * ```js
- *   if (context["computeSomething"]({val: context["state"].val})) { ... }
- * ```
- *
- * This file contains the implementation of an extremely naive tokenizer/parser
- * and evaluator for javascript expressions.  The supported grammar is basically
- * only expressive enough to understand the shape of objects, of arrays, and
- * various operators.
+ * 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.
  */
-//------------------------------------------------------------------------------
-// Misc types, constants and helpers
-//------------------------------------------------------------------------------
-const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(",");
-const WORD_REPLACEMENT = Object.assign(Object.create(null), {
-    and: "&&",
-    or: "||",
-    gt: ">",
-    gte: ">=",
-    lt: "<",
-    lte: "<=",
-});
-const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
-    "{": "LEFT_BRACE",
-    "}": "RIGHT_BRACE",
-    "[": "LEFT_BRACKET",
-    "]": "RIGHT_BRACKET",
-    ":": "COLON",
-    ",": "COMMA",
-    "(": "LEFT_PAREN",
-    ")": "RIGHT_PAREN",
-});
-// note that the space after typeof is relevant. It makes sure that the formatted
-// expression has a space after typeof
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ".split(",");
-let tokenizeString = function (expr) {
-    let s = expr[0];
-    let start = s;
-    if (s !== "'" && s !== '"' && s !== "`") {
-        return false;
+function validateProps(name, props, comp) {
+    const ComponentClass = typeof name !== "string"
+        ? name
+        : comp.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;
     }
-    let i = 1;
-    let cur;
-    while (expr[i] && expr[i] !== start) {
-        cur = expr[i];
-        s += cur;
-        if (cur === "\\") {
-            i++;
-            cur = expr[i];
-            if (!cur) {
-                throw new Error("Invalid expression");
+    const schema = ComponentClass.props;
+    if (!schema) {
+        if (comp.__owl__.app.warnIfNoStaticProps) {
+            console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
+        }
+        return;
+    }
+    const defaultProps = ComponentClass.defaultProps;
+    if (defaultProps) {
+        let isMandatory = (name) => Array.isArray(schema)
+            ? schema.includes(name)
+            : name in schema && !("*" in schema) && !isOptional(schema[name]);
+        for (let p in defaultProps) {
+            if (isMandatory(p)) {
+                throw new OwlError(`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`);
             }
-            s += cur;
         }
-        i++;
     }
-    if (expr[i] !== start) {
-        throw new Error("Invalid expression");
+    const errors = validateSchema(props, schema);
+    if (errors.length) {
+        throw new OwlError(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+    }
+}
+const helpers = {
+    withDefault,
+    zero: Symbol("zero"),
+    isBoundary,
+    callSlot,
+    capture,
+    withKey,
+    prepareList,
+    setContextValue,
+    multiRefSetter,
+    shallowEqual,
+    toNumber,
+    validateProps,
+    LazyValue,
+    safeOutput,
+    bind,
+    createCatcher,
+    markRaw,
+    OwlError,
+};
+
+const bdom = { text, createBlock, list, multi, html, toggler, comment };
+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 OwlError(msg);
+    }
+    return doc;
+}
+class TemplateSet {
+    constructor(config = {}) {
+        this.rawTemplates = Object.create(globalTemplates);
+        this.templates = {};
+        this.Portal = Portal;
+        this.dev = config.dev || false;
+        this.translateFn = config.translateFn;
+        this.translatableAttributes = config.translatableAttributes;
+        if (config.templates) {
+            this.addTemplates(config.templates);
+        }
+    }
+    static registerTemplate(name, fn) {
+        globalTemplates[name] = fn;
+    }
+    addTemplate(name, template) {
+        if (name in this.rawTemplates) {
+            const rawTemplate = this.rawTemplates[name];
+            const currentAsString = typeof rawTemplate === "string"
+                ? rawTemplate
+                : rawTemplate instanceof Element
+                    ? rawTemplate.outerHTML
+                    : rawTemplate.toString();
+            const newAsString = typeof template === "string" ? template : template.outerHTML;
+            if (currentAsString === newAsString) {
+                return;
+            }
+            throw new OwlError(`Template ${name} already defined with different content`);
+        }
+        this.rawTemplates[name] = template;
+    }
+    addTemplates(xml) {
+        if (!xml) {
+            // empty string
+            return;
+        }
+        xml = xml instanceof Document ? xml : parseXML$1(xml);
+        for (const template of xml.querySelectorAll("[t-name]")) {
+            const name = template.getAttribute("t-name");
+            this.addTemplate(name, template);
+        }
+    }
+    getTemplate(name) {
+        if (!(name in this.templates)) {
+            const rawTemplate = this.rawTemplates[name];
+            if (rawTemplate === undefined) {
+                let extraInfo = "";
+                try {
+                    const componentName = getCurrent().component.constructor.name;
+                    extraInfo = ` (for component "${componentName}")`;
+                }
+                catch { }
+                throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+            }
+            const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+            const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+            // first add a function to lazily get the template, in case there is a
+            // recursive call to the template name
+            const templates = this.templates;
+            this.templates[name] = function (context, parent) {
+                return templates[name].call(this, context, parent);
+            };
+            const template = templateFn(this, bdom, helpers);
+            this.templates[name] = template;
+        }
+        return this.templates[name];
+    }
+    _compileTemplate(name, template) {
+        throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
+    }
+    callTemplate(owner, subTemplate, ctx, parent, key) {
+        const template = this.getTemplate(subTemplate);
+        return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    }
+}
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+const globalTemplates = {};
+function xml(...args) {
+    const name = `__template__${xml.nextId++}`;
+    const value = String.raw(...args);
+    globalTemplates[name] = value;
+    return name;
+}
+xml.nextId = 1;
+TemplateSet.registerTemplate("__portal__", portalTemplate);
+
+/**
+ * Owl QWeb Expression Parser
+ *
+ * Owl needs in various contexts to be able to understand the structure of a
+ * string representing a javascript expression.  The usual goal is to be able
+ * to rewrite some variables.  For example, if a template has
+ *
+ *  ```xml
+ *  <t t-if="computeSomething({val: state.val})">...</t>
+ * ```
+ *
+ * this needs to be translated in something like this:
+ *
+ * ```js
+ *   if (context["computeSomething"]({val: context["state"].val})) { ... }
+ * ```
+ *
+ * This file contains the implementation of an extremely naive tokenizer/parser
+ * and evaluator for javascript expressions.  The supported grammar is basically
+ * only expressive enough to understand the shape of objects, of arrays, and
+ * various operators.
+ */
+//------------------------------------------------------------------------------
+// Misc types, constants and helpers
+//------------------------------------------------------------------------------
+const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(",");
+const WORD_REPLACEMENT = Object.assign(Object.create(null), {
+    and: "&&",
+    or: "||",
+    gt: ">",
+    gte: ">=",
+    lt: "<",
+    lte: "<=",
+});
+const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
+    "{": "LEFT_BRACE",
+    "}": "RIGHT_BRACE",
+    "[": "LEFT_BRACKET",
+    "]": "RIGHT_BRACKET",
+    ":": "COLON",
+    ",": "COMMA",
+    "(": "LEFT_PAREN",
+    ")": "RIGHT_PAREN",
+});
+// note that the space after typeof is relevant. It makes sure that the formatted
+// expression has a space after typeof. Currently we don't support delete and void
+const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
+let tokenizeString = function (expr) {
+    let s = expr[0];
+    let start = s;
+    if (s !== "'" && s !== '"' && s !== "`") {
+        return false;
+    }
+    let i = 1;
+    let cur;
+    while (expr[i] && expr[i] !== start) {
+        cur = expr[i];
+        s += cur;
+        if (cur === "\\") {
+            i++;
+            cur = expr[i];
+            if (!cur) {
+                throw new OwlError("Invalid expression");
+            }
+            s += cur;
+        }
+        i++;
+    }
+    if (expr[i] !== start) {
+        throw new OwlError("Invalid expression");
     }
     s += start;
     if (start === "`") {
@@ -2830,7 +3339,7 @@ function tokenize(expr) {
         error = e; // Silence all errors and throw a generic error below
     }
     if (current.length || error) {
-        throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+        throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
     }
     return result;
 }
@@ -2941,26 +3450,35 @@ function compileExprToArray(expr) {
     }
     return tokens;
 }
+// Leading spaces are trimmed during tokenization, so they need to be added back for some values
+const paddedValues = new Map([["in ", " in "]]);
 function compileExpr(expr) {
     return compileExprToArray(expr)
-        .map((t) => t.value)
+        .map((t) => paddedValues.get(t.value) || t.value)
         .join("");
 }
-const INTERP_REGEXP = /\{\{.*?\}\}/g;
-const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
-function interpolate(s) {
+const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
+function replaceDynamicParts(s, replacer) {
     let matches = s.match(INTERP_REGEXP);
     if (matches && matches[0].length === s.length) {
-        return `(${compileExpr(s.slice(2, -2))})`;
+        return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
     }
-    let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+    let r = s.replace(INTERP_REGEXP, (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}");
     return "`" + r + "`";
+}
+function interpolate(s) {
+    return replaceDynamicParts(s, compileExpr);
 }
 
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
 // of HTML (as we will parse it as xml later)
 const xmlDoc = document.implementation.createDocument(null, null, null);
 const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic"]);
+let nextDataIds = {};
+function generateId(prefix = "") {
+    nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
+    return prefix + nextDataIds[prefix];
+}
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -2979,12 +3497,8 @@ class BlockDescription {
         this.target = target;
         this.type = type;
     }
-    static generateId(prefix) {
-        this.nextDataIds[prefix] = (this.nextDataIds[prefix] || 0) + 1;
-        return prefix + this.nextDataIds[prefix];
-    }
     insertData(str, prefix = "d") {
-        const id = BlockDescription.generateId(prefix);
+        const id = generateId(prefix);
         this.target.addLine(`let ${id} = ${str};`);
         return this.data.push(id) - 1;
     }
@@ -3022,7 +3536,6 @@ class BlockDescription {
     }
 }
 BlockDescription.nextBlockId = 1;
-BlockDescription.nextDataIds = {};
 function createContext(parentCtx, params) {
     return Object.assign({
         block: null,
@@ -3084,19 +3597,26 @@ class CodeTarget {
         result.push(`}`);
         return result.join("\n  ");
     }
+    currentKey(ctx) {
+        let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+        if (ctx.tKeyExpr) {
+            key = `${ctx.tKeyExpr} + ${key}`;
+        }
+        return key;
+    }
 }
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
 const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
 class CodeGenerator {
     constructor(ast, options) {
         this.blocks = [];
-        this.ids = {};
         this.nextBlockId = 1;
         this.isDebug = false;
         this.targets = [];
         this.target = new CodeTarget("template");
         this.translatableAttributes = TRANSLATABLE_ATTRS;
         this.staticDefs = [];
+        this.slotNames = new Set();
         this.helpers = new Set();
         this.translateFn = options.translateFn || ((s) => s);
         if (options.translatableAttributes) {
@@ -3120,7 +3640,7 @@ class CodeGenerator {
         const ast = this.ast;
         this.isDebug = ast.type === 12 /* TDebug */;
         BlockDescription.nextBlockId = 1;
-        BlockDescription.nextDataIds = {};
+        nextDataIds = {};
         this.compileAST(ast, {
             block: null,
             index: 0,
@@ -3130,9 +3650,7 @@ class CodeGenerator {
             tKeyExpr: null,
         });
         // define blocks and utility functions
-        let mainCode = [
-            `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
-        ];
+        let mainCode = [`  let { text, createBlock, list, multi, html, toggler, comment } = bdom;`];
         if (this.helpers.size) {
             mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
         }
@@ -3148,6 +3666,7 @@ class CodeGenerator {
             for (let block of this.blocks) {
                 if (block.dom) {
                     let xmlString = block.asXmlString();
+                    xmlString = xmlString.replace(/`/g, "\\`");
                     if (block.dynamicTagName) {
                         xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
                         xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
@@ -3177,7 +3696,7 @@ class CodeGenerator {
         return code;
     }
     compileInNewTarget(prefix, ast, ctx, on) {
-        const name = this.generateId(prefix);
+        const name = generateId(prefix);
         const initialTarget = this.target;
         const target = new CodeTarget(name, on);
         this.targets.push(target);
@@ -3192,12 +3711,8 @@ class CodeGenerator {
     define(varName, expr) {
         this.addLine(`const ${varName} = ${expr};`);
     }
-    generateId(prefix = "") {
-        this.ids[prefix] = (this.ids[prefix] || 0) + 1;
-        return prefix + this.ids[prefix];
-    }
-    insertAnchor(block) {
-        const tag = `block-child-${block.children.length}`;
+    insertAnchor(block, index = block.children.length) {
+        const tag = `block-child-${index}`;
         const anchor = xmlDoc.createElement(tag);
         block.insert(anchor);
     }
@@ -3218,18 +3733,14 @@ class CodeGenerator {
     }
     insertBlock(expression, block, ctx) {
         let blockExpr = block.generateExpr(expression);
-        const tKeyExpr = ctx.tKeyExpr;
         if (block.parentVar) {
-            let keyArg = `key${this.target.loopLevel}`;
-            if (tKeyExpr) {
-                keyArg = `${tKeyExpr} + ${keyArg}`;
-            }
+            let key = this.target.currentKey(ctx);
             this.helpers.add("withKey");
-            this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+            this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
             return;
         }
-        if (tKeyExpr) {
-            blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+        if (ctx.tKeyExpr) {
+            blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
         }
         if (block.isRoot && !ctx.preventRoot) {
             if (this.target.on) {
@@ -3264,7 +3775,7 @@ class CodeGenerator {
             .map((tok) => {
             if (tok.varName && !tok.isLocal) {
                 if (!mapping.has(tok.varName)) {
-                    const varId = this.generateId("v");
+                    const varId = generateId("v");
                     mapping.set(tok.varName, varId);
                     this.define(varId, tok.value);
                 }
@@ -3274,74 +3785,62 @@ class CodeGenerator {
         })
             .join("");
     }
+    /**
+     * @returns the newly created block name, if any
+     */
     compileAST(ast, ctx) {
         switch (ast.type) {
             case 1 /* Comment */:
-                this.compileComment(ast, ctx);
-                break;
+                return this.compileComment(ast, ctx);
             case 0 /* Text */:
-                this.compileText(ast, ctx);
-                break;
+                return this.compileText(ast, ctx);
             case 2 /* DomNode */:
-                this.compileTDomNode(ast, ctx);
-                break;
+                return this.compileTDomNode(ast, ctx);
             case 4 /* TEsc */:
-                this.compileTEsc(ast, ctx);
-                break;
+                return this.compileTEsc(ast, ctx);
             case 8 /* TOut */:
-                this.compileTOut(ast, ctx);
-                break;
+                return this.compileTOut(ast, ctx);
             case 5 /* TIf */:
-                this.compileTIf(ast, ctx);
-                break;
+                return this.compileTIf(ast, ctx);
             case 9 /* TForEach */:
-                this.compileTForeach(ast, ctx);
-                break;
+                return this.compileTForeach(ast, ctx);
             case 10 /* TKey */:
-                this.compileTKey(ast, ctx);
-                break;
+                return this.compileTKey(ast, ctx);
             case 3 /* Multi */:
-                this.compileMulti(ast, ctx);
-                break;
+                return this.compileMulti(ast, ctx);
             case 7 /* TCall */:
-                this.compileTCall(ast, ctx);
-                break;
+                return this.compileTCall(ast, ctx);
             case 15 /* TCallBlock */:
-                this.compileTCallBlock(ast, ctx);
-                break;
+                return this.compileTCallBlock(ast, ctx);
             case 6 /* TSet */:
-                this.compileTSet(ast, ctx);
-                break;
+                return this.compileTSet(ast, ctx);
             case 11 /* TComponent */:
-                this.compileComponent(ast, ctx);
-                break;
+                return this.compileComponent(ast, ctx);
             case 12 /* TDebug */:
-                this.compileDebug(ast, ctx);
-                break;
+                return this.compileDebug(ast, ctx);
             case 13 /* TLog */:
-                this.compileLog(ast, ctx);
-                break;
+                return this.compileLog(ast, ctx);
             case 14 /* TSlot */:
-                this.compileTSlot(ast, ctx);
-                break;
+                return this.compileTSlot(ast, ctx);
             case 16 /* TTranslation */:
-                this.compileTTranslation(ast, ctx);
-                break;
+                return this.compileTTranslation(ast, ctx);
             case 17 /* TPortal */:
-                this.compileTPortal(ast, ctx);
+                return this.compileTPortal(ast, ctx);
         }
     }
     compileDebug(ast, ctx) {
         this.addLine(`debugger;`);
         if (ast.content) {
-            this.compileAST(ast.content, ctx);
+            return this.compileAST(ast.content, ctx);
         }
+        return null;
     }
     compileLog(ast, ctx) {
         this.addLine(`console.log(${compileExpr(ast.expr)});`);
         if (ast.content) {
-            this.compileAST(ast.content, ctx);
+            return this.compileAST(ast.content, ctx);
         }
+        return null;
     }
     compileComment(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3357,6 +3856,7 @@ class CodeGenerator {
             const text = xmlDoc.createComment(ast.value);
             block.insert(text);
         }
+        return block.varName;
     }
     compileText(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3376,6 +3876,7 @@ class CodeGenerator {
             const createFn = ast.type === 0 /* Text */ ? xmlDoc.createTextNode : xmlDoc.createComment;
             block.insert(createFn.call(xmlDoc, value));
         }
+        return block.varName;
     }
     generateHandlerCode(rawEvent, handler) {
         const modifiers = rawEvent
@@ -3383,7 +3884,7 @@ class CodeGenerator {
             .slice(1)
             .map((m) => {
             if (!MODS.has(m)) {
-                throw new Error(`Unknown event modifier: '${m}'`);
+                throw new OwlError(`Unknown event modifier: '${m}'`);
             }
             return `"${m}"`;
         });
@@ -3404,7 +3905,7 @@ class CodeGenerator {
             block = this.createBlock(block, "block", ctx);
             this.blocks.push(block);
             if (ast.dynamicTag) {
-                const tagExpr = this.generateId("tag");
+                const tagExpr = generateId("tag");
                 this.define(tagExpr, compileExpr(ast.dynamicTag));
                 block.dynamicTagName = tagExpr;
             }
@@ -3425,13 +3926,23 @@ class CodeGenerator {
                 attrs["block-attribute-" + idx] = attrName;
             }
             else if (key.startsWith("t-att")) {
+                attrName = key === "t-att" ? null : key.slice(6);
                 expr = compileExpr(ast.attrs[key]);
+                if (attrName && isProp(ast.tag, attrName)) {
+                    // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
+                    if (attrName === "value") {
+                        // When the expression is falsy, fall back to an empty string
+                        expr = `new String((${expr}) || "")`;
+                    }
+                    else {
+                        expr = `new Boolean(${expr})`;
+                    }
+                }
                 const idx = block.insertData(expr, "attr");
                 if (key === "t-att") {
                     attrs[`block-attributes`] = String(idx);
                 }
                 else {
-                    attrName = key.slice(6);
                     attrs[`block-attribute-${idx}`] = attrName;
                 }
             }
@@ -3459,8 +3970,8 @@ class CodeGenerator {
             this.target.hasRef = true;
             const isDynamic = INTERP_REGEXP.test(ast.ref);
             if (isDynamic) {
-                const str = ast.ref.replace(INTERP_REGEXP, (expr) => "${" + this.captureExpression(expr.slice(2, -2), true) + "}");
-                const idx = block.insertData(`(el) => refs[\`${str}\`] = el`, "ref");
+                const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+                const idx = block.insertData(`(el) => refs[${str}] = el`, "ref");
                 attrs["block-ref"] = String(idx);
             }
             else {
@@ -3474,7 +3985,7 @@ class CodeGenerator {
                     info[1] = `multiRefSetter(refs, \`${name}\`)`;
                 }
                 else {
-                    let id = this.generateId("ref");
+                    let id = generateId("ref");
                     this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
                     const index = block.data.push(id) - 1;
                     attrs["block-ref"] = String(index);
@@ -3486,10 +3997,10 @@ class CodeGenerator {
         if (ast.model) {
             const { hasDynamicChildren, baseExpr, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
             const baseExpression = compileExpr(baseExpr);
-            const bExprId = this.generateId("bExpr");
+            const bExprId = generateId("bExpr");
             this.define(bExprId, baseExpression);
             const expression = compileExpr(expr);
-            const exprId = this.generateId("expr");
+            const exprId = generateId("expr");
             this.define(exprId, expression);
             const fullExpression = `${bExprId}[${exprId}]`;
             let idx;
@@ -3498,7 +4009,7 @@ class CodeGenerator {
                 attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
             }
             else if (hasDynamicChildren) {
-                const bValueId = this.generateId("bValue");
+                const bValueId = generateId("bValue");
                 tModelSelectedExpr = `${bValueId}`;
                 this.define(tModelSelectedExpr, fullExpression);
             }
@@ -3558,6 +4069,7 @@ class CodeGenerator {
                 this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
             }
         }
+        return block.varName;
     }
     compileTEsc(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3582,6 +4094,7 @@ class CodeGenerator {
             const text = xmlDoc.createElement(`block-text-${idx}`);
             block.insert(text);
         }
+        return block.varName;
     }
     compileTOut(ast, ctx) {
         let { block } = ctx;
@@ -3589,20 +4102,38 @@ class CodeGenerator {
             this.insertAnchor(block);
         }
         block = this.createBlock(block, "html", ctx);
-        this.helpers.add(ast.expr === "0" ? "zero" : "safeOutput");
-        let expr = ast.expr === "0" ? "ctx[zero]" : `safeOutput(${compileExpr(ast.expr)})`;
-        if (ast.body) {
-            const nextId = BlockDescription.nextBlockId;
+        let blockStr;
+        if (ast.expr === "0") {
+            this.helpers.add("zero");
+            blockStr = `ctx[zero]`;
+        }
+        else if (ast.body) {
+            let bodyValue = null;
+            bodyValue = BlockDescription.nextBlockId;
             const subCtx = createContext(ctx);
             this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
-            this.helpers.add("withDefault");
-            expr = `withDefault(${expr}, b${nextId})`;
+            this.helpers.add("safeOutput");
+            blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
         }
-        this.insertBlock(`${expr}`, block, ctx);
+        else {
+            this.helpers.add("safeOutput");
+            blockStr = `safeOutput(${compileExpr(ast.expr)})`;
+        }
+        this.insertBlock(blockStr, block, ctx);
+        return block.varName;
+    }
+    compileTIfBranch(content, block, ctx) {
+        this.target.indentLevel++;
+        let childN = block.children.length;
+        this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
+        if (block.children.length > childN) {
+            // we have some content => need to insert an anchor at correct index
+            this.insertAnchor(block, childN);
+        }
+        this.target.indentLevel--;
     }
     compileTIf(ast, ctx, nextNode) {
-        let { block, forceNewBlock, index } = ctx;
-        let currentIndex = index;
+        let { block, forceNewBlock } = ctx;
         const codeIdx = this.target.code.length;
         const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
         if (block) {
@@ -3612,28 +4143,16 @@ class CodeGenerator {
             block = this.createBlock(block, "multi", ctx);
         }
         this.addLine(`if (${compileExpr(ast.condition)}) {`);
-        this.target.indentLevel++;
-        this.insertAnchor(block);
-        const subCtx = createContext(ctx, { block, index: currentIndex });
-        this.compileAST(ast.content, subCtx);
-        this.target.indentLevel--;
+        this.compileTIfBranch(ast.content, block, ctx);
         if (ast.tElif) {
             for (let clause of ast.tElif) {
                 this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
-                this.target.indentLevel++;
-                this.insertAnchor(block);
-                const subCtx = createContext(ctx, { block, index: currentIndex });
-                this.compileAST(clause.content, subCtx);
-                this.target.indentLevel--;
+                this.compileTIfBranch(clause.content, block, ctx);
             }
         }
         if (ast.tElse) {
             this.addLine(`} else {`);
-            this.target.indentLevel++;
-            this.insertAnchor(block);
-            const subCtx = createContext(ctx, { block, index: currentIndex });
-            this.compileAST(ast.tElse, subCtx);
-            this.target.indentLevel--;
+            this.compileTIfBranch(ast.tElse, block, ctx);
         }
         this.addLine("}");
         if (isNewBlock) {
@@ -3656,6 +4175,7 @@ class CodeGenerator {
             const args = block.children.map((c) => c.varName).join(", ");
             this.insertBlock(`multi([${args}])`, block, ctx);
         }
+        return block.varName;
     }
     compileTForeach(ast, ctx) {
         let { block } = ctx;
@@ -3694,13 +4214,14 @@ class CodeGenerator {
         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}}\`)}`);
+            this.helpers.add("OwlError");
+            this.addLine(`if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
             this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
         }
         let id;
         if (ast.memo) {
             this.target.hasCache = true;
-            id = this.generateId();
+            id = generateId();
             this.define(`memo${id}`, compileExpr(ast.memo));
             this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
             this.addLine(`if (vnode${id}) {`);
@@ -3727,16 +4248,17 @@ class CodeGenerator {
             this.addLine(`ctx = ctx.__proto__;`);
         }
         this.insertBlock("l", block, ctx);
+        return block.varName;
     }
     compileTKey(ast, ctx) {
-        const tKeyExpr = this.generateId("tKey_");
+        const tKeyExpr = generateId("tKey_");
         this.define(tKeyExpr, compileExpr(ast.expr));
         ctx = createContext(ctx, {
             tKeyExpr,
             block: ctx.block,
             index: ctx.index,
         });
-        this.compileAST(ast.content, ctx);
+        return this.compileAST(ast.content, ctx);
     }
     compileMulti(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3744,11 +4266,13 @@ class CodeGenerator {
         let codeIdx = this.target.code.length;
         if (isNewBlock) {
             const n = ast.content.filter((c) => c.type !== 6 /* TSet */).length;
+            let result = null;
             if (n <= 1) {
                 for (let child of ast.content) {
-                    this.compileAST(child, ctx);
+                    const blockName = this.compileAST(child, ctx);
+                    result = result || blockName;
                 }
-                return;
+                return result;
             }
             block = this.createBlock(block, "multi", ctx);
         }
@@ -3788,19 +4312,24 @@ class CodeGenerator {
             const args = block.children.map((c) => c.varName).join(", ");
             this.insertBlock(`multi([${args}])`, block, ctx);
         }
+        return block.varName;
     }
     compileTCall(ast, ctx) {
         let { block, forceNewBlock } = ctx;
+        let ctxVar = ctx.ctxVar || "ctx";
+        if (ast.context) {
+            ctxVar = generateId("ctx");
+            this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+        }
         if (ast.body) {
-            this.addLine(`ctx = Object.create(ctx);`);
-            this.addLine(`ctx[isBoundary] = 1;`);
+            this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+            this.addLine(`${ctxVar}[isBoundary] = 1;`);
             this.helpers.add("isBoundary");
-            const nextId = BlockDescription.nextBlockId;
-            const subCtx = createContext(ctx, { preventRoot: true });
-            this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
-            if (nextId !== BlockDescription.nextBlockId) {
+            const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
+            const bl = this.compileMulti({ type: 3 /* Multi */, content: ast.body }, subCtx);
+            if (bl) {
                 this.helpers.add("zero");
-                this.addLine(`ctx[zero] = b${nextId};`);
+                this.addLine(`${ctxVar}[zero] = ${bl};`);
             }
         }
         const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -3812,28 +4341,30 @@ class CodeGenerator {
         }
         const key = `key + \`${this.generateComponentKey()}\``;
         if (isDynamic) {
-            const templateVar = this.generateId("template");
+            const templateVar = generateId("template");
+            if (!this.staticDefs.find((d) => d.id === "call")) {
+                this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
+            }
             this.define(templateVar, subTemplate);
             block = this.createBlock(block, "multi", ctx);
-            this.helpers.add("call");
-            this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block, {
+            this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block, {
                 ...ctx,
                 forceNewBlock: !block,
             });
         }
         else {
-            const id = this.generateId(`callTemplate_`);
-            this.helpers.add("getTemplate");
-            this.staticDefs.push({ id, expr: `getTemplate(${subTemplate})` });
+            const id = generateId(`callTemplate_`);
+            this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
             block = this.createBlock(block, "multi", ctx);
-            this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block, {
+            this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block, {
                 ...ctx,
                 forceNewBlock: !block,
             });
         }
         if (ast.body && !ctx.isLast) {
-            this.addLine(`ctx = ctx.__proto__;`);
+            this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
         }
+        return block.varName;
     }
     compileTCallBlock(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3844,6 +4375,7 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+        return block.varName;
     }
     compileTSet(ast, ctx) {
         this.target.shouldProtectScope = true;
@@ -3853,7 +4385,8 @@ class CodeGenerator {
             this.helpers.add("LazyValue");
             const bodyAst = { type: 3 /* Multi */, content: ast.body };
             const name = this.compileInNewTarget("value", bodyAst, ctx);
-            let value = `new LazyValue(${name}, ctx, node)`;
+            let key = this.target.currentKey(ctx);
+            let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
             value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
             this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
         }
@@ -3871,11 +4404,12 @@ class CodeGenerator {
                 value = expr;
             }
             this.helpers.add("setContextValue");
-            this.addLine(`setContextValue(ctx, "${ast.name}", ${value});`);
+            this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
         }
+        return null;
     }
     generateComponentKey() {
-        const parts = [this.generateId("__")];
+        const parts = [generateId("__")];
         for (let i = 0; i < this.target.loopLevel; i++) {
             parts.push(`\${key${i + 1}}`);
         }
@@ -3902,48 +4436,50 @@ class CodeGenerator {
                 value = `bind(ctx, ${value || undefined})`;
             }
             else {
-                throw new Error("Invalid prop suffix");
+                throw new OwlError("Invalid prop suffix");
             }
         }
         name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
         return `${name}: ${value || undefined}`;
     }
     formatPropObject(obj) {
-        const params = [];
-        for (const [n, v] of Object.entries(obj)) {
-            params.push(this.formatProp(n, v));
+        return Object.entries(obj).map(([k, v]) => this.formatProp(k, v));
+    }
+    getPropString(props, dynProps) {
+        let propString = `{${props.join(",")}}`;
+        if (dynProps) {
+            propString = `Object.assign({}, ${compileExpr(dynProps)}${props.length ? ", " + propString : ""})`;
         }
-        return params.join(", ");
+        return propString;
     }
     compileComponent(ast, ctx) {
         let { block } = ctx;
         // props
         const hasSlotsProp = "slots" in (ast.props || {});
-        const props = [];
-        const propExpr = this.formatPropObject(ast.props || {});
-        if (propExpr) {
-            props.push(propExpr);
-        }
+        const props = ast.props ? this.formatPropObject(ast.props) : [];
         // slots
         let slotDef = "";
         if (ast.slots) {
             let ctxStr = "ctx";
             if (this.target.loopLevel || !this.hasSafeContext) {
-                ctxStr = this.generateId("ctx");
+                ctxStr = generateId("ctx");
                 this.helpers.add("capture");
                 this.define(ctxStr, `capture(ctx)`);
             }
             let slotStr = [];
             for (let slotName in ast.slots) {
                 const slotAst = ast.slots[slotName];
-                const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
-                const params = [`__render: ${name}, __ctx: ${ctxStr}`];
+                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}"`);
                 }
                 if (ast.slots[slotName].attrs) {
-                    params.push(this.formatPropObject(ast.slots[slotName].attrs));
+                    params.push(...this.formatPropObject(ast.slots[slotName].attrs));
                 }
                 const slotInfo = `{${params.join(", ")}}`;
                 slotStr.push(`'${slotName}': ${slotInfo}`);
@@ -3954,14 +4490,10 @@ class CodeGenerator {
             this.helpers.add("markRaw");
             props.push(`slots: markRaw(${slotDef})`);
         }
-        const propStr = `{${props.join(",")}}`;
-        let propString = propStr;
-        if (ast.dynamicProps) {
-            propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${props.length ? ", " + propStr : ""})`;
-        }
+        let propString = this.getPropString(props, ast.dynamicProps);
         let propVar;
         if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
-            propVar = this.generateId("props");
+            propVar = generateId("props");
             this.define(propVar, propString);
             propString = propVar;
         }
@@ -3973,14 +4505,14 @@ class CodeGenerator {
         const key = this.generateComponentKey();
         let expr;
         if (ast.isDynamic) {
-            expr = this.generateId("Comp");
+            expr = generateId("Comp");
             this.define(expr, compileExpr(ast.name));
         }
         else {
             expr = `\`${ast.name}\``;
         }
         if (this.dev) {
-            this.addLine(`helpers.validateProps(${expr}, ${propVar}, ctx);`);
+            this.addLine(`helpers.validateProps(${expr}, ${propVar}, this);`);
         }
         if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
             // todo: check the forcenewblock condition
@@ -3990,8 +4522,12 @@ class CodeGenerator {
         if (ctx.tKeyExpr) {
             keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
         }
-        const blockArgs = `${expr}, ${propString}, ${keyArg}, node, ctx`;
-        let blockExpr = `component(${blockArgs})`;
+        let id = generateId("comp");
+        this.staticDefs.push({
+            id,
+            expr: `app.createComponent(${ast.isDynamic ? null : expr}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${!ast.props && !ast.dynamicProps})`,
+        });
+        let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
         if (ast.isDynamic) {
             blockExpr = `toggler(${expr}, ${blockExpr})`;
         }
@@ -4001,14 +4537,15 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(blockExpr, block, ctx);
+        return block.varName;
     }
     wrapWithEventCatcher(expr, on) {
         this.helpers.add("createCatcher");
-        let name = this.generateId("catcher");
+        let name = generateId("catcher");
         let spec = {};
         let handlers = [];
         for (let ev in on) {
-            let handlerId = this.generateId("hdlr");
+            let handlerId = generateId("hdlr");
             let idx = handlers.push(handlerId) - 1;
             spec[ev] = idx;
             const handler = this.generateHandlerCode(ev, on[ev]);
@@ -4023,26 +4560,39 @@ class CodeGenerator {
         let blockString;
         let slotName;
         let dynamic = false;
+        let isMultiple = false;
         if (ast.name.match(INTERP_REGEXP)) {
             dynamic = true;
+            isMultiple = true;
             slotName = interpolate(ast.name);
         }
         else {
             slotName = "'" + ast.name + "'";
+            isMultiple = isMultiple || this.slotNames.has(ast.name);
+            this.slotNames.add(ast.name);
         }
-        const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
+        const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
+        if (ast.attrs) {
+            delete ast.attrs["t-props"];
+        }
+        let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+        if (isMultiple) {
+            key = `${key} + \`${this.generateComponentKey()}\``;
+        }
+        const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
+        const scope = this.getPropString(props, dynProps);
         if (ast.defaultContent) {
             const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
-            blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
+            blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope}, ${name})`;
         }
         else {
             if (dynamic) {
-                let name = this.generateId("slot");
+                let name = generateId("slot");
                 this.define(name, slotName);
-                blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`;
+                blockString = `toggler(${name}, callSlot(ctx, node, ${key}, ${name}, ${dynamic}, ${scope}))`;
             }
             else {
-                blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
+                blockString = `callSlot(ctx, node, ${key}, ${slotName}, ${dynamic}, ${scope})`;
             }
         }
         // event handling
@@ -4054,42 +4604,50 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+        return block.varName;
     }
     compileTTranslation(ast, ctx) {
         if (ast.content) {
-            this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+            return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
         }
+        return null;
     }
     compileTPortal(ast, ctx) {
-        this.helpers.add("Portal");
+        if (!this.staticDefs.find((d) => d.id === "Portal")) {
+            this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
+        }
         let { block } = ctx;
         const name = this.compileInNewTarget("slot", ast.content, ctx);
         const key = this.generateComponentKey();
         let ctxStr = "ctx";
         if (this.target.loopLevel || !this.hasSafeContext) {
-            ctxStr = this.generateId("ctx");
+            ctxStr = generateId("ctx");
             this.helpers.add("capture");
-            this.define(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)`;
+        let id = generateId("comp");
+        this.staticDefs.push({
+            id,
+            expr: `app.createComponent(null, false, true, false, false)`,
+        });
+        const target = compileExpr(ast.target);
+        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
         if (block) {
             this.insertAnchor(block);
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+        return block.varName;
     }
 }
 
-// -----------------------------------------------------------------------------
-// AST Type definition
-// -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // Parser
 // -----------------------------------------------------------------------------
 const cache = new WeakMap();
 function parse(xml) {
     if (typeof xml === "string") {
-        const elem = parseXML$1(`<t>${xml}</t>`).firstChild;
+        const elem = parseXML(`<t>${xml}</t>`).firstChild;
         return _parse(elem);
     }
     let ast = cache.get(xml);
@@ -4191,7 +4749,7 @@ function parseDOMNode(node, ctx) {
         return null;
     }
     if (tagName.startsWith("block-")) {
-        throw new Error(`Invalid tag name: '${tagName}'`);
+        throw new OwlError(`Invalid tag name: '${tagName}'`);
     }
     ctx = Object.assign({}, ctx);
     if (tagName === "pre") {
@@ -4210,14 +4768,14 @@ function parseDOMNode(node, ctx) {
         const value = node.getAttribute(attr);
         if (attr.startsWith("t-on")) {
             if (attr === "t-on") {
-                throw new Error("Missing event name with t-on directive");
+                throw new OwlError("Missing event name with t-on directive");
             }
             on = on || {};
             on[attr.slice(5)] = value;
         }
         else if (attr.startsWith("t-model")) {
             if (!["input", "select", "textarea"].includes(tagName)) {
-                throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
+                throw new OwlError("The t-model directive only works with <input>, <textarea> and <select>");
             }
             let baseExpr, expr;
             if (hasDotAtTheEnd.test(value)) {
@@ -4231,7 +4789,7 @@ function parseDOMNode(node, ctx) {
                 expr = value.slice(index + 1, -1);
             }
             else {
-                throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+                throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
             }
             const typeAttr = node.getAttribute("type");
             const isInput = tagName === "input";
@@ -4261,11 +4819,11 @@ function parseDOMNode(node, ctx) {
             }
         }
         else if (attr.startsWith("block-")) {
-            throw new Error(`Invalid attribute: '${attr}'`);
+            throw new OwlError(`Invalid attribute: '${attr}'`);
         }
         else if (attr !== "t-name") {
             if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-                throw new Error(`Unknown QWeb directive: '${attr}'`);
+                throw new OwlError(`Unknown QWeb directive: '${attr}'`);
             }
             const tModel = ctx.tModelInfo;
             if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
@@ -4316,7 +4874,7 @@ function parseTEscNode(node, ctx) {
         };
     }
     if (ast.type === 11 /* TComponent */) {
-        throw new Error("t-esc is not supported on Component nodes");
+        throw new OwlError("t-esc is not supported on Component nodes");
     }
     return tesc;
 }
@@ -4364,7 +4922,7 @@ function parseTForEach(node, ctx) {
     node.removeAttribute("t-as");
     const key = node.getAttribute("t-key");
     if (!key) {
-        throw new Error(`"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`);
+        throw new OwlError(`"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`);
     }
     node.removeAttribute("t-key");
     const memo = node.getAttribute("t-memo") || "";
@@ -4411,10 +4969,12 @@ function parseTCall(node, ctx) {
         return null;
     }
     const subTemplate = node.getAttribute("t-call");
+    const context = node.getAttribute("t-call-context");
     node.removeAttribute("t-call");
+    node.removeAttribute("t-call-context");
     if (node.tagName !== "t") {
         const ast = parseNode(node, ctx);
-        const tcall = { type: 7 /* TCall */, name: subTemplate, body: null };
+        const tcall = { type: 7 /* TCall */, name: subTemplate, body: null, context };
         if (ast && ast.type === 2 /* DomNode */) {
             ast.content = [tcall];
             return ast;
@@ -4431,6 +4991,7 @@ function parseTCall(node, ctx) {
         type: 7 /* TCall */,
         name: subTemplate,
         body: body.length ? body : null,
+        context,
     };
 }
 // -----------------------------------------------------------------------------
@@ -4519,662 +5080,274 @@ const directiveErrorMap = new Map([
 function parseComponent(node, ctx) {
     let name = node.tagName;
     const firstLetter = name[0];
-    let isDynamic = node.hasAttribute("t-component");
-    if (isDynamic && name !== "t") {
-        throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
-    }
-    if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
-        return null;
-    }
-    if (isDynamic) {
-        name = node.getAttribute("t-component");
-        node.removeAttribute("t-component");
-    }
-    const dynamicProps = node.getAttribute("t-props");
-    node.removeAttribute("t-props");
-    const defaultSlotScope = node.getAttribute("t-slot-scope");
-    node.removeAttribute("t-slot-scope");
-    let on = null;
-    let props = null;
-    for (let name of node.getAttributeNames()) {
-        const value = node.getAttribute(name);
-        if (name.startsWith("t-")) {
-            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;
-        }
-    }
-    let slots = null;
-    if (node.hasChildNodes()) {
-        const clone = node.cloneNode(true);
-        // named slots
-        const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
-        for (let slotNode of slotNodes) {
-            if (slotNode.tagName !== "t") {
-                throw new Error(`Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`);
-            }
-            const name = slotNode.getAttribute("t-set-slot");
-            // check if this is defined in a sub component (in which case it should
-            // be ignored)
-            let el = slotNode.parentElement;
-            let isInSubComponent = false;
-            while (el !== clone) {
-                if (el.hasAttribute("t-component") || el.tagName[0] === el.tagName[0].toUpperCase()) {
-                    isInSubComponent = true;
-                    break;
-                }
-                el = el.parentElement;
-            }
-            if (isInSubComponent) {
-                continue;
-            }
-            slotNode.removeAttribute("t-set-slot");
-            slotNode.remove();
-            const slotAst = parseNode(slotNode, ctx);
-            if (slotAst) {
-                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;
-                    }
-                    else {
-                        attrs = attrs || {};
-                        attrs[attributeName] = value;
-                    }
-                }
-                slots = slots || {};
-                slots[name] = { content: slotAst, on, attrs, scope };
-            }
-        }
-        // default slot
-        const defaultContent = parseChildNodes(clone, ctx);
-        if (defaultContent) {
-            slots = slots || {};
-            slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
-        }
-    }
-    return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
-}
-// -----------------------------------------------------------------------------
-// Slots
-// -----------------------------------------------------------------------------
-function parseTSlot(node, ctx) {
-    if (!node.hasAttribute("t-slot")) {
-        return null;
-    }
-    const name = node.getAttribute("t-slot");
-    node.removeAttribute("t-slot");
-    let attrs = null;
-    let on = null;
-    for (let attributeName of node.getAttributeNames()) {
-        const value = node.getAttribute(attributeName);
-        if (attributeName.startsWith("t-on-")) {
-            on = on || {};
-            on[attributeName.slice(5)] = value;
-        }
-        else {
-            attrs = attrs || {};
-            attrs[attributeName] = value;
-        }
-    }
-    return {
-        type: 14 /* TSlot */,
-        name,
-        attrs,
-        on,
-        defaultContent: parseChildNodes(node, ctx),
-    };
-}
-function parseTTranslation(node, ctx) {
-    if (node.getAttribute("t-translation") !== "off") {
-        return null;
-    }
-    node.removeAttribute("t-translation");
-    return {
-        type: 16 /* TTranslation */,
-        content: parseNode(node, ctx),
-    };
-}
-// -----------------------------------------------------------------------------
-// Portal
-// -----------------------------------------------------------------------------
-function parseTPortal(node, ctx) {
-    if (!node.hasAttribute("t-portal")) {
-        return null;
-    }
-    const target = node.getAttribute("t-portal");
-    node.removeAttribute("t-portal");
-    const content = parseNode(node, ctx);
-    if (!content) {
-        return {
-            type: 0 /* Text */,
-            value: "",
-        };
-    }
-    return {
-        type: 17 /* TPortal */,
-        target,
-        content,
-    };
-}
-// -----------------------------------------------------------------------------
-// helpers
-// -----------------------------------------------------------------------------
-/**
- * Parse all the child nodes of a given node and return a list of ast elements
- */
-function parseChildren(node, ctx) {
-    const children = [];
-    for (let child of node.childNodes) {
-        const childAst = parseNode(child, ctx);
-        if (childAst) {
-            if (childAst.type === 3 /* Multi */) {
-                children.push(...childAst.content);
-            }
-            else {
-                children.push(childAst);
-            }
-        }
-    }
-    return children;
-}
-/**
- * Parse all the child nodes of a given node and return an ast if possible.
- * In the case there are multiple children, they are wrapped in a astmulti.
- */
-function parseChildNodes(node, ctx) {
-    const children = parseChildren(node, ctx);
-    switch (children.length) {
-        case 0:
-            return null;
-        case 1:
-            return children[0];
-        default:
-            return { type: 3 /* Multi */, content: children };
-    }
-}
-/**
- * Normalizes the content of an Element so that t-if/t-elif/t-else directives
- * immediately follow one another (by removing empty text nodes or comments).
- * Throws an error when a conditional branching statement is malformed. This
- * function modifies the Element in place.
- *
- * @param el the element containing the tree that should be normalized
- */
-function normalizeTIf(el) {
-    let tbranch = el.querySelectorAll("[t-elif], [t-else]");
-    for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
-        let node = tbranch[i];
-        let prevElem = node.previousElementSibling;
-        let pattr = (name) => prevElem.getAttribute(name);
-        let nattr = (name) => +!!node.getAttribute(name);
-        if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
-            if (pattr("t-foreach")) {
-                throw new Error("t-if cannot stay at the same level as t-foreach when using t-elif or t-else");
-            }
-            if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
-                return a + b;
-            }) > 1) {
-                throw new Error("Only one conditional branching directive is allowed per node");
-            }
-            // All text (with only spaces) and comment nodes (nodeType 8) between
-            // branch nodes are removed
-            let textNode;
-            while ((textNode = node.previousSibling) !== prevElem) {
-                if (textNode.nodeValue.trim().length && textNode.nodeType !== 8) {
-                    throw new Error("text is not allowed between branching directives");
-                }
-                textNode.remove();
-            }
-        }
-        else {
-            throw new Error("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
-        }
-    }
-}
-/**
- * Normalizes the content of an Element so that t-esc directives on components
- * are removed and instead places a <t t-esc=""> as the default slot of the
- * component. Also throws if the component already has content. This function
- * modifies the Element in place.
- *
- * @param el the element containing the tree that should be normalized
- */
-function normalizeTEsc(el) {
-    const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
-    for (const el of elements) {
-        if (el.childNodes.length) {
-            throw new Error("Cannot have t-esc on a component that already has content");
-        }
-        const value = el.getAttribute("t-esc");
-        el.removeAttribute("t-esc");
-        const t = el.ownerDocument.createElement("t");
-        if (value != null) {
-            t.setAttribute("t-esc", value);
-        }
-        el.appendChild(t);
-    }
-}
-/**
- * Normalizes the tree inside a given element and do some preliminary validation
- * on it. This function modifies the Element in place.
- *
- * @param el the element containing the tree that should be normalized
- */
-function normalizeXML(el) {
-    normalizeTIf(el);
-    normalizeTEsc(el);
-}
-/**
- * Parses an XML string into an XML document, throwing errors on parser errors
- * instead of returning an XML document containing the parseerror.
- *
- * @param xml the string to parse
- * @returns an XML document corresponding to the content of the string
- */
-function parseXML$1(xml) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(xml, "text/xml");
-    if (doc.getElementsByTagName("parsererror").length) {
-        let msg = "Invalid XML in template.";
-        const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-        if (parsererrorText) {
-            msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-            const re = /\d+/g;
-            const firstMatch = re.exec(parsererrorText);
-            if (firstMatch) {
-                const lineNumber = Number(firstMatch[0]);
-                const line = xml.split("\n")[lineNumber - 1];
-                const secondMatch = re.exec(parsererrorText);
-                if (line && secondMatch) {
-                    const columnIndex = Number(secondMatch[0]) - 1;
-                    if (line[columnIndex]) {
-                        msg +=
-                            `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-                                `${line}\n${"-".repeat(columnIndex - 1)}^`;
-                    }
-                }
-            }
-        }
-        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);
-}
-
-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;
-                });
-            }
-            return result;
-        }
-        catch (cause) {
-            if (cause instanceof Error) {
-                error.message += `"${cause.message}"`;
-            }
-            throw error;
-        }
-    };
-}
-// -----------------------------------------------------------------------------
-//  hooks
-// -----------------------------------------------------------------------------
-function onWillStart(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
-}
-function onWillUpdateProps(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
-}
-function onMounted(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
-}
-function onWillPatch(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
-}
-function onPatched(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.patched.push(decorate(fn.bind(node.component), "onPatched"));
-}
-function onWillUnmount(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
-}
-function onWillDestroy(fn) {
-    const node = getCurrent();
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
-}
-function onWillRender(fn) {
-    const node = getCurrent();
-    const renderFn = node.renderFn;
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    fn = decorate(fn.bind(node.component), "onWillRender");
-    node.renderFn = () => {
-        fn();
-        return renderFn();
-    };
-}
-function onRendered(fn) {
-    const node = getCurrent();
-    const renderFn = node.renderFn;
-    const decorate = node.app.dev ? wrapError : (fn) => fn;
-    fn = decorate(fn.bind(node.component), "onRendered");
-    node.renderFn = () => {
-        const result = renderFn();
-        fn();
-        return result;
-    };
-}
-function onError(callback) {
-    const node = getCurrent();
-    let handlers = nodeErrorHandlers.get(node);
-    if (!handlers) {
-        handlers = [];
-        nodeErrorHandlers.set(node, handlers);
-    }
-    handlers.push(callback.bind(node.component));
-}
-
-class Component {
-    constructor(props, env, node) {
-        this.props = props;
-        this.env = env;
-        this.__owl__ = node;
-    }
-    setup() { }
-    render(deep = false) {
-        this.__owl__.render(deep);
-    }
-}
-Component.template = "";
-
-const VText = text("").constructor;
-class VPortal extends VText {
-    constructor(selector, realBDom) {
-        super("");
-        this.target = null;
-        this.selector = selector;
-        this.realBDom = realBDom;
-    }
-    mount(parent, anchor) {
-        super.mount(parent, anchor);
-        this.target = document.querySelector(this.selector);
-        if (!this.target) {
-            let el = this.el;
-            while (el && el.parentElement instanceof HTMLElement) {
-                el = el.parentElement;
-            }
-            this.target = el && el.querySelector(this.selector);
-            if (!this.target) {
-                throw new Error("invalid portal target");
-            }
-        }
-        this.realBDom.mount(this.target, null);
+    let isDynamic = node.hasAttribute("t-component");
+    if (isDynamic && name !== "t") {
+        throw new OwlError(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
     }
-    beforeRemove() {
-        this.realBDom.beforeRemove();
+    if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
+        return null;
     }
-    remove() {
-        if (this.realBDom) {
-            super.remove();
-            this.realBDom.remove();
-            this.realBDom = null;
-        }
+    if (isDynamic) {
+        name = node.getAttribute("t-component");
+        node.removeAttribute("t-component");
     }
-    patch(other) {
-        super.patch(other);
-        if (this.realBDom) {
-            this.realBDom.patch(other.realBDom, true);
+    const dynamicProps = node.getAttribute("t-props");
+    node.removeAttribute("t-props");
+    const defaultSlotScope = node.getAttribute("t-slot-scope");
+    node.removeAttribute("t-slot-scope");
+    let on = null;
+    let props = null;
+    for (let name of node.getAttributeNames()) {
+        const value = node.getAttribute(name);
+        if (name.startsWith("t-")) {
+            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 OwlError(message || `unsupported directive on Component: ${name}`);
+            }
         }
         else {
-            this.realBDom = other.realBDom;
-            this.realBDom.mount(this.target, null);
+            props = props || {};
+            props[name] = value;
         }
     }
-}
-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();
+    let slots = null;
+    if (node.hasChildNodes()) {
+        const clone = node.cloneNode(true);
+        // named slots
+        const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
+        for (let slotNode of slotNodes) {
+            if (slotNode.tagName !== "t") {
+                throw new OwlError(`Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`);
             }
-        });
+            const name = slotNode.getAttribute("t-set-slot");
+            // check if this is defined in a sub component (in which case it should
+            // be ignored)
+            let el = slotNode.parentElement;
+            let isInSubComponent = false;
+            while (el !== clone) {
+                if (el.hasAttribute("t-component") || el.tagName[0] === el.tagName[0].toUpperCase()) {
+                    isInSubComponent = true;
+                    break;
+                }
+                el = el.parentElement;
+            }
+            if (isInSubComponent) {
+                continue;
+            }
+            slotNode.removeAttribute("t-set-slot");
+            slotNode.remove();
+            const slotAst = parseNode(slotNode, ctx);
+            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;
+                }
+                else {
+                    attrs = attrs || {};
+                    attrs[attributeName] = value;
+                }
+            }
+            slots = slots || {};
+            slots[name] = { content: slotAst, on, attrs, scope };
+        }
+        // default slot
+        const defaultContent = parseChildNodes(clone, ctx);
+        if (defaultContent) {
+            slots = slots || {};
+            slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
+        }
     }
+    return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
 }
-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;
+// -----------------------------------------------------------------------------
+// Slots
+// -----------------------------------------------------------------------------
+function parseTSlot(node, ctx) {
+    if (!node.hasAttribute("t-slot")) {
+        return null;
     }
-    const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
-    if (defaultContent) {
-        let child1 = undefined;
-        let child2 = undefined;
-        if (slotBDom) {
-            child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+    const name = node.getAttribute("t-slot");
+    node.removeAttribute("t-slot");
+    let attrs = null;
+    let on = null;
+    for (let attributeName of node.getAttributeNames()) {
+        const value = node.getAttribute(attributeName);
+        if (attributeName.startsWith("t-on-")) {
+            on = on || {};
+            on[attributeName.slice(5)] = value;
         }
         else {
-            child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+            attrs = attrs || {};
+            attrs[attributeName] = value;
         }
-        return multi([child1, child2]);
     }
-    return slotBDom || text("");
+    return {
+        type: 14 /* TSlot */,
+        name,
+        attrs,
+        on,
+        defaultContent: parseChildNodes(node, ctx),
+    };
 }
-function capture(ctx) {
-    const component = ctx.__owl__.component;
-    const result = Object.create(component);
-    for (let k in ctx) {
-        result[k] = ctx[k];
+function parseTTranslation(node, ctx) {
+    if (node.getAttribute("t-translation") !== "off") {
+        return null;
     }
-    return result;
-}
-function withKey(elem, k) {
-    elem.key = k;
-    return elem;
+    node.removeAttribute("t-translation");
+    return {
+        type: 16 /* TTranslation */,
+        content: parseNode(node, ctx),
+    };
 }
-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);
+// -----------------------------------------------------------------------------
+// Portal
+// -----------------------------------------------------------------------------
+function parseTPortal(node, ctx) {
+    if (!node.hasAttribute("t-portal")) {
+        return null;
     }
-    else {
-        throw new Error("Invalid loop expression");
+    const target = node.getAttribute("t-portal");
+    node.removeAttribute("t-portal");
+    const content = parseNode(node, ctx);
+    if (!content) {
+        return {
+            type: 0 /* Text */,
+            value: "",
+        };
     }
-    const n = values.length;
-    return [keys, values, n, new Array(n)];
+    return {
+        type: 17 /* TPortal */,
+        target,
+        content,
+    };
 }
-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;
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+/**
+ * Parse all the child nodes of a given node and return a list of ast elements
+ */
+function parseChildren(node, ctx) {
+    const children = [];
+    for (let child of node.childNodes) {
+        const childAst = parseNode(child, ctx);
+        if (childAst) {
+            if (childAst.type === 3 /* Multi */) {
+                children.push(...childAst.content);
+            }
+            else {
+                children.push(childAst);
+            }
         }
-        ctx = newCtx;
     }
-    ctx[key] = value;
+    return children;
 }
-function toNumber(val) {
-    const n = parseFloat(val);
-    return isNaN(n) ? val : n;
+/**
+ * Parse all the child nodes of a given node and return an ast if possible.
+ * In the case there are multiple children, they are wrapped in a astmulti.
+ */
+function parseChildNodes(node, ctx) {
+    const children = parseChildren(node, ctx);
+    switch (children.length) {
+        case 0:
+            return null;
+        case 1:
+            return children[0];
+        default:
+            return { type: 3 /* Multi */, content: children };
+    }
 }
-function shallowEqual(l1, l2) {
-    for (let i = 0, l = l1.length; i < l; i++) {
-        if (l1[i] !== l2[i]) {
-            return false;
+/**
+ * Normalizes the content of an Element so that t-if/t-elif/t-else directives
+ * immediately follow one another (by removing empty text nodes or comments).
+ * Throws an error when a conditional branching statement is malformed. This
+ * function modifies the Element in place.
+ *
+ * @param el the element containing the tree that should be normalized
+ */
+function normalizeTIf(el) {
+    let tbranch = el.querySelectorAll("[t-elif], [t-else]");
+    for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
+        let node = tbranch[i];
+        let prevElem = node.previousElementSibling;
+        let pattr = (name) => prevElem.getAttribute(name);
+        let nattr = (name) => +!!node.getAttribute(name);
+        if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
+            if (pattr("t-foreach")) {
+                throw new OwlError("t-if cannot stay at the same level as t-foreach when using t-elif or t-else");
+            }
+            if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
+                return a + b;
+            }) > 1) {
+                throw new OwlError("Only one conditional branching directive is allowed per node");
+            }
+            // All text (with only spaces) and comment nodes (nodeType 8) between
+            // branch nodes are removed
+            let textNode;
+            while ((textNode = node.previousSibling) !== prevElem) {
+                if (textNode.nodeValue.trim().length && textNode.nodeType !== 8) {
+                    throw new OwlError("text is not allowed between branching directives");
+                }
+                textNode.remove();
+            }
+        }
+        else {
+            throw new OwlError("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
         }
-    }
-    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`
+/**
+ * Normalizes the content of an Element so that t-esc directives on components
+ * are removed and instead places a <t t-esc=""> as the default slot of the
+ * component. Also throws if the component already has content. This function
+ * modifies the Element in place.
+ *
+ * @param el the element containing the tree that should be normalized
  */
-function 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");
-            }
+function normalizeTEsc(el) {
+    const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+    for (const el of elements) {
+        if (el.childNodes.length) {
+            throw new OwlError("Cannot have t-esc on a component that already has content");
         }
-        if (count === 0 || el) {
-            refs[name] = el;
+        const value = el.getAttribute("t-esc");
+        el.removeAttribute("t-esc");
+        const t = el.ownerDocument.createElement("t");
+        if (value != null) {
+            t.setAttribute("t-esc", value);
         }
-    };
+        el.appendChild(t);
+    }
 }
-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 };
+/**
+ * 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(xml) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(xml, "text/xml");
@@ -5199,87 +5372,134 @@ function parseXML(xml) {
                 }
             }
         }
-        throw new Error(msg);
+        throw new OwlError(msg);
     }
     return doc;
-}
-/**
- * Returns the helpers object that will be injected in each template closure
- * function
- */
-function makeHelpers(getTemplate) {
-    return Object.assign({}, helpers, {
-        Portal,
-        markRaw,
-        getTemplate,
-        call: (owner, subTemplate, ctx, parent, key) => {
-            const template = getTemplate(subTemplate);
-            return toggler(subTemplate, template.call(owner, ctx, parent, key));
-        },
-    });
-}
-class TemplateSet {
-    constructor(config = {}) {
-        this.rawTemplates = Object.create(globalTemplates);
-        this.templates = {};
-        this.dev = config.dev || false;
-        this.translateFn = config.translateFn;
-        this.translatableAttributes = config.translatableAttributes;
-        if (config.templates) {
-            this.addTemplates(config.templates);
-        }
-        this.helpers = makeHelpers(this.getTemplate.bind(this));
-    }
-    addTemplate(name, template, options = {}) {
-        if (name in this.rawTemplates && !options.allowDuplicate) {
-            throw new Error(`Template ${name} already defined`);
+}
+
+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("app, bdom, helpers", code);
+}
+
+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;
+            }
         }
-        this.rawTemplates[name] = template;
     }
-    addTemplates(xml, options = {}) {
-        if (!xml) {
-            // empty string
-            return;
+    // 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 OwlError(`Invalid handler (expected a function, received: '${handler}')`);
         }
-        xml = xml instanceof Document ? xml : parseXML(xml);
-        for (const template of xml.querySelectorAll("[t-name]")) {
-            const name = template.getAttribute("t-name");
-            this.addTemplate(name, template, options);
+        let node = data[1] ? data[1].__owl__ : null;
+        if (node ? node.status === 1 /* MOUNTED */ : true) {
+            handler.call(node ? node.component : null, ev);
         }
     }
-    getTemplate(name) {
-        if (!(name in this.templates)) {
-            const rawTemplate = this.rawTemplates[name];
-            if (rawTemplate === undefined) {
-                let extraInfo = "";
-                try {
-                    const componentName = getCurrent().component.constructor.name;
-                    extraInfo = ` (for component "${componentName}")`;
+    return stopped;
+};
+
+// -----------------------------------------------------------------------------
+//  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.node.fiber === f) {
+                    f.render();
                 }
-                catch { }
-                throw new Error(`Missing template: "${name}"${extraInfo}`);
             }
-            const templateFn = this._compileTemplate(name, rawTemplate);
-            // first add a function to lazily get the template, in case there is a
-            // recursive call to the template name
-            const templates = this.templates;
-            this.templates[name] = function (context, parent) {
-                return templates[name].call(this, context, parent);
-            };
-            const template = templateFn(bdom, this.helpers);
-            this.templates[name] = template;
         }
-        return this.templates[name];
+        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);
+                    }
+                }
+            });
+        }
     }
-    _compileTemplate(name, template) {
-        return compile(template, {
-            name,
-            dev: this.dev,
-            translateFn: this.translateFn,
-            translatableAttributes: this.translatableAttributes,
-        });
+    processFiber(fiber) {
+        if (fiber.root !== fiber) {
+            this.tasks.delete(fiber);
+            return;
+        }
+        const hasError = fibersInError.has(fiber);
+        if (hasError && fiber.counter !== 0) {
+            this.tasks.delete(fiber);
+            return;
+        }
+        if (fiber.node.status === 2 /* DESTROYED */) {
+            this.tasks.delete(fiber);
+            return;
+        }
+        if (fiber.counter === 0) {
+            if (!hasError) {
+                fiber.complete();
+            }
+            this.tasks.delete(fiber);
+        }
     }
-}
+}
+// capture the value of requestAnimationFrame as soon as possible, to avoid
+// interactions with other code, such as test frameworks that override them
+Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
 
 let hasBeenLogged = false;
 const DEV_MSG = () => {
@@ -5298,6 +5518,7 @@ class App extends TemplateSet {
         if (config.test) {
             this.dev = true;
         }
+        this.warnIfNoStaticProps = config.warnIfNoStaticProps || false;
         if (this.dev && !config.test && !hasBeenLogged) {
             console.info(DEV_MSG());
             hasBeenLogged = true;
@@ -5309,13 +5530,16 @@ class App extends TemplateSet {
     }
     mount(target, options) {
         App.validateTarget(target);
+        if (this.dev) {
+            validateProps(this.Root, this.props, { __owl__: { app: this } });
+        }
         const node = this.makeNode(this.Root, this.props);
         const prom = this.mountNode(node, target, options);
         this.root = node;
         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) => {
@@ -5333,10 +5557,7 @@ class App extends TemplateSet {
                 nodeErrorHandlers.set(node, handlers);
             }
             handlers.unshift((e) => {
-                if (isResolved) {
-                    console.error(e);
-                }
-                else {
+                if (!isResolved) {
                     reject(e);
                 }
                 throw e;
@@ -5347,9 +5568,62 @@ class App extends TemplateSet {
     }
     destroy() {
         if (this.root) {
+            this.scheduler.flush();
             this.root.destroy();
         }
     }
+    createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, hasNoProp) {
+        const isDynamic = !isStatic;
+        function _arePropsDifferent(props1, props2) {
+            for (let k in props1) {
+                if (props1[k] !== props2[k]) {
+                    return true;
+                }
+            }
+            return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
+        }
+        const arePropsDifferent = hasSlotsProp
+            ? (_1, _2) => true
+            : hasNoProp
+                ? (_1, _2) => false
+                : _arePropsDifferent;
+        const updateAndRender = ComponentNode.prototype.updateAndRender;
+        const initiateRender = ComponentNode.prototype.initiateRender;
+        return (props, key, ctx, parent, C) => {
+            let children = ctx.children;
+            let node = children[key];
+            if (isDynamic && node && node.component.constructor !== C) {
+                node = undefined;
+            }
+            const parentFiber = ctx.fiber;
+            if (node) {
+                if (arePropsDifferent(node.props, props) || parentFiber.deep || node.forceNextRender) {
+                    node.forceNextRender = false;
+                    updateAndRender.call(node, props, parentFiber);
+                }
+            }
+            else {
+                // new component
+                if (isStatic) {
+                    C = parent.constructor.components[name];
+                    if (!C) {
+                        throw new OwlError(`Cannot find the definition of component "${name}"`);
+                    }
+                    else if (!(C.prototype instanceof Component)) {
+                        throw new OwlError(`"${name}" is not a Component. It must inherit from the Component class`);
+                    }
+                }
+                node = new ComponentNode(C, props, this, ctx, key);
+                children[key] = node;
+                initiateRender.call(node, new Fiber(node, parentFiber));
+            }
+            parentFiber.childrenMap[key] = node;
+            return node;
+        };
+    }
+    handleError(...args) {
+        return handleError(...args);
+    }
 }
 App.validateTarget = validateTarget;
 async function mount(C, target, config = {}) {
@@ -5412,10 +5686,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
@@ -5433,18 +5703,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
@@ -5488,10 +5760,19 @@ const blockDom = {
 };
 const __info__ = {};
 
-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 };
+TemplateSet.prototype._compileTemplate = function _compileTemplate(name, template) {
+    return compile(template, {
+        name,
+        dev: this.dev,
+        translateFn: this.translateFn,
+        translatableAttributes: this.translatableAttributes,
+    });
+};
+
+export { App, Component, EventBus, OwlError, __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, validate, whenReady, xml };
 
 
-__info__.version = '2.0.0-beta.3';
-__info__.date = '2022-03-08T11:47:49.105Z';
-__info__.hash = 'c356351';
+__info__.version = '2.0.0';
+__info__.date = '2022-10-07T13:28:10.216Z';
+__info__.hash = 'a1f2282';
 __info__.url = 'https://github.com/odoo/owl';