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

package/dist/owl.cjs.js

@@ -129,10 +129,16 @@ function toggler(key, child) {
     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+/;
@@ -164,6 +170,9 @@ function attrsSetter(attrs) {
         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]);
         }
@@ -173,6 +182,9 @@ function attrsSetter(attrs) {
             if (k === "class") {
                 setClass.call(this, attrs[k]);
             }
+            else if (k === "style") {
+                setStyle.call(this, attrs[k]);
+            }
             else {
                 setAttribute.call(this, k, attrs[k]);
             }
@@ -190,6 +202,9 @@ function attrsUpdater(attrs, oldAttrs) {
             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);
             }
@@ -205,6 +220,9 @@ function attrsUpdater(attrs, oldAttrs) {
                 if (k === "class") {
                     updateClass.call(this, "", oldAttrs[k]);
                 }
+                else if (k === "style") {
+                    updateStyle.call(this, "", oldAttrs[k]);
+                }
                 else {
                     removeAttribute.call(this, k);
                 }
@@ -216,6 +234,9 @@ function attrsUpdater(attrs, oldAttrs) {
                 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);
                 }
@@ -288,6 +309,80 @@ function updateClass(val, oldVal) {
         }
     }
 }
+// ---------------------------------------------------------------------------
+// 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
@@ -423,16 +518,17 @@ function markup(valueOrStrings, ...placeholders) {
 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`;
@@ -446,13 +542,14 @@ function createElementHandler(evName, capture = false) {
             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;
@@ -462,12 +559,12 @@ function createElementHandler(evName, capture = false) {
 // 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] || {};
@@ -494,21 +591,27 @@ function nativeToSyntheticEvent(eventKey, event) {
     }
 }
 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
 // -----------------------------------------------------------------------------
@@ -648,11 +751,15 @@ function multi(children) {
 }
 
 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;
@@ -683,7 +790,7 @@ class VSimpleNode {
         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);
     }
@@ -694,7 +801,7 @@ let VText$1 = class VText extends VSimpleNode {
             this.text = text2;
         }
     }
-};
+}
 class VComment extends VSimpleNode {
     mount(parent, afterNode) {
         this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
@@ -702,7 +809,7 @@ class VComment extends VSimpleNode {
     patch() { }
 }
 function text(str) {
-    return new VText$1(str);
+    return new VText(str);
 }
 function comment(str) {
     return new VComment(str);
@@ -721,12 +828,18 @@ function toText(value) {
 }
 
 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) {
@@ -1021,6 +1134,10 @@ function updateCtx(ctx, tree) {
                     setter = setClass;
                     updater = updateClass;
                 }
+                else if (info.name === "style") {
+                    setter = setStyle;
+                    updater = updateStyle;
+                }
                 else {
                     setter = createAttrUpdater(info.name);
                     updater = setter;
@@ -1106,8 +1223,8 @@ function createBlockClass(template, ctx) {
         (((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;
@@ -1163,8 +1280,7 @@ function createBlockClass(template, ctx) {
                     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++) {
@@ -1178,6 +1294,7 @@ function createBlockClass(template, ctx) {
                     }
                 }
             }
+            nodeInsertBefore.call(parent, el, afterNode);
             this.el = el;
             this.parentEl = parent;
             if (cbRefs.length) {
@@ -1255,11 +1372,17 @@ function setText(value) {
 }
 
 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
 // -----------------------------------------------------------------------------
@@ -1475,9 +1598,13 @@ function createMapping(ch1, startIdx1, endIdx2) {
     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;
@@ -1733,127 +1860,6 @@ class Component {
     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";
@@ -1946,6 +1952,20 @@ function removeSources(computation) {
     }
     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;
@@ -1977,668 +1997,332 @@ function untrack(fn) {
     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 });
+        }
     }
 }
 
@@ -2652,6 +2336,7 @@ class ComponentNode {
     forceNextRender = false;
     parentKey;
     props;
+    defaultProps = {};
     renderFn;
     parent;
     children = Object.create(null);
@@ -2663,6 +2348,7 @@ class ComponentNode {
     patched = [];
     willDestroy = [];
     signalComputation;
+    computations = [];
     pluginManager;
     constructor(C, props, app, parent, parentKey) {
         this.app = app;
@@ -2670,7 +2356,7 @@ class ComponentNode {
         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,
@@ -2806,10 +2492,19 @@ class ComponentNode {
                 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;
@@ -3438,6 +3133,13 @@ function createRef(ref) {
         }
     };
 }
+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`);
@@ -3532,8 +3234,8 @@ const helpers = {
     createRef,
     modelExpr,
     createComponent,
-    Portal,
     callTemplate,
+    callHandler,
 };
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
@@ -3641,7 +3343,6 @@ function xml(...args) {
     return name;
 }
 xml.nextId = 1;
