@odoo/owl 2.8.1 → 3.0.0-alpha.10

package/dist/owl.cjs.js

@@ -33,6 +33,7 @@ const config = {
 // -----------------------------------------------------------------------------
 // Toggler node
 // -----------------------------------------------------------------------------
+const txt = document.createTextNode("");
 class VToggler {
     constructor(key, child) {
         this.key = key;
@@ -58,11 +59,13 @@ class VToggler {
             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;
         }
@@ -335,13 +338,6 @@ function whenReady(fn) {
         }
     }).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
@@ -902,7 +898,7 @@ function parentTree(tree) {
 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) {
@@ -1009,14 +1005,16 @@ function updateCtx(ctx, tree) {
                 });
                 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;
+            }
         }
     }
 }
@@ -1025,27 +1023,6 @@ function updateCtx(ctx, tree) {
 // -----------------------------------------------------------------------------
 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) {
@@ -1059,14 +1036,9 @@ function buildBlock(template, ctx) {
     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;
@@ -1142,6 +1114,15 @@ function createBlockClass(template, ctx) {
             }
             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) {
@@ -1190,16 +1171,23 @@ function createBlockClass(template, ctx) {
                 }
             }
         };
+        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);
@@ -1596,9 +1584,160 @@ function remove(vnode, withBeforeRemove = false) {
     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;
@@ -1611,9 +1750,10 @@ function _handleError(node, error) {
     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;
             }
@@ -1629,10 +1769,6 @@ function _handleError(node, error) {
 }
 function handleError(params) {
     let { error } = params;
-    // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
-    if (!(error instanceof OwlError)) {
-        error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
-    }
     const node = "node" in params ? params.node : params.fiber.node;
     const fiber = "fiber" in params ? params.fiber : node.fiber;
     if (fiber) {
@@ -1647,14 +1783,7 @@ function handleError(params) {
     }
     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);
     }
 }
 
@@ -1713,7 +1842,7 @@ function cancelFibers(fibers) {
     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;
@@ -1779,13 +1908,16 @@ class Fiber {
         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);
         }
     }
@@ -1898,7 +2030,7 @@ class MountFiber extends RootFiber {
             // 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())) {
@@ -1915,567 +2047,104 @@ class MountFiber extends RootFiber {
     }
 }
 
-// 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;
@@ -2485,7 +2154,7 @@ class ComponentNode {
         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
@@ -2509,14 +2178,14 @@ class ComponentNode {
         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();
@@ -2524,7 +2193,7 @@ class ComponentNode {
     }
     _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);
             }
