@odoo/owl 2.8.1 → 3.0.0-alpha.10

package/dist/owl.iife.js

@@ -32,6 +32,7 @@
     // -----------------------------------------------------------------------------
     // Toggler node
     // -----------------------------------------------------------------------------
+    const txt = document.createTextNode("");
     class VToggler {
         constructor(key, child) {
             this.key = key;
@@ -57,11 +58,13 @@
                 child1.patch(child2, withBeforeRemove);
             }
             else {
-                child2.mount(this.parentEl, child1.firstNode());
+                const firstNode = child1.firstNode();
+                firstNode.parentElement.insertBefore(txt, firstNode);
                 if (withBeforeRemove) {
                     child1.beforeRemove();
                 }
                 child1.remove();
+                child2.mount(this.parentEl, txt);
                 this.child = child2;
                 this.key = other.key;
             }
@@ -334,13 +337,6 @@
             }
         }).then(fn || function () { });
     }
-    async function loadFile(url) {
-        const result = await fetch(url);
-        if (!result.ok) {
-            throw new OwlError("Error while fetching xml templates");
-        }
-        return await result.text();
-    }
     /*
      * This class just transports the fact that a string is safe
      * to be injected as HTML. Overriding a JS primitive is quite painful though
@@ -901,7 +897,7 @@
     function buildContext(tree, ctx, fromIdx) {
         if (!ctx) {
             const children = new Array(tree.info.filter((v) => v.type === "child").length);
-            ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN, refList: [] };
+            ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN };
             fromIdx = 0;
         }
         if (tree.refN) {
@@ -1008,14 +1004,16 @@
                     });
                     break;
                 }
-                case "ref":
-                    const index = ctx.cbRefs.push(info.idx) - 1;
+                case "ref": {
                     ctx.locations.push({
                         idx: info.idx,
                         refIdx: info.refIdx,
-                        setData: makeRefSetter(index, ctx.refList),
+                        setData: NO_OP,
                         updateData: NO_OP,
                     });
+                    ctx.cbRefs.push(info.idx);
+                    break;
+                }
             }
         }
     }
@@ -1024,27 +1022,6 @@
     // -----------------------------------------------------------------------------
     function buildBlock(template, ctx) {
         let B = createBlockClass(template, ctx);
-        if (ctx.cbRefs.length) {
-            const cbRefs = ctx.cbRefs;
-            const refList = ctx.refList;
-            let cbRefsNumber = cbRefs.length;
-            B = class extends B {
-                mount(parent, afterNode) {
-                    refList.push(new Array(cbRefsNumber));
-                    super.mount(parent, afterNode);
-                    for (let cbRef of refList.pop()) {
-                        cbRef();
-                    }
-                }
-                remove() {
-                    super.remove();
-                    for (let cbRef of cbRefs) {
-                        let fn = this.data[cbRef];
-                        fn(null);
-                    }
-                }
-            };
-        }
         if (ctx.children.length) {
             B = class extends B {
                 constructor(data, children) {
@@ -1058,14 +1035,9 @@
         return (data) => new B(data);
     }
     function createBlockClass(template, ctx) {
-        const { refN, collectors, children } = ctx;
+        const { refN, collectors, children, locations, cbRefs } = ctx;
         const colN = collectors.length;
-        ctx.locations.sort((a, b) => a.idx - b.idx);
-        const locations = ctx.locations.map((loc) => ({
-            refIdx: loc.refIdx,
-            setData: loc.setData,
-            updateData: loc.updateData,
-        }));
+        locations.sort((a, b) => a.idx - b.idx);
         const locN = locations.length;
         const childN = children.length;
         const childrenLocs = children;
@@ -1141,6 +1113,15 @@
                 }
                 this.el = el;
                 this.parentEl = parent;
+                if (cbRefs.length) {
+                    const data = this.data;
+                    const refs = this.refs;
+                    for (let cbRef of cbRefs) {
+                        const { idx, refIdx } = locations[cbRef];
+                        const fn = data[idx];
+                        fn(refs[refIdx], null);
+                    }
+                }
             };
             Block.prototype.patch = function patch(other, withBeforeRemove) {
                 if (this === other) {
@@ -1189,16 +1170,23 @@
                     }
                 }
             };
+            Block.prototype.remove = function remove() {
+                if (cbRefs.length) {
+                    const data = this.data;
+                    const refs = this.refs;
+                    for (let cbRef of cbRefs) {
+                        const { idx, refIdx } = locations[cbRef];
+                        const fn = data[idx];
+                        fn(null, refs[refIdx]);
+                    }
+                }
+                elementRemove.call(this.el);
+            };
         }
         return Block;
     }
     function setText(value) {
         characterDataSetData.call(this, toText(value));
-    }
-    function makeRefSetter(index, refs) {
-        return function setRef(fn) {
-            refs[refs.length - 1][index] = () => fn(this);
-        };
     }
 
     const getDescriptor = (o, p) => Object.getOwnPropertyDescriptor(o, p);
@@ -1595,9 +1583,160 @@
         vnode.remove();
     }
 
+    var ComputationState;
+    (function (ComputationState) {
+        ComputationState[ComputationState["EXECUTED"] = 0] = "EXECUTED";
+        ComputationState[ComputationState["STALE"] = 1] = "STALE";
+        ComputationState[ComputationState["PENDING"] = 2] = "PENDING";
+    })(ComputationState || (ComputationState = {}));
+    let Effects;
+    let CurrentComputation;
+    // export function computed<T>(fn: () => T, opts?: Opts) {
+    //   // todo: handle cleanup
+    //   let computedComputation: Computation = {
+    //     state: ComputationState.STALE,
+    //     sources: new Set(),
+    //     isEager: true,
+    //     compute: () => {
+    //       return fn();
+    //     },
+    //     value: undefined,
+    //     name: opts?.name,
+    //   };
+    //   updateComputation(computedComputation);
+    // }
+    function onReadAtom(atom) {
+        if (!CurrentComputation)
+            return;
+        CurrentComputation.sources.add(atom);
+        atom.observers.add(CurrentComputation);
+    }
+    function onWriteAtom(atom) {
+        collectEffects(() => {
+            for (const ctx of atom.observers) {
+                if (ctx.state === ComputationState.EXECUTED) {
+                    if (ctx.isDerived)
+                        markDownstream(ctx);
+                    else
+                        Effects.push(ctx);
+                }
+                ctx.state = ComputationState.STALE;
+            }
+        });
+        batchProcessEffects();
+    }
+    function collectEffects(fn) {
+        if (Effects)
+            return fn();
+        Effects = [];
+        try {
+            return fn();
+        }
+        finally {
+        }
+    }
+    const batchProcessEffects = batched(processEffects);
+    function processEffects() {
+        if (!Effects)
+            return;
+        for (const computation of Effects) {
+            updateComputation(computation);
+        }
+        Effects = undefined;
+    }
+    function untrack(fn) {
+        return runWithComputation(undefined, fn);
+    }
+    function getCurrentComputation() {
+        return CurrentComputation;
+    }
+    function setComputation(computation) {
+        CurrentComputation = computation;
+    }
+    // todo: should probably use updateComputation instead.
+    function runWithComputation(computation, fn) {
+        const previousComputation = CurrentComputation;
+        CurrentComputation = computation;
+        let result;
+        try {
+            result = fn();
+        }
+        finally {
+            CurrentComputation = previousComputation;
+        }
+        return result;
+    }
+    function updateComputation(computation) {
+        var _a;
+        const state = computation.state;
+        if (computation.isDerived)
+            onReadAtom(computation);
+        if (state === ComputationState.EXECUTED)
+            return;
+        if (state === ComputationState.PENDING) {
+            computeSources(computation);
+            // If the state is still not stale after processing the sources, it means
+            // none of the dependencies have changed.
+            // todo: test it
+            if (computation.state !== ComputationState.STALE) {
+                computation.state = ComputationState.EXECUTED;
+                return;
+            }
+        }
+        // todo: test performance. We might want to avoid removing the atoms to
+        // directly re-add them at compute. Especially as we are making them stale.
+        removeSources(computation);
+        const previousComputation = CurrentComputation;
+        CurrentComputation = computation;
+        computation.value = (_a = computation.compute) === null || _a === void 0 ? void 0 : _a.call(computation);
+        computation.state = ComputationState.EXECUTED;
+        CurrentComputation = previousComputation;
+    }
+    function removeSources(computation) {
+        const sources = computation.sources;
+        for (const source of sources) {
+            const observers = source.observers;
+            observers.delete(computation);
+            // todo: if source has no effect observer anymore, remove its sources too
+            // todo: test it
+        }
+        sources.clear();
+    }
+    function markDownstream(derived) {
+        for (const observer of derived.observers) {
+            // if the state has already been marked, skip it
+            if (observer.state)
+                continue;
+            observer.state = ComputationState.PENDING;
+            if (observer.isDerived)
+                markDownstream(observer);
+            else
+                Effects.push(observer);
+        }
+    }
+    function computeSources(derived) {
+        for (const source of derived.sources) {
+            if (!("compute" in source))
+                continue;
+            updateComputation(source);
+        }
+    }
+
     // 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;
@@ -1610,9 +1749,10 @@
         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);
+                    errorHandlers[i](error, finalize);
                     handled = true;
                     break;
                 }
@@ -1628,10 +1768,6 @@
     }
     function handleError(params) {
         let { error } = params;
-        // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
-        if (!(error instanceof OwlError)) {
-            error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
-        }
         const node = "node" in params ? params.node : params.fiber.node;
         const fiber = "fiber" in params ? params.fiber : node.fiber;
         if (fiber) {
@@ -1646,14 +1782,7 @@
         }
         const handled = _handleError(node, error);
         if (!handled) {
-            console.warn(`[Owl] Unhandled error. Destroying the root component`);
-            try {
-                node.app.destroy();
-            }
-            catch (e) {
-                console.error(e);
-            }
-            throw error;
+            throw destroyApp(node.app, error);
         }
     }
 
@@ -1712,7 +1841,7 @@
         for (let fiber of fibers) {
             let node = fiber.node;
             fiber.render = throwOnRender;
-            if (node.status === 0 /* NEW */) {
+            if (node.status === 0 /* STATUS.NEW */) {
                 node.cancel();
             }
             node.fiber = null;
@@ -1778,13 +1907,16 @@
             const node = this.node;
             const root = this.root;
             if (root) {
-                try {
-                    this.bdom = true;
-                    this.bdom = node.renderFn();
-                }
-                catch (e) {
-                    node.app.handleError({ node, error: e });
-                }
+                // todo: should use updateComputation somewhere else.
+                runWithComputation(node.signalComputation, () => {
+                    try {
+                        this.bdom = true;
+                        this.bdom = node.renderFn();
+                    }
+                    catch (e) {
+                        node.app.handleError({ node, error: e });
+                    }
+                });
                 root.setCounter(root.counter - 1);
             }
         }
@@ -1897,7 +2029,7 @@
                 // unregistering the fiber before mounted since it can do another render
                 // and that the current rendering is obviously completed
                 node.fiber = null;
-                node.status = 1 /* MOUNTED */;
+                node.status = 1 /* STATUS.MOUNTED */;
                 this.appliedToDom = true;
                 let mountedFibers = this.mounted;
                 while ((current = mountedFibers.pop())) {
@@ -1914,567 +2046,104 @@
         }
     }
 