-TemplateSet.registerTemplate("__portal__", portalTemplate);
 
 /**
  * Owl QWeb Expression Parser
@@ -3853,11 +3554,18 @@ const isRightSeparator = (token) => token && (token.type === "RIGHT_BRACE" || to
  * 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];
@@ -3898,18 +3606,21 @@ function compileExprToArray(expr) {
             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) {
@@ -3930,14 +3641,24 @@ function compileExprToArray(expr) {
             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) {
@@ -3956,8 +3677,11 @@ const zero = Symbol("zero");
 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;
@@ -4055,7 +3779,7 @@ class BlockDescription {
         return t.innerHTML;
     }
 }
-function createContext(parentCtx, params) {
+function createContext$1(parentCtx, params) {
     return Object.assign({
         block: null,
         index: 0,
@@ -4223,7 +3947,7 @@ class CodeGenerator {
         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;
     }
@@ -4317,8 +4041,6 @@ class CodeGenerator {
                 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) {
@@ -4404,7 +4126,8 @@ class CodeGenerator {
             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 });
@@ -4482,11 +4205,22 @@ class CodeGenerator {
         // 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]}'`;
@@ -4497,23 +4231,23 @@ class CodeGenerator {
                         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;
         }
@@ -4547,7 +4281,7 @@ class CodeGenerator {
             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,
@@ -4603,7 +4337,7 @@ class CodeGenerator {
         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})`;
@@ -4618,7 +4352,7 @@ class CodeGenerator {
     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);
@@ -4714,7 +4448,7 @@ class CodeGenerator {
             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--;
@@ -4726,7 +4460,7 @@ class CodeGenerator {
     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,
@@ -4753,7 +4487,7 @@ class CodeGenerator {
         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,
@@ -4806,12 +4540,11 @@ class CodeGenerator {
         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 {
@@ -4956,9 +4689,29 @@ class CodeGenerator {
         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) {
@@ -5015,13 +4768,6 @@ class CodeGenerator {
             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,
@@ -5126,26 +4872,6 @@ class CodeGenerator {
         }
         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;
-    }
 }
 
 // -----------------------------------------------------------------------------
@@ -5181,7 +4907,6 @@ function parseNode(node, ctx) {
         parseTDebugLog(node, ctx) ||
         parseTForEach(node, ctx) ||
         parseTIf(node, ctx) ||
-        parseTPortal(node, ctx) ||
         parseTTranslation(node, ctx) ||
         parseTTranslationContext(node, ctx) ||
         parseTCall(node, ctx) ||
@@ -5328,6 +5053,7 @@ function parseDOMNode(node, ctx) {
             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,
@@ -5337,6 +5063,7 @@ function parseDOMNode(node, ctx) {
                 hasDynamicChildren: false,
                 shouldTrim: hasTrimMod,
                 shouldNumberize: hasNumberMod,
+                isProxy: hasProxyMod,
             };
             if (isSelect) {
                 // don't pollute the original ctx
@@ -5808,694 +5535,1104 @@ function parseTTranslationContext(node, ctx) {
     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) {
@@ -6676,6 +6813,6 @@ exports.whenReady = whenReady;
 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';