@odoo/owl 3.0.0-alpha.20 → 3.0.0-alpha.21

package/dist/owl.iife.js

@@ -130,10 +130,16 @@
         return new VToggler(key, child);
     }
 
-    const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
-    const tokenList = DOMTokenList.prototype;
-    const tokenListAdd = tokenList.add;
-    const tokenListRemove = tokenList.remove;
+    let elemSetAttribute;
+    let removeAttribute;
+    let tokenListAdd;
+    let tokenListRemove;
+    if (typeof Element !== "undefined") {
+        ({ setAttribute: elemSetAttribute, removeAttribute } = Element.prototype);
+        const tokenList = DOMTokenList.prototype;
+        tokenListAdd = tokenList.add;
+        tokenListRemove = tokenList.remove;
+    }
     const isArray = Array.isArray;
     const { split, trim } = String.prototype;
     const wordRegexp = /\s+/;
@@ -165,6 +171,9 @@
             if (attrs[0] === "class") {
                 setClass.call(this, attrs[1]);
             }
+            else if (attrs[0] === "style") {
+                setStyle.call(this, attrs[1]);
+            }
             else {
                 setAttribute.call(this, attrs[0], attrs[1]);
             }
@@ -174,6 +183,9 @@
                 if (k === "class") {
                     setClass.call(this, attrs[k]);
                 }
+                else if (k === "style") {
+                    setStyle.call(this, attrs[k]);
+                }
                 else {
                     setAttribute.call(this, k, attrs[k]);
                 }
@@ -191,6 +203,9 @@
                 if (name === "class") {
                     updateClass.call(this, val, oldAttrs[1]);
                 }
+                else if (name === "style") {
+                    updateStyle.call(this, val, oldAttrs[1]);
+                }
                 else {
                     setAttribute.call(this, name, val);
                 }
@@ -206,6 +221,9 @@
                     if (k === "class") {
                         updateClass.call(this, "", oldAttrs[k]);
                     }
+                    else if (k === "style") {
+                        updateStyle.call(this, "", oldAttrs[k]);
+                    }
                     else {
                         removeAttribute.call(this, k);
                     }
@@ -217,6 +235,9 @@
                     if (k === "class") {
                         updateClass.call(this, val, oldAttrs[k]);
                     }
+                    else if (k === "style") {
+                        updateStyle.call(this, val, oldAttrs[k]);
+                    }
                     else {
                         setAttribute.call(this, k, val);
                     }
@@ -289,6 +310,80 @@
             }
         }
     }