-    // Special key to subscribe to, to be notified of key creation/deletion
-    const KEYCHANGES = Symbol("Key changes");
-    // Used to specify the absence of a callback, can be used as WeakMap key but
-    // should only be used as a sentinel value and never called.
-    const NO_CALLBACK = () => {
-        throw new Error("Called NO_CALLBACK. Owl is broken, please report this to the maintainers.");
-    };
-    const objectToString = Object.prototype.toString;
-    const objectHasOwnProperty = Object.prototype.hasOwnProperty;
-    // Use arrays because Array.includes is faster than Set.has for small arrays
-    const SUPPORTED_RAW_TYPES = ["Object", "Array", "Set", "Map", "WeakMap"];
-    const COLLECTION_RAW_TYPES = ["Set", "Map", "WeakMap"];
-    /**
-     * extract "RawType" from strings like "[object RawType]" => this lets us ignore
-     * many native objects such as Promise (whose toString is [object Promise])
-     * or Date ([object Date]), while also supporting collections without using
-     * instanceof in a loop
-     *
-     * @param obj the object to check
-     * @returns the raw type of the object
-     */
-    function rawType(obj) {
-        return objectToString.call(toRaw(obj)).slice(8, -1);
+    let currentNode = null;
+    function saveCurrent() {
+        let n = currentNode;
+        return () => {
+            currentNode = n;
+        };
     }
-    /**
-     * Checks whether a given value can be made into a reactive object.
-     *
-     * @param value the value to check
-     * @returns whether the value can be made reactive
-     */
-    function canBeMadeReactive(value) {
-        if (typeof value !== "object") {
-            return false;
+    function getCurrent() {
+        if (!currentNode) {
+            throw new OwlError("No active component (a hook function should only be called in 'setup')");
         }
-        return SUPPORTED_RAW_TYPES.includes(rawType(value));
-    }
-    /**
-     * Creates a reactive from the given object/callback if possible and returns it,
-     * returns the original object otherwise.
-     *
-     * @param value the value make reactive
-     * @returns a reactive for the given object when possible, the original otherwise
-     */
-    function possiblyReactive(val, cb) {
-        return canBeMadeReactive(val) ? reactive(val, cb) : val;
-    }
-    const skipped = new WeakSet();
-    /**
-     * Mark an object or array so that it is ignored by the reactivity system
-     *
-     * @param value the value to mark
-     * @returns the object itself
-     */
-    function markRaw(value) {
-        skipped.add(value);
-        return value;
-    }
-    /**
-     * Given a reactive objet, return the raw (non reactive) underlying object
-     *
-     * @param value a reactive value
-     * @returns the underlying value
-     */
-    function toRaw(value) {
-        return targets.has(value) ? targets.get(value) : value;
+        return currentNode;
     }
-    const targetToKeysToCallbacks = new WeakMap();
-    /**
-     * Observes a given key on a target with an callback. The callback will be
-     * called when the given key changes on the target.
-     *
-     * @param target the target whose key should be observed
-     * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
-     *  or deletion)
-     * @param callback the function to call when the key changes
-     */
-    function observeTargetKey(target, key, callback) {
-        if (callback === NO_CALLBACK) {
-            return;
-        }
-        if (!targetToKeysToCallbacks.get(target)) {
-            targetToKeysToCallbacks.set(target, new Map());
-        }
-        const keyToCallbacks = targetToKeysToCallbacks.get(target);
-        if (!keyToCallbacks.get(key)) {
-            keyToCallbacks.set(key, new Set());
-        }
-        keyToCallbacks.get(key).add(callback);
-        if (!callbacksToTargets.has(callback)) {
-            callbacksToTargets.set(callback, new Set());
-        }
-        callbacksToTargets.get(callback).add(target);
+    function useComponent() {
+        return currentNode.component;
     }
-    /**
-     * Notify Reactives that are observing a given target that a key has changed on
-     * the target.
-     *
-     * @param target target whose Reactives should be notified that the target was
-     *  changed.
-     * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
-     *   or deleted)
-     */
-    function notifyReactives(target, key) {
-        const keyToCallbacks = targetToKeysToCallbacks.get(target);
-        if (!keyToCallbacks) {
-            return;
-        }
-        const callbacks = keyToCallbacks.get(key);
-        if (!callbacks) {
-            return;
-        }
-        // Loop on copy because clearReactivesForCallback will modify the set in place
-        for (const callback of [...callbacks]) {
-            clearReactivesForCallback(callback);
-            callback();
+    class ComponentNode {
+        constructor(C, props, app, parent, parentKey) {
+            this.fiber = null;
+            this.bdom = null;
+            this.status = 0 /* STATUS.NEW */;
+            this.forceNextRender = false;
+            this.children = Object.create(null);
+            this.willStart = [];
+            this.willUpdateProps = [];
+            this.willUnmount = [];
+            this.mounted = [];
+            this.willPatch = [];
+            this.patched = [];
+            this.willDestroy = [];
+            this.name = C.name;
+            currentNode = this;
+            this.app = app;
+            this.parent = parent;
+            this.parentKey = parentKey;
+            this.pluginManager = parent ? parent.pluginManager : app.pluginManager;
+            this.signalComputation = {
+                value: undefined,
+                compute: () => this.render(false),
+                sources: new Set(),
+                state: ComputationState.EXECUTED,
+            };
+            this.props = Object.assign({}, props);
+            const previousComputation = getCurrentComputation();
+            setComputation(this.signalComputation);
+            this.component = new C(this);
+            const ctx = { this: this.component, __owl__: this };
+            this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
+            this.component.setup();
+            setComputation(previousComputation);
+            currentNode = null;
         }
-    }
-    const callbacksToTargets = new WeakMap();
-    /**
-     * Clears all subscriptions of the Reactives associated with a given callback.
-     *
-     * @param callback the callback for which the reactives need to be cleared
-     */
-    function clearReactivesForCallback(callback) {
-        const targetsToClear = callbacksToTargets.get(callback);
-        if (!targetsToClear) {
-            return;
+        mountComponent(target, options) {
+            const fiber = new MountFiber(this, target, options);
+            this.app.scheduler.addFiber(fiber);
+            this.initiateRender(fiber);
         }
-        for (const target of targetsToClear) {
-            const observedKeys = targetToKeysToCallbacks.get(target);
-            if (!observedKeys) {
-                continue;
+        async initiateRender(fiber) {
+            this.fiber = fiber;
+            if (this.mounted.length) {
+                fiber.root.mounted.push(fiber);
             }
-            for (const [key, callbacks] of observedKeys.entries()) {
-                callbacks.delete(callback);
-                if (!callbacks.size) {
-                    observedKeys.delete(key);
-                }
+            const component = this.component;
+            try {
+                let promises;
+                runWithComputation(undefined, () => {
+                    promises = this.willStart.map((f) => f.call(component));
+                });
+                await Promise.all(promises);
+            }
+            catch (e) {
+                this.app.handleError({ node: this, error: e });
+                return;
+            }
+            if (this.status === 0 /* STATUS.NEW */ && this.fiber === fiber) {
+                fiber.render();
             }
         }
-        targetsToClear.clear();
-    }
-    function getSubscriptions(callback) {
-        const targets = callbacksToTargets.get(callback) || [];
-        return [...targets].map((target) => {
-            const keysToCallbacks = targetToKeysToCallbacks.get(target);
-            let keys = [];
-            if (keysToCallbacks) {
-                for (const [key, cbs] of keysToCallbacks) {
-                    if (cbs.has(callback)) {
-                        keys.push(key);
+        async render(deep) {
+            if (this.status >= 2 /* STATUS.CANCELLED */) {
+                return;
+            }
+            let current = this.fiber;
+            if (current && (current.root.locked || current.bdom === true)) {
+                await Promise.resolve();
+                // situation may have changed after the microtask tick
+                current = this.fiber;
+            }
+            if (current) {
+                if (!current.bdom && !fibersInError.has(current)) {
+                    if (deep) {
+                        // we want the render from this point on to be with deep=true
+                        current.deep = deep;
                     }
+                    return;
                 }
-            }
-            return { target, keys };
-        });
-    }
-    // Maps reactive objects to the underlying target
-    const targets = new WeakMap();
-    const reactiveCache = new WeakMap();
-    /**
-     * Creates a reactive proxy for an object. Reading data on the reactive object
-     * subscribes to changes to the data. Writing data on the object will cause the
-     * notify callback to be called if there are suscriptions to that data. Nested
-     * objects and arrays are automatically made reactive as well.
-     *
-     * Whenever you are notified of a change, all subscriptions are cleared, and if
-     * you would like to be notified of any further changes, you should go read
-     * the underlying data again. We assume that if you don't go read it again after
-     * being notified, it means that you are no longer interested in that data.
-     *
-     * Subscriptions:
-     * + Reading a property on an object will subscribe you to changes in the value
-     *    of that property.
-     * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
-     *    subscribe you to the creation/deletion of keys. Checking the presence of a
-     *    key on the object with 'in' has the same effect.
-     * - getOwnPropertyDescriptor does not currently subscribe you to the property.
-     *    This is a choice that was made because changing a key's value will trigger
-     *    this trap and we do not want to subscribe by writes. This also means that
-     *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
-     *
-     * @param target the object for which to create a reactive proxy
-     * @param callback the function to call when an observed property of the
-     *  reactive has changed
-     * @returns a proxy that tracks changes to it
-     */
-    function reactive(target, callback = NO_CALLBACK) {
-        if (!canBeMadeReactive(target)) {
-            throw new OwlError(`Cannot make the given value reactive`);
-        }
-        if (skipped.has(target)) {
-            return target;
-        }
-        if (targets.has(target)) {
-            // target is reactive, create a reactive on the underlying object instead
-            return reactive(targets.get(target), callback);
-        }
-        if (!reactiveCache.has(target)) {
-            reactiveCache.set(target, new WeakMap());
-        }
-        const reactivesForTarget = reactiveCache.get(target);
-        if (!reactivesForTarget.has(callback)) {
-            const targetRawType = rawType(target);
-            const handler = COLLECTION_RAW_TYPES.includes(targetRawType)
-                ? collectionsProxyHandler(target, callback, targetRawType)
-                : basicProxyHandler(callback);
-            const proxy = new Proxy(target, handler);
-            reactivesForTarget.set(callback, proxy);
-            targets.set(proxy, target);
-        }
-        return reactivesForTarget.get(callback);
-    }
-    /**
-     * Creates a basic proxy handler for regular objects and arrays.
-     *
-     * @param callback @see reactive
-     * @returns a proxy handler object
-     */
-    function basicProxyHandler(callback) {
-        return {
-            get(target, key, receiver) {
-                // non-writable non-configurable properties cannot be made reactive
-                const desc = Object.getOwnPropertyDescriptor(target, key);
-                if (desc && !desc.writable && !desc.configurable) {
-                    return Reflect.get(target, key, receiver);
-                }
-                observeTargetKey(target, key, callback);
-                return possiblyReactive(Reflect.get(target, key, receiver), callback);
-            },
-            set(target, key, value, receiver) {
-                const hadKey = objectHasOwnProperty.call(target, key);
-                const originalValue = Reflect.get(target, key, receiver);
-                const ret = Reflect.set(target, key, toRaw(value), receiver);
-                if (!hadKey && objectHasOwnProperty.call(target, key)) {
-                    notifyReactives(target, KEYCHANGES);
-                }
-                // While Array length may trigger the set trap, it's not actually set by this
-                // method but is updated behind the scenes, and the trap is not called with the
-                // new value. We disable the "same-value-optimization" for it because of that.
-                if (originalValue !== Reflect.get(target, key, receiver) ||
-                    (key === "length" && Array.isArray(target))) {
-                    notifyReactives(target, key);
-                }
-                return ret;
-            },
-            deleteProperty(target, key) {
-                const ret = Reflect.deleteProperty(target, key);
-                // TODO: only notify when something was actually deleted
-                notifyReactives(target, KEYCHANGES);
-                notifyReactives(target, key);
-                return ret;
-            },
-            ownKeys(target) {
-                observeTargetKey(target, KEYCHANGES, callback);
-                return Reflect.ownKeys(target);
-            },
-            has(target, key) {
-                // TODO: this observes all key changes instead of only the presence of the argument key
-                // observing the key itself would observe value changes instead of presence changes
-                // so we may need a finer grained system to distinguish observing value vs presence.
-                observeTargetKey(target, KEYCHANGES, callback);
-                return Reflect.has(target, key);
-            },
-        };
-    }
-    /**
-     * Creates a function that will observe the key that is passed to it when called
-     * and delegates to the underlying method.
-     *
-     * @param methodName name of the method to delegate to
-     * @param target @see reactive
-     * @param callback @see reactive
-     */
-    function makeKeyObserver(methodName, target, callback) {
-        return (key) => {
-            key = toRaw(key);
-            observeTargetKey(target, key, callback);
-            return possiblyReactive(target[methodName](key), callback);
-        };
-    }
-    /**
-     * Creates an iterable that will delegate to the underlying iteration method and
-     * observe keys as necessary.
-     *
-     * @param methodName name of the method to delegate to
-     * @param target @see reactive
-     * @param callback @see reactive
-     */
-    function makeIteratorObserver(methodName, target, callback) {
-        return function* () {
-            observeTargetKey(target, KEYCHANGES, callback);
-            const keys = target.keys();
-            for (const item of target[methodName]()) {
-                const key = keys.next().value;
-                observeTargetKey(target, key, callback);
-                yield possiblyReactive(item, callback);
-            }
-        };
-    }
-    /**
-     * Creates a forEach function that will delegate to forEach on the underlying
-     * collection while observing key changes, and keys as they're iterated over,
-     * and making the passed keys/values reactive.
-     *
-     * @param target @see reactive
-     * @param callback @see reactive
-     */
-    function makeForEachObserver(target, callback) {
-        return function forEach(forEachCb, thisArg) {
-            observeTargetKey(target, KEYCHANGES, callback);
-            target.forEach(function (val, key, targetObj) {
-                observeTargetKey(target, key, callback);
-                forEachCb.call(thisArg, possiblyReactive(val, callback), possiblyReactive(key, callback), possiblyReactive(targetObj, callback));
-            }, thisArg);
-        };
-    }
-    /**
-     * Creates a function that will delegate to an underlying method, and check if
-     * that method has modified the presence or value of a key, and notify the
-     * reactives appropriately.
-     *
-     * @param setterName name of the method to delegate to
-     * @param getterName name of the method which should be used to retrieve the
-     *  value before calling the delegate method for comparison purposes
-     * @param target @see reactive
-     */
-    function delegateAndNotify(setterName, getterName, target) {
-        return (key, value) => {
-            key = toRaw(key);
-            const hadKey = target.has(key);
-            const originalValue = target[getterName](key);
-            const ret = target[setterName](key, value);
-            const hasKey = target.has(key);
-            if (hadKey !== hasKey) {
-                notifyReactives(target, KEYCHANGES);
-            }
-            if (originalValue !== target[getterName](key)) {
-                notifyReactives(target, key);
-            }
-            return ret;
-        };
-    }
-    /**
-     * Creates a function that will clear the underlying collection and notify that
-     * the keys of the collection have changed.
-     *
-     * @param target @see reactive
-     */
-    function makeClearNotifier(target) {
-        return () => {
-            const allKeys = [...target.keys()];
-            target.clear();
-            notifyReactives(target, KEYCHANGES);
-            for (const key of allKeys) {
-                notifyReactives(target, key);
-            }
-        };
-    }
-    /**
-     * Maps raw type of an object to an object containing functions that can be used
-     * to build an appropritate proxy handler for that raw type. Eg: when making a
-     * reactive set, calling the has method should mark the key that is being
-     * retrieved as observed, and calling the add or delete method should notify the
-     * reactives that the key which is being added or deleted has been modified.
-     */
-    const rawTypeToFuncHandlers = {
-        Set: (target, callback) => ({
-            has: makeKeyObserver("has", target, callback),
-            add: delegateAndNotify("add", "has", target),
-            delete: delegateAndNotify("delete", "has", target),
-            keys: makeIteratorObserver("keys", target, callback),
-            values: makeIteratorObserver("values", target, callback),
-            entries: makeIteratorObserver("entries", target, callback),
-            [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
-            forEach: makeForEachObserver(target, callback),
-            clear: makeClearNotifier(target),
-            get size() {
-                observeTargetKey(target, KEYCHANGES, callback);
-                return target.size;
-            },
-        }),
-        Map: (target, callback) => ({
-            has: makeKeyObserver("has", target, callback),
-            get: makeKeyObserver("get", target, callback),
-            set: delegateAndNotify("set", "get", target),
-            delete: delegateAndNotify("delete", "has", target),
-            keys: makeIteratorObserver("keys", target, callback),
-            values: makeIteratorObserver("values", target, callback),
-            entries: makeIteratorObserver("entries", target, callback),
-            [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
-            forEach: makeForEachObserver(target, callback),
-            clear: makeClearNotifier(target),
-            get size() {
-                observeTargetKey(target, KEYCHANGES, callback);
-                return target.size;
-            },
-        }),
-        WeakMap: (target, callback) => ({
-            has: makeKeyObserver("has", target, callback),
-            get: makeKeyObserver("get", target, callback),
-            set: delegateAndNotify("set", "get", target),
-            delete: delegateAndNotify("delete", "has", target),
-        }),
-    };
-    /**
-     * Creates a proxy handler for collections (Set/Map/WeakMap)
-     *
-     * @param callback @see reactive
-     * @param target @see reactive
-     * @returns a proxy handler object
-     */
-    function collectionsProxyHandler(target, callback, targetRawType) {
-        // TODO: if performance is an issue we can create the special handlers lazily when each
-        // property is read.
-        const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
-        return Object.assign(basicProxyHandler(callback), {
-            // FIXME: probably broken when part of prototype chain since we ignore the receiver
-            get(target, key) {
-                if (objectHasOwnProperty.call(specialHandlers, key)) {
-                    return specialHandlers[key];
-                }
-                observeTargetKey(target, key, callback);
-                return possiblyReactive(target[key], callback);
-            },
-        });
-    }
-
-    let currentNode = null;
-    function saveCurrent() {
-        let n = currentNode;
-        return () => {
-            currentNode = n;
-        };
-    }
-    function getCurrent() {
-        if (!currentNode) {
-            throw new OwlError("No active component (a hook function should only be called in 'setup')");
-        }
-        return currentNode;
-    }
-    function useComponent() {
-        return currentNode.component;
-    }
-    /**
-     * Apply default props (only top level).
-     */
-    function applyDefaultProps(props, defaultProps) {
-        for (let propName in defaultProps) {
-            if (props[propName] === undefined) {
-                props[propName] = defaultProps[propName];
-            }
-        }
-    }
-    // -----------------------------------------------------------------------------
-    // Integration with reactivity system (useState)
-    // -----------------------------------------------------------------------------
-    const batchedRenderFunctions = new WeakMap();
-    /**
-     * Creates a reactive object that will be observed by the current component.
-     * Reading data from the returned object (eg during rendering) will cause the
-     * component to subscribe to that data and be rerendered when it changes.
-     *
-     * @param state the state to observe
-     * @returns a reactive object that will cause the component to re-render on
-     *  relevant changes
-     * @see reactive
-     */
-    function useState(state) {
-        const node = getCurrent();
-        let render = batchedRenderFunctions.get(node);
-        if (!render) {
-            render = batched(node.render.bind(node, false));
-            batchedRenderFunctions.set(node, render);
-            // manual implementation of onWillDestroy to break cyclic dependency
-            node.willDestroy.push(clearReactivesForCallback.bind(null, render));
-        }
-        return reactive(state, render);
-    }
-    class ComponentNode {
-        constructor(C, props, app, parent, parentKey) {
-            this.fiber = null;
-            this.bdom = null;
-            this.status = 0 /* NEW */;
-            this.forceNextRender = false;
-            this.nextProps = null;
-            this.children = Object.create(null);
-            this.refs = {};
-            this.willStart = [];
-            this.willUpdateProps = [];
-            this.willUnmount = [];
-            this.mounted = [];
-            this.willPatch = [];
-            this.patched = [];
-            this.willDestroy = [];
-            currentNode = this;
-            this.app = app;
-            this.parent = parent;
-            this.props = props;
-            this.parentKey = parentKey;
-            const defaultProps = C.defaultProps;
-            props = Object.assign({}, props);
-            if (defaultProps) {
-                applyDefaultProps(props, defaultProps);
-            }
-            const env = (parent && parent.childEnv) || app.env;
-            this.childEnv = env;
-            for (const key in props) {
-                const prop = props[key];
-                if (prop && typeof prop === "object" && targets.has(prop)) {
-                    props[key] = useState(prop);
-                }
-            }
-            this.component = new C(props, env, this);
-            const ctx = Object.assign(Object.create(this.component), { this: this.component });
-            this.renderFn = app.getTemplate(C.template).bind(this.component, ctx, this);
-            this.component.setup();
-            currentNode = null;
-        }
-        mountComponent(target, options) {
-            const fiber = new MountFiber(this, target, options);
-            this.app.scheduler.addFiber(fiber);
-            this.initiateRender(fiber);
-        }
-        async initiateRender(fiber) {
-            this.fiber = fiber;
-            if (this.mounted.length) {
-                fiber.root.mounted.push(fiber);
-            }
-            const component = this.component;
-            try {
-                await Promise.all(this.willStart.map((f) => f.call(component)));
-            }
-            catch (e) {
-                this.app.handleError({ node: this, error: e });
-                return;
-            }
-            if (this.status === 0 /* NEW */ && this.fiber === fiber) {
-                fiber.render();
-            }
-        }
-        async render(deep) {
-            if (this.status >= 2 /* CANCELLED */) {
-                return;
-            }
-            let current = this.fiber;
-            if (current && (current.root.locked || current.bdom === true)) {
-                await Promise.resolve();
-                // situation may have changed after the microtask tick
-                current = this.fiber;
-            }
-            if (current) {
-                if (!current.bdom && !fibersInError.has(current)) {
-                    if (deep) {
-                        // we want the render from this point on to be with deep=true
-                        current.deep = deep;
-                    }
-                    return;
-                }
-                // if current rendering was with deep=true, we want this one to be the same
-                deep = deep || current.deep;
+                // if current rendering was with deep=true, we want this one to be the same
+                deep = deep || current.deep;
             }
             else if (!this.bdom) {
                 return;
@@ -2484,7 +2153,7 @@
             this.fiber = fiber;
             this.app.scheduler.addFiber(fiber);
             await Promise.resolve();
-            if (this.status >= 2 /* CANCELLED */) {
+            if (this.status >= 2 /* STATUS.CANCELLED */) {
                 return;
             }
             // We only want to actually render the component if the following two
@@ -2508,14 +2177,14 @@
             this.app.scheduler.scheduleDestroy(this);
         }
         _cancel() {
-            this.status = 2 /* CANCELLED */;
+            this.status = 2 /* STATUS.CANCELLED */;
             const children = this.children;
             for (let childKey in children) {
                 children[childKey]._cancel();
             }
         }
         destroy() {
-            let shouldRemove = this.status === 1 /* MOUNTED */;
+            let shouldRemove = this.status === 1 /* STATUS.MOUNTED */;
             this._destroy();
             if (shouldRemove) {
                 this.bdom.remove();
@@ -2523,7 +2192,7 @@
         }
         _destroy() {
             const component = this.component;
-            if (this.status === 1 /* MOUNTED */) {
+            if (this.status === 1 /* STATUS.MOUNTED */) {
                 for (let cb of this.willUnmount) {
                     cb.call(component);
                 }
@@ -2541,33 +2210,23 @@
                     this.app.handleError({ error: e, node: this });
                 }
             }
-            this.status = 3 /* DESTROYED */;
+            this.status = 3 /* STATUS.DESTROYED */;
         }
         async updateAndRender(props, parentFiber) {
-            this.nextProps = props;
             props = Object.assign({}, props);
             // update
             const fiber = makeChildFiber(this, parentFiber);
             this.fiber = fiber;
             const component = this.component;
-            const defaultProps = component.constructor.defaultProps;
-            if (defaultProps) {
-                applyDefaultProps(props, defaultProps);
-            }
-            currentNode = this;
-            for (const key in props) {
-                const prop = props[key];
-                if (prop && typeof prop === "object" && targets.has(prop)) {
-                    props[key] = useState(prop);
-                }
-            }
-            currentNode = null;
-            const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+            let prom;
+            untrack(() => {
+                prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+            });
             await prom;
             if (fiber !== this.fiber) {
                 return;
             }
-            component.props = props;
+            this.props = props;
             fiber.render();
             const parentRoot = parentFiber.root;
             if (this.willPatch.length) {
@@ -2602,18 +2261,6 @@
                 this.fiber = null;
             }
         }
-        /**
-         * Sets a ref to a given HTMLElement.
-         *
-         * @param name the name of the ref to set
-         * @param el the HTMLElement to set the ref to. The ref is not set if the el
-         *  is null, but useRef will not return elements that are not in the DOM
-         */
-        setRef(name, el) {
-            if (el) {
-                this.refs[name] = el;
-            }
-        }
         // ---------------------------------------------------------------------------
         // Block DOM methods
         // ---------------------------------------------------------------------------
@@ -2625,7 +2272,7 @@
             const bdom = this.fiber.bdom;
             this.bdom = bdom;
             bdom.mount(parent, anchor);
-            this.status = 1 /* MOUNTED */;
+            this.status = 1 /* STATUS.MOUNTED */;
             this.fiber.appliedToDom = true;
             this.children = this.fiber.childrenMap;
             this.fiber = null;
@@ -2642,7 +2289,6 @@
                 // by the component will be patched independently in the appropriate
                 // fiber.complete
                 this._patch();
-                this.props = this.nextProps;
             }
         }
         _patch() {
@@ -2664,120 +2310,130 @@
         remove() {
             this.bdom.remove();
         }
-        // ---------------------------------------------------------------------------
-        // Some debug helpers
-        // ---------------------------------------------------------------------------
-        get name() {
-            return this.component.constructor.name;
-        }
-        get subscriptions() {
-            const render = batchedRenderFunctions.get(this);
-            return render ? getSubscriptions(render) : [];
-        }
     }
 
-    const TIMEOUT = Symbol("timeout");
-    const HOOK_TIMEOUT = {
-        onWillStart: 3000,
-        onWillUpdateProps: 3000,
-    };
-    function wrapError(fn, hookName) {
-        const error = new OwlError();
-        const timeoutError = new OwlError();
-        const node = getCurrent();
-        return (...args) => {
-            const onError = (cause) => {
-                error.cause = cause;
-                error.message =
-                    cause instanceof Error
-                        ? `The following error occurred in ${hookName}: "${cause.message}"`
-                        : `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
-                throw error;
-            };
-            let result;
-            try {
-                result = fn(...args);
+    let currentPluginManager = null;
+    const _getCurrentPluginManager = () => currentPluginManager;
+    class Plugin {
+        setup() { }
+    }
+    Plugin.id = "";
+    class PluginManager {
+        constructor(parent) {
+            var _a;
+            this.children = [];
+            this.onDestroyCb = [];
+            this.status = 0 /* STATUS.NEW */;
+            this.parent = parent;
+            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.push(this);
+            this.plugins = this.parent ? Object.create(this.parent.plugins) : {};
+        }
+        destroy() {
+            for (let children of this.children) {
+                children.destroy();
             }
-            catch (cause) {
-                onError(cause);
+            const cbs = this.onDestroyCb;
+            while (cbs.length) {
+                cbs.pop()();
             }
-            if (!(result instanceof Promise)) {
-                return result;
+            this.status = 3 /* STATUS.DESTROYED */;
+        }
+        getPluginById(id) {
+            return this.plugins[id] || null;
+        }
+        getPlugin(pluginType) {
+            return this.getPluginById(pluginType.id);
+        }
+        startPlugins(pluginTypes) {
+            const previousManager = currentPluginManager;
+            currentPluginManager = this;
+            const plugins = [];
+            // instantiate plugins
+            for (const pluginType of pluginTypes) {
+                if (!pluginType.id) {
+                    currentPluginManager = previousManager;
+                    throw new OwlError(`Plugin "${pluginType.name}" has no id`);
+                }
+                if (this.plugins.hasOwnProperty(pluginType.id)) {
+                    continue;
+                }
+                const plugin = new pluginType();
+                this.plugins[pluginType.id] = plugin;
+                plugins.push(plugin);
             }
-            const timeout = HOOK_TIMEOUT[hookName];
-            if (timeout) {
-                const fiber = node.fiber;
-                Promise.race([
-                    result.catch(() => { }),
-                    new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), timeout)),
-                ]).then((res) => {
-                    if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
-                        timeoutError.message = `${hookName}'s promise hasn't resolved after ${timeout / 1000} seconds`;
-                        console.log(timeoutError);
-                    }
-                });
+            // setup phase
+            for (let p of plugins) {
+                p.setup();
             }
-            return result.catch(onError);
-        };
+            currentPluginManager = previousManager;
+            if (!currentPluginManager) {
+                this.status = 1 /* STATUS.MOUNTED */;
+            }
+            return plugins;
+        }
     }
+    function plugin(pluginType) {
+        // getCurrent will throw if we're not in a component
+        const manager = currentPluginManager || getCurrent().pluginManager;
+        let plugin = manager.getPluginById(pluginType.id);
+        if (!plugin) {
+            if (manager === currentPluginManager) {
+                manager.startPlugins([pluginType]);
+                plugin = manager.getPluginById(pluginType.id);
+            }
+            else {
+                throw new OwlError(`Unknown plugin "${pluginType.id}"`);
+            }
+        }
+        return plugin;
+    }
+
     // -----------------------------------------------------------------------------
     //  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 = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
+        node.willStart.push(decorate(node, fn, "onWillStart"));
     }
     function onWillUpdateProps(fn) {
         const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+        node.willUpdateProps.push(decorate(node, fn, "onWillUpdateProps"));
     }
     function onMounted(fn) {
         const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+        node.mounted.push(decorate(node, fn, "onMounted"));
     }
     function onWillPatch(fn) {
         const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+        node.willPatch.unshift(decorate(node, fn, "onWillPatch"));
     }
     function onPatched(fn) {
         const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+        node.patched.push(decorate(node, fn, "onPatched"));
     }
     function onWillUnmount(fn) {
         const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+        node.willUnmount.unshift(decorate(node, fn, "onWillUnmount"));
     }
     function onWillDestroy(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
-    }
-    function onWillRender(fn) {
-        const node = getCurrent();
-        const renderFn = node.renderFn;
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        fn = decorate(fn.bind(node.component), "onWillRender");
-        node.renderFn = () => {
-            fn();
-            return renderFn();
-        };
-    }
-    function onRendered(fn) {
-        const node = getCurrent();
-        const renderFn = node.renderFn;
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        fn = decorate(fn.bind(node.component), "onRendered");
-        node.renderFn = () => {
-            const result = renderFn();
-            fn();
-            return result;
-        };
+        const pm = _getCurrentPluginManager();
+        if (pm) {
+            pm.onDestroyCb.push(fn);
+        }
+        else {
+            const node = getCurrent();
+            node.willDestroy.unshift(decorate(node, fn, "onWillDestroy"));
+        }
     }
     function onError(callback) {
         const node = getCurrent();
@@ -2790,9 +2446,7 @@
     }
 
     class Component {
-        constructor(props, env, node) {
-            this.props = props;
-            this.env = env;
+        constructor(node) {
             this.__owl__ = node;
         }
         setup() { }
@@ -2802,83 +2456,6 @@
     }
     Component.template = "";
 
-    const VText = text("").constructor;
-    class VPortal extends VText {
-        constructor(selector, content) {
-            super("");
-            this.target = null;
-            this.selector = selector;
-            this.content = content;
-        }
-        mount(parent, anchor) {
-            super.mount(parent, anchor);
-            this.target = document.querySelector(this.selector);
-            if (this.target) {
-                this.content.mount(this.target, null);
-            }
-            else {
-                this.content.mount(parent, anchor);
-            }
-        }
-        beforeRemove() {
-            this.content.beforeRemove();
-        }
-        remove() {
-            if (this.content) {
-                super.remove();
-                this.content.remove();
-                this.content = null;
-            }
-        }
-        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);
-            }
-        }
-    }
-    /**
-     * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
-     */
-    function portalTemplate(app, bdom, helpers) {
-        let { callSlot } = helpers;
-        return function template(ctx, node, key = "") {
-            return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
-        };
-    }
-    class Portal extends Component {
-        setup() {
-            const node = this.__owl__;
-            onMounted(() => {
-                const portal = node.bdom;
-                if (!portal.target) {
-                    const target = document.querySelector(this.props.target);
-                    if (target) {
-                        portal.content.moveBeforeDOMNode(target.firstChild, target);
-                    }
-                    else {
-                        throw new OwlError("invalid portal target");
-                    }
-                }
-            });
-            onWillUnmount(() => {
-                const portal = node.bdom;
-                portal.remove();
-            });
-        }
-    }
-    Portal.template = "__portal__";
-    Portal.props = {
-        target: {
-            type: String,
-        },
-        slots: true,
-    };
-
     // -----------------------------------------------------------------------------
     // helpers
     // -----------------------------------------------------------------------------
@@ -2929,7 +2506,7 @@
         if (Array.isArray(schema)) {
             schema = toSchema(schema);
         }
-        obj = toRaw(obj);
+        // obj = toRaw(obj);
         let errors = [];
         // check if each value in obj has correct shape
         for (let key in obj) {
@@ -3002,33 +2579,555 @@
             if (typeof value !== "object" || Array.isArray(value)) {
                 result = `'${key}' is not an object`;
             }
-            else {
-                const errors = validateSchema(value, descr.shape);
-                if (errors.length) {
-                    result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
-                }
+            else {
+                const errors = validateSchema(value, descr.shape);
+                if (errors.length) {
+                    result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
+                }
+            }
+        }
+        else if ("values" in descr) {
+            if (typeof value !== "object" || Array.isArray(value)) {
+                result = `'${key}' is not an object`;
+            }
+            else {
+                const errors = Object.entries(value)
+                    .map(([key, value]) => validateType(key, value, descr.values))
+                    .filter(Boolean);
+                if (errors.length) {
+                    result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
+                }
+            }
+        }
+        if ("type" in descr && !result) {
+            result = validateType(key, value, descr.type);
+        }
+        if ("validate" in descr && !result) {
+            result = !descr.validate(value) ? `'${key}' is not valid` : null;
+        }
+        return result;
+    }
+
+    function validateProps(componentName, props, validation, keys) {
+        const propsToValidate = Object.create(null);
+        const errors = [];
+        for (const key of keys) {
+            if (key in props) {
+                propsToValidate[key] = props[key];
+            }
+            if (propsToValidate[key] === undefined &&
+                !Array.isArray(validation) &&
+                validation[key].defaultValue !== undefined) {
+                if (!validation[key].optional) {
+                    errors.push(`A default value cannot be defined for the mandatory prop '${key}'`);
+                    continue;
+                }
+                propsToValidate[key] = validation[key].defaultValue;
+            }
+        }
+        errors.push(...validateSchema(propsToValidate, validation));
+        if (errors.length) {
+            throw new OwlError(`Invalid props for component '${componentName}': ` + errors.join(", "));
+            // node.app.handleError({
+            //   error: new OwlError(`Invalid props for component '${componentName}': ` + errors.join(", ")),
+            //   node,
+            // });
+        }
+    }
+    function props(validation) {
+        const node = getCurrent();
+        const isSchemaValidated = validation && !Array.isArray(validation);
+        function getProp(key) {
+            if (isSchemaValidated && node.props[key] === undefined) {
+                return validation[key].defaultValue;
+            }
+            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 (validation) {
+            const keys = (isSchemaValidated ? Object.keys(validation) : validation).map((key) => key.endsWith("?") ? key.slice(0, -1) : key);
+            applyPropGetters(keys);
+            if (node.app.dev) {
+                validateProps(node.name, node.props, validation, keys);
+                node.willUpdateProps.push((np) => {
+                    validateProps(node.name, np, validation, keys);
+                });
+            }
+        }
+        else {
+            applyPropGetters(Object.keys(node.props));
+            node.willUpdateProps.push((np) => {
+                for (let key in result) {
+                    Reflect.deleteProperty(result, key);
+                }
+                applyPropGetters(Object.keys(np));
+            });
+        }
+        return result;
+    }
+
+    const VText = text("").constructor;
+    class VPortal extends VText {
+        constructor(selector, content) {
+            super("");
+            this.target = null;
+            this.selector = selector;
+            this.content = content;
+        }
+        mount(parent, anchor) {
+            super.mount(parent, anchor);
+            this.target = document.querySelector(this.selector);
+            if (this.target) {
+                this.content.mount(this.target, null);
+            }
+            else {
+                this.content.mount(parent, anchor);
+            }
+        }
+        beforeRemove() {
+            this.content.beforeRemove();
+        }
+        remove() {
+            if (this.content) {
+                super.remove();
+                this.content.remove();
+                this.content = null;
+            }
+        }
+        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);
+            }
+        }
+    }
+    /**
+     * 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 {
+        constructor() {
+            super(...arguments);
+            this.props = props({
+                target: String,
+                slots: true,
+            });
+        }
+        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);
+                    }
+                    else {
+                        throw new OwlError("invalid portal target");
+                    }
+                }
+            });
+            onWillUnmount(() => {
+                const portal = node.bdom;
+                portal.remove();
+            });
+        }
+    }
+    Portal.template = "__portal__";
+
+    // Special key to subscribe to, to be notified of key creation/deletion
+    const KEYCHANGES = Symbol("Key changes");
+    const objectToString = Object.prototype.toString;
+    const objectHasOwnProperty = Object.prototype.hasOwnProperty;
+    // Use arrays because Array.includes is faster than Set.has for small arrays
+    const SUPPORTED_RAW_TYPES = ["Object", "Array", "Set", "Map", "WeakMap"];
+    const COLLECTION_RAW_TYPES = ["Set", "Map", "WeakMap"];
+    /**
+     * extract "RawType" from strings like "[object RawType]" => this lets us ignore
+     * many native objects such as Promise (whose toString is [object Promise])
+     * or Date ([object Date]), while also supporting collections without using
+     * instanceof in a loop
+     *
+     * @param obj the object to check
+     * @returns the raw type of the object
+     */
+    function rawType(obj) {
+        return objectToString.call(toRaw(obj)).slice(8, -1);
+    }
+    /**
+     * Checks whether a given value can be made into a proxy object.
+     *
+     * @param value the value to check
+     * @returns whether the value can be made proxy
+     */
+    function canBeMadeReactive(value) {
+        if (typeof value !== "object") {
+            return false;
+        }
+        return SUPPORTED_RAW_TYPES.includes(rawType(value));
+    }
+    /**
+     * Creates a proxy from the given object/callback if possible and returns it,
+     * returns the original object otherwise.
+     *
+     * @param value the value make proxy
+     * @returns a proxy for the given object when possible, the original otherwise
+     */
+    function possiblyReactive(val) {
+        return canBeMadeReactive(val) ? proxy(val) : val;
+    }
+    const skipped = new WeakSet();
+    /**
+     * Mark an object or array so that it is ignored by the reactivity system
+     *
+     * @param value the value to mark
+     * @returns the object itself
+     */
+    function markRaw(value) {
+        skipped.add(value);
+        return value;
+    }
+    /**
+     * Given a proxy objet, return the raw (non proxy) underlying object
+     *
+     * @param value a proxy value
+     * @returns the underlying value
+     */
+    function toRaw(value) {
+        return targets.has(value) ? targets.get(value) : value;
+    }
+    const targetToKeysToAtomItem = new WeakMap();
+    function getTargetKeyAtom(target, key) {
+        let keyToAtomItem = targetToKeysToAtomItem.get(target);
+        if (!keyToAtomItem) {
+            keyToAtomItem = new Map();
+            targetToKeysToAtomItem.set(target, keyToAtomItem);
+        }
+        let atom = keyToAtomItem.get(key);
+        if (!atom) {
+            atom = {
+                value: undefined,
+                observers: new Set(),
+            };
+            keyToAtomItem.set(key, atom);
+        }
+        return atom;
+    }
+    /**
+     * Observes a given key on a target with an callback. The callback will be
+     * called when the given key changes on the target.
+     *
+     * @param target the target whose key should be observed
+     * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
+     *  or deletion)
+     * @param callback the function to call when the key changes
+     */
+    function onReadTargetKey(target, key) {
+        onReadAtom(getTargetKeyAtom(target, key));
+    }
+    /**
+     * Notify Reactives that are observing a given target that a key has changed on
+     * the target.
+     *
+     * @param target target whose Reactives should be notified that the target was
+     *  changed.
+     * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
+     *   or deleted)
+     */
+    function onWriteTargetKey(target, key) {
+        const keyToAtomItem = targetToKeysToAtomItem.get(target);
+        if (!keyToAtomItem) {
+            return;
+        }
+        const atom = keyToAtomItem.get(key);
+        if (!atom) {
+            return;
+        }
+        onWriteAtom(atom);
+    }
+    // Maps proxy objects to the underlying target
+    const targets = new WeakMap();
+    const proxyCache = new WeakMap();
+    /**
+     * Creates a reactive proxy for an object. Reading data on the proxy object
+     * subscribes to changes to the data. Writing data on the object will cause the
+     * notify callback to be called if there are suscriptions to that data. Nested
+     * objects and arrays are automatically made reactive as well.
+     *
+     * Whenever you are notified of a change, all subscriptions are cleared, and if
+     * you would like to be notified of any further changes, you should go read
+     * the underlying data again. We assume that if you don't go read it again after
+     * being notified, it means that you are no longer interested in that data.
+     *
+     * Subscriptions:
+     * + Reading a property on an object will subscribe you to changes in the value
+     *    of that property.
+     * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
+     *    subscribe you to the creation/deletion of keys. Checking the presence of a
+     *    key on the object with 'in' has the same effect.
+     * - getOwnPropertyDescriptor does not currently subscribe you to the property.
+     *    This is a choice that was made because changing a key's value will trigger
+     *    this trap and we do not want to subscribe by writes. This also means that
+     *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
+     *
+     * @param target the object for which to create a proxy proxy
+     * @param callback the function to call when an observed property of the
+     *  proxy has changed
+     * @returns a proxy that tracks changes to it
+     */
+    function proxy(target) {
+        if (!canBeMadeReactive(target)) {
+            throw new OwlError(`Cannot make the given value reactive`);
+        }
+        if (skipped.has(target)) {
+            return target;
+        }
+        if (targets.has(target)) {
+            // target is reactive, create a reactive on the underlying object instead
+            return target;
+        }
+        const reactive = proxyCache.get(target);
+        if (reactive)
+            return reactive;
+        const targetRawType = rawType(target);
+        const handler = COLLECTION_RAW_TYPES.includes(targetRawType)
+            ? collectionsProxyHandler(target, targetRawType)
+            : basicProxyHandler();
+        const proxy = new Proxy(target, handler);
+        proxyCache.set(target, proxy);
+        targets.set(proxy, target);
+        return proxy;
+    }
+    /**
+     * Creates a basic proxy handler for regular objects and arrays.
+     *
+     * @param callback @see proxy
+     * @returns a proxy handler object
+     */
+    function basicProxyHandler() {
+        return {
+            get(target, key, receiver) {
+                // non-writable non-configurable properties cannot be made proxy
+                const desc = Object.getOwnPropertyDescriptor(target, key);
+                if (desc && !desc.writable && !desc.configurable) {
+                    return Reflect.get(target, key, receiver);
+                }
+                onReadTargetKey(target, key);
+                return possiblyReactive(Reflect.get(target, key, receiver));
+            },
+            set(target, key, value, receiver) {
+                const hadKey = objectHasOwnProperty.call(target, key);
+                const originalValue = Reflect.get(target, key, receiver);
+                const ret = Reflect.set(target, key, toRaw(value), receiver);
+                if (!hadKey && objectHasOwnProperty.call(target, key)) {
+                    onWriteTargetKey(target, KEYCHANGES);
+                }
+                // While Array length may trigger the set trap, it's not actually set by this
+                // method but is updated behind the scenes, and the trap is not called with the
+                // new value. We disable the "same-value-optimization" for it because of that.
+                if (originalValue !== Reflect.get(target, key, receiver) ||
+                    (key === "length" && Array.isArray(target))) {
+                    onWriteTargetKey(target, key);
+                }
+                return ret;
+            },
+            deleteProperty(target, key) {
+                const ret = Reflect.deleteProperty(target, key);
+                // TODO: only notify when something was actually deleted
+                onWriteTargetKey(target, KEYCHANGES);
+                onWriteTargetKey(target, key);
+                return ret;
+            },
+            ownKeys(target) {
+                onReadTargetKey(target, KEYCHANGES);
+                return Reflect.ownKeys(target);
+            },
+            has(target, key) {
+                // TODO: this observes all key changes instead of only the presence of the argument key
+                // observing the key itself would observe value changes instead of presence changes
+                // so we may need a finer grained system to distinguish observing value vs presence.
+                onReadTargetKey(target, KEYCHANGES);
+                return Reflect.has(target, key);
+            },
+        };
+    }
+    /**
+     * Creates a function that will observe the key that is passed to it when called
+     * and delegates to the underlying method.
+     *
+     * @param methodName name of the method to delegate to
+     * @param target @see proxy
+     * @param callback @see proxy
+     */
+    function makeKeyObserver(methodName, target) {
+        return (key) => {
+            key = toRaw(key);
+            onReadTargetKey(target, key);
+            return possiblyReactive(target[methodName](key));
+        };
+    }
+    /**
+     * Creates an iterable that will delegate to the underlying iteration method and
+     * observe keys as necessary.
+     *
+     * @param methodName name of the method to delegate to
+     * @param target @see proxy
+     * @param callback @see proxy
+     */
+    function makeIteratorObserver(methodName, target) {
+        return function* () {
+            onReadTargetKey(target, KEYCHANGES);
+            const keys = target.keys();
+            for (const item of target[methodName]()) {
+                const key = keys.next().value;
+                onReadTargetKey(target, key);
+                yield possiblyReactive(item);
+            }
+        };
+    }
+    /**
+     * Creates a forEach function that will delegate to forEach on the underlying
+     * collection while observing key changes, and keys as they're iterated over,
+     * and making the passed keys/values proxy.
+     *
+     * @param target @see proxy
+     * @param callback @see proxy
+     */
+    function makeForEachObserver(target) {
+        return function forEach(forEachCb, thisArg) {
+            onReadTargetKey(target, KEYCHANGES);
+            target.forEach(function (val, key, targetObj) {
+                onReadTargetKey(target, key);
+                forEachCb.call(thisArg, possiblyReactive(val), possiblyReactive(key), possiblyReactive(targetObj));
+            }, thisArg);
+        };
+    }
+    /**
+     * Creates a function that will delegate to an underlying method, and check if
+     * that method has modified the presence or value of a key, and notify the
+     * proxys appropriately.
+     *
+     * @param setterName name of the method to delegate to
+     * @param getterName name of the method which should be used to retrieve the
+     *  value before calling the delegate method for comparison purposes
+     * @param target @see proxy
+     */
+    function delegateAndNotify(setterName, getterName, target) {
+        return (key, value) => {
+            key = toRaw(key);
+            const hadKey = target.has(key);
+            const originalValue = target[getterName](key);
+            const ret = target[setterName](key, value);
+            const hasKey = target.has(key);
+            if (hadKey !== hasKey) {
+                onWriteTargetKey(target, KEYCHANGES);
+            }
+            if (originalValue !== target[getterName](key)) {
+                onWriteTargetKey(target, key);
             }
-        }
-        else if ("values" in descr) {
-            if (typeof value !== "object" || Array.isArray(value)) {
-                result = `'${key}' is not an object`;
+            return ret;
+        };
+    }
+    /**
+     * Creates a function that will clear the underlying collection and notify that
+     * the keys of the collection have changed.
+     *
+     * @param target @see proxy
+     */
+    function makeClearNotifier(target) {
+        return () => {
+            const allKeys = [...target.keys()];
+            target.clear();
+            onWriteTargetKey(target, KEYCHANGES);
+            for (const key of allKeys) {
+                onWriteTargetKey(target, key);
             }
-            else {
-                const errors = Object.entries(value)
-                    .map(([key, value]) => validateType(key, value, descr.values))
-                    .filter(Boolean);
-                if (errors.length) {
-                    result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
+        };
+    }
+    /**
+     * Maps raw type of an object to an object containing functions that can be used
+     * to build an appropritate proxy handler for that raw type. Eg: when making a
+     * proxy set, calling the has method should mark the key that is being
+     * retrieved as observed, and calling the add or delete method should notify the
+     * proxys that the key which is being added or deleted has been modified.
+     */
+    const rawTypeToFuncHandlers = {
+        Set: (target) => ({
+            has: makeKeyObserver("has", target),
+            add: delegateAndNotify("add", "has", target),
+            delete: delegateAndNotify("delete", "has", target),
+            keys: makeIteratorObserver("keys", target),
+            values: makeIteratorObserver("values", target),
+            entries: makeIteratorObserver("entries", target),
+            [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target),
+            forEach: makeForEachObserver(target),
+            clear: makeClearNotifier(target),
+            get size() {
+                onReadTargetKey(target, KEYCHANGES);
+                return target.size;
+            },
+        }),
+        Map: (target) => ({
+            has: makeKeyObserver("has", target),
+            get: makeKeyObserver("get", target),
+            set: delegateAndNotify("set", "get", target),
+            delete: delegateAndNotify("delete", "has", target),
+            keys: makeIteratorObserver("keys", target),
+            values: makeIteratorObserver("values", target),
+            entries: makeIteratorObserver("entries", target),
+            [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target),
+            forEach: makeForEachObserver(target),
+            clear: makeClearNotifier(target),
+            get size() {
+                onReadTargetKey(target, KEYCHANGES);
+                return target.size;
+            },
+        }),
+        WeakMap: (target) => ({
+            has: makeKeyObserver("has", target),
+            get: makeKeyObserver("get", target),
+            set: delegateAndNotify("set", "get", target),
+            delete: delegateAndNotify("delete", "has", target),
+        }),
+    };
+    /**
+     * Creates a proxy handler for collections (Set/Map/WeakMap)
+     *
+     * @param callback @see proxy
+     * @param target @see proxy
+     * @returns a proxy handler object
+     */
+    function collectionsProxyHandler(target, targetRawType) {
+        // TODO: if performance is an issue we can create the special handlers lazily when each
+        // property is read.
+        const specialHandlers = rawTypeToFuncHandlers[targetRawType](target);
+        return Object.assign(basicProxyHandler(), {
+            // FIXME: probably broken when part of prototype chain since we ignore the receiver
+            get(target, key) {
+                if (objectHasOwnProperty.call(specialHandlers, key)) {
+                    return specialHandlers[key];
                 }
-            }
-        }
-        if ("type" in descr && !result) {
-            result = validateType(key, value, descr.type);
-        }
-        if ("validate" in descr && !result) {
-            result = !descr.validate(value) ? `'${key}' is not valid` : null;
-        }
-        return result;
+                onReadTargetKey(target, key);
+                return possiblyReactive(target[key]);
+            },
+        });
     }
 
     const ObjectCreate = Object.create;
@@ -3041,7 +3140,7 @@
     }
     function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
         key = key + "__slot_" + name;
-        const slots = ctx.props.slots || {};
+        const slots = ctx.__owl__.props.slots || {};
         const { __render, __ctx, __scope } = slots[name] || {};
         const slotScope = ObjectCreate(__ctx || {});
         if (__scope) {
@@ -3146,84 +3245,52 @@
         }
         let safeKey;
         let block;
-        switch (typeof value) {
-            case "object":
-                if (value instanceof Markup) {
-                    safeKey = `string_safe`;
-                    block = html(value);
-                }
-                else if (value instanceof LazyValue) {
-                    safeKey = `lazy_value`;
-                    block = value.evaluate();
-                }
-                else if (value instanceof String) {
-                    safeKey = "string_unsafe";
-                    block = text(value);
-                }
-                else {
-                    // Assuming it is a block
-                    safeKey = "block_safe";
-                    block = value;
-                }
-                break;
-            case "string":
-                safeKey = "string_unsafe";
-                block = text(value);
-                break;
-            default:
-                safeKey = "string_unsafe";
-                block = text(String(value));
+        if (value instanceof Markup) {
+            safeKey = `string_safe`;
+            block = html(value);
+        }
+        else if (value instanceof LazyValue) {
+            safeKey = `lazy_value`;
+            block = value.evaluate();
+        }
+        else {
+            safeKey = "string_unsafe";
+            block = text(value);
         }
         return toggler(safeKey, block);
     }
-    /**
-     * Validate the component props (or next props) against the (static) props
-     * description.  This is potentially an expensive operation: it may needs to
-     * visit recursively the props and all the children to check if they are valid.
-     * This is why it is only done in 'dev' mode.
-     */
-    function validateProps(name, props, comp) {
-        const ComponentClass = typeof name !== "string"
-            ? name
-            : comp.constructor.components[name];
-        if (!ComponentClass) {
-            // this is an error, wrong component. We silently return here instead so the
-            // error is triggered by the usual path ('component' function)
-            return;
+    function createRef(ref) {
+        if (!ref) {
+            throw new OwlError(`Ref is undefined or null`);
         }
-        const schema = ComponentClass.props;
-        if (!schema) {
-            if (comp.__owl__.app.warnIfNoStaticProps) {
-                console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
-            }
-            return;
+        let add;
+        let remove;
+        if (ref.add && ref.remove) {
+            add = ref.add.bind(ref);
+            remove = ref.remove.bind(ref);
         }
-        const defaultProps = ComponentClass.defaultProps;
-        if (defaultProps) {
-            let isMandatory = (name) => Array.isArray(schema)
-                ? schema.includes(name)
-                : name in schema && !("*" in schema) && !isOptional(schema[name]);
-            for (let p in defaultProps) {
-                if (isMandatory(p)) {
-                    throw new OwlError(`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`);
-                }
-            }
+        else if (ref.set) {
+            add = ref.set.bind(ref);
+            remove = () => ref.set(null);
         }
-        const errors = validateSchema(props, schema);
-        if (errors.length) {
-            throw new OwlError(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+        else {
+            throw new OwlError(`Ref should implement either a 'set' function or 'add' and 'remove' functions`);
         }
-    }
-    function makeRefWrapper(node) {
-        let refNames = new Set();
-        return (name, fn) => {
-            if (refNames.has(name)) {
-                throw new OwlError(`Cannot set the same ref more than once in the same component, ref "${name}" was set multiple times in ${node.name}`);
+        return (el, previousEl) => {
+            if (previousEl) {
+                remove(previousEl);
+            }
+            if (el) {
+                add(el);
             }
-            refNames.add(name);
-            return fn;
         };
     }
+    function modelExpr(value) {
+        if (!value.set || typeof value !== "function") {
+            throw new OwlError(`Invalid t-model expression: expression should evaluate to a function with a 'set' method defined on it`);
+        }
+        return value;
+    }
     const helpers = {
         withDefault,
         zero: Symbol("zero"),
@@ -3235,13 +3302,13 @@
         setContextValue,
         shallowEqual,
         toNumber,
-        validateProps,
         LazyValue,
         safeOutput,
         createCatcher,
         markRaw,
         OwlError,
-        makeRefWrapper,
+        createRef,
+        modelExpr,
     };
 
     /**
@@ -3282,6 +3349,9 @@
 
     const bdom = { text, createBlock, list, multi, html, toggler, comment };
     class TemplateSet {
+        static registerTemplate(name, fn) {
+            globalTemplates[name] = fn;
+        }
         constructor(config = {}) {
             this.rawTemplates = Object.create(globalTemplates);
             this.templates = {};
@@ -3304,9 +3374,6 @@
             this.runtimeUtils = { ...helpers, __globals__: config.globalValues || {} };
             this.hasGlobalValues = Boolean(config.globalValues && Object.keys(config.globalValues).length);
         }
-        static registerTemplate(name, fn) {
-            globalTemplates[name] = fn;
-        }
         addTemplate(name, template) {
             if (name in this.rawTemplates) {
                 // this check can be expensive, just silently ignore double definitions outside dev mode
@@ -3617,7 +3684,7 @@
                     stack.pop();
             }
             let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
-            if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
+            if (isVar) {
                 if (prevToken) {
                     // normalize missing tokens: {a} should be equivalent to {a:a}
                     if (groupType === "LEFT_BRACE" &&
@@ -3809,7 +3876,6 @@
             this.hasRoot = false;
             this.hasCache = false;
             this.shouldProtectScope = false;
-            this.hasRefWrapper = false;
             this.name = name;
             this.on = on || null;
         }
@@ -3829,9 +3895,6 @@
                 result.push(`  ctx = Object.create(ctx);`);
                 result.push(`  ctx[isBoundary] = 1`);
             }
-            if (this.hasRefWrapper) {
-                result.push(`  let refWrapper = makeRefWrapper(this.__owl__);`);
-            }
             if (this.hasCache) {
                 result.push(`  let cache = ctx.cache || {};`);
                 result.push(`  let nextCache = ctx.cache = {};`);
@@ -3898,7 +3961,7 @@
         }
         generateCode() {
             const ast = this.ast;
-            this.isDebug = ast.type === 12 /* TDebug */;
+            this.isDebug = ast.type === 11 /* ASTType.TDebug */;
             BlockDescription.nextBlockId = 1;
             nextDataIds = {};
             this.compileAST(ast, {
@@ -4054,43 +4117,41 @@
          */
         compileAST(ast, ctx) {
             switch (ast.type) {
-                case 1 /* Comment */:
+                case 1 /* ASTType.Comment */:
                     return this.compileComment(ast, ctx);
-                case 0 /* Text */:
+                case 0 /* ASTType.Text */:
                     return this.compileText(ast, ctx);
-                case 2 /* DomNode */:
+                case 2 /* ASTType.DomNode */:
                     return this.compileTDomNode(ast, ctx);
-                case 4 /* TEsc */:
-                    return this.compileTEsc(ast, ctx);
-                case 8 /* TOut */:
+                case 7 /* ASTType.TOut */:
                     return this.compileTOut(ast, ctx);
-                case 5 /* TIf */:
+                case 4 /* ASTType.TIf */:
                     return this.compileTIf(ast, ctx);
-                case 9 /* TForEach */:
+                case 8 /* ASTType.TForEach */:
                     return this.compileTForeach(ast, ctx);
-                case 10 /* TKey */:
+                case 9 /* ASTType.TKey */:
                     return this.compileTKey(ast, ctx);
-                case 3 /* Multi */:
+                case 3 /* ASTType.Multi */:
                     return this.compileMulti(ast, ctx);
-                case 7 /* TCall */:
+                case 6 /* ASTType.TCall */:
                     return this.compileTCall(ast, ctx);
-                case 15 /* TCallBlock */:
+                case 14 /* ASTType.TCallBlock */:
                     return this.compileTCallBlock(ast, ctx);
-                case 6 /* TSet */:
+                case 5 /* ASTType.TSet */:
                     return this.compileTSet(ast, ctx);
-                case 11 /* TComponent */:
+                case 10 /* ASTType.TComponent */:
                     return this.compileComponent(ast, ctx);
-                case 12 /* TDebug */:
+                case 11 /* ASTType.TDebug */:
                     return this.compileDebug(ast, ctx);
-                case 13 /* TLog */:
+                case 12 /* ASTType.TLog */:
                     return this.compileLog(ast, ctx);
-                case 14 /* TSlot */:
-                    return this.compileTSlot(ast, ctx);
-                case 16 /* TTranslation */:
+                case 13 /* ASTType.TCallSlot */:
+                    return this.compileTCallSlot(ast, ctx);
+                case 15 /* ASTType.TTranslation */:
                     return this.compileTTranslation(ast, ctx);
-                case 17 /* TTranslationContext */:
+                case 16 /* ASTType.TTranslationContext */:
                     return this.compileTTranslationContext(ast, ctx);
-                case 18 /* TPortal */:
+                case 17 /* ASTType.TPortal */:
                     return this.compileTPortal(ast, ctx);
             }
         }
@@ -4141,7 +4202,7 @@
                 });
             }
             else {
-                const createFn = ast.type === 0 /* Text */ ? xmlDoc.createTextNode : xmlDoc.createComment;
+                const createFn = ast.type === 0 /* ASTType.Text */ ? xmlDoc.createTextNode : xmlDoc.createComment;
                 block.insert(createFn.call(xmlDoc, value));
             }
             return block.varName;
@@ -4235,14 +4296,11 @@
             // t-model
             let tModelSelectedExpr;
             if (ast.model) {
-                const { hasDynamicChildren, baseExpr, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
-                const baseExpression = compileExpr(baseExpr);
-                const bExprId = generateId("bExpr");
-                this.define(bExprId, baseExpression);
+                const { hasDynamicChildren, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
                 const expression = compileExpr(expr);
                 const exprId = generateId("expr");
-                this.define(exprId, expression);
-                const fullExpression = `${bExprId}[${exprId}]`;
+                this.helpers.add("modelExpr");
+                this.define(exprId, `modelExpr(${expression})`);
                 let idx;
                 if (specialInitTargetAttr) {
                     let targetExpr = targetAttr in attrs && `'${attrs[targetAttr]}'`;
@@ -4253,23 +4311,23 @@
                             targetExpr = compileExpr(dynamicTgExpr);
                         }
                     }
-                    idx = block.insertData(`${fullExpression} === ${targetExpr}`, "prop");
+                    idx = block.insertData(`${exprId}() === ${targetExpr}`, "prop");
                     attrs[`block-property-${idx}`] = specialInitTargetAttr;
                 }
                 else if (hasDynamicChildren) {
                     const bValueId = generateId("bValue");
                     tModelSelectedExpr = `${bValueId}`;
-                    this.define(tModelSelectedExpr, fullExpression);
+                    this.define(tModelSelectedExpr, `${exprId}()`);
                 }
                 else {
-                    idx = block.insertData(`${fullExpression}`, "prop");
+                    idx = block.insertData(`${exprId}()`, "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 = `[(ev) => { ${fullExpression} = ${valueCode}; }]`;
+                const handler = `[(ev) => { ${exprId}.set(${valueCode}); }]`;
                 idx = block.insertData(handler, "hdlr");
                 attrs[`block-handler-${idx}`] = eventType;
             }
@@ -4281,19 +4339,9 @@
             }
             // t-ref
             if (ast.ref) {
-                if (this.dev) {
-                    this.helpers.add("makeRefWrapper");
-                    this.target.hasRefWrapper = true;
-                }
-                const isDynamic = INTERP_REGEXP.test(ast.ref);
-                let name = `\`${ast.ref}\``;
-                if (isDynamic) {
-                    name = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-                }
-                let setRefStr = `(el) => this.__owl__.setRef((${name}), el)`;
-                if (this.dev) {
-                    setRefStr = `refWrapper(${name}, ${setRefStr})`;
-                }
+                const refExpr = compileExpr(ast.ref);
+                this.helpers.add("createRef");
+                const setRefStr = `createRef(${refExpr})`;
                 const idx = block.insertData(setRefStr, "ref");
                 attrs["block-ref"] = String(idx);
             }
@@ -4347,32 +4395,6 @@
             }
             return block.varName;
         }
-        compileTEsc(ast, ctx) {
-            let { block, forceNewBlock } = ctx;
-            let expr;
-            if (ast.expr === "0") {
-                this.helpers.add("zero");
-                expr = `ctx[zero]`;
-            }
-            else {
-                expr = compileExpr(ast.expr);
-                if (ast.defaultValue) {
-                    this.helpers.add("withDefault");
-                    // FIXME: defaultValue is not translated
-                    expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
-                }
-            }
-            if (!block || forceNewBlock) {
-                block = this.createBlock(block, "text", ctx);
-                this.insertBlock(`text(${expr})`, block, { ...ctx, forceNewBlock: forceNewBlock && !block });
-            }
-            else {
-                const idx = block.insertData(expr, "txt");
-                const text = xmlDoc.createElement(`block-text-${idx}`);
-                block.insert(text);
-            }
-            return block.varName;
-        }
         compileTOut(ast, ctx) {
             let { block } = ctx;
             if (block) {
@@ -4388,7 +4410,7 @@
                 let bodyValue = null;
                 bodyValue = BlockDescription.nextBlockId;
                 const subCtx = createContext(ctx);
-                this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
+                this.compileAST({ type: 3 /* ASTType.Multi */, content: ast.body }, subCtx);
                 this.helpers.add("safeOutput");
                 blockStr = `safeOutput(${compileExpr(ast.expr)}, b${bodyValue})`;
             }
@@ -4593,7 +4615,7 @@
             let ctxVar = ctx.ctxVar || "ctx";
             if (ast.context) {
                 ctxVar = generateId("ctx");
-                this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
+                this.addLine(`let ${ctxVar} = {this: ${compileExpr(ast.context)}, __owl__: this.__owl__};`);
             }
             const isDynamic = INTERP_REGEXP.test(ast.name);
             const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
@@ -4606,7 +4628,7 @@
                 this.addLine(`${ctxVar}[isBoundary] = 1;`);
                 this.helpers.add("isBoundary");
                 const subCtx = createContext(ctx, { ctxVar });
-                const bl = this.compileMulti({ type: 3 /* Multi */, content: ast.body }, subCtx);
+                const bl = this.compileMulti({ type: 3 /* ASTType.Multi */, content: ast.body }, subCtx);
                 if (bl) {
                     this.helpers.add("zero");
                     this.addLine(`${ctxVar}[zero] = ${bl};`);
@@ -4654,7 +4676,7 @@
             const expr = ast.value ? compileExpr(ast.value || "") : "null";
             if (ast.body) {
                 this.helpers.add("LazyValue");
-                const bodyAst = { type: 3 /* Multi */, content: ast.body };
+                const bodyAst = { type: 3 /* ASTType.Multi */, content: ast.body };
                 const name = this.compileInNewTarget("value", bodyAst, ctx);
                 let key = this.target.currentKey(ctx);
                 let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
@@ -4793,9 +4815,6 @@
             else {
                 expr = `\`${ast.name}\``;
             }
-            if (this.dev) {
-                this.addLine(`helpers.validateProps(${expr}, ${propVar}, this);`);
-            }
             if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
                 // todo: check the forcenewblock condition
                 this.insertAnchor(block);
@@ -4850,7 +4869,7 @@
             this.staticDefs.push({ id: name, expr: `createCatcher(${JSON.stringify(spec)})` });
             return `${name}(${expr}, [${handlers.join(",")}])`;
         }
-        compileTSlot(ast, ctx) {
+        compileTCallSlot(ast, ctx) {
             this.helpers.add("callSlot");
             let { block } = ctx;
             let blockString;
@@ -4967,7 +4986,7 @@
     }
     function _parse(xml, ctx) {
         normalizeXML(xml);
-        return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
+        return parseNode(xml, ctx) || { type: 0 /* ASTType.Text */, value: "" };
     }
     function parseNode(node, ctx) {
         if (!(node instanceof Element)) {
@@ -4983,9 +5002,8 @@
             parseTTranslation(node, ctx) ||
             parseTTranslationContext(node, ctx) ||
             parseTKey(node, ctx) ||
-            parseTEscNode(node, ctx) ||
             parseTOutNode(node, ctx) ||
-            parseTSlot(node, ctx) ||
+            parseTCallSlot(node, ctx) ||
             parseComponent(node, ctx) ||
             parseDOMNode(node, ctx) ||
             parseTSetNode(node, ctx) ||
@@ -5010,10 +5028,10 @@
             if (!ctx.inPreTag && lineBreakRE.test(value) && !value.trim()) {
                 return null;
             }
-            return { type: 0 /* Text */, value };
+            return { type: 0 /* ASTType.Text */, value };
         }
         else if (node.nodeType === Node.COMMENT_NODE) {
-            return { type: 1 /* Comment */, value: node.textContent || "" };
+            return { type: 1 /* ASTType.Comment */, value: node.textContent || "" };
         }
         return null;
     }
@@ -5054,7 +5072,7 @@
             node.removeAttribute("t-debug");
             const content = parseNode(node, ctx);
             const ast = {
-                type: 12 /* TDebug */,
+                type: 11 /* ASTType.TDebug */,
                 content,
             };
             if (content === null || content === void 0 ? void 0 : content.hasNoRepresentation) {
@@ -5067,7 +5085,7 @@
             node.removeAttribute("t-log");
             const content = parseNode(node, ctx);
             const ast = {
-                type: 13 /* TLog */,
+                type: 12 /* ASTType.TLog */,
                 expr,
                 content,
             };
@@ -5081,8 +5099,6 @@
     // -----------------------------------------------------------------------------
     // Regular dom node
     // -----------------------------------------------------------------------------
-    const hasDotAtTheEnd = /\.[\w_]+\s*$/;
-    const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
     const ROOT_SVG_TAGS = new Set(["svg", "g", "path"]);
     function parseDOMNode(node, ctx) {
         const { tagName } = node;
@@ -5119,20 +5135,6 @@
                 if (!["input", "select", "textarea"].includes(tagName)) {
                     throw new OwlError("The t-model directive only works with <input>, <textarea> and <select>");
                 }
-                let baseExpr, expr;
-                if (hasDotAtTheEnd.test(value)) {
-                    const index = value.lastIndexOf(".");
-                    baseExpr = value.slice(0, index);
-                    expr = `'${value.slice(index + 1)}'`;
-                }
-                else if (hasBracketsAtTheEnd.test(value)) {
-                    const index = value.lastIndexOf("[");
-                    baseExpr = value.slice(0, index);
-                    expr = value.slice(index + 1, -1);
-                }
-                else {
-                    throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
-                }
                 const typeAttr = node.getAttribute("type");
                 const isInput = tagName === "input";
                 const isSelect = tagName === "select";
@@ -5143,8 +5145,7 @@
                 const hasNumberMod = attr.includes(".number");
                 const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
                 model = {
-                    baseExpr,
-                    expr,
+                    expr: value,
                     targetAttr: isCheckboxInput ? "checked" : "value",
                     specialInitTargetAttr: isRadioInput ? "checked" : null,
                     eventType,
@@ -5186,7 +5187,7 @@
         }
         const children = parseChildren(node, ctx);
         return {
-            type: 2 /* DomNode */,
+            type: 2 /* ASTType.DomNode */,
             tag: tagName,
             dynamicTag,
             attrs,
@@ -5199,55 +5200,26 @@
         };
     }
     // -----------------------------------------------------------------------------
-    // t-esc
-    // -----------------------------------------------------------------------------
-    function parseTEscNode(node, ctx) {
-        if (!node.hasAttribute("t-esc")) {
-            return null;
-        }
-        const escValue = node.getAttribute("t-esc");
-        node.removeAttribute("t-esc");
-        const tesc = {
-            type: 4 /* TEsc */,
-            expr: escValue,
-            defaultValue: node.textContent || "",
-        };
-        let ref = node.getAttribute("t-ref");
-        node.removeAttribute("t-ref");
-        const ast = parseNode(node, ctx);
-        if (!ast) {
-            return tesc;
-        }
-        if (ast.type === 2 /* DomNode */) {
-            return {
-                ...ast,
-                ref,
-                content: [tesc],
-            };
-        }
-        return tesc;
-    }
-    // -----------------------------------------------------------------------------
     // t-out
     // -----------------------------------------------------------------------------
     function parseTOutNode(node, ctx) {
-        if (!node.hasAttribute("t-out") && !node.hasAttribute("t-raw")) {
+        if (!node.hasAttribute("t-out") && !node.hasAttribute("t-esc")) {
             return null;
         }
-        if (node.hasAttribute("t-raw")) {
-            console.warn(`t-raw has been deprecated in favor of t-out. If the value to render is not wrapped by the "markup" function, it will be escaped`);
+        if (node.hasAttribute("t-esc")) {
+            console.warn(`t-esc has been deprecated in favor of t-out. If the value to render is not wrapped by the "markup" function, it will be escaped`);
         }
-        const expr = (node.getAttribute("t-out") || node.getAttribute("t-raw"));
+        const expr = (node.getAttribute("t-out") || node.getAttribute("t-esc"));
         node.removeAttribute("t-out");
-        node.removeAttribute("t-raw");
-        const tOut = { type: 8 /* TOut */, expr, body: null };
+        node.removeAttribute("t-esc");
+        const tOut = { type: 7 /* ASTType.TOut */, expr, body: null };
         const ref = node.getAttribute("t-ref");
         node.removeAttribute("t-ref");
         const ast = parseNode(node, ctx);
         if (!ast) {
             return tOut;
         }
-        if (ast.type === 2 /* DomNode */) {
+        if (ast.type === 2 /* ASTType.DomNode */) {
             tOut.body = ast.content.length ? ast.content : null;
             return {
                 ...ast,
@@ -5286,7 +5258,7 @@
         const hasNoIndex = hasNoTCall && !html.includes(`${elem}_index`);
         const hasNoValue = hasNoTCall && !html.includes(`${elem}_value`);
         return {
-            type: 9 /* TForEach */,
+            type: 8 /* ASTType.TForEach */,
             collection,
             elem,
             body,
@@ -5309,7 +5281,7 @@
             return null;
         }
         const ast = {
-            type: 10 /* TKey */,
+            type: 9 /* ASTType.TKey */,
             expr: key,
             content,
         };
@@ -5331,12 +5303,12 @@
         node.removeAttribute("t-call-context");
         if (node.tagName !== "t") {
             const ast = parseNode(node, ctx);
-            const tcall = { type: 7 /* TCall */, name: subTemplate, body: null, context };
-            if (ast && ast.type === 2 /* DomNode */) {
+            const tcall = { type: 6 /* ASTType.TCall */, name: subTemplate, body: null, context };
+            if (ast && ast.type === 2 /* ASTType.DomNode */) {
                 ast.content = [tcall];
                 return ast;
             }
-            if (ast && ast.type === 11 /* TComponent */) {
+            if (ast && ast.type === 10 /* ASTType.TComponent */) {
                 return {
                     ...ast,
                     slots: {
@@ -5353,7 +5325,7 @@
         }
         const body = parseChildren(node, ctx);
         return {
-            type: 7 /* TCall */,
+            type: 6 /* ASTType.TCall */,
             name: subTemplate,
             body: body.length ? body : null,
             context,
@@ -5368,7 +5340,7 @@
         }
         const name = node.getAttribute("t-call-block");
         return {
-            type: 15 /* TCallBlock */,
+            type: 14 /* ASTType.TCallBlock */,
             name,
         };
     }
@@ -5381,7 +5353,7 @@
         }
         const condition = node.getAttribute("t-if");
         node.removeAttribute("t-if");
-        const content = parseNode(node, ctx) || { type: 0 /* Text */, value: "" };
+        const content = parseNode(node, ctx) || { type: 0 /* ASTType.Text */, value: "" };
         let nextElement = node.nextElementSibling;
         // t-elifs
         const tElifs = [];
@@ -5404,7 +5376,7 @@
             nextElement.remove();
         }
         return {
-            type: 5 /* TIf */,
+            type: 4 /* ASTType.TIf */,
             condition,
             content,
             tElif: tElifs.length ? tElifs : null,
@@ -5425,7 +5397,7 @@
         if (node.textContent !== node.innerHTML) {
             body = parseChildren(node, ctx);
         }
-        return { type: 6 /* TSet */, name, value, defaultValue, body, hasNoRepresentation: true };
+        return { type: 5 /* ASTType.TSet */, name, value, defaultValue, body, hasNoRepresentation: true };
     }
     // -----------------------------------------------------------------------------
     // Components
@@ -5554,7 +5526,7 @@
             }
         }
         return {
-            type: 11 /* TComponent */,
+            type: 10 /* ASTType.TComponent */,
             name,
             isDynamic,
             dynamicProps,
@@ -5567,12 +5539,12 @@
     // -----------------------------------------------------------------------------
     // Slots
     // -----------------------------------------------------------------------------
-    function parseTSlot(node, ctx) {
-        if (!node.hasAttribute("t-slot")) {
+    function parseTCallSlot(node, ctx) {
+        if (!node.hasAttribute("t-call-slot")) {
             return null;
         }
-        const name = node.getAttribute("t-slot");
-        node.removeAttribute("t-slot");
+        const name = node.getAttribute("t-call-slot");
+        node.removeAttribute("t-call-slot");
         let attrs = null;
         let attrsTranslationCtx = null;
         let on = null;
@@ -5593,7 +5565,7 @@
             }
         }
         return {
-            type: 14 /* TSlot */,
+            type: 13 /* ASTType.TCallSlot */,
             name,
             attrs,
             attrsTranslationCtx,
@@ -5605,7 +5577,7 @@
     // Translation
     // -----------------------------------------------------------------------------
     function wrapInTTranslationAST(r) {
-        const ast = { type: 16 /* TTranslation */, content: r };
+        const ast = { type: 15 /* ASTType.TTranslation */, content: r };
         if (r === null || r === void 0 ? void 0 : r.hasNoRepresentation) {
             ast.hasNoRepresentation = true;
         }
@@ -5617,7 +5589,7 @@
         }
         node.removeAttribute("t-translation");
         const result = parseNode(node, ctx);
-        if ((result === null || result === void 0 ? void 0 : result.type) === 3 /* Multi */) {
+        if ((result === null || result === void 0 ? void 0 : result.type) === 3 /* ASTType.Multi */) {
             const children = result.content.map(wrapInTTranslationAST);
             return makeASTMulti(children);
         }
@@ -5628,7 +5600,7 @@
     // -----------------------------------------------------------------------------
     function wrapInTTranslationContextAST(r, translationCtx) {
         const ast = {
-            type: 17 /* TTranslationContext */,
+            type: 16 /* ASTType.TTranslationContext */,
             content: r,
             translationCtx,
         };
@@ -5644,7 +5616,7 @@
         }
         node.removeAttribute("t-translation-context");
         const result = parseNode(node, ctx);
-        if ((result === null || result === void 0 ? void 0 : result.type) === 3 /* Multi */) {
+        if ((result === null || result === void 0 ? void 0 : result.type) === 3 /* ASTType.Multi */) {
             const children = result.content.map((c) => wrapInTTranslationContextAST(c, translationCtx));
             return makeASTMulti(children);
         }
@@ -5662,12 +5634,12 @@
         const content = parseNode(node, ctx);
         if (!content) {
             return {
-                type: 0 /* Text */,
+                type: 0 /* ASTType.Text */,
                 value: "",
             };
         }
         return {
-            type: 18 /* TPortal */,
+            type: 17 /* ASTType.TPortal */,
             target,
             content,
         };
@@ -5683,7 +5655,7 @@
         for (let child of node.childNodes) {
             const childAst = parseNode(child, ctx);
             if (childAst) {
-                if (childAst.type === 3 /* Multi */) {
+                if (childAst.type === 3 /* ASTType.Multi */) {
                     children.push(...childAst.content);
                 }
                 else {
@@ -5694,7 +5666,7 @@
         return children;
     }
     function makeASTMulti(children) {
-        const ast = { type: 3 /* Multi */, content: children };
+        const ast = { type: 3 /* ASTType.Multi */, content: children };
         if (children.every((c) => c.hasNoRepresentation)) {
             ast.hasNoRepresentation = true;
         }
@@ -5755,28 +5727,26 @@
         }
     }
     /**
-     * Normalizes the content of an Element so that t-esc directives on components
-     * are removed and instead places a <t t-esc=""> as the default slot of the
+     * 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 normalizeTEscTOut(el) {
-        for (const d of ["t-esc", "t-out"]) {
-            const elements = [...el.querySelectorAll(`[${d}]`)].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 ${d} on a component that already has content`);
-                }
-                const value = el.getAttribute(d);
-                el.removeAttribute(d);
-                const t = el.ownerDocument.createElement("t");
-                if (value != null) {
-                    t.setAttribute(d, value);
-                }
-                el.appendChild(t);
+    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);
         }
     }
     /**
@@ -5787,7 +5757,7 @@
      */
     function normalizeXML(el) {
         normalizeTIf(el);
-        normalizeTEscTOut(el);
+        normalizeTOut(el);
     }
 
     function compile(template, options = {
@@ -5798,7 +5768,7 @@
         // some work
         const hasSafeContext = template instanceof Node
             ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
-            : !template.includes("t-set") && !template.includes("t-call");
+            : !template.includes("t-set=") && !template.includes("t-call=");
         // code generation
         const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
         const code = codeGenerator.generateCode();
@@ -5816,7 +5786,7 @@
     }
 
     // do not modify manually. This file is generated by the release script.
-    const version = "2.8.1";
+    const version = "3.0.0-alpha";
 
     // -----------------------------------------------------------------------------
     //  Scheduler
@@ -5848,7 +5818,7 @@
                 let renders = this.delayedRenders;
                 this.delayedRenders = [];
                 for (let f of renders) {
-                    if (f.root && f.node.status !== 3 /* DESTROYED */ && f.node.fiber === f) {
+                    if (f.root && f.node.status !== 3 /* STATUS.DESTROYED */ && f.node.fiber === f) {
                         f.render();
                     }
                 }
@@ -5871,7 +5841,7 @@
                 this.processFiber(task);
             }
             for (let task of this.tasks) {
-                if (task.node.status === 3 /* DESTROYED */) {
+                if (task.node.status === 3 /* STATUS.DESTROYED */) {
                     this.tasks.delete(task);
                 }
             }
@@ -5887,7 +5857,7 @@
                 this.tasks.delete(fiber);
                 return;
             }
-            if (fiber.node.status === 3 /* DESTROYED */) {
+            if (fiber.node.status === 3 /* STATUS.DESTROYED */) {
                 this.tasks.delete(fiber);
                 return;
             }
@@ -5912,105 +5882,94 @@
 
     let hasBeenLogged = false;
     const apps = new Set();
-    window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = { apps, Fiber, RootFiber, toRaw, reactive });
+    window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = { apps, Fiber, RootFiber, toRaw, proxy });
     class App extends TemplateSet {
-        constructor(Root, config = {}) {
+        constructor(config = {}) {
             super(config);
             this.scheduler = new Scheduler();
-            this.subRoots = new Set();
-            this.root = null;
+            this.roots = new Set();
             this.name = config.name || "";
-            this.Root = Root;
             apps.add(this);
+            this.pluginManager = config.pluginManager || new PluginManager(null);
+            if (config.plugins) {
+                this.pluginManager.startPlugins(config.plugins);
+            }
             if (config.test) {
                 this.dev = true;
             }
-            this.warnIfNoStaticProps = config.warnIfNoStaticProps || false;
             if (this.dev && !config.test && !hasBeenLogged) {
                 console.info(`Owl is running in 'dev' mode.`);
                 hasBeenLogged = true;
             }
-            const env = config.env || {};
-            const descrs = Object.getOwnPropertyDescriptors(env);
-            this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
-            this.props = config.props || {};
-        }
-        mount(target, options) {
-            const root = this.createRoot(this.Root, { props: this.props });
-            this.root = root.node;
-            this.subRoots.delete(root.node);
-            return root.mount(target, options);
         }
         createRoot(Root, config = {}) {
             const props = config.props || {};
-            // hack to make sure the sub root get the sub env if necessary. for owl 3,
-            // would be nice to rethink the initialization process to make sure that
-            // we can create a ComponentNode and give it explicitely the env, instead
-            // of looking it up in the app
-            const env = this.env;
-            if (config.env) {
-                this.env = config.env;
-            }
+            let resolve;
+            let reject;
+            const promise = new Promise((res, rej) => {
+                resolve = res;
+                reject = rej;
+            });
             const restore = saveCurrent();
-            const node = this.makeNode(Root, props);
-            restore();
-            if (config.env) {
-                this.env = env;
+            let node;
+            let error = null;
+            try {
+                node = this.makeNode(Root, props);
             }
-            this.subRoots.add(node);
-            return {
-                node,
+            catch (e) {
+                error = e;
+                reject(e);
+            }
+            finally {
+                restore();
+            }
+            const root = {
+                node: node,
+                promise,
                 mount: (target, options) => {
-                    App.validateTarget(target);
-                    if (this.dev) {
-                        validateProps(Root, props, { __owl__: { app: this } });
+                    if (error) {
+                        return promise;
                     }
-                    const prom = this.mountNode(node, target, options);
-                    return prom;
+                    App.validateTarget(target);
+                    this.mountNode(node, target, resolve, reject, options);
+                    return promise;
                 },
                 destroy: () => {
-                    this.subRoots.delete(node);
+                    this.roots.delete(root);
                     node.destroy();
                     this.scheduler.processTasks();
                 },
             };
+            this.roots.add(root);
+            return root;
         }
         makeNode(Component, props) {
             return new ComponentNode(Component, props, this, null, null);
         }
-        mountNode(node, target, options) {
-            const promise = new Promise((resolve, reject) => {
-                let isResolved = false;
-                // manually set a onMounted callback.
-                // that way, we are independant from the current node.
-                node.mounted.push(() => {
-                    resolve(node.component);
-                    isResolved = true;
-                });
-                // 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) => {
-                    if (!isResolved) {
-                        reject(e);
-                    }
-                    throw e;
-                });
+        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);
-            return promise;
         }
         destroy() {
-            if (this.root) {
-                for (let subroot of this.subRoots) {
-                    subroot.destroy();
-                }
-                this.root.destroy();
-                this.scheduler.processTasks();
+            for (let root of this.roots) {
+                root.destroy();
             }
+            this.scheduler.processTasks();
             apps.delete(this);
         }
         createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, propList) {
@@ -6089,7 +6048,9 @@
     App.apps = apps;
     App.version = version;
     async function mount(C, target, config = {}) {
-        return new App(C, config).mount(target, config);
+        const app = new App(config);
+        const root = app.createRoot(C, config);
+        return root.mount(target, config);
     }
 
     const mainEventHandler = (data, ev, currentTarget) => {
@@ -6130,72 +6091,227 @@
                 throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
             }
             let node = data[1] ? data[1].__owl__ : null;
-            if (node ? node.status === 1 /* MOUNTED */ : true) {
+            if (node ? node.status === 1 /* STATUS.MOUNTED */ : true) {
                 handler.call(node ? node.component : null, ev);
             }
         }
         return stopped;
     };
 
-    function status(component) {
-        switch (component.__owl__.status) {
-            case 0 /* NEW */:
-                return "new";
-            case 2 /* CANCELLED */:
-                return "cancelled";
-            case 1 /* MOUNTED */:
-                return "mounted";
-            case 3 /* DESTROYED */:
-                return "destroyed";
+    function computed(fn, opts) {
+        // todo: handle cleanup
+        let derivedComputation;
+        return () => {
+            derivedComputation !== null && derivedComputation !== void 0 ? derivedComputation : (derivedComputation = {
+                state: ComputationState.STALE,
+                sources: new Set(),
+                compute: () => {
+                    onWriteAtom(derivedComputation);
+                    return fn();
+                },
+                isDerived: true,
+                value: undefined,
+                observers: new Set(),
+                name: opts === null || opts === void 0 ? void 0 : opts.name,
+            });
+            updateComputation(derivedComputation);
+            return derivedComputation.value;
+        };
+    }
+
+    function signal(value, opts) {
+        const atom = {
+            value,
+            observers: new Set(),
+            name: opts === null || opts === void 0 ? void 0 : opts.name,
+        };
+        const read = () => {
+            onReadAtom(atom);
+            return atom.value;
+        };
+        const write = (newValue) => {
+            if (typeof newValue === "function") {
+                newValue = newValue(atom.value);
+            }
+            if (Object.is(atom.value, newValue))
+                return;
+            atom.value = newValue;
+            onWriteAtom(atom);
+        };
+        read.set = write;
+        read.update = (updater) => {
+            if (updater) {
+                write(updater(atom.value));
+            }
+            else {
+                onWriteAtom(atom);
+            }
+        };
+        return read;
+    }
+
+    class Resource {
+        constructor(name, type) {
+            this._items = signal([]);
+            this.items = computed(() => {
+                return this._items()
+                    .sort((el1, el2) => el1[0] - el2[0])
+                    .map((elem) => elem[1]);
+            });
+            this._name = name || "resource";
+            this._type = type;
+        }
+        add(item, sequence = 50) {
+            if (this._type) {
+                const error = validateType("item", item, this._type);
+                if (error) {
+                    throw new Error(`Invalid type: ${error} (resource '${this._name}')`);
+                }
+            }
+            this._items().push([sequence, item]);
+            this._items.update();
+            return this;
+        }
+        remove(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.remove(elem);
+            }
+        });
     }
 
-    // -----------------------------------------------------------------------------
-    // useRef
-    // -----------------------------------------------------------------------------
-    /**
-     * The purpose of this hook is to allow components to get a reference to a sub
-     * html node or component.
-     */
-    function useRef(name) {
-        const node = getCurrent();
-        const refs = node.refs;
-        return {
-            get el() {
-                const el = refs[name];
-                return inOwnerDocument(el) ? el : null;
+    class Registry {
+        constructor(name, type) {
+            this._map = signal(Object.create(null));
+            this.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;
+            });
+            this.items = computed(() => this.entries().map((e) => e[1]));
+            this._name = name || "registry";
+            this._type = type;
+        }
+        addById(item, sequence = 50) {
+            if (!item.id) {
+                throw new Error(`Item should have an id key`);
+            }
+            return this.add(item.id, item, sequence);
+        }
+        add(key, value, sequence = 50) {
+            if (this._type) {
+                const error = validateType(key, value, this._type);
+                // todo: move error handling in validation.js
+                if (error) {
+                    throw new Error("Invalid type: " + error);
+                }
+            }
+            this._map()[key] = [sequence, value];
+            this._map.update();
+            return this;
+        }
+        get(key, defaultValue) {
+            const hasKey = key in this._map();
+            if (!hasKey && arguments.length < 2) {
+                throw new Error(`KeyNotFoundError: Cannot find key "${key}" in this registry`);
+            }
+            return hasKey ? this._map()[key][1] : defaultValue;
+        }
+        remove(key) {
+            delete this._map()[key];
+            this._map.update();
+        }
+        has(key) {
+            return key in this._map();
+        }
+    }
+
+    function status() {
+        const pm = _getCurrentPluginManager();
+        const node = pm || getCurrent();
+        return () => {
+            switch (node.status) {
+                case 0 /* STATUS.NEW */:
+                    return "new";
+                case 2 /* STATUS.CANCELLED */:
+                    return "cancelled";
+                case 1 /* STATUS.MOUNTED */:
+                    return pm ? "started" : "mounted";
+                case 3 /* STATUS.DESTROYED */:
+                    return "destroyed";
+            }
+        };
+    }
+
+    function effect(fn, opts) {
+        var _a, _b, _c;
+        const effectComputation = {
+            state: ComputationState.STALE,
+            value: undefined,
+            compute() {
+                // In case the cleanup read an atom.
+                // todo: test it
+                setComputation(undefined);
+                //   CurrentComputation = undefined!;
+                // `removeSources` is made by `runComputation`.
+                unsubscribeEffect(effectComputation);
+                setComputation(effectComputation);
+                //   CurrentComputation = effectComputation;
+                return fn();
             },
+            sources: new Set(),
+            childrenEffect: [],
+            name: opts === null || opts === void 0 ? void 0 : opts.name,
+        };
+        (_c = (_b = (_a = getCurrentComputation()) === null || _a === void 0 ? void 0 : _a.childrenEffect) === null || _b === void 0 ? void 0 : _b.push) === null || _c === void 0 ? void 0 : _c.call(_b, effectComputation);
+        updateComputation(effectComputation);
+        // Remove sources and unsubscribe
+        return () => {
+            // In case the cleanup read an atom.
+            // todo: test it
+            const previousComputation = getCurrentComputation();
+            setComputation(undefined);
+            unsubscribeEffect(effectComputation);
+            setComputation(previousComputation);
         };
     }
+    function unsubscribeEffect(effectComputation) {
+        removeSources(effectComputation);
+        cleanupEffect(effectComputation);
+        for (const children of effectComputation.childrenEffect) {
+            // Consider it executed to avoid it's re-execution
+            // todo: make a test for it
+            children.state = ComputationState.EXECUTED;
+            removeSources(children);
+            unsubscribeEffect(children);
+        }
+        effectComputation.childrenEffect.length = 0;
+    }
+    function cleanupEffect(computation) {
+        // the computation.value of an effect is a cleanup function
+        const cleanupFn = computation.value;
+        if (cleanupFn && typeof cleanupFn === "function") {
+            cleanupFn();
+            computation.value = undefined;
+        }
+    }
+
     // -----------------------------------------------------------------------------
-    // useEnv and useSubEnv
+    // useEffect
     // -----------------------------------------------------------------------------
-    /**
-     * This hook is useful as a building block for some customized hooks, that may
-     * need a reference to the env of the component calling them.
-     */
-    function useEnv() {
-        return getCurrent().component.env;
-    }
-    function extendEnv(currentEnv, extension) {
-        const env = Object.create(currentEnv);
-        const descrs = Object.getOwnPropertyDescriptors(extension);
-        return Object.freeze(Object.defineProperties(env, descrs));
-    }
-    /**
-     * This hook is a simple way to let components use a sub environment.  Note that
-     * like for all hooks, it is important that this is only called in the
-     * constructor method.
-     */
-    function useSubEnv(envExtension) {
-        const node = getCurrent();
-        node.component.env = extendEnv(node.component.env, envExtension);
-        useChildSubEnv(envExtension);
-    }
-    function useChildSubEnv(envExtension) {
-        const node = getCurrent();
-        node.childEnv = extendEnv(node.childEnv, envExtension);
-    }
     /**
      * This hook will run a callback when a component is mounted and patched, and
      * will run a cleanup function before patching and before unmounting the
@@ -6209,32 +6325,15 @@
      *      again. The default value returns an array containing only NaN because
      *      NaN !== NaN, which will cause the effect to rerun on every patch.
      */
-    function useEffect(effect, computeDependencies = () => [NaN]) {
-        let cleanup;
-        let dependencies;
-        onMounted(() => {
-            dependencies = computeDependencies();
-            cleanup = effect(...dependencies);
-        });
-        onPatched(() => {
-            const newDeps = computeDependencies();
-            const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
-            if (shouldReapply) {
-                dependencies = newDeps;
-                if (cleanup) {
-                    cleanup();
-                }
-                cleanup = effect(...dependencies);
-            }
-        });
-        onWillUnmount(() => cleanup && cleanup());
+    function useEffect(fn) {
+        onWillDestroy(effect(fn));
     }
     // -----------------------------------------------------------------------------
-    // useExternalListener
+    // useListener
     // -----------------------------------------------------------------------------
     /**
      * When a component needs to listen to DOM Events on element(s) that are not
-     * part of his hierarchy, we can use the `useExternalListener` hook.
+     * part of his hierarchy, we can use the `useListener` hook.
      * It will correctly add and remove the event listener, whenever the
      * component is mounted and unmounted.
      *
@@ -6243,13 +6342,20 @@
      *
      * Usage:
      *  in the constructor of the OWL component that needs to be notified,
-     *  `useExternalListener(window, 'click', this._doSomething);`
+     *  `useListener(window, 'click', this._doSomething);`
      * */
-    function useExternalListener(target, eventName, handler, eventParams) {
+    function useListener(target, eventName, handler, eventParams) {
         const node = getCurrent();
         const boundHandler = handler.bind(node.component);
         onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
         onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
+    }
+    function usePlugins(Plugins) {
+        const node = getCurrent();
+        const manager = new PluginManager(node.pluginManager);
+        node.pluginManager = manager;
+        onWillDestroy(() => manager.destroy());
+        return manager.startPlugins(Plugins);
     }
 
     config.shouldNormalizeDom = false;
@@ -6288,35 +6394,39 @@
     exports.Component = Component;
     exports.EventBus = EventBus;
     exports.OwlError = OwlError;
+    exports.Plugin = Plugin;
+    exports.PluginManager = PluginManager;
+    exports.Registry = Registry;
+    exports.Resource = Resource;
     exports.__info__ = __info__;
     exports.batched = batched;
     exports.blockDom = blockDom;
+    exports.computed = computed;
+    exports.effect = effect;
     exports.htmlEscape = htmlEscape;
-    exports.loadFile = loadFile;
     exports.markRaw = markRaw;
     exports.markup = markup;
     exports.mount = mount;
     exports.onError = onError;
     exports.onMounted = onMounted;
     exports.onPatched = onPatched;
-    exports.onRendered = onRendered;
     exports.onWillDestroy = onWillDestroy;
     exports.onWillPatch = onWillPatch;
-    exports.onWillRender = onWillRender;
     exports.onWillStart = onWillStart;
     exports.onWillUnmount = onWillUnmount;
     exports.onWillUpdateProps = onWillUpdateProps;
-    exports.reactive = reactive;
+    exports.plugin = plugin;
+    exports.props = props;
+    exports.proxy = proxy;
+    exports.signal = signal;
     exports.status = status;
     exports.toRaw = toRaw;
-    exports.useChildSubEnv = useChildSubEnv;
+    exports.untrack = untrack;
     exports.useComponent = useComponent;
     exports.useEffect = useEffect;
-    exports.useEnv = useEnv;
-    exports.useExternalListener = useExternalListener;
-    exports.useRef = useRef;
-    exports.useState = useState;
-    exports.useSubEnv = useSubEnv;
+    exports.useListener = useListener;
+    exports.usePlugins = usePlugins;
+    exports.useResource = useResource;
     exports.validate = validate;
     exports.validateType = validateType;
     exports.whenReady = whenReady;
@@ -6325,8 +6435,8 @@
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.date = '2025-09-23T07:17:45.055Z';
-    __info__.hash = '5211116';
+    __info__.date = '2025-12-22T15:42:39.839Z';
+    __info__.hash = '169a8cc';
     __info__.url = 'https://github.com/odoo/owl';