@@ -2542,33 +2211,23 @@ class ComponentNode {
                 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) {
@@ -2603,18 +2262,6 @@ class ComponentNode {
             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
     // ---------------------------------------------------------------------------
@@ -2626,7 +2273,7 @@ class ComponentNode {
         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;
@@ -2643,7 +2290,6 @@ class ComponentNode {
             // by the component will be patched independently in the appropriate
             // fiber.complete
             this._patch();
-            this.props = this.nextProps;
         }
     }
     _patch() {
@@ -2665,120 +2311,130 @@ class ComponentNode {
     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();
@@ -2791,9 +2447,7 @@ function onError(callback) {
 }
 
 class Component {
-    constructor(props, env, node) {
-        this.props = props;
-        this.env = env;
+    constructor(node) {
         this.__owl__ = node;
     }
     setup() { }
@@ -2803,83 +2457,6 @@ class Component {
 }
 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
 // -----------------------------------------------------------------------------
@@ -2930,7 +2507,7 @@ function validateSchema(obj, schema) {
     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) {
@@ -3003,33 +2580,555 @@ function validateType(key, value, descr) {
         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;
@@ -3042,7 +3141,7 @@ function withDefault(value, defaultValue) {
 }
 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) {
@@ -3147,84 +3246,52 @@ function safeOutput(value, defaultValue) {
     }
     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"),
@@ -3236,13 +3303,13 @@ const helpers = {
     setContextValue,
     shallowEqual,
     toNumber,
-    validateProps,
     LazyValue,
     safeOutput,
     createCatcher,
     markRaw,
     OwlError,
-    makeRefWrapper,
+    createRef,
+    modelExpr,
 };
 
 /**
@@ -3283,6 +3350,9 @@ function parseXML(xml) {
 
 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 = {};
@@ -3305,9 +3375,6 @@ class TemplateSet {
         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
@@ -3618,7 +3685,7 @@ function compileExprToArray(expr) {
                 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" &&
@@ -3810,7 +3877,6 @@ class CodeTarget {
         this.hasRoot = false;
         this.hasCache = false;
         this.shouldProtectScope = false;
-        this.hasRefWrapper = false;
         this.name = name;
         this.on = on || null;
     }
@@ -3830,9 +3896,6 @@ class CodeTarget {
             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 = {};`);
@@ -3899,7 +3962,7 @@ class CodeGenerator {
     }
     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, {
@@ -4055,43 +4118,41 @@ class CodeGenerator {
      */
     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);
         }
     }
@@ -4142,7 +4203,7 @@ class CodeGenerator {
             });
         }
         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;
@@ -4236,14 +4297,11 @@ class CodeGenerator {
         // 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]}'`;
@@ -4254,23 +4312,23 @@ class CodeGenerator {
                         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;
         }
@@ -4282,19 +4340,9 @@ class CodeGenerator {
         }
         // 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);
         }
@@ -4348,32 +4396,6 @@ class CodeGenerator {
         }
         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) {
@@ -4389,7 +4411,7 @@ class CodeGenerator {
             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})`;
         }
@@ -4594,7 +4616,7 @@ class CodeGenerator {
         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 + "`";
@@ -4607,7 +4629,7 @@ class CodeGenerator {
             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};`);
@@ -4655,7 +4677,7 @@ class CodeGenerator {
         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})`;
@@ -4794,9 +4816,6 @@ class CodeGenerator {
         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);
@@ -4851,7 +4870,7 @@ class CodeGenerator {
         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;
@@ -4968,7 +4987,7 @@ function parse(xml, customDir) {
 }
 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)) {
@@ -4984,9 +5003,8 @@ function parseNode(node, ctx) {
         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) ||
@@ -5011,10 +5029,10 @@ function parseTextCommentNode(node, ctx) {
         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;
 }
@@ -5055,7 +5073,7 @@ function parseTDebugLog(node, ctx) {
         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) {
@@ -5068,7 +5086,7 @@ function parseTDebugLog(node, ctx) {
         node.removeAttribute("t-log");
         const content = parseNode(node, ctx);
         const ast = {
-            type: 13 /* TLog */,
+            type: 12 /* ASTType.TLog */,
             expr,
             content,
         };
@@ -5082,8 +5100,6 @@ function parseTDebugLog(node, ctx) {
 // -----------------------------------------------------------------------------
 // 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;
@@ -5120,20 +5136,6 @@ function parseDOMNode(node, ctx) {
             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";
@@ -5144,8 +5146,7 @@ function parseDOMNode(node, ctx) {
             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,
@@ -5187,7 +5188,7 @@ function parseDOMNode(node, ctx) {
     }
     const children = parseChildren(node, ctx);
     return {
-        type: 2 /* DomNode */,
+        type: 2 /* ASTType.DomNode */,
         tag: tagName,
         dynamicTag,
         attrs,
@@ -5200,55 +5201,26 @@ function parseDOMNode(node, ctx) {
     };
 }
 // -----------------------------------------------------------------------------
-// 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,
@@ -5287,7 +5259,7 @@ function parseTForEach(node, ctx) {
     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,
@@ -5310,7 +5282,7 @@ function parseTKey(node, ctx) {
         return null;
     }
     const ast = {
-        type: 10 /* TKey */,
+        type: 9 /* ASTType.TKey */,
         expr: key,
         content,
     };
@@ -5332,12 +5304,12 @@ function parseTCall(node, ctx) {
     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: {
@@ -5354,7 +5326,7 @@ function parseTCall(node, ctx) {
     }
     const body = parseChildren(node, ctx);
     return {
-        type: 7 /* TCall */,
+        type: 6 /* ASTType.TCall */,
         name: subTemplate,
         body: body.length ? body : null,
         context,
@@ -5369,7 +5341,7 @@ function parseTCallBlock(node, ctx) {
     }
     const name = node.getAttribute("t-call-block");
     return {
-        type: 15 /* TCallBlock */,
+        type: 14 /* ASTType.TCallBlock */,
         name,
     };
 }
@@ -5382,7 +5354,7 @@ function parseTIf(node, ctx) {
     }
     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 = [];
@@ -5405,7 +5377,7 @@ function parseTIf(node, ctx) {
         nextElement.remove();
     }
     return {
-        type: 5 /* TIf */,
+        type: 4 /* ASTType.TIf */,
         condition,
         content,
         tElif: tElifs.length ? tElifs : null,
@@ -5426,7 +5398,7 @@ function parseTSetNode(node, ctx) {
     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
@@ -5555,7 +5527,7 @@ function parseComponent(node, ctx) {
         }
     }
     return {
-        type: 11 /* TComponent */,
+        type: 10 /* ASTType.TComponent */,
         name,
         isDynamic,
         dynamicProps,
@@ -5568,12 +5540,12 @@ function parseComponent(node, ctx) {
 // -----------------------------------------------------------------------------
 // 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;
@@ -5594,7 +5566,7 @@ function parseTSlot(node, ctx) {
         }
     }
     return {
-        type: 14 /* TSlot */,
+        type: 13 /* ASTType.TCallSlot */,
         name,
         attrs,
         attrsTranslationCtx,
@@ -5606,7 +5578,7 @@ function parseTSlot(node, ctx) {
 // 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;
     }
@@ -5618,7 +5590,7 @@ function parseTTranslation(node, ctx) {
     }
     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);
     }
@@ -5629,7 +5601,7 @@ function parseTTranslation(node, ctx) {
 // -----------------------------------------------------------------------------
 function wrapInTTranslationContextAST(r, translationCtx) {
     const ast = {
-        type: 17 /* TTranslationContext */,
+        type: 16 /* ASTType.TTranslationContext */,
         content: r,
         translationCtx,
     };
@@ -5645,7 +5617,7 @@ function parseTTranslationContext(node, ctx) {
     }
     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);
     }
@@ -5663,12 +5635,12 @@ function parseTPortal(node, ctx) {
     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,
     };
@@ -5684,7 +5656,7 @@ function parseChildren(node, ctx) {
     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 {
@@ -5695,7 +5667,7 @@ function parseChildren(node, ctx) {
     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;
     }
@@ -5756,28 +5728,26 @@ function normalizeTIf(el) {
     }
 }
 /**
- * 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);
     }
 }
 /**
@@ -5788,7 +5758,7 @@ function normalizeTEscTOut(el) {
  */
 function normalizeXML(el) {
     normalizeTIf(el);
-    normalizeTEscTOut(el);
+    normalizeTOut(el);
 }
 
 function compile(template, options = {
@@ -5799,7 +5769,7 @@ function compile(template, options = {
     // 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();
@@ -5817,7 +5787,7 @@ function compile(template, options = {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.8.1";
+const version = "3.0.0-alpha";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5849,7 +5819,7 @@ class Scheduler {
             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();
                 }
             }
@@ -5872,7 +5842,7 @@ class Scheduler {
             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);
             }
         }
@@ -5888,7 +5858,7 @@ class Scheduler {
             this.tasks.delete(fiber);
             return;
         }
-        if (fiber.node.status === 3 /* DESTROYED */) {
+        if (fiber.node.status === 3 /* STATUS.DESTROYED */) {
             this.tasks.delete(fiber);
             return;
         }
@@ -5913,105 +5883,94 @@ Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
 
 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) {
@@ -6090,7 +6049,9 @@ App.validateTarget = validateTarget;
 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) => {
@@ -6131,72 +6092,227 @@ const mainEventHandler = (data, ev, currentTarget) => {
             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
@@ -6210,32 +6326,15 @@ function useChildSubEnv(envExtension) {
  *      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.
  *
@@ -6244,13 +6343,20 @@ function useEffect(effect, computeDependencies = () => [NaN]) {
  *
  * 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;
@@ -6289,41 +6395,45 @@ exports.App = App;
 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;
 exports.xml = xml;
 
 
-__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';