+    // ---------------------------------------------------------------------------
+    // Style
+    // ---------------------------------------------------------------------------
+    const CSS_PROP_CACHE = {};
+    function toKebabCase(prop) {
+        if (prop in CSS_PROP_CACHE) {
+            return CSS_PROP_CACHE[prop];
+        }
+        const result = prop.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+        CSS_PROP_CACHE[prop] = result;
+        return result;
+    }
+    function toStyleObj(expr) {
+        const result = {};
+        switch (typeof expr) {
+            case "string": {
+                const str = trim.call(expr);
+                if (!str) {
+                    return {};
+                }
+                const parts = str.split(";");
+                for (let part of parts) {
+                    part = trim.call(part);
+                    if (!part) {
+                        continue;
+                    }
+                    const colonIdx = part.indexOf(":");
+                    if (colonIdx === -1) {
+                        continue;
+                    }
+                    const prop = trim.call(part.slice(0, colonIdx));
+                    const value = trim.call(part.slice(colonIdx + 1));
+                    if (prop && value) {
+                        result[prop] = value;
+                    }
+                }
+                return result;
+            }
+            case "object":
+                for (let prop in expr) {
+                    const value = expr[prop];
+                    if (value || value === 0) {
+                        result[toKebabCase(prop)] = String(value);
+                    }
+                }
+                return result;
+            default:
+                return {};
+        }
+    }
+    function setStyle(val) {
+        val = val === "" ? {} : toStyleObj(val);
+        const style = this.style;
+        for (let prop in val) {
+            style.setProperty(prop, val[prop]);
+        }
+    }
+    function updateStyle(val, oldVal) {
+        oldVal = oldVal === "" ? {} : toStyleObj(oldVal);
+        val = val === "" ? {} : toStyleObj(val);
+        const style = this.style;
+        // remove old styles
+        for (let prop in oldVal) {
+            if (!(prop in val)) {
+                style.removeProperty(prop);
+            }
+        }
+        // set new/changed styles
+        for (let prop in val) {
+            if (val[prop] !== oldVal[prop]) {
+                style.setProperty(prop, val[prop]);
+            }
+        }
+    }
 
     /**
      * Creates a batched version of a callback so that all calls to it in the same
@@ -424,16 +519,17 @@
     function createEventHandler(rawEvent) {
         const eventName = rawEvent.split(".")[0];
         const capture = rawEvent.includes(".capture");
+        const passive = rawEvent.includes(".passive");
         if (rawEvent.includes(".synthetic")) {
-            return createSyntheticHandler(eventName, capture);
+            return createSyntheticHandler(eventName, capture, passive);
         }
         else {
-            return createElementHandler(eventName, capture);
+            return createElementHandler(eventName, capture, passive);
         }
     }
     // Native listener
     let nextNativeEventId = 1;
-    function createElementHandler(evName, capture = false) {
+    function createElementHandler(evName, capture = false, passive = false) {
         let eventKey = `__event__${evName}_${nextNativeEventId++}`;
         if (capture) {
             eventKey = `${eventKey}_capture`;
@@ -447,13 +543,14 @@
                 return;
             config$1.mainEventHandler(data, ev, currentTarget);
         }
+        const options = { capture, passive };
         function setup(data) {
             this[eventKey] = data;
-            this.addEventListener(evName, listener, { capture });
+            this.addEventListener(evName, listener, options);
         }
         function remove() {
             delete this[eventKey];
-            this.removeEventListener(evName, listener, { capture });
+            this.removeEventListener(evName, listener, options);
         }
         function update(data) {
             this[eventKey] = data;
@@ -463,12 +560,12 @@
     // Synthetic handler: a form of event delegation that allows placing only one
     // listener per event type.
     let nextSyntheticEventId = 1;
-    function createSyntheticHandler(evName, capture = false) {
+    function createSyntheticHandler(evName, capture = false, passive = false) {
         let eventKey = `__event__synthetic_${evName}`;
         if (capture) {
             eventKey = `${eventKey}_capture`;
         }
-        setupSyntheticEvent(evName, eventKey, capture);
+        setupSyntheticEvent(evName, eventKey, capture, passive);
         const currentId = nextSyntheticEventId++;
         function setup(data) {
             const _data = this[eventKey] || {};
@@ -495,21 +592,27 @@
         }
     }
     const CONFIGURED_SYNTHETIC_EVENTS = {};
-    function setupSyntheticEvent(evName, eventKey, capture = false) {
+    function setupSyntheticEvent(evName, eventKey, capture = false, passive = false) {
         if (CONFIGURED_SYNTHETIC_EVENTS[eventKey]) {
             return;
         }
         document.addEventListener(evName, (event) => nativeToSyntheticEvent(eventKey, event), {
             capture,
+            passive,
         });
         CONFIGURED_SYNTHETIC_EVENTS[eventKey] = true;
     }
 
     const getDescriptor$3 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
-    const nodeProto$4 = Node.prototype;
-    const nodeInsertBefore$3 = nodeProto$4.insertBefore;
-    const nodeSetTextContent$1 = getDescriptor$3(nodeProto$4, "textContent").set;
-    const nodeRemoveChild$3 = nodeProto$4.removeChild;
+    let nodeInsertBefore$3;
+    let nodeSetTextContent$1;
+    let nodeRemoveChild$3;
+    if (typeof Node !== "undefined") {
+        const nodeProto = Node.prototype;
+        nodeInsertBefore$3 = nodeProto.insertBefore;
+        nodeSetTextContent$1 = getDescriptor$3(nodeProto, "textContent").set;
+        nodeRemoveChild$3 = nodeProto.removeChild;
+    }
     // -----------------------------------------------------------------------------
     // Multi NODE
     // -----------------------------------------------------------------------------
@@ -649,11 +752,15 @@
     }
 
     const getDescriptor$2 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
-    const nodeProto$3 = Node.prototype;
-    const characterDataProto$1 = CharacterData.prototype;
-    const nodeInsertBefore$2 = nodeProto$3.insertBefore;
-    const characterDataSetData$1 = getDescriptor$2(characterDataProto$1, "data").set;
-    const nodeRemoveChild$2 = nodeProto$3.removeChild;
+    let nodeInsertBefore$2;
+    let characterDataSetData$1;
+    let nodeRemoveChild$2;
+    if (typeof Node !== "undefined") {
+        const nodeProto = Node.prototype;
+        nodeInsertBefore$2 = nodeProto.insertBefore;
+        nodeRemoveChild$2 = nodeProto.removeChild;
+        characterDataSetData$1 = getDescriptor$2(CharacterData.prototype, "data").set;
+    }
     class VSimpleNode {
         text;
         parentEl;
@@ -684,7 +791,7 @@
             return this.text;
         }
     }
-    let VText$1 = class VText extends VSimpleNode {
+    class VText extends VSimpleNode {
         mount(parent, afterNode) {
             this.mountNode(document.createTextNode(toText(this.text)), parent, afterNode);
         }
@@ -695,7 +802,7 @@
                 this.text = text2;
             }
         }
-    };
+    }
     class VComment extends VSimpleNode {
         mount(parent, afterNode) {
             this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
@@ -703,7 +810,7 @@
         patch() { }
     }
     function text(str) {
-        return new VText$1(str);
+        return new VText(str);
     }
     function comment(str) {
         return new VComment(str);
@@ -722,12 +829,18 @@
     }
 
     const getDescriptor$1 = (o, p) => Object.getOwnPropertyDescriptor(o, p);
-    const nodeProto$2 = Node.prototype;
-    const elementProto = Element.prototype;
-    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;
+    let nodeProto;
+    let elementProto;
+    let characterDataSetData;
+    let nodeGetFirstChild;
+    let nodeGetNextSibling;
+    if (typeof Node !== "undefined") {
+        nodeProto = Node.prototype;
+        elementProto = Element.prototype;
+        characterDataSetData = getDescriptor$1(CharacterData.prototype, "data").set;
+        nodeGetFirstChild = getDescriptor$1(nodeProto, "firstChild").get;
+        nodeGetNextSibling = getDescriptor$1(nodeProto, "nextSibling").get;
+    }
     const NO_OP = () => { };
     function makePropSetter(name) {
         return function setProp(value) {
@@ -1022,6 +1135,10 @@
                         setter = setClass;
                         updater = updateClass;
                     }
+                    else if (info.name === "style") {
+                        setter = setStyle;
+                        updater = updateStyle;
+                    }
                     else {
                         setter = createAttrUpdater(info.name);
                         updater = setter;
@@ -1107,8 +1224,8 @@
             (((c.afterRefIdx ?? 0) & 0x7fff) << 16));
         // these values are defined here to make them faster to lookup in the class
         // block scope
-        const nodeCloneNode = nodeProto$2.cloneNode;
-        const nodeInsertBefore = nodeProto$2.insertBefore;
+        const nodeCloneNode = nodeProto.cloneNode;
+        const nodeInsertBefore = nodeProto.insertBefore;
         const elementRemove = elementProto.remove;
         class Block {
             el;
@@ -1164,8 +1281,7 @@
                         locSetters[i].call(refs[locRefIdxs[i]], data[i]);
                     }
                 }
-                nodeInsertBefore.call(parent, el, afterNode);
-                // preparing all children
+                // preparing all children (off-DOM, before inserting el into the live document)
                 if (childN) {
                     const children = this.children;
                     for (let i = 0; i < childN; i++) {
@@ -1179,6 +1295,7 @@
                         }
                     }
                 }
+                nodeInsertBefore.call(parent, el, afterNode);
                 this.el = el;
                 this.parentEl = parent;
                 if (cbRefs.length) {
@@ -1256,11 +1373,17 @@
     }
 
     const getDescriptor = (o, p) => Object.getOwnPropertyDescriptor(o, p);
-    const nodeProto$1 = Node.prototype;
-    const nodeInsertBefore$1 = nodeProto$1.insertBefore;
-    const nodeAppendChild = nodeProto$1.appendChild;
-    const nodeRemoveChild$1 = nodeProto$1.removeChild;
-    const nodeSetTextContent = getDescriptor(nodeProto$1, "textContent").set;
+    let nodeInsertBefore$1;
+    let nodeAppendChild;
+    let nodeRemoveChild$1;
+    let nodeSetTextContent;
+    if (typeof Node !== "undefined") {
+        const nodeProto = Node.prototype;
+        nodeInsertBefore$1 = nodeProto.insertBefore;
+        nodeAppendChild = nodeProto.appendChild;
+        nodeRemoveChild$1 = nodeProto.removeChild;
+        nodeSetTextContent = getDescriptor(nodeProto, "textContent").set;
+    }
     // -----------------------------------------------------------------------------
     // List Node
     // -----------------------------------------------------------------------------
@@ -1476,9 +1599,13 @@
         return mapping;
     }
 
-    const nodeProto = Node.prototype;
-    const nodeInsertBefore = nodeProto.insertBefore;
-    const nodeRemoveChild = nodeProto.removeChild;
+    let nodeInsertBefore;
+    let nodeRemoveChild;
+    if (typeof Node !== "undefined") {
+        const nodeProto = Node.prototype;
+        nodeInsertBefore = nodeProto.insertBefore;
+        nodeRemoveChild = nodeProto.removeChild;
+    }
     class VHtml {
         html;
         parentEl;
@@ -1734,127 +1861,6 @@
         setup() { }
     }
 
-    // Maps fibers to thrown errors
-    const fibersInError = new WeakMap();
-    const nodeErrorHandlers = new WeakMap();
-    function destroyApp(app, error) {
-        try {
-            app.destroy();
-        }
-        catch (e) {
-            // mute all errors here because we are in a corrupted state anyway
-        }
-        const e = Object.assign(new OwlError(`[Owl] Unhandled error. Destroying the root component`), {
-            cause: error,
-        });
-        return e;
-    }
-    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
-            const finalize = () => destroyApp(node.app, error);
-            for (let i = errorHandlers.length - 1; i >= 0; i--) {
-                try {
-                    errorHandlers[i](error, finalize);
-                    handled = true;
-                    break;
-                }
-                catch (e) {
-                    error = e;
-                }
-            }
-            if (handled) {
-                return true;
-            }
-        }
-        return _handleError(node.parent, error);
-    }
-    function handleError(params) {
-        let { error } = params;
-        const node = "node" in params ? params.node : params.fiber.node;
-        const fiber = "fiber" in params ? params.fiber : node.fiber;
-        if (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;
-                fibersInError.set(current, error);
-                current = current.parent;
-            } while (current);
-            fibersInError.set(fiber.root, error);
-        }
-        const handled = _handleError(node, error);
-        if (!handled) {
-            throw destroyApp(node.app, error);
-        }
-    }
-
-    // -----------------------------------------------------------------------------
-    //  hooks
-    // -----------------------------------------------------------------------------
-    function decorate(node, f, hookName) {
-        const result = f.bind(node.component);
-        if (node.app.dev) {
-            const suffix = f.name ? ` <${f.name}>` : "";
-            Reflect.defineProperty(result, "name", {
-                value: hookName + suffix,
-            });
-        }
-        return result;
-    }
-    function onWillStart(fn) {
-        const { node } = getContext("component");
-        node.willStart.push(decorate(node, fn, "onWillStart"));
-    }
-    function onWillUpdateProps(fn) {
-        const { node } = getContext("component");
-        node.willUpdateProps.push(decorate(node, fn, "onWillUpdateProps"));
-    }
-    function onMounted(fn) {
-        const { node } = getContext("component");
-        node.mounted.push(decorate(node, fn, "onMounted"));
-    }
-    function onWillPatch(fn) {
-        const { node } = getContext("component");
-        node.willPatch.unshift(decorate(node, fn, "onWillPatch"));
-    }
-    function onPatched(fn) {
-        const { node } = getContext("component");
-        node.patched.push(decorate(node, fn, "onPatched"));
-    }
-    function onWillUnmount(fn) {
-        const { node } = getContext("component");
-        node.willUnmount.unshift(decorate(node, fn, "onWillUnmount"));
-    }
-    function onWillDestroy(fn) {
-        const context = getContext();
-        if (context.type === "component") {
-            context.node.willDestroy.unshift(decorate(context.node, fn, "onWillDestroy"));
-        }
-        else {
-            context.manager.onDestroyCb.push(fn);
-        }
-    }
-    function onError(callback) {
-        const { node } = getContext("component");
-        let handlers = nodeErrorHandlers.get(node);
-        if (!handlers) {
-            handlers = [];
-            nodeErrorHandlers.set(node, handlers);
-        }
-        handlers.push(callback.bind(node.component));
-    }
-
     var ComputationState;
     (function (ComputationState) {
         ComputationState[ComputationState["EXECUTED"] = 0] = "EXECUTED";
@@ -1947,6 +1953,20 @@
         }
         sources.clear();
     }
+    function disposeComputation(computation) {
+        for (const source of computation.sources) {
+            source.observers.delete(computation);
+            // Recursively dispose derived computations that lost all observers
+            if ("compute" in source &&
+                source.isDerived &&
+                source.observers.size === 0) {
+                disposeComputation(source);
+            }
+        }
+        computation.sources.clear();
+        // Mark as stale so it recomputes correctly if ever re-used (shared computed case)
+        computation.state = ComputationState.STALE;
+    }
     function markDownstream(computation) {
         const stack = [computation];
         let current;
@@ -1978,668 +1998,332 @@
         return result;
     }
 
-    const anyType = function validateAny() { };
-    const booleanType = function validateBoolean(context) {
-        if (typeof context.value !== "boolean") {
-            context.addIssue({ message: "value is not a boolean" });
-        }
-    };
-    const numberType = function validateNumber(context) {
-        if (typeof context.value !== "number") {
-            context.addIssue({ message: "value is not a number" });
+    // Maps fibers to thrown errors
+    const fibersInError = new WeakMap();
+    const nodeErrorHandlers = new WeakMap();
+    function destroyApp(app, error) {
+        try {
+            app.destroy();
         }
-    };
-    const stringType = function validateString(context) {
-        if (typeof context.value !== "string") {
-            context.addIssue({ message: "value is not a string" });
+        catch (e) {
+            // mute all errors here because we are in a corrupted state anyway
         }
-    };
-    function arrayType(elementType) {
-        return function validateArray(context) {
-            if (!Array.isArray(context.value)) {
-                context.addIssue({ message: "value is not an array" });
-                return;
-            }
-            if (!elementType) {
-                return;
-            }
-            for (let index = 0; index < context.value.length; index++) {
-                context.withKey(index).validate(elementType);
-            }
-        };
-    }
-    function constructorType(constructor) {
-        return function validateConstructor(context) {
-            if (!(typeof context.value === "function") ||
-                !(context.value === constructor || context.value.prototype instanceof constructor)) {
-                context.addIssue({ message: `value is not '${constructor.name}' or an extension` });
-            }
-        };
+        const e = Object.assign(new OwlError(`[Owl] Unhandled error. Destroying the root component`), {
+            cause: error,
+        });
+        return e;
     }
-    function customValidator(type, validator, errorMessage = "value does not match custom validation") {
-        return function validateCustom(context) {
-            context.validate(type);
-            if (!context.isValid) {
-                return;
+    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
+            const finalize = () => destroyApp(node.app, error);
+            for (let i = errorHandlers.length - 1; i >= 0; i--) {
+                try {
+                    errorHandlers[i](error, finalize);
+                    handled = true;
+                    break;
+                }
+                catch (e) {
+                    error = e;
+                }
             }
-            if (!validator(context.value)) {
-                context.addIssue({ message: errorMessage });
+            if (handled) {
+                return true;
             }
-        };
+        }
+        return _handleError(node.parent, error);
     }
-    function functionType(parameters = [], result = undefined) {
-        return function validateFunction(context) {
-            if (typeof context.value !== "function") {
-                context.addIssue({ message: "value is not a function" });
-            }
-        };
-    }
-    function instanceType(constructor) {
-        return function validateInstanceType(context) {
-            if (!(context.value instanceof constructor)) {
-                context.addIssue({ message: `value is not an instance of '${constructor.name}'` });
-            }
-        };
-    }
-    function intersection(types) {
-        return function validateIntersection(context) {
-            for (const type of types) {
-                context.validate(type);
-            }
-        };
-    }
-    function literalType(literal) {
-        return function validateLiteral(context) {
-            if (context.value !== literal) {
-                context.addIssue({
-                    message: `value is not equal to ${typeof literal === "string" ? `'${literal}'` : literal}`,
-                });
-            }
-        };
+    function handleError(params) {
+        let { error } = params;
+        const node = "node" in params ? params.node : params.fiber.node;
+        const fiber = "fiber" in params ? params.fiber : node.fiber;
+        if (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;
+                fibersInError.set(current, error);
+                current = current.parent;
+            } while (current);
+            fibersInError.set(fiber.root, error);
+        }
+        const handled = _handleError(node, error);
+        if (!handled) {
+            throw destroyApp(node.app, error);
+        }
     }
-    function literalSelection(literals) {
-        return union(literals.map(literalType));
+
+    function makeChildFiber(node, parent) {
+        let current = node.fiber;
+        if (current) {
+            cancelFibers(current.children);
+            current.root = null;
+        }
+        return new Fiber(node, parent);
     }
-    function validateObjectShape(context, shape) {
-        const missingKeys = [];
-        for (const key in shape) {
-            const property = key.endsWith("?") ? key.slice(0, -1) : key;
-            if (context.value[property] === undefined) {
-                if (!key.endsWith("?")) {
-                    missingKeys.push(property);
+    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;
+                if (current instanceof RootFiber) {
+                    // it is possible that this fiber is a fiber that crashed while being
+                    // mounted, so the mounted list is possibly corrupted. We restore it to
+                    // its normal initial state (which is empty list or a list with a mount
+                    // fiber.
+                    current.mounted = current instanceof MountFiber ? [current] : [];
                 }
-                continue;
             }
-            context.withKey(property).validate(shape[key]);
+            return current;
         }
-        if (missingKeys.length) {
-            context.addIssue({
-                message: "object value have missing keys",
-                missingKeys,
-            });
+        const fiber = new RootFiber(node, null);
+        if (node.willPatch.length) {
+            fiber.willPatch.push(fiber);
         }
-    }
-    function validateObjectKeys(context, keys) {
-        const missingKeys = keys.filter((key) => {
-            if (key.endsWith("?")) {
-                return false;
-            }
-            return !(key in context.value);
-        });
-        if (missingKeys.length) {
-            context.addIssue({
-                message: "object value have missing keys",
-                missingKeys,
-            });
+        if (node.patched.length) {
+            fiber.patched.push(fiber);
         }
+        return fiber;
     }
-    function objectType(schema = {}) {
-        return function validateObject(context) {
-            if (typeof context.value !== "object" ||
-                Array.isArray(context.value) ||
-                context.value === null) {
-                context.addIssue({ message: "value is not an object" });
-                return;
-            }
-            if (!schema) {
-                return;
-            }
-            if (Array.isArray(schema)) {
-                validateObjectKeys(context, schema);
-            }
-            else {
-                validateObjectShape(context, schema);
-            }
-        };
-    }
-    function promiseType(type) {
-        return function validatePromise(context) {
-            if (!(context.value instanceof Promise)) {
-                context.addIssue({ message: "value is not a promise" });
-            }
-        };
+    function throwOnRender() {
+        throw new OwlError("Attempted to render cancelled fiber");
     }
-    function recordType(valueType) {
-        return function validateRecord(context) {
-            if (typeof context.value !== "object" ||
-                Array.isArray(context.value) ||
-                context.value === null) {
-                context.addIssue({ message: "value is not an object" });
-                return;
+    /**
+     * @returns number of not-yet rendered fibers cancelled
+     */
+    function cancelFibers(fibers) {
+        let result = 0;
+        for (let fiber of fibers) {
+            let node = fiber.node;
+            fiber.render = throwOnRender;
+            if (node.status === 0 /* STATUS.NEW */) {
+                node.cancel();
             }
-            if (!valueType) {
-                return;
+            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;
             }
-            for (const key in context.value) {
-                context.withKey(key).validate(valueType);
+            else {
+                result++;
             }
-        };
+            result += cancelFibers(fiber.children);
+        }
+        return result;
     }
-    function tuple(types) {
-        return function validateTuple(context) {
-            if (!Array.isArray(context.value)) {
-                context.addIssue({ message: "value is not an array" });
-                return;
-            }
-            if (context.value.length !== types.length) {
-                context.addIssue({ message: "tuple value does not have the correct length" });
-                return;
+    class Fiber {
+        node;
+        bdom = null;
+        root; // A Fiber that has been replaced by another has no root
+        parent;
+        children = [];
+        appliedToDom = false;
+        deep = false;
+        childrenMap = {};
+        constructor(node, parent) {
+            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);
             }
-            for (let index = 0; index < types.length; index++) {
-                context.withKey(index).validate(types[index]);
+            else {
+                this.root = this;
             }
-        };
-    }
-    function union(types) {
-        return function validateUnion(context) {
-            let firstIssueIndex = 0;
-            const subIssues = [];
-            for (const type of types) {
-                const subContext = context.withIssues(subIssues);
-                subContext.validate(type);
-                if (subIssues.length === firstIssueIndex || subContext.issueDepth > 0) {
-                    context.mergeIssues(subIssues.slice(firstIssueIndex));
-                    return;
+        }
+        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;
+                    }
                 }
-                firstIssueIndex = subIssues.length;
+                prev = current;
+                current = current.parent;
             }
-            context.addIssue({
-                message: "value does not match union type",
-                subIssues,
-            });
-        };
-    }
-    function reactiveValueType(type) {
-        return function validateReactiveValue(context) {
-            if (typeof context.value !== "function" || !context.value[atomSymbol]) {
-                context.addIssue({ message: "value is not a reactive value" });
+            // there are no current rendering from above => we can render
+            this._render();
+        }
+        _render() {
+            const node = this.node;
+            const root = this.root;
+            if (root) {
+                // todo: should use updateComputation somewhere else.
+                const c = getCurrentComputation();
+                removeSources(node.signalComputation);
+                setComputation(node.signalComputation);
+                try {
+                    this.bdom = true;
+                    this.bdom = node.renderFn();
+                }
+                catch (e) {
+                    node.app.handleError({ node, error: e });
+                }
+                setComputation(c);
+                root.setCounter(root.counter - 1);
             }
-        };
+        }
     }
-    function ref(type) {
-        return union([literalType(null), instanceType(type)]);
-    }
-    const types = {
-        and: intersection,
-        any: anyType,
-        array: arrayType,
-        boolean: booleanType,
-        constructor: constructorType,
-        customValidator: customValidator,
-        function: functionType,
-        instanceOf: instanceType,
-        literal: literalType,
-        number: numberType,
-        object: objectType,
-        or: union,
-        promise: promiseType,
-        record: recordType,
-        ref,
-        selection: literalSelection,
-        signal: reactiveValueType,
-        string: stringType,
-        tuple: tuple,
-    };
-
-    function assertType(value, validation, errorMessage = "Value does not match the type") {
-        const issues = validateType(value, validation);
-        if (issues.length) {
-            const issueStrings = JSON.stringify(issues, (key, value) => {
-                if (typeof value === "function") {
-                    return value.name;
+    class RootFiber extends Fiber {
+        counter = 1;
+        // only add stuff in this if they have registered some hooks
+        willPatch = [];
+        patched = [];
+        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
+        locked = false;
+        complete() {
+            const node = this.node;
+            this.locked = true;
+            let current = undefined;
+            let mountedFibers = this.mounted;
+            try {
+                // Step 1: calling all willPatch lifecycle hooks
+                for (current of this.willPatch) {
+                    // because of the asynchronous nature of the rendering, some parts of the
+                    // UI may have been rendered, then deleted in a followup rendering, and we
+                    // do not want to call onWillPatch in that case.
+                    let node = current.node;
+                    if (node.fiber === current) {
+                        const component = node.component;
+                        for (let cb of node.willPatch) {
+                            cb.call(component);
+                        }
+                    }
                 }
-                return value;
-            }, 2);
-            throw new OwlError(`${errorMessage}\n${issueStrings}`);
-        }
-    }
-    function createContext$1(issues, value, path, parent) {
-        return {
-            issueDepth: 0,
-            path,
-            value,
-            get isValid() {
-                return !issues.length;
-            },
-            addIssue(issue) {
-                issues.push({
-                    received: this.value,
-                    path: this.path,
-                    ...issue,
-                });
-            },
-            mergeIssues(newIssues) {
-                issues.push(...newIssues);
-            },
-            validate(type) {
-                type(this);
-                if (!this.isValid && parent) {
-                    parent.issueDepth = this.issueDepth + 1;
+                current = undefined;
+                // Step 2: patching the dom
+                node._patch();
+                this.locked = false;
+                // Step 4: calling all mounted lifecycle hooks
+                while ((current = mountedFibers.pop())) {
+                    current = current;
+                    if (current.appliedToDom) {
+                        for (let cb of current.node.mounted) {
+                            cb();
+                        }
+                    }
                 }
-            },
-            withIssues(issues) {
-                return createContext$1(issues, this.value, this.path, this);
-            },
-            withKey(key) {
-                return createContext$1(issues, this.value[key], this.path.concat(key), this);
-            },
-        };
-    }
-    function validateType(value, validation) {
-        const issues = [];
-        validation(createContext$1(issues, value, []));
-        return issues;
-    }
-
-    function validateObjectWithDefaults(schema, defaultValues) {
-        const keys = Array.isArray(schema) ? schema : Object.keys(schema);
-        const mandatoryDefaultedKeys = keys.filter((key) => !key.endsWith("?") && key in defaultValues);
-        return (context) => {
-            if (mandatoryDefaultedKeys.length) {
-                context.addIssue({
-                    message: "props have default values on mandatory keys",
-                    keys: mandatoryDefaultedKeys,
-                });
-            }
-            context.validate(types.object(schema));
-        };
-    }
-    function props(type, defaults) {
-        const { node, app, componentName } = getContext("component");
-        function getProp(key) {
-            if (node.props[key] === undefined && defaults) {
-                return defaults[key];
-            }
-            return node.props[key];
-        }
-        const result = Object.create(null);
-        function applyPropGetters(keys) {
-            for (const key of keys) {
-                Reflect.defineProperty(result, key, {
-                    enumerable: true,
-                    get: getProp.bind(null, key),
-                });
-            }
-        }
-        if (type) {
-            const keys = (Array.isArray(type) ? type : Object.keys(type)).map((key) => key.endsWith("?") ? key.slice(0, -1) : key);
-            applyPropGetters(keys);
-            if (app.dev) {
-                const validation = defaults ? validateObjectWithDefaults(type, defaults) : types.object(type);
-                assertType(node.props, validation, `Invalid component props (${componentName})`);
-                node.willUpdateProps.push((np) => {
-                    assertType(np, validation, `Invalid component props (${componentName})`);
-                });
-            }
-        }
-        else {
-            applyPropGetters(Object.keys(node.props));
-            node.willUpdateProps.push((np) => {
-                for (let key in result) {
-                    Reflect.deleteProperty(result, key);
+                // Step 5: calling all patched hooks
+                let patchedFibers = this.patched;
+                while ((current = patchedFibers.pop())) {
+                    current = current;
+                    if (current.appliedToDom) {
+                        for (let cb of current.node.patched) {
+                            cb();
+                        }
+                    }
                 }
-                applyPropGetters(Object.keys(np));
-            });
-        }
-        return result;
-    }
-
-    const VText = text("").constructor;
-    class VPortal extends VText {
-        content;
-        selector;
-        target = null;
-        constructor(selector, content) {
-            super("");
-            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);
-            }
-            else {
-                this.content.mount(parent, anchor);
             }
-        }
-        beforeRemove() {
-            this.content.beforeRemove();
-        }
-        remove() {
-            if (this.content) {
-                super.remove();
-                this.content.remove();
-                this.content = null;
+            catch (e) {
+                // if mountedFibers is not empty, this means that a crash occured while
+                // calling the mounted hooks of some component. So, there may still be
+                // some component that have been mounted, but for which the mounted hooks
+                // have not been called. Here, we remove the willUnmount hooks for these
+                // specific component to prevent a worse situation (willUnmount being
+                // called even though mounted has not been called)
+                for (let fiber of mountedFibers) {
+                    fiber.node.willUnmount = [];
+                }
+                this.locked = false;
+                node.app.handleError({ fiber: current || this, error: e });
             }
         }
-        patch(other) {
-            super.patch(other);
-            if (this.content) {
-                this.content.patch(other.content, true);
-            }
-            else {
-                this.content = other.content;
-                this.content.mount(this.target, null);
+        setCounter(newValue) {
+            this.counter = newValue;
+            if (newValue === 0) {
+                this.node.app.scheduler.flush();
             }
         }
     }
-    /**
-     * 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.this.props.target, callSlot(ctx, node, key, "default", false, null));
-        };
-    }
-    class Portal extends Component {
-        static template = "__portal__";
-        props = props({
-            target: types.string,
-        });
-        setup() {
-            const node = this.__owl__;
-            onMounted(() => {
-                const portal = node.bdom;
-                if (!portal.target) {
-                    const target = document.querySelector(node.props.target);
-                    if (target) {
-                        portal.content.moveBeforeDOMNode(target.firstChild, target);
+    class MountFiber extends RootFiber {
+        target;
+        position;
+        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 {
-                        throw new OwlError("invalid portal target");
+                        const firstChild = this.target.childNodes[0];
+                        mount$1(node.bdom, this.target, firstChild);
                     }
                 }
-            });
-            onWillUnmount(() => {
-                const portal = node.bdom;
-                portal.remove();
-            });
-        }
-    }
-
-    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;
-            // 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;
-                if (current instanceof RootFiber) {
-                    // it is possible that this fiber is a fiber that crashed while being
-                    // mounted, so the mounted list is possibly corrupted. We restore it to
-                    // its normal initial state (which is empty list or a list with a mount
-                    // fiber.
-                    current.mounted = current instanceof MountFiber ? [current] : [];
-                }
-            }
-            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;
-    }
-    function throwOnRender() {
-        throw new OwlError("Attempted to render cancelled fiber");
-    }
-    /**
-     * @returns number of not-yet rendered fibers cancelled
-     */
-    function cancelFibers(fibers) {
-        let result = 0;
-        for (let fiber of fibers) {
-            let node = fiber.node;
-            fiber.render = throwOnRender;
-            if (node.status === 0 /* STATUS.NEW */) {
-                node.cancel();
-            }
-            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;
-    }
-    class Fiber {
-        node;
-        bdom = null;
-        root; // A Fiber that has been replaced by another has no root
-        parent;
-        children = [];
-        appliedToDom = false;
-        deep = false;
-        childrenMap = {};
-        constructor(node, parent) {
-            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;
-            }
-        }
-        render() {
-            // if some parent has a fiber => register in followup
-            let prev = this.root.node;
-            let scheduler = prev.app.scheduler;
-            let current = prev.parent;
-            while (current) {
-                if (current.fiber) {
-                    let root = current.fiber.root;
-                    if (root.counter === 0 && prev.parentKey in current.fiber.childrenMap) {
-                        current = root.node;
-                    }
-                    else {
-                        scheduler.delayedRenders.push(this);
-                        return;
-                    }
-                }
-                prev = current;
-                current = current.parent;
-            }
-            // there are no current rendering from above => we can render
-            this._render();
-        }
-        _render() {
-            const node = this.node;
-            const root = this.root;
-            if (root) {
-                // todo: should use updateComputation somewhere else.
-                const c = getCurrentComputation();
-                setComputation(node.signalComputation);
-                try {
-                    this.bdom = true;
-                    this.bdom = node.renderFn();
-                }
-                catch (e) {
-                    node.app.handleError({ node, error: e });
-                }
-                setComputation(c);
-                root.setCounter(root.counter - 1);
-            }
-        }
-    }
-    class RootFiber extends Fiber {
-        counter = 1;
-        // only add stuff in this if they have registered some hooks
-        willPatch = [];
-        patched = [];
-        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
-        locked = false;
-        complete() {
-            const node = this.node;
-            this.locked = true;
-            let current = undefined;
-            let mountedFibers = this.mounted;
-            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
-                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) {
-                // if mountedFibers is not empty, this means that a crash occured while
-                // calling the mounted hooks of some component. So, there may still be
-                // some component that have been mounted, but for which the mounted hooks
-                // have not been called. Here, we remove the willUnmount hooks for these
-                // specific component to prevent a worse situation (willUnmount being
-                // called even though mounted has not been called)
-                for (let fiber of mountedFibers) {
-                    fiber.node.willUnmount = [];
-                }
-                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 {
-        target;
-        position;
-        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 /* STATUS.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 });
-            }
+                // 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 /* STATUS.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 });
+            }
         }
     }
 
@@ -2653,6 +2337,7 @@
         forceNextRender = false;
         parentKey;
         props;
+        defaultProps = {};
         renderFn;
         parent;
         children = Object.create(null);
@@ -2664,6 +2349,7 @@
         patched = [];
         willDestroy = [];
         signalComputation;
+        computations = [];
         pluginManager;
         constructor(C, props, app, parent, parentKey) {
             this.app = app;
@@ -2671,7 +2357,7 @@
             this.parentKey = parentKey;
             this.pluginManager = parent ? parent.pluginManager : app.pluginManager;
             this.signalComputation = createComputation(() => this.render(false), false, ComputationState.EXECUTED);
-            this.props = Object.assign({}, props);
+            this.props = props;
             contextStack.push({
                 type: "component",
                 app,
@@ -2807,10 +2493,19 @@
                     this.app.handleError({ error: e, node: this });
                 }
             }
+            for (const computation of this.computations) {
+                disposeComputation(computation);
+            }
+            disposeComputation(this.signalComputation);
             this.status = 3 /* STATUS.DESTROYED */;
         }
         async updateAndRender(props, parentFiber) {
             props = Object.assign({}, props);
+            for (const key in this.defaultProps) {
+                if (props[key] === undefined) {
+                    props[key] = this.defaultProps[key];
+                }
+            }
             // update
             const fiber = makeChildFiber(this, parentFiber);
             this.fiber = fiber;
@@ -3439,6 +3134,13 @@
             }
         };
     }
+    function callHandler(fn, ctx, ev) {
+        if (typeof fn !== "function") {
+            throw new OwlError(`Invalid handler expression: the \`t-on\` expression should evaluate to a function, but got '${typeof fn}'. ` +
+                `Did you mean to use an arrow function? (e.g. \`t-on-click="() => expr"\`)`);
+        }
+        fn.call(ctx["this"], ev);
+    }
     function modelExpr(value) {
         if (typeof value !== "function" || typeof value.set !== "function") {
             throw new OwlError(`Invalid t-model expression: expression should evaluate to a function with a 'set' method defined on it`);
@@ -3533,8 +3235,8 @@
         createRef,
         modelExpr,
         createComponent,
-        Portal,
         callTemplate,
+        callHandler,
     };
 
     const bdom = { text, createBlock, list, multi, html, toggler, comment };
@@ -3642,7 +3344,6 @@
         return name;
     }
     xml.nextId = 1;
-    TemplateSet.registerTemplate("__portal__", portalTemplate);
 
     /**
      * Owl QWeb Expression Parser
@@ -3854,11 +3555,18 @@
      * the arrow operator, then we add the current (or some previous tokens) token to
      * the list of variables so it does not get replaced by a lookup in the context
      */
-    function compileExprToArray(expr) {
+    // Leading spaces are trimmed during tokenization, so they need to be added back for some values
+    const paddedValues = new Map([["in ", " in "]]);
+    /**
+     * Processes a javascript expression: compiles variable lookups and detects
+     * top-level arrow functions with their free variables, all in a single pass.
+     */
+    function processExpr(expr) {
         const localVars = new Set();
         const tokens = tokenize(expr);
         let i = 0;
         let stack = []; // to track last opening (, [ or {
+        let topLevelArrowIndex = -1;
         while (i < tokens.length) {
             let token = tokens[i];
             let prevToken = tokens[i - 1];
@@ -3899,18 +3607,21 @@
                 token.value = token.replace((expr) => compileExpr(expr));
             }
             if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
+                if (stack.length === 0) {
+                    topLevelArrowIndex = i + 1;
+                }
                 if (token.type === "RIGHT_PAREN") {
                     let j = i - 1;
                     while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
                         if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
                             tokens[j].value = tokens[j].originalValue;
-                            localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
+                            localVars.add(tokens[j].value);
                         }
                         j--;
                     }
                 }
                 else {
-                    localVars.add(token.value); //] = { id: token.value, expr: token.value };
+                    localVars.add(token.value);
                 }
             }
             if (isVar) {
@@ -3931,14 +3642,24 @@
                 token.isLocal = true;
             }
         }
-        return tokens;
+        // Collect free variables from arrow function body
+        let freeVariables = null;
+        if (topLevelArrowIndex !== -1) {
+            freeVariables = [];
+            const seen = new Set();
+            for (let i = topLevelArrowIndex + 1; i < tokens.length; i++) {
+                const t = tokens[i];
+                if (t.varName && !t.isLocal && t.varName !== "this" && !seen.has(t.varName)) {
+                    seen.add(t.varName);
+                    freeVariables.push(t.varName);
+                }
+            }
+        }
+        const compiled = tokens.map((t) => paddedValues.get(t.value) || t.value).join("");
+        return { expr: compiled, freeVariables };
     }
-    // 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) => paddedValues.get(t.value) || t.value)
-            .join("");
+        return processExpr(expr).expr;
     }
     const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
     function replaceDynamicParts(s, replacer) {
@@ -3957,8 +3678,11 @@
     const whitespaceRE = /\s+/g;
     // 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 xmlDoc;
+    if (typeof document !== "undefined") {
+        xmlDoc = document.implementation.createDocument(null, null, null);
+    }
+    const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic", "passive"]);
     let nextDataIds = {};
     function generateId(prefix = "") {
         nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
@@ -4056,7 +3780,7 @@
             return t.innerHTML;
         }
     }
-    function createContext(parentCtx, params) {
+    function createContext$1(parentCtx, params) {
         return Object.assign({
             block: null,
             index: 0,
@@ -4224,7 +3948,7 @@
             const target = new CodeTarget(name, on);
             this.targets.push(target);
             this.target = target;
-            this.compileAST(ast, createContext(ctx));
+            this.compileAST(ast, createContext$1(ctx));
             this.target = initialTarget;
             return name;
         }
@@ -4318,8 +4042,6 @@
                     return this.compileTTranslation(ast, ctx);
                 case 16 /* ASTType.TTranslationContext */:
                     return this.compileTTranslationContext(ast, ctx);
-                case 17 /* ASTType.TPortal */:
-                    return this.compileTPortal(ast, ctx);
             }
         }
         compileDebug(ast, ctx) {
@@ -4405,7 +4127,8 @@
                 hoistedExpr = `(ctx,${bareArrowMatch[1]})=>${rest}`;
             }
             else {
-                hoistedExpr = `(ctx, ev) => (${compiled}).call(ctx['this'], ev)`;
+                this.helpers.add("callHandler");
+                hoistedExpr = `(ctx, ev) => callHandler(${compiled}, ctx, ev)`;
             }
             const id = generateId("hdlr_fn");
             this.staticDefs.push({ id, expr: hoistedExpr });
@@ -4483,11 +4206,22 @@
             // t-model
             let tModelSelectedExpr;
             if (ast.model) {
-                const { hasDynamicChildren, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
-                const expression = compileExpr(expr);
-                const exprId = generateId("expr");
-                this.helpers.add("modelExpr");
-                this.define(exprId, `modelExpr(${expression})`);
+                const { hasDynamicChildren, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, isProxy, } = ast.model;
+                let readExpr;
+                let writeExpr;
+                if (isProxy) {
+                    const expression = compileExpr(expr);
+                    readExpr = expression;
+                    writeExpr = (value) => `${expression} = ${value}`;
+                }
+                else {
+                    const exprId = generateId("expr");
+                    const expression = compileExpr(expr);
+                    this.helpers.add("modelExpr");
+                    this.define(exprId, `modelExpr(${expression})`);
+                    readExpr = `${exprId}()`;
+                    writeExpr = (value) => `${exprId}.set(${value})`;
+                }
                 let idx;
                 if (specialInitTargetAttr) {
                     let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
@@ -4498,23 +4232,23 @@
                             targetExpr = compileExpr(dynamicTgExpr);
                         }
                     }
-                    idx = block.insertData(`${exprId}() === ${targetExpr}`, "prop");
+                    idx = block.insertData(`${readExpr} === ${targetExpr}`, "prop");
                     attrs[`block-property-${idx}`] = specialInitTargetAttr;
                 }
                 else if (hasDynamicChildren) {
                     const bValueId = generateId("bValue");
                     tModelSelectedExpr = `${bValueId}`;
-                    this.define(tModelSelectedExpr, `${exprId}()`);
+                    this.define(tModelSelectedExpr, readExpr);
                 }
                 else {
-                    idx = block.insertData(`${exprId}()`, "prop");
+                    idx = block.insertData(readExpr, "prop");
                     attrs[`block-property-${idx}`] = targetAttr;
                 }
                 this.helpers.add("toNumber");
                 let valueCode = `ev.target.${targetAttr}`;
                 valueCode = shouldTrim ? `${valueCode}.trim()` : valueCode;
                 valueCode = shouldNumberize ? `toNumber(${valueCode})` : valueCode;
-                const handler = `[(ctx, ev) => { ${exprId}.set(${valueCode}); }, ctx]`;
+                const handler = `[(ctx, ev) => { ${writeExpr(valueCode)}; }, ctx]`;
                 idx = block.insertData(handler, "hdlr");
                 attrs[`block-handler-${idx}`] = eventType;
             }
@@ -4548,7 +4282,7 @@
                 const children = ast.content;
                 for (let i = 0; i < children.length; i++) {
                     const child = ast.content[i];
-                    const subCtx = createContext(ctx, {
+                    const subCtx = createContext$1(ctx, {
                         block,
                         index: block.childNumber,
                         forceNewBlock: false,
@@ -4604,7 +4338,7 @@
             else if (ast.body) {
                 let bodyValue = null;
                 bodyValue = BlockDescription.nextBlockId;
-                const subCtx = createContext(ctx);
+                const subCtx = createContext$1(ctx);
                 this.compileAST({ type: 3 /* ASTType.Multi */, content: ast.body }, subCtx);
                 this.helpers.add("safeOutput");
                 blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
@@ -4619,7 +4353,7 @@
         compileTIfBranch(content, block, ctx) {
             this.target.indentLevel++;
             let childN = block.children.length;
-            this.compileAST(content, createContext(ctx, { block, index: ctx.index }));
+            this.compileAST(content, createContext$1(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);
@@ -4715,7 +4449,7 @@
                 this.addLine(`if (keys${block.id}.has(String(key${this.target.loopLevel}))) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
                 this.addLine(`keys${block.id}.add(String(key${this.target.loopLevel}));`);
             }
-            const subCtx = createContext(ctx, { block, index: loopVar });
+            const subCtx = createContext$1(ctx, { block, index: loopVar });
             this.compileAST(ast.body, subCtx);
             this.target.indentLevel--;
             this.target.loopLevel--;
@@ -4727,7 +4461,7 @@
         compileTKey(ast, ctx) {
             const tKeyExpr = generateId("tKey_");
             this.define(tKeyExpr, compileExpr(ast.expr));
-            ctx = createContext(ctx, {
+            ctx = createContext$1(ctx, {
                 tKeyExpr,
                 block: ctx.block,
                 index: ctx.index,
@@ -4754,7 +4488,7 @@
             for (let i = 0, l = ast.content.length; i < l; i++) {
                 const child = ast.content[i];
                 const forceNewBlock = !child.hasNoRepresentation;
-                const subCtx = createContext(ctx, {
+                const subCtx = createContext$1(ctx, {
                     block,
                     index,
                     forceNewBlock,
@@ -4807,12 +4541,11 @@
             if (ast.context) {
                 const dynCtxVar = generateId("ctx");
                 this.addLine(`const ${dynCtxVar} = ${compileExpr(ast.context)};`);
-                if (ast.attrs) {
-                    ctxExpr = `Object.assign({}, ${dynCtxVar}${attrs.length ? ", " + ctxString : ""})`;
+                if (attrs.length) {
+                    ctxExpr = `Object.assign({this: ${dynCtxVar}}, ${ctxString})`;
                 }
                 else {
-                    const thisCtx = `{this: ${dynCtxVar}, __owl__: this.__owl__}`;
-                    ctxExpr = `Object.assign({}, ${dynCtxVar}, ${thisCtx}${attrs.length ? ", " + ctxString : ""})`;
+                    ctxExpr = `{this: ${dynCtxVar}}`;
                 }
             }
             else {
@@ -4957,9 +4690,29 @@
             let { block } = ctx;
             // props
             const hasSlotsProp = "slots" in (ast.props || {});
-            const props = ast.props
-                ? this.formatPropObject(ast.props, ast.propsTranslationCtx, ctx.translationCtx)
-                : [];
+            const props = [];
+            const propList = [];
+            for (let p in ast.props || {}) {
+                let [name, suffix] = p.split(".");
+                if (suffix) {
+                    // .alike, .bind, .translate — delegate to formatProp, no propList entry
+                    props.push(this.formatProp(p, ast.props[p], ast.propsTranslationCtx, ctx.translationCtx));
+                    continue;
+                }
+                const { expr: compiledValue, freeVariables } = processExpr(ast.props[p]);
+                const propName = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
+                props.push(`${propName}: ${compiledValue || undefined}`);
+                if (freeVariables) {
+                    for (const varName of freeVariables) {
+                        const syntheticKey = `\x01${name}.${varName}`;
+                        propList.push(`"${syntheticKey}"`);
+                        props.push(`"${syntheticKey}": ctx['${varName}']`);
+                    }
+                }
+                else {
+                    propList.push(`"${name}"`);
+                }
+            }
             // slots
             let slotDef = "";
             if (ast.slots) {
@@ -5016,13 +4769,6 @@
                 keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
             }
             let id = generateId("comp");
-            const propList = [];
-            for (let p in ast.props || {}) {
-                let [name, suffix] = p.split(".");
-                if (!suffix) {
-                    propList.push(`"${name}"`);
-                }
-            }
             this.helpers.add("createComponent");
             this.staticDefs.push({
                 id,
@@ -5127,26 +4873,6 @@
             }
             return null;
         }
-        compileTPortal(ast, ctx) {
-            this.helpers.add("Portal");
-            let { block } = ctx;
-            const name = this.compileInNewTarget("slot", ast.content, ctx);
-            let id = generateId("comp");
-            this.helpers.add("createComponent");
-            this.staticDefs.push({
-                id,
-                expr: `createComponent(app, null, false, true, false, false)`,
-            });
-            const target = compileExpr(ast.target);
-            const key = this.generateComponentKey();
-            const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ctx}}}, ${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;
-        }
     }
 
     // -----------------------------------------------------------------------------
@@ -5182,7 +4908,6 @@
             parseTDebugLog(node, ctx) ||
             parseTForEach(node, ctx) ||
             parseTIf(node, ctx) ||
-            parseTPortal(node, ctx) ||
             parseTTranslation(node, ctx) ||
             parseTTranslationContext(node, ctx) ||
             parseTCall(node, ctx) ||
@@ -5329,6 +5054,7 @@
                 const hasTrimMod = attr.includes(".trim");
                 const hasLazyMod = hasTrimMod || attr.includes(".lazy");
                 const hasNumberMod = attr.includes(".number");
+                const hasProxyMod = attr.includes(".proxy");
                 const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
                 model = {
                     expr: value,
@@ -5338,6 +5064,7 @@
                     hasDynamicChildren: false,
                     shouldTrim: hasTrimMod,
                     shouldNumberize: hasNumberMod,
+                    isProxy: hasProxyMod,
                 };
                 if (isSelect) {
                     // don't pollute the original ctx
@@ -5809,694 +5536,1104 @@
         return wrapInTTranslationContextAST(result, translationCtx);
     }
     // -----------------------------------------------------------------------------
-    // Portal
+    // helpers
     // -----------------------------------------------------------------------------
-    function parseTPortal(node, ctx) {
-        if (!node.hasAttribute("t-portal")) {
-            return null;
+    /**
+     * 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 /* ASTType.Multi */) {
+                    children.push(...childAst.content);
+                }
+                else {
+                    children.push(childAst);
+                }
+            }
         }
-        const target = node.getAttribute("t-portal");
-        node.removeAttribute("t-portal");
-        const content = parseNode(node, ctx);
-        if (!content) {
-            return {
-                type: 0 /* ASTType.Text */,
-                value: "",
-            };
+        return children;
+    }
+    function makeASTMulti(children) {
+        const ast = { type: 3 /* ASTType.Multi */, content: children };
+        if (children.every((c) => c.hasNoRepresentation)) {
+            ast.hasNoRepresentation = true;
+        }
+        return ast;
+    }
+    /**
+     * 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 makeASTMulti(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 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");
+            }
+        }
+    }
+    /**
+     * Normalizes the content of an Element so that t-out directives on components
+     * are removed and instead places a <t t-out=""> 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 normalizeTOut(el) {
+        const elements = [...el.querySelectorAll(`[t-out]`)].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-out on a component that already has content`);
+            }
+            const value = el.getAttribute("t-out");
+            el.removeAttribute("t-out");
+            const t = el.ownerDocument.createElement("t");
+            if (value != null) {
+                t.setAttribute("t-out", 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);
+        normalizeTOut(el);
+    }
+
+    function compile(template, options = {
+        hasGlobalValues: false,
+    }) {
+        // parsing
+        const ast = parse(template, options.customDirectives);
+        // code generation
+        const codeGenerator = new CodeGenerator(ast, options);
+        const code = codeGenerator.generateCode();
+        // template function
+        try {
+            return new Function("app, bdom, helpers", code);
+        }
+        catch (originalError) {
+            const { name } = options;
+            const nameStr = name ? `template "${name}"` : "anonymous template";
+            const err = new OwlError(`Failed to compile ${nameStr}: ${originalError.message}\n\ngenerated code:\nfunction(app, bdom, helpers) {\n${code}\n}`);
+            err.cause = originalError;
+            throw err;
+        }
+    }
+
+    // do not modify manually. This file is generated by the release script.
+    const version = "3.0.0-alpha.21";
+
+    function effect(fn) {
+        const computation = createComputation(() => {
+            // In case the cleanup read an atom.
+            // todo: test it
+            setComputation(undefined);
+            unsubscribeEffect(computation);
+            setComputation(computation);
+            return fn();
+        }, false);
+        getCurrentComputation()?.observers.add(computation);
+        updateComputation(computation);
+        // Remove sources and unsubscribe
+        return function cleanupEffect() {
+            // In case the cleanup read an atom.
+            // todo: test it
+            const previousComputation = getCurrentComputation();
+            setComputation(undefined);
+            unsubscribeEffect(computation);
+            setComputation(previousComputation);
+        };
+    }
+    function unsubscribeEffect(effect) {
+        removeSources(effect);
+        cleanupEffect(effect);
+        for (const childEffect of effect.observers) {
+            // Consider it executed to avoid it's re-execution
+            // todo: make a test for it
+            childEffect.state = ComputationState.EXECUTED;
+            removeSources(childEffect);
+            unsubscribeEffect(childEffect);
+        }
+        effect.observers.clear();
+    }
+    function cleanupEffect(effect) {
+        // the computation.value of an effect is a cleanup function
+        const cleanupFn = effect.value;
+        if (cleanupFn && typeof cleanupFn === "function") {
+            cleanupFn();
+            effect.value = undefined;
+        }
+    }
+
+    class Plugin {
+        static _shadowId;
+        static get id() {
+            return this._shadowId ?? this.name;
+        }
+        static set id(shadowId) {
+            this._shadowId = shadowId;
+        }
+        __owl__;
+        constructor(manager) {
+            this.__owl__ = manager;
+        }
+        setup() { }
+    }
+    class PluginManager {
+        app;
+        config;
+        onDestroyCb = [];
+        computations = [];
+        plugins;
+        status = 0 /* STATUS.NEW */;
+        constructor(app, options = {}) {
+            this.app = app;
+            this.config = options.config ?? {};
+            if (options.parent) {
+                const parent = options.parent;
+                parent.onDestroyCb.push(() => this.destroy());
+                this.plugins = Object.create(parent.plugins);
+            }
+            else {
+                this.plugins = {};
+            }
+        }
+        destroy() {
+            const cbs = this.onDestroyCb;
+            while (cbs.length) {
+                cbs.pop()();
+            }
+            for (const computation of this.computations) {
+                disposeComputation(computation);
+            }
+            this.status = 3 /* STATUS.DESTROYED */;
+        }
+        getPluginById(id) {
+            return this.plugins[id] || null;
+        }
+        getPlugin(pluginConstructor) {
+            return this.getPluginById(pluginConstructor.id);
+        }
+        startPlugin(pluginConstructor) {
+            if (!pluginConstructor.id) {
+                throw new OwlError(`Plugin "${pluginConstructor.name}" has no id`);
+            }
+            if (this.plugins.hasOwnProperty(pluginConstructor.id)) {
+                const existingPluginType = this.getPluginById(pluginConstructor.id).constructor;
+                if (existingPluginType !== pluginConstructor) {
+                    throw new OwlError(`Trying to start a plugin with the same id as an other plugin (id: '${pluginConstructor.id}', existing plugin: '${existingPluginType.name}', starting plugin: '${pluginConstructor.name}')`);
+                }
+                return null;
+            }
+            const plugin = new pluginConstructor(this);
+            this.plugins[pluginConstructor.id] = plugin;
+            plugin.setup();
+            return plugin;
+        }
+        startPlugins(pluginConstructors) {
+            contextStack.push({
+                type: "plugin",
+                app: this.app,
+                manager: this,
+                get status() {
+                    return this.manager.status;
+                },
+            });
+            try {
+                for (const pluginConstructor of pluginConstructors) {
+                    this.startPlugin(pluginConstructor);
+                }
+            }
+            finally {
+                contextStack.pop();
+            }
+            this.status = 1 /* STATUS.MOUNTED */;
+        }
+    }
+    function startPlugins(manager, plugins) {
+        if (Array.isArray(plugins)) {
+            manager.startPlugins(plugins);
+        }
+        else {
+            manager.onDestroyCb.push(effect(() => {
+                const pluginItems = plugins.items();
+                untrack(() => manager.startPlugins(pluginItems));
+            }));
+        }
+    }
+
+    // -----------------------------------------------------------------------------
+    //  Scheduler
+    // -----------------------------------------------------------------------------
+    let requestAnimationFrame;
+    if (typeof window !== "undefined") {
+        requestAnimationFrame = window.requestAnimationFrame.bind(window);
+    }
+    class Scheduler {
+        // capture the value of requestAnimationFrame as soon as possible, to avoid
+        // interactions with other code, such as test frameworks that override them
+        static requestAnimationFrame = requestAnimationFrame;
+        tasks = new Set();
+        requestAnimationFrame;
+        frame = 0;
+        delayedRenders = [];
+        cancelledNodes = new Set();
+        processing = false;
+        constructor() {
+            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+        }
+        addFiber(fiber) {
+            this.tasks.add(fiber.root);
+        }
+        scheduleDestroy(node) {
+            this.cancelledNodes.add(node);
+            if (this.frame === 0) {
+                this.frame = this.requestAnimationFrame(() => this.processTasks());
+            }
+        }
+        /**
+         * 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 !== 3 /* STATUS.DESTROYED */ && f.node.fiber === f) {
+                        f.render();
+                    }
+                }
+            }
+            if (this.frame === 0) {
+                this.frame = this.requestAnimationFrame(() => this.processTasks());
+            }
+        }
+        processTasks() {
+            if (this.processing) {
+                return;
+            }
+            this.processing = true;
+            this.frame = 0;
+            for (let node of this.cancelledNodes) {
+                node._destroy();
+            }
+            this.cancelledNodes.clear();
+            for (let task of this.tasks) {
+                this.processFiber(task);
+            }
+            for (let task of this.tasks) {
+                if (task.node.status === 3 /* STATUS.DESTROYED */) {
+                    this.tasks.delete(task);
+                }
+            }
+            this.processing = false;
+        }
+        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 === 3 /* STATUS.DESTROYED */) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            if (fiber.counter === 0) {
+                if (!hasError) {
+                    fiber.complete();
+                }
+                // at this point, the fiber should have been applied to the DOM, so we can
+                // remove it from the task list. If it is not the case, it means that there
+                // was an error and an error handler triggered a new rendering that recycled
+                // the fiber, so in that case, we actually want to keep the fiber around,
+                // otherwise it will just be ignored.
+                if (fiber.appliedToDom) {
+                    this.tasks.delete(fiber);
+                }
+            }
+        }
+    }
+
+    let hasBeenLogged = false;
+    const apps = new Set();
+    if (typeof window !== "undefined") {
+        window.__OWL_DEVTOOLS__ ||= { apps, Fiber, RootFiber, toRaw, proxy };
+    }
+    class App extends TemplateSet {
+        static validateTarget = validateTarget;
+        static apps = apps;
+        static version = version;
+        name;
+        scheduler = new Scheduler();
+        roots = new Set();
+        pluginManager;
+        constructor(config = {}) {
+            super(config);
+            this.name = config.name || "";
+            apps.add(this);
+            this.pluginManager = new PluginManager(this, { config: config.config });
+            if (config.plugins) {
+                startPlugins(this.pluginManager, config.plugins);
+            }
+            if (config.test) {
+                this.dev = true;
+            }
+            if (this.dev && !config.test && !hasBeenLogged) {
+                console.info(`Owl is running in 'dev' mode.`);
+                hasBeenLogged = true;
+            }
+        }
+        createRoot(Root, config = {}) {
+            const props = config.props || {};
+            let resolve;
+            let reject;
+            const promise = new Promise((res, rej) => {
+                resolve = res;
+                reject = rej;
+            });
+            const restore = saveContext();
+            let node;
+            let error = null;
+            try {
+                node = new ComponentNode(Root, props, this, null, null);
+            }
+            catch (e) {
+                error = e;
+                reject(e);
+            }
+            finally {
+                restore();
+            }
+            const root = {
+                node: node,
+                promise,
+                mount: (target, options) => {
+                    if (error) {
+                        return promise;
+                    }
+                    App.validateTarget(target);
+                    this.mountNode(node, target, resolve, reject, options);
+                    return promise;
+                },
+                destroy: () => {
+                    this.roots.delete(root);
+                    node.destroy();
+                    this.scheduler.processTasks();
+                },
+            };
+            this.roots.add(root);
+            return root;
+        }
+        mountNode(node, target, resolve, reject, options) {
+            // Manually add the last resort error handler on the node
+            let handlers = nodeErrorHandlers.get(node);
+            if (!handlers) {
+                handlers = [];
+                nodeErrorHandlers.set(node, handlers);
+            }
+            handlers.unshift((e, finalize) => {
+                const finalError = finalize();
+                reject(finalError);
+            });
+            // manually set a onMounted callback.
+            // that way, we are independant from the current node.
+            node.mounted.push(() => {
+                resolve(node.component);
+                handlers.shift();
+            });
+            node.mountComponent(target, options);
+        }
+        destroy() {
+            for (let root of this.roots) {
+                root.destroy();
+            }
+            this.pluginManager.destroy();
+            this.scheduler.processTasks();
+            apps.delete(this);
+        }
+        handleError(...args) {
+            return handleError(...args);
+        }
+    }
+    async function mount(C, target, config = {}) {
+        const app = new App(config);
+        const root = app.createRoot(C, config);
+        return root.mount(target, config);
+    }
+
+    const mainEventHandler = (data, ev, currentTarget) => {
+        const { data: _data, modifiers } = filterOutModifiersFromData(data);
+        data = _data;
+        let stopped = false;
+        if (modifiers.length) {
+            let selfMode = false;
+            const isSelf = ev.target === currentTarget;
+            for (const mod of modifiers) {
+                switch (mod) {
+                    case "self":
+                        selfMode = true;
+                        if (isSelf) {
+                            continue;
+                        }
+                        else {
+                            return stopped;
+                        }
+                    case "prevent":
+                        if ((selfMode && isSelf) || !selfMode)
+                            ev.preventDefault();
+                        continue;
+                    case "stop":
+                        if ((selfMode && isSelf) || !selfMode)
+                            ev.stopPropagation();
+                        stopped = true;
+                        continue;
+                }
+            }
+        }
+        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
+        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
+        // as expected when there is a handler expression that evaluates to a falsy value
+        if (Object.hasOwnProperty.call(data, 0)) {
+            const handler = data[0];
+            if (typeof handler !== "function") {
+                throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
+            }
+            let node = data[1] ? data[1].__owl__ : null;
+            if (node ? node.status === 1 /* STATUS.MOUNTED */ : true) {
+                handler(data[1], ev);
+            }
         }
-        return {
-            type: 17 /* ASTType.TPortal */,
-            target,
-            content,
-        };
-    }
+        return stopped;
+    };
+
     // -----------------------------------------------------------------------------
-    // helpers
+    //  hooks
     // -----------------------------------------------------------------------------
-    /**
-     * 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 /* ASTType.Multi */) {
-                    children.push(...childAst.content);
-                }
-                else {
-                    children.push(childAst);
-                }
-            }
+    function decorate(node, f, hookName) {
+        const result = f.bind(node.component);
+        if (node.app.dev) {
+            const suffix = f.name ? ` <${f.name}>` : "";
+            Reflect.defineProperty(result, "name", {
+                value: hookName + suffix,
+            });
         }
-        return children;
+        return result;
     }
-    function makeASTMulti(children) {
-        const ast = { type: 3 /* ASTType.Multi */, content: children };
-        if (children.every((c) => c.hasNoRepresentation)) {
-            ast.hasNoRepresentation = true;
+    function onWillStart(fn) {
+        const { node } = getContext("component");
+        node.willStart.push(decorate(node, fn, "onWillStart"));
+    }
+    function onWillUpdateProps(fn) {
+        const { node } = getContext("component");
+        node.willUpdateProps.push(decorate(node, fn, "onWillUpdateProps"));
+    }
+    function onMounted(fn) {
+        const { node } = getContext("component");
+        node.mounted.push(decorate(node, fn, "onMounted"));
+    }
+    function onWillPatch(fn) {
+        const { node } = getContext("component");
+        node.willPatch.unshift(decorate(node, fn, "onWillPatch"));
+    }
+    function onPatched(fn) {
+        const { node } = getContext("component");
+        node.patched.push(decorate(node, fn, "onPatched"));
+    }
+    function onWillUnmount(fn) {
+        const { node } = getContext("component");
+        node.willUnmount.unshift(decorate(node, fn, "onWillUnmount"));
+    }
+    function onWillDestroy(fn) {
+        const context = getContext();
+        if (context.type === "component") {
+            context.node.willDestroy.unshift(decorate(context.node, fn, "onWillDestroy"));
+        }
+        else {
+            context.manager.onDestroyCb.push(fn);
         }
-        return ast;
     }
-    /**
-     * 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 makeASTMulti(children);
+    function onError(callback) {
+        const { node } = getContext("component");
+        let handlers = nodeErrorHandlers.get(node);
+        if (!handlers) {
+            handlers = [];
+            nodeErrorHandlers.set(node, handlers);
         }
+        handlers.push(callback.bind(node.component));
     }
-    /**
-     * 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();
-                }
+
+    function computed(getter, options = {}) {
+        const computation = createComputation(() => {
+            const newValue = getter();
+            if (!Object.is(computation.value, newValue)) {
+                onWriteAtom(computation);
             }
-            else {
-                throw new OwlError("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
+            return newValue;
+        }, true);
+        function readComputed() {
+            if (computation.state !== ComputationState.EXECUTED) {
+                updateComputation(computation);
             }
+            onReadAtom(computation);
+            return computation.value;
         }
-    }
-    /**
-     * Normalizes the content of an Element so that t-out directives on components
-     * are removed and instead places a <t t-out=""> 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 normalizeTOut(el) {
-        const elements = [...el.querySelectorAll(`[t-out]`)].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-out on a component that already has content`);
+        readComputed[atomSymbol] = computation;
+        readComputed.set = options.set ?? (() => { });
+        const context = contextStack.at(-1);
+        if (context) {
+            if (context.type === "component") {
+                context.node.computations.push(computation);
             }
-            const value = el.getAttribute("t-out");
-            el.removeAttribute("t-out");
-            const t = el.ownerDocument.createElement("t");
-            if (value != null) {
-                t.setAttribute("t-out", value);
+            else if (context.type === "plugin") {
+                context.manager.computations.push(computation);
             }
-            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);
-        normalizeTOut(el);
-    }
-
-    function compile(template, options = {
-        hasGlobalValues: false,
-    }) {
-        // parsing
-        const ast = parse(template, options.customDirectives);
-        // code generation
-        const codeGenerator = new CodeGenerator(ast, options);
-        const code = codeGenerator.generateCode();
-        // template function
-        try {
-            return new Function("app, bdom, helpers", code);
-        }
-        catch (originalError) {
-            const { name } = options;
-            const nameStr = name ? `template "${name}"` : "anonymous template";
-            const err = new OwlError(`Failed to compile ${nameStr}: ${originalError.message}\n\ngenerated code:\nfunction(app, bdom, helpers) {\n${code}\n}`);
-            err.cause = originalError;
-            throw err;
         }
+        return readComputed;
     }
 
-    // do not modify manually. This file is generated by the release script.
-    const version = "3.0.0-alpha";
-
-    function effect(fn) {
-        const computation = createComputation(() => {
-            // In case the cleanup read an atom.
-            // todo: test it
-            setComputation(undefined);
-            unsubscribeEffect(computation);
-            setComputation(computation);
-            return fn();
-        }, false);
-        getCurrentComputation()?.observers.add(computation);
-        updateComputation(computation);
-        // Remove sources and unsubscribe
-        return function cleanupEffect() {
-            // In case the cleanup read an atom.
-            // todo: test it
-            const previousComputation = getCurrentComputation();
-            setComputation(undefined);
-            unsubscribeEffect(computation);
-            setComputation(previousComputation);
+    function buildSignal(value, set) {
+        const atom = {
+            type: "signal",
+            value,
+            observers: new Set(),
+        };
+        let readValue = set(atom);
+        const readSignal = () => {
+            onReadAtom(atom);
+            return readValue;
+        };
+        readSignal[atomSymbol] = atom;
+        readSignal.set = function writeSignal(newValue) {
+            if (Object.is(atom.value, newValue)) {
+                return;
+            }
+            atom.value = newValue;
+            readValue = set(atom);
+            onWriteAtom(atom);
         };
+        return readSignal;
     }
-    function unsubscribeEffect(effect) {
-        removeSources(effect);
-        cleanupEffect(effect);
-        for (const childEffect of effect.observers) {
-            // Consider it executed to avoid it's re-execution
-            // todo: make a test for it
-            childEffect.state = ComputationState.EXECUTED;
-            removeSources(childEffect);
-            unsubscribeEffect(childEffect);
+    function invalidateSignal(signal) {
+        if (typeof signal !== "function" || signal[atomSymbol]?.type !== "signal") {
+            throw new OwlError(`Value is not a signal (${signal})`);
         }
-        effect.observers.clear();
+        onWriteAtom(signal[atomSymbol]);
+    }
+    function signalArray(initialValue) {
+        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    }
+    function signalObject(initialValue) {
+        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    }
+    function signalMap(initialValue) {
+        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
     }
-    function cleanupEffect(effect) {
-        // the computation.value of an effect is a cleanup function
-        const cleanupFn = effect.value;
-        if (cleanupFn && typeof cleanupFn === "function") {
-            cleanupFn();
-            effect.value = undefined;
-        }
+    function signalSet(initialValue) {
+        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    }
+    function signal(value) {
+        return buildSignal(value, (atom) => atom.value);
     }
+    signal.invalidate = invalidateSignal;
+    signal.Array = signalArray;
+    signal.Map = signalMap;
+    signal.Object = signalObject;
+    signal.Set = signalSet;
 
-    class Plugin {
-        static _shadowId;
-        static get id() {
-            return this._shadowId ?? this.name;
-        }
-        static set id(shadowId) {
-            this._shadowId = shadowId;
-        }
-        __owl__;
-        constructor(manager) {
-            this.__owl__ = manager;
+    function assertType(value, validation, errorMessage = "Value does not match the type") {
+        const issues = validateType(value, validation);
+        if (issues.length) {
+            const issueStrings = JSON.stringify(issues, (key, value) => {
+                if (typeof value === "function") {
+                    return value.name;
+                }
+                return value;
+            }, 2);
+            throw new OwlError(`${errorMessage}\n${issueStrings}`);
         }
-        setup() { }
     }
-    class PluginManager {
-        app;
-        config;
-        onDestroyCb = [];
-        plugins;
-        status = 0 /* STATUS.NEW */;
-        constructor(app, options = {}) {
-            this.app = app;
-            this.config = options.config ?? {};
-            if (options.parent) {
-                const parent = options.parent;
-                parent.onDestroyCb.push(() => this.destroy());
-                this.plugins = Object.create(parent.plugins);
-            }
-            else {
-                this.plugins = {};
-            }
+    function createContext(issues, value, path, parent) {
+        return {
+            issueDepth: 0,
+            path,
+            value,
+            get isValid() {
+                return !issues.length;
+            },
+            addIssue(issue) {
+                issues.push({
+                    received: this.value,
+                    path: this.path,
+                    ...issue,
+                });
+            },
+            mergeIssues(newIssues) {
+                issues.push(...newIssues);
+            },
+            validate(type) {
+                type(this);
+                if (!this.isValid && parent) {
+                    parent.issueDepth = this.issueDepth + 1;
+                }
+            },
+            withIssues(issues) {
+                return createContext(issues, this.value, this.path, this);
+            },
+            withKey(key) {
+                return createContext(issues, this.value[key], this.path.concat(key), this);
+            },
+        };
+    }
+    function validateType(value, validation) {
+        const issues = [];
+        validation(createContext(issues, value, []));
+        return issues;
+    }
+
+    class Resource {
+        _items = signal.Array([]);
+        _name;
+        _validation;
+        constructor(options = {}) {
+            this._name = options.name;
+            this._validation = options.validation;
         }
-        destroy() {
-            const cbs = this.onDestroyCb;
-            while (cbs.length) {
-                cbs.pop()();
+        items = computed(() => {
+            return this._items()
+                .sort((el1, el2) => el1[0] - el2[0])
+                .map((elem) => elem[1]);
+        });
+        add(item, options = {}) {
+            if (this._validation) {
+                const info = this._name ? ` (resource '${this._name}')` : "";
+                assertType(item, this._validation, `Resource item does not match the type${info}`);
             }
-            this.status = 3 /* STATUS.DESTROYED */;
-        }
-        getPluginById(id) {
-            return this.plugins[id] || null;
-        }
-        getPlugin(pluginConstructor) {
-            return this.getPluginById(pluginConstructor.id);
+            this._items().push([options.sequence ?? 50, item]);
+            return this;
         }
-        startPlugin(pluginConstructor) {
-            if (!pluginConstructor.id) {
-                throw new OwlError(`Plugin "${pluginConstructor.name}" has no id`);
-            }
-            if (this.plugins.hasOwnProperty(pluginConstructor.id)) {
-                const existingPluginType = this.getPluginById(pluginConstructor.id).constructor;
-                if (existingPluginType !== pluginConstructor) {
-                    throw new OwlError(`Trying to start a plugin with the same id as an other plugin (id: '${pluginConstructor.id}', existing plugin: '${existingPluginType.name}', starting plugin: '${pluginConstructor.name}')`);
-                }
-                return null;
-            }
-            const plugin = new pluginConstructor(this);
-            this.plugins[pluginConstructor.id] = plugin;
-            plugin.setup();
-            return plugin;
+        delete(item) {
+            const items = this._items().filter(([seq, val]) => val !== item);
+            this._items.set(items);
+            return this;
         }
-        startPlugins(pluginConstructors) {
-            contextStack.push({
-                type: "plugin",
-                app: this.app,
-                manager: this,
-                get status() {
-                    return this.manager.status;
-                },
-            });
-            try {
-                for (const pluginConstructor of pluginConstructors) {
-                    this.startPlugin(pluginConstructor);
-                }
-            }
-            finally {
-                contextStack.pop();
-            }
-            this.status = 1 /* STATUS.MOUNTED */;
+        has(item) {
+            return this._items().some(([s, value]) => value === item);
         }
     }
-    function startPlugins(manager, plugins) {
-        if (Array.isArray(plugins)) {
-            manager.startPlugins(plugins);
-        }
-        else {
-            manager.onDestroyCb.push(effect(() => {
-                const pluginItems = plugins.items();
-                untrack(() => manager.startPlugins(pluginItems));
-            }));
+    function useResource(r, elements) {
+        for (let elem of elements) {
+            r.add(elem);
         }
+        onWillDestroy(() => {
+            for (let elem of elements) {
+                r.delete(elem);
+            }
+        });
     }
 
-    // -----------------------------------------------------------------------------
-    //  Scheduler
-    // -----------------------------------------------------------------------------
-    class Scheduler {
-        // capture the value of requestAnimationFrame as soon as possible, to avoid
-        // interactions with other code, such as test frameworks that override them
-        static requestAnimationFrame = window.requestAnimationFrame.bind(window);
-        tasks = new Set();
-        requestAnimationFrame;
-        frame = 0;
-        delayedRenders = [];
-        cancelledNodes = new Set();
-        processing = false;
-        constructor() {
-            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
-        }
-        addFiber(fiber) {
-            this.tasks.add(fiber.root);
+    class Registry {
+        _map = signal.Object(Object.create(null));
+        _name;
+        _validation;
+        constructor(options = {}) {
+            this._name = options.name || "registry";
+            this._validation = options.validation;
         }
-        scheduleDestroy(node) {
-            this.cancelledNodes.add(node);
-            if (this.frame === 0) {
-                this.frame = this.requestAnimationFrame(() => this.processTasks());
+        entries = computed(() => {
+            const entries = Object.entries(this._map())
+                .sort((el1, el2) => el1[1][0] - el2[1][0])
+                .map(([str, elem]) => [str, elem[1]]);
+            return entries;
+        });
+        items = computed(() => this.entries().map((e) => e[1]));
+        addById(item, options = {}) {
+            if (!item.id) {
+                throw new OwlError(`Item should have an id key (registry '${this._name}')`);
             }
+            return this.add(item.id, item, { sequence: options.sequence ?? 50 });
         }
-        /**
-         * 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 !== 3 /* STATUS.DESTROYED */ && f.node.fiber === f) {
-                        f.render();
-                    }
-                }
-            }
-            if (this.frame === 0) {
-                this.frame = this.requestAnimationFrame(() => this.processTasks());
+        add(key, value, options = {}) {
+            if (this._validation) {
+                const info = this._name ? ` (registry '${this._name}', key: '${key}')` : ` (key: '${key}')`;
+                assertType(value, this._validation, `Registry entry does not match the type${info}`);
             }
+            this._map()[key] = [options.sequence ?? 50, value];
+            return this;
         }
-        processTasks() {
-            if (this.processing) {
-                return;
-            }
-            this.processing = true;
-            this.frame = 0;
-            for (let node of this.cancelledNodes) {
-                node._destroy();
-            }
-            this.cancelledNodes.clear();
-            for (let task of this.tasks) {
-                this.processFiber(task);
-            }
-            for (let task of this.tasks) {
-                if (task.node.status === 3 /* STATUS.DESTROYED */) {
-                    this.tasks.delete(task);
-                }
+        get(key, defaultValue) {
+            const hasKey = key in this._map();
+            if (!hasKey && arguments.length < 2) {
+                throw new Error(`KeyNotFoundError: Cannot find key "${key}" (registry '${this._name}')`);
             }
-            this.processing = false;
+            return hasKey ? this._map()[key][1] : defaultValue;
         }
-        processFiber(fiber) {
-            if (fiber.root !== fiber) {
-                this.tasks.delete(fiber);
+        delete(key) {
+            delete this._map()[key];
+        }
+        has(key) {
+            return key in this._map();
+        }
+    }
+
+    const anyType = function validateAny() { };
+    const booleanType = function validateBoolean(context) {
+        if (typeof context.value !== "boolean") {
+            context.addIssue({ message: "value is not a boolean" });
+        }
+    };
+    const numberType = function validateNumber(context) {
+        if (typeof context.value !== "number") {
+            context.addIssue({ message: "value is not a number" });
+        }
+    };
+    const stringType = function validateString(context) {
+        if (typeof context.value !== "string") {
+            context.addIssue({ message: "value is not a string" });
+        }
+    };
+    function arrayType(elementType) {
+        return function validateArray(context) {
+            if (!Array.isArray(context.value)) {
+                context.addIssue({ message: "value is not an array" });
                 return;
             }
-            const hasError = fibersInError.has(fiber);
-            if (hasError && fiber.counter !== 0) {
-                this.tasks.delete(fiber);
+            if (!elementType) {
                 return;
             }
-            if (fiber.node.status === 3 /* STATUS.DESTROYED */) {
-                this.tasks.delete(fiber);
-                return;
+            for (let index = 0; index < context.value.length; index++) {
+                context.withKey(index).validate(elementType);
             }
-            if (fiber.counter === 0) {
-                if (!hasError) {
-                    fiber.complete();
-                }
-                // at this point, the fiber should have been applied to the DOM, so we can
-                // remove it from the task list. If it is not the case, it means that there
-                // was an error and an error handler triggered a new rendering that recycled
-                // the fiber, so in that case, we actually want to keep the fiber around,
-                // otherwise it will just be ignored.
-                if (fiber.appliedToDom) {
-                    this.tasks.delete(fiber);
-                }
+        };
+    }
+    function constructorType(constructor) {
+        return function validateConstructor(context) {
+            if (!(typeof context.value === "function") ||
+                !(context.value === constructor || context.value.prototype instanceof constructor)) {
+                context.addIssue({ message: `value is not '${constructor.name}' or an extension` });
             }
-        }
+        };
     }
-
-    let hasBeenLogged = false;
-    const apps = new Set();
-    window.__OWL_DEVTOOLS__ ||= { apps, Fiber, RootFiber, toRaw, proxy };
-    class App extends TemplateSet {
-        static validateTarget = validateTarget;
-        static apps = apps;
-        static version = version;
-        name;
-        scheduler = new Scheduler();
-        roots = new Set();
-        pluginManager;
-        constructor(config = {}) {
-            super(config);
-            this.name = config.name || "";
-            apps.add(this);
-            this.pluginManager = new PluginManager(this, { config: config.config });
-            if (config.plugins) {
-                startPlugins(this.pluginManager, config.plugins);
+    function customValidator(type, validator, errorMessage = "value does not match custom validation") {
+        return function validateCustom(context) {
+            context.validate(type);
+            if (!context.isValid) {
+                return;
             }
-            if (config.test) {
-                this.dev = true;
+            if (!validator(context.value)) {
+                context.addIssue({ message: errorMessage });
             }
-            if (this.dev && !config.test && !hasBeenLogged) {
-                console.info(`Owl is running in 'dev' mode.`);
-                hasBeenLogged = true;
+        };
+    }
+    function functionType(parameters = [], result = undefined) {
+        return function validateFunction(context) {
+            if (typeof context.value !== "function") {
+                context.addIssue({ message: "value is not a function" });
             }
-        }
-        createRoot(Root, config = {}) {
-            const props = config.props || {};
-            let resolve;
-            let reject;
-            const promise = new Promise((res, rej) => {
-                resolve = res;
-                reject = rej;
-            });
-            const restore = saveContext();
-            let node;
-            let error = null;
-            try {
-                node = new ComponentNode(Root, props, this, null, null);
+        };
+    }
+    function instanceType(constructor) {
+        return function validateInstanceType(context) {
+            if (!(context.value instanceof constructor)) {
+                context.addIssue({ message: `value is not an instance of '${constructor.name}'` });
             }
-            catch (e) {
-                error = e;
-                reject(e);
+        };
+    }
+    function intersection(types) {
+        return function validateIntersection(context) {
+            for (const type of types) {
+                context.validate(type);
             }
-            finally {
-                restore();
+        };
+    }
+    function literalType(literal) {
+        return function validateLiteral(context) {
+            if (context.value !== literal) {
+                context.addIssue({
+                    message: `value is not equal to ${typeof literal === "string" ? `'${literal}'` : literal}`,
+                });
             }
-            const root = {
-                node: node,
-                promise,
-                mount: (target, options) => {
-                    if (error) {
-                        return promise;
-                    }
-                    App.validateTarget(target);
-                    this.mountNode(node, target, resolve, reject, options);
-                    return promise;
-                },
-                destroy: () => {
-                    this.roots.delete(root);
-                    node.destroy();
-                    this.scheduler.processTasks();
-                },
-            };
-            this.roots.add(root);
-            return root;
+        };
+    }
+    function literalSelection(literals) {
+        return union(literals.map(literalType));
+    }
+    function validateObject(context, schema, isStrict) {
+        if (typeof context.value !== "object" || Array.isArray(context.value) || context.value === null) {
+            context.addIssue({ message: "value is not an object" });
+            return;
         }
-        mountNode(node, target, resolve, reject, options) {
-            // Manually add the last resort error handler on the node
-            let handlers = nodeErrorHandlers.get(node);
-            if (!handlers) {
-                handlers = [];
-                nodeErrorHandlers.set(node, handlers);
-            }
-            handlers.unshift((e, finalize) => {
-                const finalError = finalize();
-                reject(finalError);
-            });
-            // manually set a onMounted callback.
-            // that way, we are independant from the current node.
-            node.mounted.push(() => {
-                resolve(node.component);
-                handlers.shift();
-            });
-            node.mountComponent(target, options);
+        if (!schema) {
+            return;
         }
-        destroy() {
-            for (let root of this.roots) {
-                root.destroy();
+        const isShape = !Array.isArray(schema);
+        let shape = schema;
+        if (Array.isArray(schema)) {
+            shape = {};
+            for (const key of schema) {
+                shape[key] = null;
             }
-            this.pluginManager.destroy();
-            this.scheduler.processTasks();
-            apps.delete(this);
-        }
-        handleError(...args) {
-            return handleError(...args);
         }
-    }
-    async function mount(C, target, config = {}) {
-        const app = new App(config);
-        const root = app.createRoot(C, config);
-        return root.mount(target, config);
-    }
-
-    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;
+        const missingKeys = [];
+        for (const key in shape) {
+            const property = key.endsWith("?") ? key.slice(0, -1) : key;
+            if (context.value[property] === undefined) {
+                if (!key.endsWith("?")) {
+                    missingKeys.push(property);
                 }
+                continue;
             }
-        }
-        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
-        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
-        // as expected when there is a handler expression that evaluates to a falsy value
-        if (Object.hasOwnProperty.call(data, 0)) {
-            const handler = data[0];
-            if (typeof handler !== "function") {
-                throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
-            }
-            let node = data[1] ? data[1].__owl__ : null;
-            if (node ? node.status === 1 /* STATUS.MOUNTED */ : true) {
-                handler(data[1], ev);
+            if (isShape) {
+                context.withKey(property).validate(shape[key]);
             }
         }
-        return stopped;
-    };
-
-    function computed(getter, options = {}) {
-        const computation = createComputation(() => {
-            onWriteAtom(computation);
-            return getter();
-        }, true);
-        function readComputed() {
-            if (computation.state !== ComputationState.EXECUTED) {
-                updateComputation(computation);
+        if (missingKeys.length) {
+            context.addIssue({
+                message: "object value has missing keys",
+                missingKeys,
+            });
+        }
+        if (isStrict) {
+            const unknownKeys = [];
+            for (const key in context.value) {
+                if (!(key in shape) && !(`${key}?` in shape)) {
+                    unknownKeys.push(key);
+                }
+            }
+            if (unknownKeys.length) {
+                context.addIssue({
+                    message: "object value has unknown keys",
+                    unknownKeys,
+                });
             }
-            onReadAtom(computation);
-            return computation.value;
         }
-        readComputed[atomSymbol] = computation;
-        readComputed.set = options.set ?? (() => { });
-        return readComputed;
     }
-
-    function buildSignal(value, set) {
-        const atom = {
-            type: "signal",
-            value,
-            observers: new Set(),
+    function objectType(schema = {}) {
+        return function validateLooseObject(context) {
+            validateObject(context, schema, false);
         };
-        let readValue = set(atom);
-        const readSignal = () => {
-            onReadAtom(atom);
-            return readValue;
+    }
+    function strictObjectType(schema) {
+        return function validateStrictObject(context) {
+            validateObject(context, schema, true);
         };
-        readSignal[atomSymbol] = atom;
-        readSignal.set = function writeSignal(newValue) {
-            if (Object.is(atom.value, newValue)) {
-                return;
+    }
+    function promiseType(type) {
+        return function validatePromise(context) {
+            if (!(context.value instanceof Promise)) {
+                context.addIssue({ message: "value is not a promise" });
             }
-            atom.value = newValue;
-            readValue = set(atom);
-            onWriteAtom(atom);
         };
-        return readSignal;
-    }
-    function invalidateSignal(signal) {
-        if (typeof signal !== "function" || signal[atomSymbol]?.type !== "signal") {
-            throw new OwlError(`Value is not a signal (${signal})`);
-        }
-        onWriteAtom(signal[atomSymbol]);
     }
-    function signalArray(initialValue) {
-        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    function recordType(valueType) {
+        return function validateRecord(context) {
+            if (typeof context.value !== "object" ||
+                Array.isArray(context.value) ||
+                context.value === null) {
+                context.addIssue({ message: "value is not an object" });
+                return;
+            }
+            if (!valueType) {
+                return;
+            }
+            for (const key in context.value) {
+                context.withKey(key).validate(valueType);
+            }
+        };
     }
-    function signalObject(initialValue) {
-        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    function tuple(types) {
+        return function validateTuple(context) {
+            if (!Array.isArray(context.value)) {
+                context.addIssue({ message: "value is not an array" });
+                return;
+            }
+            if (context.value.length !== types.length) {
+                context.addIssue({ message: "tuple value does not have the correct length" });
+                return;
+            }
+            for (let index = 0; index < types.length; index++) {
+                context.withKey(index).validate(types[index]);
+            }
+        };
     }
-    function signalMap(initialValue) {
-        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    function union(types) {
+        return function validateUnion(context) {
+            let firstIssueIndex = 0;
+            const subIssues = [];
+            for (const type of types) {
+                const subContext = context.withIssues(subIssues);
+                subContext.validate(type);
+                if (subIssues.length === firstIssueIndex || subContext.issueDepth > 0) {
+                    context.mergeIssues(subIssues.slice(firstIssueIndex));
+                    return;
+                }
+                firstIssueIndex = subIssues.length;
+            }
+            context.addIssue({
+                message: "value does not match union type",
+                subIssues,
+            });
+        };
     }
-    function signalSet(initialValue) {
-        return buildSignal(initialValue, (atom) => proxifyTarget(atom.value, atom));
+    function reactiveValueType(type) {
+        return function validateReactiveValue(context) {
+            if (typeof context.value !== "function" || !context.value[atomSymbol]) {
+                context.addIssue({ message: "value is not a reactive value" });
+            }
+        };
     }
-    function signal(value) {
-        return buildSignal(value, (atom) => atom.value);
+    function ref(type) {
+        return union([literalType(null), instanceType(type)]);
     }
-    signal.invalidate = invalidateSignal;
-    signal.Array = signalArray;
-    signal.Map = signalMap;
-    signal.Object = signalObject;
-    signal.Set = signalSet;
+    const types = {
+        and: intersection,
+        any: anyType,
+        array: arrayType,
+        boolean: booleanType,
+        constructor: constructorType,
+        customValidator: customValidator,
+        function: functionType,
+        instanceOf: instanceType,
+        literal: literalType,
+        number: numberType,
+        object: objectType,
+        or: union,
+        promise: promiseType,
+        record: recordType,
+        ref,
+        selection: literalSelection,
+        signal: reactiveValueType,
+        strictObject: strictObjectType,
+        string: stringType,
+        tuple: tuple,
+    };
 
-    class Resource {
-        _items = signal.Array([]);
-        _name;
-        _validation;
-        constructor(options = {}) {
-            this._name = options.name;
-            this._validation = options.validation;
-        }
-        items = computed(() => {
-            return this._items()
-                .sort((el1, el2) => el1[0] - el2[0])
-                .map((elem) => elem[1]);
-        });
-        add(item, options = {}) {
-            if (this._validation) {
-                const info = this._name ? ` (resource '${this._name}')` : "";
-                assertType(item, this._validation, `Resource item does not match the type${info}`);
-            }
-            this._items().push([options.sequence ?? 50, item]);
-            return this;
-        }
-        delete(item) {
-            const items = this._items().filter(([seq, val]) => val !== item);
-            this._items.set(items);
-            return this;
-        }
-        has(item) {
-            return this._items().some(([s, value]) => value === item);
-        }
-    }
-    function useResource(r, elements) {
-        for (let elem of elements) {
-            r.add(elem);
-        }
-        onWillDestroy(() => {
-            for (let elem of elements) {
-                r.delete(elem);
+    function validateObjectWithDefaults(schema, defaultValues) {
+        const keys = Array.isArray(schema) ? schema : Object.keys(schema);
+        const mandatoryDefaultedKeys = keys.filter((key) => !key.endsWith("?") && key in defaultValues);
+        return (context) => {
+            if (mandatoryDefaultedKeys.length) {
+                context.addIssue({
+                    message: "props have default values on mandatory keys",
+                    keys: mandatoryDefaultedKeys,
+                });
             }
-        });
+            context.validate(types.object(schema));
+        };
     }
-
-    class Registry {
-        _map = signal.Object(Object.create(null));
-        _name;
-        _validation;
-        constructor(options = {}) {
-            this._name = options.name || "registry";
-            this._validation = options.validation;
-        }
-        entries = computed(() => {
-            const entries = Object.entries(this._map())
-                .sort((el1, el2) => el1[1][0] - el2[1][0])
-                .map(([str, elem]) => [str, elem[1]]);
-            return entries;
-        });
-        items = computed(() => this.entries().map((e) => e[1]));
-        addById(item, options = {}) {
-            if (!item.id) {
-                throw new OwlError(`Item should have an id key (registry '${this._name}')`);
+    function props(type, defaults) {
+        const { node, app, componentName } = getContext("component");
+        Object.assign(node.defaultProps, defaults);
+        function getProp(key) {
+            if (node.props[key] === undefined && defaults) {
+                return defaults[key];
             }
-            return this.add(item.id, item, { sequence: options.sequence ?? 50 });
+            return node.props[key];
         }
-        add(key, value, options = {}) {
-            if (this._validation) {
-                const info = this._name ? ` (registry '${this._name}', key: '${key}')` : ` (key: '${key}')`;
-                assertType(value, this._validation, `Registry entry does not match the type${info}`);
+        const result = Object.create(null);
+        function applyPropGetters(keys) {
+            for (const key of keys) {
+                Reflect.defineProperty(result, key, {
+                    enumerable: true,
+                    get: getProp.bind(null, key),
+                });
             }
-            this._map()[key] = [options.sequence ?? 50, value];
-            return this;
         }
-        get(key, defaultValue) {
-            const hasKey = key in this._map();
-            if (!hasKey && arguments.length < 2) {
-                throw new Error(`KeyNotFoundError: Cannot find key "${key}" (registry '${this._name}')`);
+        if (type) {
+            const keys = (Array.isArray(type) ? type : Object.keys(type)).map((key) => key.endsWith("?") ? key.slice(0, -1) : key);
+            applyPropGetters(keys);
+            if (app.dev) {
+                const validation = defaults ? validateObjectWithDefaults(type, defaults) : types.object(type);
+                assertType(node.props, validation, `Invalid component props (${componentName})`);
+                node.willUpdateProps.push((np) => {
+                    assertType(np, validation, `Invalid component props (${componentName})`);
+                });
             }
-            return hasKey ? this._map()[key][1] : defaultValue;
-        }
-        delete(key) {
-            delete this._map()[key];
         }
-        has(key) {
-            return key in this._map();
+        else {
+            const getKeys = (props) => {
+                const keys = [];
+                for (const k in props) {
+                    if (k.charCodeAt(0) !== 1) {
+                        keys.push(k);
+                    }
+                }
+                if (defaults) {
+                    for (const k in defaults) {
+                        if (!(k in props)) {
+                            keys.push(k);
+                        }
+                    }
+                }
+                return keys;
+            };
+            let keys = getKeys(node.props);
+            applyPropGetters(keys);
+            node.willUpdateProps.push((np) => {
+                for (const key of keys) {
+                    Reflect.deleteProperty(result, key);
+                }
+                keys = getKeys(np);
+                applyPropGetters(keys);
+            });
         }
+        return result;
     }
 
     function status(entity) {
@@ -6677,8 +6814,8 @@
     exports.xml = xml;
 
 
-    __info__.date = '2026-02-20T08:37:22.309Z';
-    __info__.hash = 'b348815';
+    __info__.date = '2026-04-02T11:14:58.432Z';
+    __info__.hash = '9ca35d8';
     __info__.url = 'https://github.com/odoo/owl';