@odoo/owl 2.0.0-beta-5 → 2.0.0-beta-8

package/dist/owl.iife.js

@@ -1371,51 +1371,6 @@
         vnode.remove();
     }
 
-    const mainEventHandler = (data, ev, currentTarget) => {
-        const { data: _data, modifiers } = filterOutModifiersFromData(data);
-        data = _data;
-        let stopped = false;
-        if (modifiers.length) {
-            let selfMode = false;
-            const isSelf = ev.target === currentTarget;
-            for (const mod of modifiers) {
-                switch (mod) {
-                    case "self":
-                        selfMode = true;
-                        if (isSelf) {
-                            continue;
-                        }
-                        else {
-                            return stopped;
-                        }
-                    case "prevent":
-                        if ((selfMode && isSelf) || !selfMode)
-                            ev.preventDefault();
-                        continue;
-                    case "stop":
-                        if ((selfMode && isSelf) || !selfMode)
-                            ev.stopPropagation();
-                        stopped = true;
-                        continue;
-                }
-            }
-        }
-        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
-        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
-        // as expected when there is a handler expression that evaluates to a falsy value
-        if (Object.hasOwnProperty.call(data, 0)) {
-            const handler = data[0];
-            if (typeof handler !== "function") {
-                throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
-            }
-            let node = data[1] ? data[1].__owl__ : null;
-            if (node ? node.status === 1 /* MOUNTED */ : true) {
-                handler.call(node ? node.component : null, ev);
-            }
-        }
-        return stopped;
-    };
-
     // Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
     const TARGET = Symbol("Target");
     // Escape hatch to prevent reactivity system to turn something into a reactive
@@ -1599,7 +1554,7 @@
             return reactive(originalTarget, callback);
         }
         if (!reactiveCache.has(target)) {
-            reactiveCache.set(target, new Map());
+            reactiveCache.set(target, new WeakMap());
         }
         const reactivesForTarget = reactiveCache.get(target);
         if (!reactivesForTarget.has(callback)) {
@@ -1899,18 +1854,20 @@
      */
     function markup(value) {
         return new Markup(value);
+    }
+
+    class Component {
+        constructor(props, env, node) {
+            this.props = props;
+            this.env = env;
+            this.__owl__ = node;
+        }
+        setup() { }
+        render(deep = false) {
+            this.__owl__.render(deep === true);
+        }
     }
-    // -----------------------------------------------------------------------------
-    //  xml tag helper
-    // -----------------------------------------------------------------------------
-    const globalTemplates = {};
-    function xml(...args) {
-        const name = `__template__${xml.nextId++}`;
-        const value = String.raw(...args);
-        globalTemplates[name] = value;
-        return name;
-    }
-    xml.nextId = 1;
+    Component.template = "";
 
     // Maps fibers to thrown errors
     const fibersInError = new WeakMap();
@@ -2004,6 +1961,9 @@
         }
         return fiber;
     }
+    function throwOnRender() {
+        throw new Error("Attempted to render cancelled fiber");
+    }
     /**
      * @returns number of not-yet rendered fibers cancelled
      */
@@ -2011,6 +1971,7 @@
         let result = 0;
         for (let fiber of fibers) {
             let node = fiber.node;
+            fiber.render = throwOnRender;
             if (node.status === 0 /* NEW */) {
                 node.destroy();
             }
@@ -2204,145 +2165,6 @@
         }
     }
 
-    /**
-     * Apply default props (only top level).
-     *
-     * Note that this method does modify in place the props
-     */
-    function applyDefaultProps(props, ComponentClass) {
-        const defaultProps = ComponentClass.defaultProps;
-        if (defaultProps) {
-            for (let propName in defaultProps) {
-                if (props[propName] === undefined) {
-                    props[propName] = defaultProps[propName];
-                }
-            }
-        }
-    }
-    //------------------------------------------------------------------------------
-    // Prop validation helper
-    //------------------------------------------------------------------------------
-    function getPropDescription(staticProps) {
-        if (staticProps instanceof Array) {
-            return Object.fromEntries(staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true])));
-        }
-        return staticProps || { "*": true };
-    }
-    /**
-     * Validate the component props (or next props) against the (static) props
-     * description.  This is potentially an expensive operation: it may needs to
-     * visit recursively the props and all the children to check if they are valid.
-     * This is why it is only done in 'dev' mode.
-     */
-    function validateProps(name, props, parent) {
-        const ComponentClass = typeof name !== "string"
-            ? name
-            : parent.constructor.components[name];
-        if (!ComponentClass) {
-            // this is an error, wrong component. We silently return here instead so the
-            // error is triggered by the usual path ('component' function)
-            return;
-        }
-        applyDefaultProps(props, ComponentClass);
-        const defaultProps = ComponentClass.defaultProps || {};
-        let propsDef = getPropDescription(ComponentClass.props);
-        const allowAdditionalProps = "*" in propsDef;
-        for (let propName in propsDef) {
-            if (propName === "*") {
-                continue;
-            }
-            const propDef = propsDef[propName];
-            let isMandatory = !!propDef;
-            if (typeof propDef === "object" && "optional" in propDef) {
-                isMandatory = !propDef.optional;
-            }
-            if (isMandatory && propName in defaultProps) {
-                throw new Error(`A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`);
-            }
-            if (props[propName] === undefined) {
-                if (isMandatory) {
-                    throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
-                }
-                else {
-                    continue;
-                }
-            }
-            let isValid;
-            try {
-                isValid = isValidProp(props[propName], propDef);
-            }
-            catch (e) {
-                e.message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${e.message})`;
-                throw e;
-            }
-            if (!isValid) {
-                throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
-            }
-        }
-        if (!allowAdditionalProps) {
-            for (let propName in props) {
-                if (!(propName in propsDef)) {
-                    throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
-                }
-            }
-        }
-    }
-    /**
-     * Check if an invidual prop value matches its (static) prop definition
-     */
-    function isValidProp(prop, propDef) {
-        if (propDef === true) {
-            return true;
-        }
-        if (typeof propDef === "function") {
-            // Check if a value is constructed by some Constructor.  Note that there is a
-            // slight abuse of language: we want to consider primitive values as well.
-            //
-            // So, even though 1 is not an instance of Number, we want to consider that
-            // it is valid.
-            if (typeof prop === "object") {
-                return prop instanceof propDef;
-            }
-            return typeof prop === propDef.name.toLowerCase();
-        }
-        else if (propDef instanceof Array) {
-            // If this code is executed, this means that we want to check if a prop
-            // matches at least one of its descriptor.
-            let result = false;
-            for (let i = 0, iLen = propDef.length; i < iLen; i++) {
-                result = result || isValidProp(prop, propDef[i]);
-            }
-            return result;
-        }
-        // propsDef is an object
-        if (propDef.optional && prop === undefined) {
-            return true;
-        }
-        let result = propDef.type ? isValidProp(prop, propDef.type) : true;
-        if (propDef.validate) {
-            result = result && propDef.validate(prop);
-        }
-        if (propDef.type === Array && propDef.element) {
-            for (let i = 0, iLen = prop.length; i < iLen; i++) {
-                result = result && isValidProp(prop[i], propDef.element);
-            }
-        }
-        if (propDef.type === Object && propDef.shape) {
-            const shape = propDef.shape;
-            for (let key in shape) {
-                result = result && isValidProp(prop[key], shape[key]);
-            }
-            if (result) {
-                for (let propName in prop) {
-                    if (!(propName in shape)) {
-                        throw new Error(`unknown prop '${propName}'`);
-                    }
-                }
-            }
-        }
-        return result;
-    }
-
     let currentNode = null;
     function getCurrent() {
         if (!currentNode) {
@@ -2353,6 +2175,18 @@
     function useComponent() {
         return currentNode.component;
     }
+    /**
+     * Apply default props (only top level).
+     *
+     * Note that this method does modify in place the props
+     */
+    function applyDefaultProps(props, defaultProps) {
+        for (let propName in defaultProps) {
+            if (props[propName] === undefined) {
+                props[propName] = defaultProps[propName];
+            }
+        }
+    }
     // -----------------------------------------------------------------------------
     // Integration with reactivity system (useState)
     // -----------------------------------------------------------------------------
@@ -2371,7 +2205,7 @@
         const node = getCurrent();
         let render = batchedRenderFunctions.get(node);
         if (!render) {
-            render = batched(node.render.bind(node));
+            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));
@@ -2380,7 +2214,9 @@
     }
     function arePropsDifferent(props1, props2) {
         for (let k in props1) {
-            if (props1[k] !== props2[k]) {
+            const prop1 = props1[k] && typeof props1[k] === "object" ? toRaw(props1[k]) : props1[k];
+            const prop2 = props2[k] && typeof props2[k] === "object" ? toRaw(props2[k]) : props2[k];
+            if (prop1 !== prop2) {
                 return true;
             }
         }
@@ -2402,7 +2238,7 @@
                 node.forceNextRender = false;
             }
             else {
-                const currentProps = node.component.props[TARGET];
+                const currentProps = node.component.props;
                 shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
             }
             if (shouldRender) {
@@ -2420,6 +2256,9 @@
                 if (!C) {
                     throw new Error(`Cannot find the definition of component "${name}"`);
                 }
+                else if (!(C.prototype instanceof Component)) {
+                    throw new Error(`"${name}" is not a Component. It must inherit from the Component class`);
+                }
             }
             node = new ComponentNode(C, props, ctx.app, ctx, key);
             ctx.children[key] = node;
@@ -2448,10 +2287,18 @@
             this.parent = parent;
             this.parentKey = parentKey;
             this.level = parent ? parent.level + 1 : 0;
-            applyDefaultProps(props, C);
+            const defaultProps = C.defaultProps;
+            if (defaultProps) {
+                applyDefaultProps(props, defaultProps);
+            }
             const env = (parent && parent.childEnv) || app.env;
             this.childEnv = env;
-            props = useState(props);
+            for (const key in props) {
+                const prop = props[key];
+                if (prop && typeof prop === "object" && prop[TARGET]) {
+                    props[key] = useState(prop);
+                }
+            }
             this.component = new C(props, env, this);
             this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
             this.component.setup();
@@ -2479,7 +2326,7 @@
                 fiber.render();
             }
         }
-        async render(deep = false) {
+        async render(deep) {
             let current = this.fiber;
             if (current && (current.root.locked || current.bdom === true)) {
                 await Promise.resolve();
@@ -2557,9 +2404,17 @@
             const fiber = makeChildFiber(this, parentFiber);
             this.fiber = fiber;
             const component = this.component;
-            applyDefaultProps(props, component.constructor);
+            const defaultProps = component.constructor.defaultProps;
+            if (defaultProps) {
+                applyDefaultProps(props, defaultProps);
+            }
             currentNode = this;
-            props = useState(props);
+            for (const key in props) {
+                const prop = props[key];
+                if (prop && typeof prop === "object" && prop[TARGET]) {
+                    props[key] = useState(prop);
+                }
+            }
             currentNode = null;
             const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
             await prom;
@@ -2653,663 +2508,1234 @@
         }
     }
 
-    // -----------------------------------------------------------------------------
-    //  Scheduler
-    // -----------------------------------------------------------------------------
-    class Scheduler {
-        constructor() {
-            this.tasks = new Set();
-            this.frame = 0;
-            this.delayedRenders = [];
-            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
-        }
-        addFiber(fiber) {
-            this.tasks.add(fiber.root);
-        }
-        /**
-         * Process all current tasks. This only applies to the fibers that are ready.
-         * Other tasks are left unchanged.
-         */
-        flush() {
-            if (this.delayedRenders.length) {
-                let renders = this.delayedRenders;
-                this.delayedRenders = [];
-                for (let f of renders) {
-                    if (f.root && f.node.status !== 2 /* DESTROYED */) {
-                        f.render();
+    const TIMEOUT = Symbol("timeout");
+    function wrapError(fn, hookName) {
+        const error = new Error(`The following error occurred in ${hookName}: `);
+        const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+        const node = getCurrent();
+        return (...args) => {
+            try {
+                const result = fn(...args);
+                if (result instanceof Promise) {
+                    if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+                        const fiber = node.fiber;
+                        Promise.race([
+                            result,
+                            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+                        ]).then((res) => {
+                            if (res === TIMEOUT && node.fiber === fiber) {
+                                console.warn(timeoutError);
+                            }
+                        });
                     }
-                }
-            }
-            if (this.frame === 0) {
-                this.frame = this.requestAnimationFrame(() => {
-                    this.frame = 0;
-                    this.tasks.forEach((fiber) => this.processFiber(fiber));
-                    for (let task of this.tasks) {
-                        if (task.node.status === 2 /* DESTROYED */) {
-                            this.tasks.delete(task);
+                    return result.catch((cause) => {
+                        error.cause = cause;
+                        if (cause instanceof Error) {
+                            error.message += `"${cause.message}"`;
                         }
-                    }
-                });
-            }
-        }
-        processFiber(fiber) {
-            if (fiber.root !== fiber) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            const hasError = fibersInError.has(fiber);
-            if (hasError && fiber.counter !== 0) {
-                this.tasks.delete(fiber);
-                return;
-            }
-            if (fiber.node.status === 2 /* DESTROYED */) {
-                this.tasks.delete(fiber);
-                return;
+                        throw error;
+                    });
+                }
+                return result;
             }
-            if (fiber.counter === 0) {
-                if (!hasError) {
-                    fiber.complete();
+            catch (cause) {
+                if (cause instanceof Error) {
+                    error.message += `"${cause.message}"`;
                 }
-                this.tasks.delete(fiber);
+                throw error;
             }
-        }
+        };
     }
-    // capture the value of requestAnimationFrame as soon as possible, to avoid
-    // interactions with other code, such as test frameworks that override them
-    Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
-
-    /**
-     * Owl QWeb Expression Parser
-     *
-     * Owl needs in various contexts to be able to understand the structure of a
-     * string representing a javascript expression.  The usual goal is to be able
-     * to rewrite some variables.  For example, if a template has
-     *
-     *  ```xml
-     *  <t t-if="computeSomething({val: state.val})">...</t>
-     * ```
-     *
-     * this needs to be translated in something like this:
-     *
-     * ```js
-     *   if (context["computeSomething"]({val: context["state"].val})) { ... }
-     * ```
-     *
-     * This file contains the implementation of an extremely naive tokenizer/parser
-     * and evaluator for javascript expressions.  The supported grammar is basically
-     * only expressive enough to understand the shape of objects, of arrays, and
-     * various operators.
-     */
-    //------------------------------------------------------------------------------
-    // Misc types, constants and helpers
-    //------------------------------------------------------------------------------
-    const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(",");
-    const WORD_REPLACEMENT = Object.assign(Object.create(null), {
-        and: "&&",
-        or: "||",
-        gt: ">",
-        gte: ">=",
-        lt: "<",
-        lte: "<=",
-    });
-    const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
-        "{": "LEFT_BRACE",
-        "}": "RIGHT_BRACE",
-        "[": "LEFT_BRACKET",
-        "]": "RIGHT_BRACKET",
-        ":": "COLON",
-        ",": "COMMA",
-        "(": "LEFT_PAREN",
-        ")": "RIGHT_PAREN",
-    });
-    // note that the space after typeof is relevant. It makes sure that the formatted
-    // expression has a space after typeof
-    const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ".split(",");
-    let tokenizeString = function (expr) {
-        let s = expr[0];
-        let start = s;
-        if (s !== "'" && s !== '"' && s !== "`") {
-            return false;
+    // -----------------------------------------------------------------------------
+    //  hooks
+    // -----------------------------------------------------------------------------
+    function onWillStart(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
+    }
+    function onWillUpdateProps(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
+    }
+    function onMounted(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
+    }
+    function onWillPatch(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
+    }
+    function onPatched(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.patched.push(decorate(fn.bind(node.component), "onPatched"));
+    }
+    function onWillUnmount(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
+    }
+    function onWillDestroy(fn) {
+        const node = getCurrent();
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
+    }
+    function onWillRender(fn) {
+        const node = getCurrent();
+        const renderFn = node.renderFn;
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        fn = decorate(fn.bind(node.component), "onWillRender");
+        node.renderFn = () => {
+            fn();
+            return renderFn();
+        };
+    }
+    function onRendered(fn) {
+        const node = getCurrent();
+        const renderFn = node.renderFn;
+        const decorate = node.app.dev ? wrapError : (fn) => fn;
+        fn = decorate(fn.bind(node.component), "onRendered");
+        node.renderFn = () => {
+            const result = renderFn();
+            fn();
+            return result;
+        };
+    }
+    function onError(callback) {
+        const node = getCurrent();
+        let handlers = nodeErrorHandlers.get(node);
+        if (!handlers) {
+            handlers = [];
+            nodeErrorHandlers.set(node, handlers);
         }
-        let i = 1;
-        let cur;
-        while (expr[i] && expr[i] !== start) {
-            cur = expr[i];
-            s += cur;
-            if (cur === "\\") {
-                i++;
-                cur = expr[i];
-                if (!cur) {
-                    throw new Error("Invalid expression");
+        handlers.push(callback.bind(node.component));
+    }
+
+    const VText = text("").constructor;
+    class VPortal extends VText {
+        constructor(selector, realBDom) {
+            super("");
+            this.target = null;
+            this.selector = selector;
+            this.realBDom = realBDom;
+        }
+        mount(parent, anchor) {
+            super.mount(parent, anchor);
+            this.target = document.querySelector(this.selector);
+            if (!this.target) {
+                let el = this.el;
+                while (el && el.parentElement instanceof HTMLElement) {
+                    el = el.parentElement;
+                }
+                this.target = el && el.querySelector(this.selector);
+                if (!this.target) {
+                    throw new Error("invalid portal target");
                 }
-                s += cur;
             }
-            i++;
+            this.realBDom.mount(this.target, null);
         }
-        if (expr[i] !== start) {
-            throw new Error("Invalid expression");
+        beforeRemove() {
+            this.realBDom.beforeRemove();
         }
-        s += start;
-        if (start === "`") {
-            return {
-                type: "TEMPLATE_STRING",
-                value: s,
-                replace(replacer) {
-                    return s.replace(/\$\{(.*?)\}/g, (match, group) => {
-                        return "${" + replacer(group) + "}";
-                    });
-                },
-            };
+        remove() {
+            if (this.realBDom) {
+                super.remove();
+                this.realBDom.remove();
+                this.realBDom = null;
+            }
         }
-        return { type: "VALUE", value: s };
-    };
-    let tokenizeNumber = function (expr) {
-        let s = expr[0];
-        if (s && s.match(/[0-9]/)) {
-            let i = 1;
-            while (expr[i] && expr[i].match(/[0-9]|\./)) {
-                s += expr[i];
-                i++;
+        patch(other) {
+            super.patch(other);
+            if (this.realBDom) {
+                this.realBDom.patch(other.realBDom, true);
+            }
+            else {
+                this.realBDom = other.realBDom;
+                this.realBDom.mount(this.target, null);
             }
-            return { type: "VALUE", value: s };
         }
-        else {
-            return false;
+    }
+    /**
+     * <t t-slot="default"/>
+     */
+    function portalTemplate(app, bdom, helpers) {
+        let { callSlot } = helpers;
+        return function template(ctx, node, key = "") {
+            return callSlot(ctx, node, key, "default", false, null);
+        };
+    }
+    class Portal extends Component {
+        setup() {
+            const node = this.__owl__;
+            const renderFn = node.renderFn;
+            node.renderFn = () => new VPortal(this.props.target, renderFn());
+            onWillUnmount(() => {
+                if (node.bdom) {
+                    node.bdom.remove();
+                }
+            });
         }
-    };
-    let tokenizeSymbol = function (expr) {
-        let s = expr[0];
-        if (s && s.match(/[a-zA-Z_\$]/)) {
-            let i = 1;
-            while (expr[i] && expr[i].match(/\w/)) {
-                s += expr[i];
-                i++;
+    }
+    Portal.template = "__portal__";
+    Portal.props = {
+        target: {
+            type: String,
+        },
+        slots: true,
+    };
+
+    // -----------------------------------------------------------------------------
+    // helpers
+    // -----------------------------------------------------------------------------
+    const isUnionType = (t) => Array.isArray(t);
+    const isBaseType = (t) => typeof t !== "object";
+    function isOptional(t) {
+        return typeof t === "object" && "optional" in t ? t.optional || false : false;
+    }
+    function describeType(type) {
+        return type === "*" || type === true ? "value" : type.name.toLowerCase();
+    }
+    function describe(info) {
+        if (isBaseType(info)) {
+            return describeType(info);
+        }
+        else if (isUnionType(info)) {
+            return info.map(describe).join(" or ");
+        }
+        if ("element" in info) {
+            return `list of ${describe({ type: info.element, optional: false })}s`;
+        }
+        if ("shape" in info) {
+            return `object`;
+        }
+        return describe(info.type || "*");
+    }
+    function toSchema(spec) {
+        return Object.fromEntries(spec.map((e) => e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]));
+    }
+    /**
+     * Main validate function
+     */
+    function validate(obj, spec) {
+        let errors = validateSchema(obj, spec);
+        if (errors.length) {
+            throw new Error("Invalid object: " + errors.join(", "));
+        }
+    }
+    /**
+     * Helper validate function, to get the list of errors. useful if one want to
+     * manipulate the errors without parsing an error object
+     */
+    function validateSchema(obj, schema) {
+        if (Array.isArray(schema)) {
+            schema = toSchema(schema);
+        }
+        let errors = [];
+        // check if each value in obj has correct shape
+        for (let key in obj) {
+            if (key in schema) {
+                let result = validateType(key, obj[key], schema[key]);
+                if (result) {
+                    errors.push(result);
+                }
             }
-            if (s in WORD_REPLACEMENT) {
-                return { type: "OPERATOR", value: WORD_REPLACEMENT[s], size: s.length };
+            else if (!("*" in schema)) {
+                errors.push(`unknown key '${key}'`);
             }
-            return { type: "SYMBOL", value: s };
         }
-        else {
-            return false;
+        // check that all specified keys are defined in obj
+        for (let key in schema) {
+            const spec = schema[key];
+            if (key !== "*" && !isOptional(spec) && !(key in obj)) {
+                const isObj = typeof spec === "object" && !Array.isArray(spec);
+                const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
+                let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
+                errors.push(`'${key}' is missing${detail}`);
+            }
         }
-    };
-    const tokenizeStatic = function (expr) {
-        const char = expr[0];
-        if (char && char in STATIC_TOKEN_MAP) {
-            return { type: STATIC_TOKEN_MAP[char], value: char };
+        return errors;
+    }
+    function validateBaseType(key, value, type) {
+        if (typeof type === "function") {
+            if (typeof value === "object") {
+                if (!(value instanceof type)) {
+                    return `'${key}' is not a ${describeType(type)}`;
+                }
+            }
+            else if (typeof value !== type.name.toLowerCase()) {
+                return `'${key}' is not a ${describeType(type)}`;
+            }
         }
-        return false;
-    };
-    const tokenizeOperator = function (expr) {
-        for (let op of OPERATORS) {
-            if (expr.startsWith(op)) {
-                return { type: "OPERATOR", value: op };
+        return null;
+    }
+    function validateArrayType(key, value, descr) {
+        if (!Array.isArray(value)) {
+            return `'${key}' is not a list of ${describe(descr)}s`;
+        }
+        for (let i = 0; i < value.length; i++) {
+            const error = validateType(`${key}[${i}]`, value[i], descr);
+            if (error) {
+                return error;
             }
         }
-        return false;
-    };
-    const TOKENIZERS = [
-        tokenizeString,
-        tokenizeNumber,
-        tokenizeOperator,
-        tokenizeSymbol,
-        tokenizeStatic,
-    ];
-    /**
-     * Convert a javascript expression (as a string) into a list of tokens. For
-     * example: `tokenize("1 + b")` will return:
-     * ```js
-     *  [
-     *   {type: "VALUE", value: "1"},
-     *   {type: "OPERATOR", value: "+"},
-     *   {type: "SYMBOL", value: "b"}
-     * ]
-     * ```
-     */
-    function tokenize(expr) {
-        const result = [];
-        let token = true;
-        let error;
-        let current = expr;
-        try {
-            while (token) {
-                current = current.trim();
-                if (current) {
-                    for (let tokenizer of TOKENIZERS) {
-                        token = tokenizer(current);
-                        if (token) {
-                            result.push(token);
-                            current = current.slice(token.size || token.value.length);
-                            break;
-                        }
-                    }
-                }
-                else {
-                    token = false;
+        return null;
+    }
+    function validateType(key, value, descr) {
+        if (value === undefined) {
+            return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
+        }
+        else if (isBaseType(descr)) {
+            return validateBaseType(key, value, descr);
+        }
+        else if (isUnionType(descr)) {
+            let validDescr = descr.find((p) => !validateType(key, value, p));
+            return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
+        }
+        let result = null;
+        if ("element" in descr) {
+            result = validateArrayType(key, value, descr.element);
+        }
+        else if ("shape" in descr && !result) {
+            if (typeof value !== "object" || Array.isArray(value)) {
+                result = `'${key}' is not an object`;
+            }
+            else {
+                const errors = validateSchema(value, descr.shape);
+                if (errors.length) {
+                    result = `'${key}' has not the correct shape (${errors.join(", ")})`;
                 }
             }
         }
-        catch (e) {
-            error = e; // Silence all errors and throw a generic error below
+        if ("type" in descr && !result) {
+            result = validateType(key, value, descr.type);
         }
-        if (current.length || error) {
-            throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+        if ("validate" in descr && !result) {
+            result = !descr.validate(value) ? `'${key}' is not valid` : null;
         }
         return result;
-    }
-    //------------------------------------------------------------------------------
-    // Expression "evaluator"
-    //------------------------------------------------------------------------------
-    const isLeftSeparator = (token) => token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
-    const isRightSeparator = (token) => token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
+    }
+
     /**
-     * This is the main function exported by this file. This is the code that will
-     * process an expression (given as a string) and returns another expression with
-     * proper lookups in the context.
-     *
-     * Usually, this kind of code would be very simple to do if we had an AST (so,
-     * if we had a javascript parser), since then, we would only need to find the
-     * variables and replace them.  However, a parser is more complicated, and there
-     * are no standard builtin parser API.
-     *
-     * Since this method is applied to simple javasript expressions, and the work to
-     * be done is actually quite simple, we actually can get away with not using a
-     * parser, which helps with the code size.
-     *
-     * Here is the heuristic used by this method to determine if a token is a
-     * variable:
-     * - by default, all symbols are considered a variable
-     * - unless the previous token is a dot (in that case, this is a property: `a.b`)
-     * - or if the previous token is a left brace or a comma, and the next token is
-     *   a colon (in that case, this is an object key: `{a: b}`)
-     *
-     * Some specific code is also required to support arrow functions. If we detect
-     * the arrow operator, then we add the current (or some previous tokens) token to
-     * the list of variables so it does not get replaced by a lookup in the context
+     * This file contains utility functions that will be injected in each template,
+     * to perform various useful tasks in the compiled code.
      */
-    function compileExprToArray(expr) {
-        const localVars = new Set();
-        const tokens = tokenize(expr);
-        let i = 0;
-        let stack = []; // to track last opening [ or {
-        while (i < tokens.length) {
-            let token = tokens[i];
-            let prevToken = tokens[i - 1];
-            let nextToken = tokens[i + 1];
-            let groupType = stack[stack.length - 1];
-            switch (token.type) {
-                case "LEFT_BRACE":
-                case "LEFT_BRACKET":
-                    stack.push(token.type);
-                    break;
-                case "RIGHT_BRACE":
-                case "RIGHT_BRACKET":
-                    stack.pop();
-            }
-            let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
-            if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
-                if (prevToken) {
-                    // normalize missing tokens: {a} should be equivalent to {a:a}
-                    if (groupType === "LEFT_BRACE" &&
-                        isLeftSeparator(prevToken) &&
-                        isRightSeparator(nextToken)) {
-                        tokens.splice(i + 1, 0, { type: "COLON", value: ":" }, { ...token });
-                        nextToken = tokens[i + 1];
-                    }
-                    if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
-                        isVar = false;
-                    }
-                    else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
-                        if (nextToken && nextToken.type === "COLON") {
-                            isVar = false;
-                        }
-                    }
-                }
-            }
-            if (token.type === "TEMPLATE_STRING") {
-                token.value = token.replace((expr) => compileExpr(expr));
-            }
-            if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
-                if (token.type === "RIGHT_PAREN") {
-                    let j = i - 1;
-                    while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
-                        if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
-                            tokens[j].value = tokens[j].originalValue;
-                            localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
-                        }
-                        j--;
-                    }
-                }
-                else {
-                    localVars.add(token.value); //] = { id: token.value, expr: token.value };
-                }
+    function withDefault(value, defaultValue) {
+        return value === undefined || value === null || value === false ? defaultValue : value;
+    }
+    function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
+        key = key + "__slot_" + name;
+        const slots = ctx.props.slots || {};
+        const { __render, __ctx, __scope } = slots[name] || {};
+        const slotScope = Object.create(__ctx || {});
+        if (__scope) {
+            slotScope[__scope] = extra;
+        }
+        const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+        if (defaultContent) {
+            let child1 = undefined;
+            let child2 = undefined;
+            if (slotBDom) {
+                child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
             }
-            if (isVar) {
-                token.varName = token.value;
-                if (!localVars.has(token.value)) {
-                    token.originalValue = token.value;
-                    token.value = `ctx['${token.value}']`;
-                }
+            else {
+                child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
             }
-            i++;
+            return multi([child1, child2]);
         }
-        // Mark all variables that have been used locally.
-        // This assumes the expression has only one scope (incorrect but "good enough for now")
-        for (const token of tokens) {
-            if (token.type === "SYMBOL" && token.varName && localVars.has(token.value)) {
-                token.originalValue = token.value;
-                token.value = `_${token.value}`;
-                token.isLocal = true;
-            }
+        return slotBDom || text("");
+    }
+    function capture(ctx) {
+        const component = ctx.__owl__.component;
+        const result = Object.create(component);
+        for (let k in ctx) {
+            result[k] = ctx[k];
         }
-        return tokens;
+        return result;
     }
-    function compileExpr(expr) {
-        return compileExprToArray(expr)
-            .map((t) => t.value)
-            .join("");
+    function withKey(elem, k) {
+        elem.key = k;
+        return elem;
     }
-    const INTERP_REGEXP = /\{\{.*?\}\}/g;
-    const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
-    function interpolate(s) {
-        let matches = s.match(INTERP_REGEXP);
-        if (matches && matches[0].length === s.length) {
-            return `(${compileExpr(s.slice(2, -2))})`;
-        }
-        let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
-        return "`" + r + "`";
-    }
-
-    // using a non-html document so that <inner/outer>HTML serializes as XML instead
-    // of HTML (as we will parse it as xml later)
-    const xmlDoc = document.implementation.createDocument(null, null, null);
-    const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic"]);
-    // -----------------------------------------------------------------------------
-    // BlockDescription
-    // -----------------------------------------------------------------------------
-    class BlockDescription {
-        constructor(target, type) {
-            this.dynamicTagName = null;
-            this.isRoot = false;
-            this.hasDynamicChildren = false;
-            this.children = [];
-            this.data = [];
-            this.childNumber = 0;
-            this.parentVar = "";
-            this.id = BlockDescription.nextBlockId++;
-            this.varName = "b" + this.id;
-            this.blockName = "block" + this.id;
-            this.target = target;
-            this.type = type;
+    function prepareList(collection) {
+        let keys;
+        let values;
+        if (Array.isArray(collection)) {
+            keys = collection;
+            values = collection;
         }
-        static generateId(prefix) {
-            this.nextDataIds[prefix] = (this.nextDataIds[prefix] || 0) + 1;
-            return prefix + this.nextDataIds[prefix];
+        else if (collection) {
+            values = Object.keys(collection);
+            keys = Object.values(collection);
         }
-        insertData(str, prefix = "d") {
-            const id = BlockDescription.generateId(prefix);
-            this.target.addLine(`let ${id} = ${str};`);
-            return this.data.push(id) - 1;
+        else {
+            throw new Error("Invalid loop expression");
         }
-        insert(dom) {
-            if (this.currentDom) {
-                this.currentDom.appendChild(dom);
-            }
-            else {
-                this.dom = dom;
+        const n = values.length;
+        return [keys, values, n, new Array(n)];
+    }
+    const isBoundary = Symbol("isBoundary");
+    function setContextValue(ctx, key, value) {
+        const ctx0 = ctx;
+        while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+            const newCtx = ctx.__proto__;
+            if (!newCtx) {
+                ctx = ctx0;
+                break;
             }
+            ctx = newCtx;
         }
-        generateExpr(expr) {
-            if (this.type === "block") {
-                const hasChildren = this.children.length;
-                let params = this.data.length ? `[${this.data.join(", ")}]` : hasChildren ? "[]" : "";
-                if (hasChildren) {
-                    params += ", [" + this.children.map((c) => c.varName).join(", ") + "]";
-                }
-                if (this.dynamicTagName) {
-                    return `toggler(${this.dynamicTagName}, ${this.blockName}(${this.dynamicTagName})(${params}))`;
-                }
-                return `${this.blockName}(${params})`;
-            }
-            else if (this.type === "list") {
-                return `list(c_block${this.id})`;
+        ctx[key] = value;
+    }
+    function toNumber(val) {
+        const n = parseFloat(val);
+        return isNaN(n) ? val : n;
+    }
+    function shallowEqual(l1, l2) {
+        for (let i = 0, l = l1.length; i < l; i++) {
+            if (l1[i] !== l2[i]) {
+                return false;
             }
-            return expr;
         }
-        asXmlString() {
-            // Can't use outerHTML on text/comment nodes
-            // append dom to any element and use innerHTML instead
-            const t = xmlDoc.createElement("t");
-            t.appendChild(this.dom);
-            return t.innerHTML;
+        return true;
+    }
+    class LazyValue {
+        constructor(fn, ctx, node) {
+            this.fn = fn;
+            this.ctx = capture(ctx);
+            this.node = node;
+        }
+        evaluate() {
+            return this.fn(this.ctx, this.node);
+        }
+        toString() {
+            return this.evaluate().toString();
         }
     }
-    BlockDescription.nextBlockId = 1;
-    BlockDescription.nextDataIds = {};
-    function createContext(parentCtx, params) {
-        return Object.assign({
-            block: null,
-            index: 0,
-            forceNewBlock: true,
-            translate: parentCtx.translate,
-            tKeyExpr: null,
-            nameSpace: parentCtx.nameSpace,
-            tModelSelectedExpr: parentCtx.tModelSelectedExpr,
-        }, params);
+    /*
+     * Safely outputs `value` as a block depending on the nature of `value`
+     */
+    function safeOutput(value) {
+        if (!value) {
+            return value;
+        }
+        let safeKey;
+        let block;
+        if (value instanceof Markup) {
+            safeKey = `string_safe`;
+            block = html(value);
+        }
+        else if (value instanceof LazyValue) {
+            safeKey = `lazy_value`;
+            block = value.evaluate();
+        }
+        else if (value instanceof String || typeof value === "string") {
+            safeKey = "string_unsafe";
+            block = text(value);
+        }
+        else {
+            // Assuming it is a block
+            safeKey = "block_safe";
+            block = value;
+        }
+        return toggler(safeKey, block);
     }
-    class CodeTarget {
-        constructor(name, on) {
-            this.indentLevel = 0;
-            this.loopLevel = 0;
-            this.code = [];
-            this.hasRoot = false;
-            this.hasCache = false;
-            this.hasRef = false;
-            // maps ref name to [id, expr]
-            this.refInfo = {};
-            this.shouldProtectScope = false;
-            this.name = name;
-            this.on = on || null;
+    let boundFunctions = new WeakMap();
+    function bind(ctx, fn) {
+        let component = ctx.__owl__.component;
+        let boundFnMap = boundFunctions.get(component);
+        if (!boundFnMap) {
+            boundFnMap = new WeakMap();
+            boundFunctions.set(component, boundFnMap);
         }
-        addLine(line, idx) {
-            const prefix = new Array(this.indentLevel + 2).join("  ");
-            if (idx === undefined) {
-                this.code.push(prefix + line);
-            }
-            else {
-                this.code.splice(idx, 0, prefix + line);
-            }
+        let boundFn = boundFnMap.get(fn);
+        if (!boundFn) {
+            boundFn = fn.bind(component);
+            boundFnMap.set(fn, boundFn);
         }
-        generateCode() {
-            let result = [];
-            result.push(`function ${this.name}(ctx, node, key = "") {`);
-            if (this.hasRef) {
-                result.push(`  const refs = ctx.__owl__.refs;`);
-                for (let name in this.refInfo) {
-                    const [id, expr] = this.refInfo[name];
-                    result.push(`  const ${id} = ${expr};`);
+        return boundFn;
+    }
+    function multiRefSetter(refs, name) {
+        let count = 0;
+        return (el) => {
+            if (el) {
+                count++;
+                if (count > 1) {
+                    throw new Error("Cannot have 2 elements with same ref name at the same time");
                 }
             }
-            if (this.shouldProtectScope) {
-                result.push(`  ctx = Object.create(ctx);`);
-                result.push(`  ctx[isBoundary] = 1`);
-            }
-            if (this.hasCache) {
-                result.push(`  let cache = ctx.cache || {};`);
-                result.push(`  let nextCache = ctx.cache = {};`);
+            if (count === 0 || el) {
+                refs[name] = el;
             }
-            for (let line of this.code) {
-                result.push(line);
+        };
+    }
+    /**
+     * Validate the component props (or next props) against the (static) props
+     * description.  This is potentially an expensive operation: it may needs to
+     * visit recursively the props and all the children to check if they are valid.
+     * This is why it is only done in 'dev' mode.
+     */
+    function validateProps(name, props, parent) {
+        const ComponentClass = typeof name !== "string"
+            ? name
+            : parent.constructor.components[name];
+        if (!ComponentClass) {
+            // this is an error, wrong component. We silently return here instead so the
+            // error is triggered by the usual path ('component' function)
+            return;
+        }
+        const schema = ComponentClass.props;
+        if (!schema) {
+            if (parent.__owl__.app.warnIfNoStaticProps) {
+                console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
             }
-            if (!this.hasRoot) {
-                result.push(`return text('');`);
+            return;
+        }
+        const defaultProps = ComponentClass.defaultProps;
+        if (defaultProps) {
+            let isMandatory = (name) => Array.isArray(schema)
+                ? schema.includes(name)
+                : name in schema && !("*" in schema) && !isOptional(schema[name]);
+            for (let p in defaultProps) {
+                if (isMandatory(p)) {
+                    throw new Error(`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`);
+                }
             }
-            result.push(`}`);
-            return result.join("\n  ");
+        }
+        const errors = validateSchema(props, schema);
+        if (errors.length) {
+            throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
         }
     }
-    const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
-    const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
-    class CodeGenerator {
-        constructor(ast, options) {
-            this.blocks = [];
-            this.ids = {};
-            this.nextBlockId = 1;
-            this.isDebug = false;
-            this.targets = [];
-            this.target = new CodeTarget("template");
-            this.translatableAttributes = TRANSLATABLE_ATTRS;
-            this.staticDefs = [];
-            this.helpers = new Set();
-            this.translateFn = options.translateFn || ((s) => s);
-            if (options.translatableAttributes) {
-                const attrs = new Set(TRANSLATABLE_ATTRS);
-                for (let attr of options.translatableAttributes) {
-                    if (attr.startsWith("-")) {
-                        attrs.delete(attr.slice(1));
-                    }
-                    else {
-                        attrs.add(attr);
+    const helpers = {
+        withDefault,
+        zero: Symbol("zero"),
+        isBoundary,
+        callSlot,
+        capture,
+        withKey,
+        prepareList,
+        setContextValue,
+        multiRefSetter,
+        shallowEqual,
+        toNumber,
+        validateProps,
+        LazyValue,
+        safeOutput,
+        bind,
+        createCatcher,
+        markRaw,
+    };
+
+    const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+    function parseXML$1(xml) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(xml, "text/xml");
+        if (doc.getElementsByTagName("parsererror").length) {
+            let msg = "Invalid XML in template.";
+            const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+            if (parsererrorText) {
+                msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+                const re = /\d+/g;
+                const firstMatch = re.exec(parsererrorText);
+                if (firstMatch) {
+                    const lineNumber = Number(firstMatch[0]);
+                    const line = xml.split("\n")[lineNumber - 1];
+                    const secondMatch = re.exec(parsererrorText);
+                    if (line && secondMatch) {
+                        const columnIndex = Number(secondMatch[0]) - 1;
+                        if (line[columnIndex]) {
+                            msg +=
+                                `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+                                    `${line}\n${"-".repeat(columnIndex - 1)}^`;
+                        }
                     }
                 }
-                this.translatableAttributes = [...attrs];
             }
-            this.hasSafeContext = options.hasSafeContext || false;
-            this.dev = options.dev || false;
-            this.ast = ast;
-            this.templateName = options.name;
+            throw new Error(msg);
         }
-        generateCode() {
-            const ast = this.ast;
-            this.isDebug = ast.type === 12 /* TDebug */;
-            BlockDescription.nextBlockId = 1;
-            BlockDescription.nextDataIds = {};
-            this.compileAST(ast, {
-                block: null,
-                index: 0,
-                forceNewBlock: false,
-                isLast: true,
-                translate: true,
-                tKeyExpr: null,
-            });
-            // define blocks and utility functions
-            let mainCode = [
-                `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
-            ];
-            if (this.helpers.size) {
-                mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
-            }
-            if (this.templateName) {
-                mainCode.push(`// Template name: "${this.templateName}"`);
-            }
-            for (let { id, expr } of this.staticDefs) {
-                mainCode.push(`const ${id} = ${expr};`);
-            }
-            // define all blocks
-            if (this.blocks.length) {
-                mainCode.push(``);
-                for (let block of this.blocks) {
-                    if (block.dom) {
-                        let xmlString = block.asXmlString();
-                        if (block.dynamicTagName) {
-                            xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
-                            xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-                            mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
-                        }
-                        else {
-                            mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
-                        }
-                    }
-                }
+        return doc;
+    }
+    class TemplateSet {
+        constructor(config = {}) {
+            this.rawTemplates = Object.create(globalTemplates);
+            this.templates = {};
+            this.Portal = Portal;
+            this.dev = config.dev || false;
+            this.translateFn = config.translateFn;
+            this.translatableAttributes = config.translatableAttributes;
+            if (config.templates) {
+                this.addTemplates(config.templates);
             }
-            // define all slots/defaultcontent function
-            if (this.targets.length) {
-                for (let fn of this.targets) {
-                    mainCode.push("");
-                    mainCode = mainCode.concat(fn.generateCode());
+        }
+        static registerTemplate(name, fn) {
+            globalTemplates[name] = fn;
+        }
+        addTemplate(name, template) {
+            if (name in this.rawTemplates) {
+                const rawTemplate = this.rawTemplates[name];
+                const currentAsString = typeof rawTemplate === "string"
+                    ? rawTemplate
+                    : rawTemplate instanceof Element
+                        ? rawTemplate.outerHTML
+                        : rawTemplate.toString();
+                const newAsString = typeof template === "string" ? template : template.outerHTML;
+                if (currentAsString === newAsString) {
+                    return;
                 }
+                throw new Error(`Template ${name} already defined with different content`);
             }
-            // generate main code
-            mainCode.push("");
-            mainCode = mainCode.concat("return " + this.target.generateCode());
-            const code = mainCode.join("\n  ");
-            if (this.isDebug) {
-                const msg = `[Owl Debug]\n${code}`;
-                console.log(msg);
-            }
-            return code;
+            this.rawTemplates[name] = template;
         }
-        compileInNewTarget(prefix, ast, ctx, on) {
-            const name = this.generateId(prefix);
-            const initialTarget = this.target;
-            const target = new CodeTarget(name, on);
-            this.targets.push(target);
-            this.target = target;
-            this.compileAST(ast, createContext(ctx));
-            this.target = initialTarget;
-            return name;
+        addTemplates(xml) {
+            if (!xml) {
+                // empty string
+                return;
+            }
+            xml = xml instanceof Document ? xml : parseXML$1(xml);
+            for (const template of xml.querySelectorAll("[t-name]")) {
+                const name = template.getAttribute("t-name");
+                this.addTemplate(name, template);
+            }
         }
-        addLine(line, idx) {
-            this.target.addLine(line, idx);
+        getTemplate(name) {
+            if (!(name in this.templates)) {
+                const rawTemplate = this.rawTemplates[name];
+                if (rawTemplate === undefined) {
+                    let extraInfo = "";
+                    try {
+                        const componentName = getCurrent().component.constructor.name;
+                        extraInfo = ` (for component "${componentName}")`;
+                    }
+                    catch { }
+                    throw new Error(`Missing template: "${name}"${extraInfo}`);
+                }
+                const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
+                const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+                // first add a function to lazily get the template, in case there is a
+                // recursive call to the template name
+                const templates = this.templates;
+                this.templates[name] = function (context, parent) {
+                    return templates[name].call(this, context, parent);
+                };
+                const template = templateFn(this, bdom, helpers);
+                this.templates[name] = template;
+            }
+            return this.templates[name];
         }
-        define(varName, expr) {
-            this.addLine(`const ${varName} = ${expr};`);
+        _compileTemplate(name, template) {
+            throw new Error(`Unable to compile a template. Please use owl full build instead`);
         }
-        generateId(prefix = "") {
-            this.ids[prefix] = (this.ids[prefix] || 0) + 1;
-            return prefix + this.ids[prefix];
+        callTemplate(owner, subTemplate, ctx, parent, key) {
+            const template = this.getTemplate(subTemplate);
+            return toggler(subTemplate, template.call(owner, ctx, parent, key));
         }
-        insertAnchor(block) {
-            const tag = `block-child-${block.children.length}`;
-            const anchor = xmlDoc.createElement(tag);
-            block.insert(anchor);
+    }
+    // -----------------------------------------------------------------------------
+    //  xml tag helper
+    // -----------------------------------------------------------------------------
+    const globalTemplates = {};
+    function xml(...args) {
+        const name = `__template__${xml.nextId++}`;
+        const value = String.raw(...args);
+        globalTemplates[name] = value;
+        return name;
+    }
+    xml.nextId = 1;
+    TemplateSet.registerTemplate("__portal__", portalTemplate);
+
+    /**
+     * Owl QWeb Expression Parser
+     *
+     * Owl needs in various contexts to be able to understand the structure of a
+     * string representing a javascript expression.  The usual goal is to be able
+     * to rewrite some variables.  For example, if a template has
+     *
+     *  ```xml
+     *  <t t-if="computeSomething({val: state.val})">...</t>
+     * ```
+     *
+     * this needs to be translated in something like this:
+     *
+     * ```js
+     *   if (context["computeSomething"]({val: context["state"].val})) { ... }
+     * ```
+     *
+     * This file contains the implementation of an extremely naive tokenizer/parser
+     * and evaluator for javascript expressions.  The supported grammar is basically
+     * only expressive enough to understand the shape of objects, of arrays, and
+     * various operators.
+     */
+    //------------------------------------------------------------------------------
+    // Misc types, constants and helpers
+    //------------------------------------------------------------------------------
+    const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(",");
+    const WORD_REPLACEMENT = Object.assign(Object.create(null), {
+        and: "&&",
+        or: "||",
+        gt: ">",
+        gte: ">=",
+        lt: "<",
+        lte: "<=",
+    });
+    const STATIC_TOKEN_MAP = Object.assign(Object.create(null), {
+        "{": "LEFT_BRACE",
+        "}": "RIGHT_BRACE",
+        "[": "LEFT_BRACKET",
+        "]": "RIGHT_BRACKET",
+        ":": "COLON",
+        ",": "COMMA",
+        "(": "LEFT_PAREN",
+        ")": "RIGHT_PAREN",
+    });
+    // note that the space after typeof is relevant. It makes sure that the formatted
+    // expression has a space after typeof. Currently we don't support delete and void
+    const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ".split(",");
+    let tokenizeString = function (expr) {
+        let s = expr[0];
+        let start = s;
+        if (s !== "'" && s !== '"' && s !== "`") {
+            return false;
         }
-        createBlock(parentBlock, type, ctx) {
-            const hasRoot = this.target.hasRoot;
-            const block = new BlockDescription(this.target, type);
-            if (!hasRoot && !ctx.preventRoot) {
-                this.target.hasRoot = true;
-                block.isRoot = true;
-            }
-            if (parentBlock) {
-                parentBlock.children.push(block);
-                if (parentBlock.type === "list") {
-                    block.parentVar = `c_block${parentBlock.id}`;
+        let i = 1;
+        let cur;
+        while (expr[i] && expr[i] !== start) {
+            cur = expr[i];
+            s += cur;
+            if (cur === "\\") {
+                i++;
+                cur = expr[i];
+                if (!cur) {
+                    throw new Error("Invalid expression");
                 }
+                s += cur;
             }
-            return block;
+            i++;
         }
-        insertBlock(expression, block, ctx) {
-            let blockExpr = block.generateExpr(expression);
-            const tKeyExpr = ctx.tKeyExpr;
-            if (block.parentVar) {
-                let keyArg = `key${this.target.loopLevel}`;
-                if (tKeyExpr) {
-                    keyArg = `${tKeyExpr} + ${keyArg}`;
-                }
-                this.helpers.add("withKey");
-                this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
-                return;
+        if (expr[i] !== start) {
+            throw new Error("Invalid expression");
+        }
+        s += start;
+        if (start === "`") {
+            return {
+                type: "TEMPLATE_STRING",
+                value: s,
+                replace(replacer) {
+                    return s.replace(/\$\{(.*?)\}/g, (match, group) => {
+                        return "${" + replacer(group) + "}";
+                    });
+                },
+            };
+        }
+        return { type: "VALUE", value: s };
+    };
+    let tokenizeNumber = function (expr) {
+        let s = expr[0];
+        if (s && s.match(/[0-9]/)) {
+            let i = 1;
+            while (expr[i] && expr[i].match(/[0-9]|\./)) {
+                s += expr[i];
+                i++;
             }
-            if (tKeyExpr) {
-                blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+            return { type: "VALUE", value: s };
+        }
+        else {
+            return false;
+        }
+    };
+    let tokenizeSymbol = function (expr) {
+        let s = expr[0];
+        if (s && s.match(/[a-zA-Z_\$]/)) {
+            let i = 1;
+            while (expr[i] && expr[i].match(/\w/)) {
+                s += expr[i];
+                i++;
             }
-            if (block.isRoot && !ctx.preventRoot) {
-                if (this.target.on) {
-                    blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
-                }
-                this.addLine(`return ${blockExpr};`);
+            if (s in WORD_REPLACEMENT) {
+                return { type: "OPERATOR", value: WORD_REPLACEMENT[s], size: s.length };
             }
-            else {
-                this.define(block.varName, blockExpr);
+            return { type: "SYMBOL", value: s };
+        }
+        else {
+            return false;
+        }
+    };
+    const tokenizeStatic = function (expr) {
+        const char = expr[0];
+        if (char && char in STATIC_TOKEN_MAP) {
+            return { type: STATIC_TOKEN_MAP[char], value: char };
+        }
+        return false;
+    };
+    const tokenizeOperator = function (expr) {
+        for (let op of OPERATORS) {
+            if (expr.startsWith(op)) {
+                return { type: "OPERATOR", value: op };
             }
         }
-        /**
-         * Captures variables that are used inside of an expression. This is useful
-         * because in compiled code, almost all variables are accessed through the ctx
-         * object. In the case of functions, that lookup in the context can be delayed
-         * which can cause issues if the value has changed since the function was
+        return false;
+    };
+    const TOKENIZERS = [
+        tokenizeString,
+        tokenizeNumber,
+        tokenizeOperator,
+        tokenizeSymbol,
+        tokenizeStatic,
+    ];
+    /**
+     * Convert a javascript expression (as a string) into a list of tokens. For
+     * example: `tokenize("1 + b")` will return:
+     * ```js
+     *  [
+     *   {type: "VALUE", value: "1"},
+     *   {type: "OPERATOR", value: "+"},
+     *   {type: "SYMBOL", value: "b"}
+     * ]
+     * ```
+     */
+    function tokenize(expr) {
+        const result = [];
+        let token = true;
+        let error;
+        let current = expr;
+        try {
+            while (token) {
+                current = current.trim();
+                if (current) {
+                    for (let tokenizer of TOKENIZERS) {
+                        token = tokenizer(current);
+                        if (token) {
+                            result.push(token);
+                            current = current.slice(token.size || token.value.length);
+                            break;
+                        }
+                    }
+                }
+                else {
+                    token = false;
+                }
+            }
+        }
+        catch (e) {
+            error = e; // Silence all errors and throw a generic error below
+        }
+        if (current.length || error) {
+            throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+        }
+        return result;
+    }
+    //------------------------------------------------------------------------------
+    // Expression "evaluator"
+    //------------------------------------------------------------------------------
+    const isLeftSeparator = (token) => token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
+    const isRightSeparator = (token) => token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
+    /**
+     * This is the main function exported by this file. This is the code that will
+     * process an expression (given as a string) and returns another expression with
+     * proper lookups in the context.
+     *
+     * Usually, this kind of code would be very simple to do if we had an AST (so,
+     * if we had a javascript parser), since then, we would only need to find the
+     * variables and replace them.  However, a parser is more complicated, and there
+     * are no standard builtin parser API.
+     *
+     * Since this method is applied to simple javasript expressions, and the work to
+     * be done is actually quite simple, we actually can get away with not using a
+     * parser, which helps with the code size.
+     *
+     * Here is the heuristic used by this method to determine if a token is a
+     * variable:
+     * - by default, all symbols are considered a variable
+     * - unless the previous token is a dot (in that case, this is a property: `a.b`)
+     * - or if the previous token is a left brace or a comma, and the next token is
+     *   a colon (in that case, this is an object key: `{a: b}`)
+     *
+     * Some specific code is also required to support arrow functions. If we detect
+     * the arrow operator, then we add the current (or some previous tokens) token to
+     * the list of variables so it does not get replaced by a lookup in the context
+     */
+    function compileExprToArray(expr) {
+        const localVars = new Set();
+        const tokens = tokenize(expr);
+        let i = 0;
+        let stack = []; // to track last opening [ or {
+        while (i < tokens.length) {
+            let token = tokens[i];
+            let prevToken = tokens[i - 1];
+            let nextToken = tokens[i + 1];
+            let groupType = stack[stack.length - 1];
+            switch (token.type) {
+                case "LEFT_BRACE":
+                case "LEFT_BRACKET":
+                    stack.push(token.type);
+                    break;
+                case "RIGHT_BRACE":
+                case "RIGHT_BRACKET":
+                    stack.pop();
+            }
+            let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
+            if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
+                if (prevToken) {
+                    // normalize missing tokens: {a} should be equivalent to {a:a}
+                    if (groupType === "LEFT_BRACE" &&
+                        isLeftSeparator(prevToken) &&
+                        isRightSeparator(nextToken)) {
+                        tokens.splice(i + 1, 0, { type: "COLON", value: ":" }, { ...token });
+                        nextToken = tokens[i + 1];
+                    }
+                    if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
+                        isVar = false;
+                    }
+                    else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
+                        if (nextToken && nextToken.type === "COLON") {
+                            isVar = false;
+                        }
+                    }
+                }
+            }
+            if (token.type === "TEMPLATE_STRING") {
+                token.value = token.replace((expr) => compileExpr(expr));
+            }
+            if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
+                if (token.type === "RIGHT_PAREN") {
+                    let j = i - 1;
+                    while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
+                        if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
+                            tokens[j].value = tokens[j].originalValue;
+                            localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
+                        }
+                        j--;
+                    }
+                }
+                else {
+                    localVars.add(token.value); //] = { id: token.value, expr: token.value };
+                }
+            }
+            if (isVar) {
+                token.varName = token.value;
+                if (!localVars.has(token.value)) {
+                    token.originalValue = token.value;
+                    token.value = `ctx['${token.value}']`;
+                }
+            }
+            i++;
+        }
+        // Mark all variables that have been used locally.
+        // This assumes the expression has only one scope (incorrect but "good enough for now")
+        for (const token of tokens) {
+            if (token.type === "SYMBOL" && token.varName && localVars.has(token.value)) {
+                token.originalValue = token.value;
+                token.value = `_${token.value}`;
+                token.isLocal = true;
+            }
+        }
+        return tokens;
+    }
+    // Leading spaces are trimmed during tokenization, so they need to be added back for some values
+    const paddedValues = new Map([["in ", " in "]]);
+    function compileExpr(expr) {
+        return compileExprToArray(expr)
+            .map((t) => paddedValues.get(t.value) || t.value)
+            .join("");
+    }
+    const INTERP_REGEXP = /\{\{.*?\}\}/g;
+    const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
+    function interpolate(s) {
+        let matches = s.match(INTERP_REGEXP);
+        if (matches && matches[0].length === s.length) {
+            return `(${compileExpr(s.slice(2, -2))})`;
+        }
+        let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+        return "`" + r + "`";
+    }
+
+    // using a non-html document so that <inner/outer>HTML serializes as XML instead
+    // of HTML (as we will parse it as xml later)
+    const xmlDoc = document.implementation.createDocument(null, null, null);
+    const MODS = new Set(["stop", "capture", "prevent", "self", "synthetic"]);
+    let nextDataIds = {};
+    function generateId(prefix = "") {
+        nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
+        return prefix + nextDataIds[prefix];
+    }
+    // -----------------------------------------------------------------------------
+    // BlockDescription
+    // -----------------------------------------------------------------------------
+    class BlockDescription {
+        constructor(target, type) {
+            this.dynamicTagName = null;
+            this.isRoot = false;
+            this.hasDynamicChildren = false;
+            this.children = [];
+            this.data = [];
+            this.childNumber = 0;
+            this.parentVar = "";
+            this.id = BlockDescription.nextBlockId++;
+            this.varName = "b" + this.id;
+            this.blockName = "block" + this.id;
+            this.target = target;
+            this.type = type;
+        }
+        insertData(str, prefix = "d") {
+            const id = generateId(prefix);
+            this.target.addLine(`let ${id} = ${str};`);
+            return this.data.push(id) - 1;
+        }
+        insert(dom) {
+            if (this.currentDom) {
+                this.currentDom.appendChild(dom);
+            }
+            else {
+                this.dom = dom;
+            }
+        }
+        generateExpr(expr) {
+            if (this.type === "block") {
+                const hasChildren = this.children.length;
+                let params = this.data.length ? `[${this.data.join(", ")}]` : hasChildren ? "[]" : "";
+                if (hasChildren) {
+                    params += ", [" + this.children.map((c) => c.varName).join(", ") + "]";
+                }
+                if (this.dynamicTagName) {
+                    return `toggler(${this.dynamicTagName}, ${this.blockName}(${this.dynamicTagName})(${params}))`;
+                }
+                return `${this.blockName}(${params})`;
+            }
+            else if (this.type === "list") {
+                return `list(c_block${this.id})`;
+            }
+            return expr;
+        }
+        asXmlString() {
+            // Can't use outerHTML on text/comment nodes
+            // append dom to any element and use innerHTML instead
+            const t = xmlDoc.createElement("t");
+            t.appendChild(this.dom);
+            return t.innerHTML;
+        }
+    }
+    BlockDescription.nextBlockId = 1;
+    function createContext(parentCtx, params) {
+        return Object.assign({
+            block: null,
+            index: 0,
+            forceNewBlock: true,
+            translate: parentCtx.translate,
+            tKeyExpr: null,
+            nameSpace: parentCtx.nameSpace,
+            tModelSelectedExpr: parentCtx.tModelSelectedExpr,
+        }, params);
+    }
+    class CodeTarget {
+        constructor(name, on) {
+            this.indentLevel = 0;
+            this.loopLevel = 0;
+            this.code = [];
+            this.hasRoot = false;
+            this.hasCache = false;
+            this.hasRef = false;
+            // maps ref name to [id, expr]
+            this.refInfo = {};
+            this.shouldProtectScope = false;
+            this.name = name;
+            this.on = on || null;
+        }
+        addLine(line, idx) {
+            const prefix = new Array(this.indentLevel + 2).join("  ");
+            if (idx === undefined) {
+                this.code.push(prefix + line);
+            }
+            else {
+                this.code.splice(idx, 0, prefix + line);
+            }
+        }
+        generateCode() {
+            let result = [];
+            result.push(`function ${this.name}(ctx, node, key = "") {`);
+            if (this.hasRef) {
+                result.push(`  const refs = ctx.__owl__.refs;`);
+                for (let name in this.refInfo) {
+                    const [id, expr] = this.refInfo[name];
+                    result.push(`  const ${id} = ${expr};`);
+                }
+            }
+            if (this.shouldProtectScope) {
+                result.push(`  ctx = Object.create(ctx);`);
+                result.push(`  ctx[isBoundary] = 1`);
+            }
+            if (this.hasCache) {
+                result.push(`  let cache = ctx.cache || {};`);
+                result.push(`  let nextCache = ctx.cache = {};`);
+            }
+            for (let line of this.code) {
+                result.push(line);
+            }
+            if (!this.hasRoot) {
+                result.push(`return text('');`);
+            }
+            result.push(`}`);
+            return result.join("\n  ");
+        }
+    }
+    const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
+    const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
+    class CodeGenerator {
+        constructor(ast, options) {
+            this.blocks = [];
+            this.nextBlockId = 1;
+            this.isDebug = false;
+            this.targets = [];
+            this.target = new CodeTarget("template");
+            this.translatableAttributes = TRANSLATABLE_ATTRS;
+            this.staticDefs = [];
+            this.helpers = new Set();
+            this.translateFn = options.translateFn || ((s) => s);
+            if (options.translatableAttributes) {
+                const attrs = new Set(TRANSLATABLE_ATTRS);
+                for (let attr of options.translatableAttributes) {
+                    if (attr.startsWith("-")) {
+                        attrs.delete(attr.slice(1));
+                    }
+                    else {
+                        attrs.add(attr);
+                    }
+                }
+                this.translatableAttributes = [...attrs];
+            }
+            this.hasSafeContext = options.hasSafeContext || false;
+            this.dev = options.dev || false;
+            this.ast = ast;
+            this.templateName = options.name;
+        }
+        generateCode() {
+            const ast = this.ast;
+            this.isDebug = ast.type === 12 /* TDebug */;
+            BlockDescription.nextBlockId = 1;
+            nextDataIds = {};
+            this.compileAST(ast, {
+                block: null,
+                index: 0,
+                forceNewBlock: false,
+                isLast: true,
+                translate: true,
+                tKeyExpr: null,
+            });
+            // define blocks and utility functions
+            let mainCode = [
+                `  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;`,
+            ];
+            if (this.helpers.size) {
+                mainCode.push(`let { ${[...this.helpers].join(", ")} } = helpers;`);
+            }
+            if (this.templateName) {
+                mainCode.push(`// Template name: "${this.templateName}"`);
+            }
+            for (let { id, expr } of this.staticDefs) {
+                mainCode.push(`const ${id} = ${expr};`);
+            }
+            // define all blocks
+            if (this.blocks.length) {
+                mainCode.push(``);
+                for (let block of this.blocks) {
+                    if (block.dom) {
+                        let xmlString = block.asXmlString();
+                        if (block.dynamicTagName) {
+                            xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
+                            xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
+                            mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
+                        }
+                        else {
+                            mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
+                        }
+                    }
+                }
+            }
+            // define all slots/defaultcontent function
+            if (this.targets.length) {
+                for (let fn of this.targets) {
+                    mainCode.push("");
+                    mainCode = mainCode.concat(fn.generateCode());
+                }
+            }
+            // generate main code
+            mainCode.push("");
+            mainCode = mainCode.concat("return " + this.target.generateCode());
+            const code = mainCode.join("\n  ");
+            if (this.isDebug) {
+                const msg = `[Owl Debug]\n${code}`;
+                console.log(msg);
+            }
+            return code;
+        }
+        compileInNewTarget(prefix, ast, ctx, on) {
+            const name = generateId(prefix);
+            const initialTarget = this.target;
+            const target = new CodeTarget(name, on);
+            this.targets.push(target);
+            this.target = target;
+            this.compileAST(ast, createContext(ctx));
+            this.target = initialTarget;
+            return name;
+        }
+        addLine(line, idx) {
+            this.target.addLine(line, idx);
+        }
+        define(varName, expr) {
+            this.addLine(`const ${varName} = ${expr};`);
+        }
+        insertAnchor(block) {
+            const tag = `block-child-${block.children.length}`;
+            const anchor = xmlDoc.createElement(tag);
+            block.insert(anchor);
+        }
+        createBlock(parentBlock, type, ctx) {
+            const hasRoot = this.target.hasRoot;
+            const block = new BlockDescription(this.target, type);
+            if (!hasRoot && !ctx.preventRoot) {
+                this.target.hasRoot = true;
+                block.isRoot = true;
+            }
+            if (parentBlock) {
+                parentBlock.children.push(block);
+                if (parentBlock.type === "list") {
+                    block.parentVar = `c_block${parentBlock.id}`;
+                }
+            }
+            return block;
+        }
+        insertBlock(expression, block, ctx) {
+            let blockExpr = block.generateExpr(expression);
+            const tKeyExpr = ctx.tKeyExpr;
+            if (block.parentVar) {
+                let keyArg = `key${this.target.loopLevel}`;
+                if (tKeyExpr) {
+                    keyArg = `${tKeyExpr} + ${keyArg}`;
+                }
+                this.helpers.add("withKey");
+                this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+                return;
+            }
+            if (tKeyExpr) {
+                blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+            }
+            if (block.isRoot && !ctx.preventRoot) {
+                if (this.target.on) {
+                    blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
+                }
+                this.addLine(`return ${blockExpr};`);
+            }
+            else {
+                this.define(block.varName, blockExpr);
+            }
+        }
+        /**
+         * Captures variables that are used inside of an expression. This is useful
+         * because in compiled code, almost all variables are accessed through the ctx
+         * object. In the case of functions, that lookup in the context can be delayed
+         * which can cause issues if the value has changed since the function was
          * defined.
          *
          * @param expr the expression to capture
@@ -3328,7 +3754,7 @@
                 .map((tok) => {
                 if (tok.varName && !tok.isLocal) {
                     if (!mapping.has(tok.varName)) {
-                        const varId = this.generateId("v");
+                        const varId = generateId("v");
                         mapping.set(tok.varName, varId);
                         this.define(varId, tok.value);
                     }
@@ -3468,7 +3894,7 @@
                 block = this.createBlock(block, "block", ctx);
                 this.blocks.push(block);
                 if (ast.dynamicTag) {
-                    const tagExpr = this.generateId("tag");
+                    const tagExpr = generateId("tag");
                     this.define(tagExpr, compileExpr(ast.dynamicTag));
                     block.dynamicTagName = tagExpr;
                 }
@@ -3538,7 +3964,7 @@
                         info[1] = `multiRefSetter(refs, \`${name}\`)`;
                     }
                     else {
-                        let id = this.generateId("ref");
+                        let id = generateId("ref");
                         this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
                         const index = block.data.push(id) - 1;
                         attrs["block-ref"] = String(index);
@@ -3550,10 +3976,10 @@
             if (ast.model) {
                 const { hasDynamicChildren, baseExpr, expr, eventType, shouldNumberize, shouldTrim, targetAttr, specialInitTargetAttr, } = ast.model;
                 const baseExpression = compileExpr(baseExpr);
-                const bExprId = this.generateId("bExpr");
+                const bExprId = generateId("bExpr");
                 this.define(bExprId, baseExpression);
                 const expression = compileExpr(expr);
-                const exprId = this.generateId("expr");
+                const exprId = generateId("expr");
                 this.define(exprId, expression);
                 const fullExpression = `${bExprId}[${exprId}]`;
                 let idx;
@@ -3562,7 +3988,7 @@
                     attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
                 }
                 else if (hasDynamicChildren) {
-                    const bValueId = this.generateId("bValue");
+                    const bValueId = generateId("bValue");
                     tModelSelectedExpr = `${bValueId}`;
                     this.define(tModelSelectedExpr, fullExpression);
                 }
@@ -3764,7 +4190,7 @@
             let id;
             if (ast.memo) {
                 this.target.hasCache = true;
-                id = this.generateId();
+                id = generateId();
                 this.define(`memo${id}`, compileExpr(ast.memo));
                 this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
                 this.addLine(`if (vnode${id}) {`);
@@ -3793,7 +4219,7 @@
             this.insertBlock("l", block, ctx);
         }
         compileTKey(ast, ctx) {
-            const tKeyExpr = this.generateId("tKey_");
+            const tKeyExpr = generateId("tKey_");
             this.define(tKeyExpr, compileExpr(ast.expr));
             ctx = createContext(ctx, {
                 tKeyExpr,
@@ -3876,19 +4302,20 @@
             }
             const key = `key + \`${this.generateComponentKey()}\``;
             if (isDynamic) {
-                const templateVar = this.generateId("template");
+                const templateVar = generateId("template");
+                if (!this.staticDefs.find((d) => d.id === "call")) {
+                    this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
+                }
                 this.define(templateVar, subTemplate);
                 block = this.createBlock(block, "multi", ctx);
-                this.helpers.add("call");
                 this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block, {
                     ...ctx,
                     forceNewBlock: !block,
                 });
             }
             else {
-                const id = this.generateId(`callTemplate_`);
-                this.helpers.add("getTemplate");
-                this.staticDefs.push({ id, expr: `getTemplate(${subTemplate})` });
+                const id = generateId(`callTemplate_`);
+                this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
                 block = this.createBlock(block, "multi", ctx);
                 this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block, {
                     ...ctx,
@@ -3939,7 +4366,7 @@
             }
         }
         generateComponentKey() {
-            const parts = [this.generateId("__")];
+            const parts = [generateId("__")];
             for (let i = 0; i < this.target.loopLevel; i++) {
                 parts.push(`\${key${i + 1}}`);
             }
@@ -3993,7 +4420,7 @@
             if (ast.slots) {
                 let ctxStr = "ctx";
                 if (this.target.loopLevel || !this.hasSafeContext) {
-                    ctxStr = this.generateId("ctx");
+                    ctxStr = generateId("ctx");
                     this.helpers.add("capture");
                     this.define(ctxStr, `capture(ctx)`);
                 }
@@ -4028,7 +4455,7 @@
             }
             let propVar;
             if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
-                propVar = this.generateId("props");
+                propVar = generateId("props");
                 this.define(propVar, propString);
                 propString = propVar;
             }
@@ -4040,7 +4467,7 @@
             const key = this.generateComponentKey();
             let expr;
             if (ast.isDynamic) {
-                expr = this.generateId("Comp");
+                expr = generateId("Comp");
                 this.define(expr, compileExpr(ast.name));
             }
             else {
@@ -4071,11 +4498,11 @@
         }
         wrapWithEventCatcher(expr, on) {
             this.helpers.add("createCatcher");
-            let name = this.generateId("catcher");
+            let name = generateId("catcher");
             let spec = {};
             let handlers = [];
             for (let ev in on) {
-                let handlerId = this.generateId("hdlr");
+                let handlerId = generateId("hdlr");
                 let idx = handlers.push(handlerId) - 1;
                 spec[ev] = idx;
                 const handler = this.generateHandlerCode(ev, on[ev]);
@@ -4104,7 +4531,7 @@
             }
             else {
                 if (dynamic) {
-                    let name = this.generateId("slot");
+                    let name = generateId("slot");
                     this.define(name, slotName);
                     blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
                 }
@@ -4120,1140 +4547,743 @@
                 this.insertAnchor(block);
             }
             block = this.createBlock(block, "multi", ctx);
-            this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-        }
-        compileTTranslation(ast, ctx) {
-            if (ast.content) {
-                this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
-            }
-        }
-        compileTPortal(ast, ctx) {
-            this.helpers.add("Portal");
-            let { block } = ctx;
-            const name = this.compileInNewTarget("slot", ast.content, ctx);
-            const key = this.generateComponentKey();
-            let ctxStr = "ctx";
-            if (this.target.loopLevel || !this.hasSafeContext) {
-                ctxStr = this.generateId("ctx");
-                this.helpers.add("capture");
-                this.define(ctxStr, `capture(ctx);`);
-            }
-            const blockString = `component(Portal, {target: ${ast.target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
-            if (block) {
-                this.insertAnchor(block);
-            }
-            block = this.createBlock(block, "multi", ctx);
-            this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
-        }
-    }
-
-    // -----------------------------------------------------------------------------
-    // AST Type definition
-    // -----------------------------------------------------------------------------
-    // -----------------------------------------------------------------------------
-    // Parser
-    // -----------------------------------------------------------------------------
-    const cache = new WeakMap();
-    function parse(xml) {
-        if (typeof xml === "string") {
-            const elem = parseXML$1(`<t>${xml}</t>`).firstChild;
-            return _parse(elem);
-        }
-        let ast = cache.get(xml);
-        if (!ast) {
-            // we clone here the xml to prevent modifying it in place
-            ast = _parse(xml.cloneNode(true));
-            cache.set(xml, ast);
-        }
-        return ast;
-    }
-    function _parse(xml) {
-        normalizeXML(xml);
-        const ctx = { inPreTag: false, inSVG: false };
-        return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
-    }
-    function parseNode(node, ctx) {
-        if (!(node instanceof Element)) {
-            return parseTextCommentNode(node, ctx);
-        }
-        return (parseTDebugLog(node, ctx) ||
-            parseTForEach(node, ctx) ||
-            parseTIf(node, ctx) ||
-            parseTPortal(node, ctx) ||
-            parseTCall(node, ctx) ||
-            parseTCallBlock(node) ||
-            parseTEscNode(node, ctx) ||
-            parseTKey(node, ctx) ||
-            parseTTranslation(node, ctx) ||
-            parseTSlot(node, ctx) ||
-            parseTOutNode(node, ctx) ||
-            parseComponent(node, ctx) ||
-            parseDOMNode(node, ctx) ||
-            parseTSetNode(node, ctx) ||
-            parseTNode(node, ctx));
-    }
-    // -----------------------------------------------------------------------------
-    // <t /> tag
-    // -----------------------------------------------------------------------------
-    function parseTNode(node, ctx) {
-        if (node.tagName !== "t") {
-            return null;
-        }
-        return parseChildNodes(node, ctx);
-    }
-    // -----------------------------------------------------------------------------
-    // Text and Comment Nodes
-    // -----------------------------------------------------------------------------
-    const lineBreakRE = /[\r\n]/;
-    const whitespaceRE = /\s+/g;
-    function parseTextCommentNode(node, ctx) {
-        if (node.nodeType === Node.TEXT_NODE) {
-            let value = node.textContent || "";
-            if (!ctx.inPreTag) {
-                if (lineBreakRE.test(value) && !value.trim()) {
-                    return null;
-                }
-                value = value.replace(whitespaceRE, " ");
-            }
-            return { type: 0 /* Text */, value };
-        }
-        else if (node.nodeType === Node.COMMENT_NODE) {
-            return { type: 1 /* Comment */, value: node.textContent || "" };
-        }
-        return null;
-    }
-    // -----------------------------------------------------------------------------
-    // debugging
-    // -----------------------------------------------------------------------------
-    function parseTDebugLog(node, ctx) {
-        if (node.hasAttribute("t-debug")) {
-            node.removeAttribute("t-debug");
-            return {
-                type: 12 /* TDebug */,
-                content: parseNode(node, ctx),
-            };
-        }
-        if (node.hasAttribute("t-log")) {
-            const expr = node.getAttribute("t-log");
-            node.removeAttribute("t-log");
-            return {
-                type: 13 /* TLog */,
-                expr,
-                content: parseNode(node, ctx),
-            };
-        }
-        return null;
-    }
-    // -----------------------------------------------------------------------------
-    // 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;
-        const dynamicTag = node.getAttribute("t-tag");
-        node.removeAttribute("t-tag");
-        if (tagName === "t" && !dynamicTag) {
-            return null;
-        }
-        if (tagName.startsWith("block-")) {
-            throw new Error(`Invalid tag name: '${tagName}'`);
-        }
-        ctx = Object.assign({}, ctx);
-        if (tagName === "pre") {
-            ctx.inPreTag = true;
-        }
-        const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
-        ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
-        const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
-        const ref = node.getAttribute("t-ref");
-        node.removeAttribute("t-ref");
-        const nodeAttrsNames = node.getAttributeNames();
-        let attrs = null;
-        let on = null;
-        let model = null;
-        for (let attr of nodeAttrsNames) {
-            const value = node.getAttribute(attr);
-            if (attr.startsWith("t-on")) {
-                if (attr === "t-on") {
-                    throw new Error("Missing event name with t-on directive");
-                }
-                on = on || {};
-                on[attr.slice(5)] = value;
-            }
-            else if (attr.startsWith("t-model")) {
-                if (!["input", "select", "textarea"].includes(tagName)) {
-                    throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
-                }
-                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 Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
-                }
-                const typeAttr = node.getAttribute("type");
-                const isInput = tagName === "input";
-                const isSelect = tagName === "select";
-                const isTextarea = tagName === "textarea";
-                const isCheckboxInput = isInput && typeAttr === "checkbox";
-                const isRadioInput = isInput && typeAttr === "radio";
-                const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
-                const hasLazyMod = attr.includes(".lazy");
-                const hasNumberMod = attr.includes(".number");
-                const hasTrimMod = attr.includes(".trim");
-                const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
-                model = {
-                    baseExpr,
-                    expr,
-                    targetAttr: isCheckboxInput ? "checked" : "value",
-                    specialInitTargetAttr: isRadioInput ? "checked" : null,
-                    eventType,
-                    hasDynamicChildren: false,
-                    shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
-                    shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
-                };
-                if (isSelect) {
-                    // don't pollute the original ctx
-                    ctx = Object.assign({}, ctx);
-                    ctx.tModelInfo = model;
-                }
-            }
-            else if (attr.startsWith("block-")) {
-                throw new Error(`Invalid attribute: '${attr}'`);
-            }
-            else if (attr !== "t-name") {
-                if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-                    throw new Error(`Unknown QWeb directive: '${attr}'`);
-                }
-                const tModel = ctx.tModelInfo;
-                if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
-                    tModel.hasDynamicChildren = true;
-                }
-                attrs = attrs || {};
-                attrs[attr] = value;
-            }
-        }
-        const children = parseChildren(node, ctx);
-        return {
-            type: 2 /* DomNode */,
-            tag: tagName,
-            dynamicTag,
-            attrs,
-            on,
-            ref,
-            content: children,
-            model,
-            ns,
-        };
-    }
-    // -----------------------------------------------------------------------------
-    // 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;
+            this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
         }
-        if (ast.type === 2 /* DomNode */) {
-            return {
-                ...ast,
-                ref,
-                content: [tesc],
-            };
+        compileTTranslation(ast, ctx) {
+            if (ast.content) {
+                this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+            }
         }
-        if (ast.type === 11 /* TComponent */) {
-            throw new Error("t-esc is not supported on Component nodes");
+        compileTPortal(ast, ctx) {
+            if (!this.staticDefs.find((d) => d.id === "Portal")) {
+                this.staticDefs.push({ id: "Portal", expr: `app.Portal` });
+            }
+            let { block } = ctx;
+            const name = this.compileInNewTarget("slot", ast.content, ctx);
+            const key = this.generateComponentKey();
+            let ctxStr = "ctx";
+            if (this.target.loopLevel || !this.hasSafeContext) {
+                ctxStr = generateId("ctx");
+                this.helpers.add("capture");
+                this.define(ctxStr, `capture(ctx);`);
+            }
+            const target = compileExpr(ast.target);
+            const blockString = `component(Portal, {target: ${target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
+            if (block) {
+                this.insertAnchor(block);
+            }
+            block = this.createBlock(block, "multi", ctx);
+            this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
         }
-        return tesc;
-    }
+    }
+
     // -----------------------------------------------------------------------------
-    // t-out
+    // AST Type definition
     // -----------------------------------------------------------------------------
-    function parseTOutNode(node, ctx) {
-        if (!node.hasAttribute("t-out") && !node.hasAttribute("t-raw")) {
-            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`);
-        }
-        const expr = (node.getAttribute("t-out") || node.getAttribute("t-raw"));
-        node.removeAttribute("t-out");
-        node.removeAttribute("t-raw");
-        const tOut = { type: 8 /* 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 */) {
-            tOut.body = ast.content.length ? ast.content : null;
-            return {
-                ...ast,
-                ref,
-                content: [tOut],
-            };
-        }
-        return tOut;
-    }
     // -----------------------------------------------------------------------------
-    // t-foreach and t-key
+    // Parser
     // -----------------------------------------------------------------------------
-    function parseTForEach(node, ctx) {
-        if (!node.hasAttribute("t-foreach")) {
-            return null;
-        }
-        const html = node.outerHTML;
-        const collection = node.getAttribute("t-foreach");
-        node.removeAttribute("t-foreach");
-        const elem = node.getAttribute("t-as") || "";
-        node.removeAttribute("t-as");
-        const key = node.getAttribute("t-key");
-        if (!key) {
-            throw new Error(`"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`);
+    const cache = new WeakMap();
+    function parse(xml) {
+        if (typeof xml === "string") {
+            const elem = parseXML(`<t>${xml}</t>`).firstChild;
+            return _parse(elem);
         }
-        node.removeAttribute("t-key");
-        const memo = node.getAttribute("t-memo") || "";
-        node.removeAttribute("t-memo");
-        const body = parseNode(node, ctx);
-        if (!body) {
-            return null;
+        let ast = cache.get(xml);
+        if (!ast) {
+            // we clone here the xml to prevent modifying it in place
+            ast = _parse(xml.cloneNode(true));
+            cache.set(xml, ast);
         }
-        const hasNoTCall = !html.includes("t-call");
-        const hasNoFirst = hasNoTCall && !html.includes(`${elem}_first`);
-        const hasNoLast = hasNoTCall && !html.includes(`${elem}_last`);
-        const hasNoIndex = hasNoTCall && !html.includes(`${elem}_index`);
-        const hasNoValue = hasNoTCall && !html.includes(`${elem}_value`);
-        return {
-            type: 9 /* TForEach */,
-            collection,
-            elem,
-            body,
-            memo,
-            key,
-            hasNoFirst,
-            hasNoLast,
-            hasNoIndex,
-            hasNoValue,
-        };
+        return ast;
     }
-    function parseTKey(node, ctx) {
-        if (!node.hasAttribute("t-key")) {
-            return null;
-        }
-        const key = node.getAttribute("t-key");
-        node.removeAttribute("t-key");
-        const body = parseNode(node, ctx);
-        if (!body) {
-            return null;
-        }
-        return { type: 10 /* TKey */, expr: key, content: body };
+    function _parse(xml) {
+        normalizeXML(xml);
+        const ctx = { inPreTag: false, inSVG: false };
+        return parseNode(xml, ctx) || { type: 0 /* Text */, value: "" };
     }
-    // -----------------------------------------------------------------------------
-    // t-call
-    // -----------------------------------------------------------------------------
-    function parseTCall(node, ctx) {
-        if (!node.hasAttribute("t-call")) {
-            return null;
-        }
-        const subTemplate = node.getAttribute("t-call");
-        node.removeAttribute("t-call");
-        if (node.tagName !== "t") {
-            const ast = parseNode(node, ctx);
-            const tcall = { type: 7 /* TCall */, name: subTemplate, body: null };
-            if (ast && ast.type === 2 /* DomNode */) {
-                ast.content = [tcall];
-                return ast;
-            }
-            if (ast && ast.type === 11 /* TComponent */) {
-                return {
-                    ...ast,
-                    slots: { default: { content: tcall, scope: null, on: null, attrs: null } },
-                };
-            }
+    function parseNode(node, ctx) {
+        if (!(node instanceof Element)) {
+            return parseTextCommentNode(node, ctx);
         }
-        const body = parseChildren(node, ctx);
-        return {
-            type: 7 /* TCall */,
-            name: subTemplate,
-            body: body.length ? body : null,
-        };
+        return (parseTDebugLog(node, ctx) ||
+            parseTForEach(node, ctx) ||
+            parseTIf(node, ctx) ||
+            parseTPortal(node, ctx) ||
+            parseTCall(node, ctx) ||
+            parseTCallBlock(node) ||
+            parseTEscNode(node, ctx) ||
+            parseTKey(node, ctx) ||
+            parseTTranslation(node, ctx) ||
+            parseTSlot(node, ctx) ||
+            parseTOutNode(node, ctx) ||
+            parseComponent(node, ctx) ||
+            parseDOMNode(node, ctx) ||
+            parseTSetNode(node, ctx) ||
+            parseTNode(node, ctx));
     }
     // -----------------------------------------------------------------------------
-    // t-call-block
+    // <t /> tag
     // -----------------------------------------------------------------------------
-    function parseTCallBlock(node, ctx) {
-        if (!node.hasAttribute("t-call-block")) {
+    function parseTNode(node, ctx) {
+        if (node.tagName !== "t") {
             return null;
         }
-        const name = node.getAttribute("t-call-block");
-        return {
-            type: 15 /* TCallBlock */,
-            name,
-        };
+        return parseChildNodes(node, ctx);
     }
     // -----------------------------------------------------------------------------
-    // t-if
+    // Text and Comment Nodes
     // -----------------------------------------------------------------------------
-    function parseTIf(node, ctx) {
-        if (!node.hasAttribute("t-if")) {
-            return null;
-        }
-        const condition = node.getAttribute("t-if");
-        node.removeAttribute("t-if");
-        const content = parseNode(node, ctx) || { type: 0 /* Text */, value: "" };
-        let nextElement = node.nextElementSibling;
-        // t-elifs
-        const tElifs = [];
-        while (nextElement && nextElement.hasAttribute("t-elif")) {
-            const condition = nextElement.getAttribute("t-elif");
-            nextElement.removeAttribute("t-elif");
-            const tElif = parseNode(nextElement, ctx);
-            const next = nextElement.nextElementSibling;
-            nextElement.remove();
-            nextElement = next;
-            if (tElif) {
-                tElifs.push({ condition, content: tElif });
+    const lineBreakRE = /[\r\n]/;
+    const whitespaceRE = /\s+/g;
+    function parseTextCommentNode(node, ctx) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            let value = node.textContent || "";
+            if (!ctx.inPreTag) {
+                if (lineBreakRE.test(value) && !value.trim()) {
+                    return null;
+                }
+                value = value.replace(whitespaceRE, " ");
             }
+            return { type: 0 /* Text */, value };
         }
-        // t-else
-        let tElse = null;
-        if (nextElement && nextElement.hasAttribute("t-else")) {
-            nextElement.removeAttribute("t-else");
-            tElse = parseNode(nextElement, ctx);
-            nextElement.remove();
+        else if (node.nodeType === Node.COMMENT_NODE) {
+            return { type: 1 /* Comment */, value: node.textContent || "" };
         }
-        return {
-            type: 5 /* TIf */,
-            condition,
-            content,
-            tElif: tElifs.length ? tElifs : null,
-            tElse,
-        };
+        return null;
     }
     // -----------------------------------------------------------------------------
-    // t-set directive
+    // debugging
     // -----------------------------------------------------------------------------
-    function parseTSetNode(node, ctx) {
-        if (!node.hasAttribute("t-set")) {
-            return null;
+    function parseTDebugLog(node, ctx) {
+        if (node.hasAttribute("t-debug")) {
+            node.removeAttribute("t-debug");
+            return {
+                type: 12 /* TDebug */,
+                content: parseNode(node, ctx),
+            };
         }
-        const name = node.getAttribute("t-set");
-        const value = node.getAttribute("t-value") || null;
-        const defaultValue = node.innerHTML === node.textContent ? node.textContent || null : null;
-        let body = null;
-        if (node.textContent !== node.innerHTML) {
-            body = parseChildren(node, ctx);
+        if (node.hasAttribute("t-log")) {
+            const expr = node.getAttribute("t-log");
+            node.removeAttribute("t-log");
+            return {
+                type: 13 /* TLog */,
+                expr,
+                content: parseNode(node, ctx),
+            };
         }
-        return { type: 6 /* TSet */, name, value, defaultValue, body };
+        return null;
     }
     // -----------------------------------------------------------------------------
-    // Components
+    // Regular dom node
     // -----------------------------------------------------------------------------
-    // Error messages when trying to use an unsupported directive on a component
-    const directiveErrorMap = new Map([
-        [
-            "t-ref",
-            "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop.",
-        ],
-        ["t-att", "t-att makes no sense on component: props are already treated as expressions"],
-        [
-            "t-attf",
-            "t-attf is not supported on components: use template strings for string interpolation in props",
-        ],
-    ]);
-    function parseComponent(node, ctx) {
-        let name = node.tagName;
-        const firstLetter = name[0];
-        let isDynamic = node.hasAttribute("t-component");
-        if (isDynamic && name !== "t") {
-            throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
-        }
-        if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
+    const hasDotAtTheEnd = /\.[\w_]+\s*$/;
+    const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
+    const ROOT_SVG_TAGS = new Set(["svg", "g", "path"]);
+    function parseDOMNode(node, ctx) {
+        const { tagName } = node;
+        const dynamicTag = node.getAttribute("t-tag");
+        node.removeAttribute("t-tag");
+        if (tagName === "t" && !dynamicTag) {
             return null;
         }
-        if (isDynamic) {
-            name = node.getAttribute("t-component");
-            node.removeAttribute("t-component");
+        if (tagName.startsWith("block-")) {
+            throw new Error(`Invalid tag name: '${tagName}'`);
         }
-        const dynamicProps = node.getAttribute("t-props");
-        node.removeAttribute("t-props");
-        const defaultSlotScope = node.getAttribute("t-slot-scope");
-        node.removeAttribute("t-slot-scope");
+        ctx = Object.assign({}, ctx);
+        if (tagName === "pre") {
+            ctx.inPreTag = true;
+        }
+        const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
+        ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
+        const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
+        const ref = node.getAttribute("t-ref");
+        node.removeAttribute("t-ref");
+        const nodeAttrsNames = node.getAttributeNames();
+        let attrs = null;
         let on = null;
-        let props = null;
-        for (let name of node.getAttributeNames()) {
-            const value = node.getAttribute(name);
-            if (name.startsWith("t-")) {
-                if (name.startsWith("t-on-")) {
-                    on = on || {};
-                    on[name.slice(5)] = value;
-                }
-                else {
-                    const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-                    throw new Error(message || `unsupported directive on Component: ${name}`);
+        let model = null;
+        for (let attr of nodeAttrsNames) {
+            const value = node.getAttribute(attr);
+            if (attr.startsWith("t-on")) {
+                if (attr === "t-on") {
+                    throw new Error("Missing event name with t-on directive");
                 }
+                on = on || {};
+                on[attr.slice(5)] = value;
             }
-            else {
-                props = props || {};
-                props[name] = value;
-            }
-        }
-        let slots = null;
-        if (node.hasChildNodes()) {
-            const clone = node.cloneNode(true);
-            // named slots
-            const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
-            for (let slotNode of slotNodes) {
-                if (slotNode.tagName !== "t") {
-                    throw new Error(`Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`);
+            else if (attr.startsWith("t-model")) {
+                if (!["input", "select", "textarea"].includes(tagName)) {
+                    throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
                 }
-                const name = slotNode.getAttribute("t-set-slot");
-                // check if this is defined in a sub component (in which case it should
-                // be ignored)
-                let el = slotNode.parentElement;
-                let isInSubComponent = false;
-                while (el !== clone) {
-                    if (el.hasAttribute("t-component") || el.tagName[0] === el.tagName[0].toUpperCase()) {
-                        isInSubComponent = true;
-                        break;
-                    }
-                    el = el.parentElement;
+                let baseExpr, expr;
+                if (hasDotAtTheEnd.test(value)) {
+                    const index = value.lastIndexOf(".");
+                    baseExpr = value.slice(0, index);
+                    expr = `'${value.slice(index + 1)}'`;
                 }
-                if (isInSubComponent) {
-                    continue;
+                else if (hasBracketsAtTheEnd.test(value)) {
+                    const index = value.lastIndexOf("[");
+                    baseExpr = value.slice(0, index);
+                    expr = value.slice(index + 1, -1);
                 }
-                slotNode.removeAttribute("t-set-slot");
-                slotNode.remove();
-                const slotAst = parseNode(slotNode, ctx);
-                let on = null;
-                let attrs = null;
-                let scope = null;
-                for (let attributeName of slotNode.getAttributeNames()) {
-                    const value = slotNode.getAttribute(attributeName);
-                    if (attributeName === "t-slot-scope") {
-                        scope = value;
-                        continue;
-                    }
-                    else if (attributeName.startsWith("t-on-")) {
-                        on = on || {};
-                        on[attributeName.slice(5)] = value;
-                    }
-                    else {
-                        attrs = attrs || {};
-                        attrs[attributeName] = value;
-                    }
+                else {
+                    throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+                }
+                const typeAttr = node.getAttribute("type");
+                const isInput = tagName === "input";
+                const isSelect = tagName === "select";
+                const isTextarea = tagName === "textarea";
+                const isCheckboxInput = isInput && typeAttr === "checkbox";
+                const isRadioInput = isInput && typeAttr === "radio";
+                const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
+                const hasLazyMod = attr.includes(".lazy");
+                const hasNumberMod = attr.includes(".number");
+                const hasTrimMod = attr.includes(".trim");
+                const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
+                model = {
+                    baseExpr,
+                    expr,
+                    targetAttr: isCheckboxInput ? "checked" : "value",
+                    specialInitTargetAttr: isRadioInput ? "checked" : null,
+                    eventType,
+                    hasDynamicChildren: false,
+                    shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+                    shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
+                };
+                if (isSelect) {
+                    // don't pollute the original ctx
+                    ctx = Object.assign({}, ctx);
+                    ctx.tModelInfo = model;
                 }
-                slots = slots || {};
-                slots[name] = { content: slotAst, on, attrs, scope };
-            }
-            // default slot
-            const defaultContent = parseChildNodes(clone, ctx);
-            if (defaultContent) {
-                slots = slots || {};
-                slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
             }
-        }
-        return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
-    }
-    // -----------------------------------------------------------------------------
-    // Slots
-    // -----------------------------------------------------------------------------
-    function parseTSlot(node, ctx) {
-        if (!node.hasAttribute("t-slot")) {
-            return null;
-        }
-        const name = node.getAttribute("t-slot");
-        node.removeAttribute("t-slot");
-        let attrs = null;
-        let on = null;
-        for (let attributeName of node.getAttributeNames()) {
-            const value = node.getAttribute(attributeName);
-            if (attributeName.startsWith("t-on-")) {
-                on = on || {};
-                on[attributeName.slice(5)] = value;
+            else if (attr.startsWith("block-")) {
+                throw new Error(`Invalid attribute: '${attr}'`);
             }
-            else {
+            else if (attr !== "t-name") {
+                if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
+                    throw new Error(`Unknown QWeb directive: '${attr}'`);
+                }
+                const tModel = ctx.tModelInfo;
+                if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
+                    tModel.hasDynamicChildren = true;
+                }
                 attrs = attrs || {};
-                attrs[attributeName] = value;
+                attrs[attr] = value;
             }
         }
+        const children = parseChildren(node, ctx);
         return {
-            type: 14 /* TSlot */,
-            name,
+            type: 2 /* DomNode */,
+            tag: tagName,
+            dynamicTag,
             attrs,
             on,
-            defaultContent: parseChildNodes(node, ctx),
+            ref,
+            content: children,
+            model,
+            ns,
         };
     }
-    function parseTTranslation(node, ctx) {
-        if (node.getAttribute("t-translation") !== "off") {
+    // -----------------------------------------------------------------------------
+    // t-esc
+    // -----------------------------------------------------------------------------
+    function parseTEscNode(node, ctx) {
+        if (!node.hasAttribute("t-esc")) {
             return null;
         }
-        node.removeAttribute("t-translation");
-        return {
-            type: 16 /* TTranslation */,
-            content: parseNode(node, ctx),
+        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],
+            };
+        }
+        if (ast.type === 11 /* TComponent */) {
+            throw new Error("t-esc is not supported on Component nodes");
+        }
+        return tesc;
     }
     // -----------------------------------------------------------------------------
-    // Portal
+    // t-out
     // -----------------------------------------------------------------------------
-    function parseTPortal(node, ctx) {
-        if (!node.hasAttribute("t-portal")) {
+    function parseTOutNode(node, ctx) {
+        if (!node.hasAttribute("t-out") && !node.hasAttribute("t-raw")) {
             return null;
         }
-        const target = node.getAttribute("t-portal");
-        node.removeAttribute("t-portal");
-        const content = parseNode(node, ctx);
-        if (!content) {
+        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`);
+        }
+        const expr = (node.getAttribute("t-out") || node.getAttribute("t-raw"));
+        node.removeAttribute("t-out");
+        node.removeAttribute("t-raw");
+        const tOut = { type: 8 /* 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 */) {
+            tOut.body = ast.content.length ? ast.content : null;
             return {
-                type: 0 /* Text */,
-                value: "",
+                ...ast,
+                ref,
+                content: [tOut],
             };
         }
-        return {
-            type: 17 /* TPortal */,
-            target,
-            content,
-        };
+        return tOut;
     }
     // -----------------------------------------------------------------------------
-    // helpers
+    // t-foreach and t-key
     // -----------------------------------------------------------------------------
-    /**
-     * Parse all the child nodes of a given node and return a list of ast elements
-     */
-    function parseChildren(node, ctx) {
-        const children = [];
-        for (let child of node.childNodes) {
-            const childAst = parseNode(child, ctx);
-            if (childAst) {
-                if (childAst.type === 3 /* Multi */) {
-                    children.push(...childAst.content);
-                }
-                else {
-                    children.push(childAst);
-                }
-            }
+    function parseTForEach(node, ctx) {
+        if (!node.hasAttribute("t-foreach")) {
+            return null;
         }
-        return children;
-    }
-    /**
-     * Parse all the child nodes of a given node and return an ast if possible.
-     * In the case there are multiple children, they are wrapped in a astmulti.
-     */
-    function parseChildNodes(node, ctx) {
-        const children = parseChildren(node, ctx);
-        switch (children.length) {
-            case 0:
-                return null;
-            case 1:
-                return children[0];
-            default:
-                return { type: 3 /* Multi */, content: children };
+        const html = node.outerHTML;
+        const collection = node.getAttribute("t-foreach");
+        node.removeAttribute("t-foreach");
+        const elem = node.getAttribute("t-as") || "";
+        node.removeAttribute("t-as");
+        const key = node.getAttribute("t-key");
+        if (!key) {
+            throw new Error(`"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`);
         }
-    }
-    /**
-     * Normalizes the content of an Element so that t-if/t-elif/t-else directives
-     * immediately follow one another (by removing empty text nodes or comments).
-     * Throws an error when a conditional branching statement is malformed. This
-     * function modifies the Element in place.
-     *
-     * @param el the element containing the tree that should be normalized
-     */
-    function normalizeTIf(el) {
-        let tbranch = el.querySelectorAll("[t-elif], [t-else]");
-        for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
-            let node = tbranch[i];
-            let prevElem = node.previousElementSibling;
-            let pattr = (name) => prevElem.getAttribute(name);
-            let nattr = (name) => +!!node.getAttribute(name);
-            if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
-                if (pattr("t-foreach")) {
-                    throw new Error("t-if cannot stay at the same level as t-foreach when using t-elif or t-else");
-                }
-                if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
-                    return a + b;
-                }) > 1) {
-                    throw new Error("Only one conditional branching directive is allowed per node");
-                }
-                // All text (with only spaces) and comment nodes (nodeType 8) between
-                // branch nodes are removed
-                let textNode;
-                while ((textNode = node.previousSibling) !== prevElem) {
-                    if (textNode.nodeValue.trim().length && textNode.nodeType !== 8) {
-                        throw new Error("text is not allowed between branching directives");
-                    }
-                    textNode.remove();
-                }
-            }
-            else {
-                throw new Error("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
-            }
+        node.removeAttribute("t-key");
+        const memo = node.getAttribute("t-memo") || "";
+        node.removeAttribute("t-memo");
+        const body = parseNode(node, ctx);
+        if (!body) {
+            return null;
         }
+        const hasNoTCall = !html.includes("t-call");
+        const hasNoFirst = hasNoTCall && !html.includes(`${elem}_first`);
+        const hasNoLast = hasNoTCall && !html.includes(`${elem}_last`);
+        const hasNoIndex = hasNoTCall && !html.includes(`${elem}_index`);
+        const hasNoValue = hasNoTCall && !html.includes(`${elem}_value`);
+        return {
+            type: 9 /* TForEach */,
+            collection,
+            elem,
+            body,
+            memo,
+            key,
+            hasNoFirst,
+            hasNoLast,
+            hasNoIndex,
+            hasNoValue,
+        };
     }
-    /**
-     * Normalizes the content of an Element so that t-esc directives on components
-     * are removed and instead places a <t t-esc=""> as the default slot of the
-     * component. Also throws if the component already has content. This function
-     * modifies the Element in place.
-     *
-     * @param el the element containing the tree that should be normalized
-     */
-    function normalizeTEsc(el) {
-        const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
-        for (const el of elements) {
-            if (el.childNodes.length) {
-                throw new Error("Cannot have t-esc on a component that already has content");
-            }
-            const value = el.getAttribute("t-esc");
-            el.removeAttribute("t-esc");
-            const t = el.ownerDocument.createElement("t");
-            if (value != null) {
-                t.setAttribute("t-esc", value);
-            }
-            el.appendChild(t);
+    function parseTKey(node, ctx) {
+        if (!node.hasAttribute("t-key")) {
+            return null;
         }
+        const key = node.getAttribute("t-key");
+        node.removeAttribute("t-key");
+        const body = parseNode(node, ctx);
+        if (!body) {
+            return null;
+        }
+        return { type: 10 /* TKey */, expr: key, content: body };
     }
-    /**
-     * Normalizes the tree inside a given element and do some preliminary validation
-     * on it. This function modifies the Element in place.
-     *
-     * @param el the element containing the tree that should be normalized
-     */
-    function normalizeXML(el) {
-        normalizeTIf(el);
-        normalizeTEsc(el);
-    }
-    /**
-     * Parses an XML string into an XML document, throwing errors on parser errors
-     * instead of returning an XML document containing the parseerror.
-     *
-     * @param xml the string to parse
-     * @returns an XML document corresponding to the content of the string
-     */
-    function parseXML$1(xml) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(xml, "text/xml");
-        if (doc.getElementsByTagName("parsererror").length) {
-            let msg = "Invalid XML in template.";
-            const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-            if (parsererrorText) {
-                msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-                const re = /\d+/g;
-                const firstMatch = re.exec(parsererrorText);
-                if (firstMatch) {
-                    const lineNumber = Number(firstMatch[0]);
-                    const line = xml.split("\n")[lineNumber - 1];
-                    const secondMatch = re.exec(parsererrorText);
-                    if (line && secondMatch) {
-                        const columnIndex = Number(secondMatch[0]) - 1;
-                        if (line[columnIndex]) {
-                            msg +=
-                                `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-                                    `${line}\n${"-".repeat(columnIndex - 1)}^`;
-                        }
-                    }
-                }
-            }
-            throw new Error(msg);
+    // -----------------------------------------------------------------------------
+    // t-call
+    // -----------------------------------------------------------------------------
+    function parseTCall(node, ctx) {
+        if (!node.hasAttribute("t-call")) {
+            return null;
         }
-        return doc;
-    }
-
-    function compile(template, options = {}) {
-        // parsing
-        const ast = parse(template);
-        // some work
-        const hasSafeContext = template instanceof Node
-            ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
-            : !template.includes("t-set") && !template.includes("t-call");
-        // code generation
-        const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
-        const code = codeGenerator.generateCode();
-        // template function
-        return new Function("bdom, helpers", code);
-    }
-
-    const TIMEOUT = Symbol("timeout");
-    function wrapError(fn, hookName) {
-        const error = new Error(`The following error occurred in ${hookName}: `);
-        const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
-        const node = getCurrent();
-        return (...args) => {
-            try {
-                const result = fn(...args);
-                if (result instanceof Promise) {
-                    if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
-                        const fiber = node.fiber;
-                        Promise.race([
-                            result,
-                            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
-                        ]).then((res) => {
-                            if (res === TIMEOUT && node.fiber === fiber) {
-                                console.warn(timeoutError);
-                            }
-                        });
-                    }
-                    return result.catch((cause) => {
-                        error.cause = cause;
-                        if (cause instanceof Error) {
-                            error.message += `"${cause.message}"`;
-                        }
-                        throw error;
-                    });
-                }
-                return result;
+        const subTemplate = node.getAttribute("t-call");
+        node.removeAttribute("t-call");
+        if (node.tagName !== "t") {
+            const ast = parseNode(node, ctx);
+            const tcall = { type: 7 /* TCall */, name: subTemplate, body: null };
+            if (ast && ast.type === 2 /* DomNode */) {
+                ast.content = [tcall];
+                return ast;
             }
-            catch (cause) {
-                if (cause instanceof Error) {
-                    error.message += `"${cause.message}"`;
-                }
-                throw error;
+            if (ast && ast.type === 11 /* TComponent */) {
+                return {
+                    ...ast,
+                    slots: { default: { content: tcall, scope: null, on: null, attrs: null } },
+                };
             }
+        }
+        const body = parseChildren(node, ctx);
+        return {
+            type: 7 /* TCall */,
+            name: subTemplate,
+            body: body.length ? body : null,
         };
     }
     // -----------------------------------------------------------------------------
-    //  hooks
+    // t-call-block
     // -----------------------------------------------------------------------------
-    function onWillStart(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
-    }
-    function onWillUpdateProps(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
-    }
-    function onMounted(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
-    }
-    function onWillPatch(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
-    }
-    function onPatched(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.patched.push(decorate(fn.bind(node.component), "onPatched"));
-    }
-    function onWillUnmount(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
-    }
-    function onWillDestroy(fn) {
-        const node = getCurrent();
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
-    }
-    function onWillRender(fn) {
-        const node = getCurrent();
-        const renderFn = node.renderFn;
-        const decorate = node.app.dev ? wrapError : (fn) => fn;
-        fn = decorate(fn.bind(node.component), "onWillRender");
-        node.renderFn = () => {
-            fn();
-            return renderFn();
+    function parseTCallBlock(node, ctx) {
+        if (!node.hasAttribute("t-call-block")) {
+            return null;
+        }
+        const name = node.getAttribute("t-call-block");
+        return {
+            type: 15 /* TCallBlock */,
+            name,
         };
     }
-    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;
+    // -----------------------------------------------------------------------------
+    // t-if
+    // -----------------------------------------------------------------------------
+    function parseTIf(node, ctx) {
+        if (!node.hasAttribute("t-if")) {
+            return null;
+        }
+        const condition = node.getAttribute("t-if");
+        node.removeAttribute("t-if");
+        const content = parseNode(node, ctx) || { type: 0 /* Text */, value: "" };
+        let nextElement = node.nextElementSibling;
+        // t-elifs
+        const tElifs = [];
+        while (nextElement && nextElement.hasAttribute("t-elif")) {
+            const condition = nextElement.getAttribute("t-elif");
+            nextElement.removeAttribute("t-elif");
+            const tElif = parseNode(nextElement, ctx);
+            const next = nextElement.nextElementSibling;
+            nextElement.remove();
+            nextElement = next;
+            if (tElif) {
+                tElifs.push({ condition, content: tElif });
+            }
+        }
+        // t-else
+        let tElse = null;
+        if (nextElement && nextElement.hasAttribute("t-else")) {
+            nextElement.removeAttribute("t-else");
+            tElse = parseNode(nextElement, ctx);
+            nextElement.remove();
+        }
+        return {
+            type: 5 /* TIf */,
+            condition,
+            content,
+            tElif: tElifs.length ? tElifs : null,
+            tElse,
         };
     }
-    function onError(callback) {
-        const node = getCurrent();
-        let handlers = nodeErrorHandlers.get(node);
-        if (!handlers) {
-            handlers = [];
-            nodeErrorHandlers.set(node, handlers);
-        }
-        handlers.push(callback.bind(node.component));
-    }
-
-    class Component {
-        constructor(props, env, node) {
-            this.props = props;
-            this.env = env;
-            this.__owl__ = node;
+    // -----------------------------------------------------------------------------
+    // t-set directive
+    // -----------------------------------------------------------------------------
+    function parseTSetNode(node, ctx) {
+        if (!node.hasAttribute("t-set")) {
+            return null;
         }
-        setup() { }
-        render(deep = false) {
-            this.__owl__.render(deep);
+        const name = node.getAttribute("t-set");
+        const value = node.getAttribute("t-value") || null;
+        const defaultValue = node.innerHTML === node.textContent ? node.textContent || null : null;
+        let body = null;
+        if (node.textContent !== node.innerHTML) {
+            body = parseChildren(node, ctx);
         }
+        return { type: 6 /* TSet */, name, value, defaultValue, body };
     }
-    Component.template = "";
-
-    const VText = text("").constructor;
-    class VPortal extends VText {
-        constructor(selector, realBDom) {
-            super("");
-            this.target = null;
-            this.selector = selector;
-            this.realBDom = realBDom;
+    // -----------------------------------------------------------------------------
+    // Components
+    // -----------------------------------------------------------------------------
+    // Error messages when trying to use an unsupported directive on a component
+    const directiveErrorMap = new Map([
+        [
+            "t-ref",
+            "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop.",
+        ],
+        ["t-att", "t-att makes no sense on component: props are already treated as expressions"],
+        [
+            "t-attf",
+            "t-attf is not supported on components: use template strings for string interpolation in props",
+        ],
+    ]);
+    function parseComponent(node, ctx) {
+        let name = node.tagName;
+        const firstLetter = name[0];
+        let isDynamic = node.hasAttribute("t-component");
+        if (isDynamic && name !== "t") {
+            throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
         }
-        mount(parent, anchor) {
-            super.mount(parent, anchor);
-            this.target = document.querySelector(this.selector);
-            if (!this.target) {
-                let el = this.el;
-                while (el && el.parentElement instanceof HTMLElement) {
-                    el = el.parentElement;
+        if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
+            return null;
+        }
+        if (isDynamic) {
+            name = node.getAttribute("t-component");
+            node.removeAttribute("t-component");
+        }
+        const dynamicProps = node.getAttribute("t-props");
+        node.removeAttribute("t-props");
+        const defaultSlotScope = node.getAttribute("t-slot-scope");
+        node.removeAttribute("t-slot-scope");
+        let on = null;
+        let props = null;
+        for (let name of node.getAttributeNames()) {
+            const value = node.getAttribute(name);
+            if (name.startsWith("t-")) {
+                if (name.startsWith("t-on-")) {
+                    on = on || {};
+                    on[name.slice(5)] = value;
                 }
-                this.target = el && el.querySelector(this.selector);
-                if (!this.target) {
-                    throw new Error("invalid portal target");
+                else {
+                    const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
+                    throw new Error(message || `unsupported directive on Component: ${name}`);
                 }
             }
-            this.realBDom.mount(this.target, null);
-        }
-        beforeRemove() {
-            this.realBDom.beforeRemove();
-        }
-        remove() {
-            if (this.realBDom) {
-                super.remove();
-                this.realBDom.remove();
-                this.realBDom = null;
+            else {
+                props = props || {};
+                props[name] = value;
             }
         }
-        patch(other) {
-            super.patch(other);
-            if (this.realBDom) {
-                this.realBDom.patch(other.realBDom, true);
+        let slots = null;
+        if (node.hasChildNodes()) {
+            const clone = node.cloneNode(true);
+            // named slots
+            const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
+            for (let slotNode of slotNodes) {
+                if (slotNode.tagName !== "t") {
+                    throw new Error(`Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`);
+                }
+                const name = slotNode.getAttribute("t-set-slot");
+                // check if this is defined in a sub component (in which case it should
+                // be ignored)
+                let el = slotNode.parentElement;
+                let isInSubComponent = false;
+                while (el !== clone) {
+                    if (el.hasAttribute("t-component") || el.tagName[0] === el.tagName[0].toUpperCase()) {
+                        isInSubComponent = true;
+                        break;
+                    }
+                    el = el.parentElement;
+                }
+                if (isInSubComponent) {
+                    continue;
+                }
+                slotNode.removeAttribute("t-set-slot");
+                slotNode.remove();
+                const slotAst = parseNode(slotNode, ctx);
+                let on = null;
+                let attrs = null;
+                let scope = null;
+                for (let attributeName of slotNode.getAttributeNames()) {
+                    const value = slotNode.getAttribute(attributeName);
+                    if (attributeName === "t-slot-scope") {
+                        scope = value;
+                        continue;
+                    }
+                    else if (attributeName.startsWith("t-on-")) {
+                        on = on || {};
+                        on[attributeName.slice(5)] = value;
+                    }
+                    else {
+                        attrs = attrs || {};
+                        attrs[attributeName] = value;
+                    }
+                }
+                slots = slots || {};
+                slots[name] = { content: slotAst, on, attrs, scope };
             }
-            else {
-                this.realBDom = other.realBDom;
-                this.realBDom.mount(this.target, null);
+            // default slot
+            const defaultContent = parseChildNodes(clone, ctx);
+            if (defaultContent) {
+                slots = slots || {};
+                slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
             }
         }
+        return { type: 11 /* TComponent */, name, isDynamic, dynamicProps, props, slots, on };
     }
-    class Portal extends Component {
-        setup() {
-            const node = this.__owl__;
-            const renderFn = node.renderFn;
-            node.renderFn = () => new VPortal(this.props.target, renderFn());
-            onWillUnmount(() => {
-                if (node.bdom) {
-                    node.bdom.remove();
-                }
-            });
-        }
-    }
-    Portal.template = xml `<t t-slot="default"/>`;
-    Portal.props = {
-        target: {
-            type: String,
-        },
-        slots: true,
-    };
-
-    /**
-     * This file contains utility functions that will be injected in each template,
-     * to perform various useful tasks in the compiled code.
-     */
-    function withDefault(value, defaultValue) {
-        return value === undefined || value === null || value === false ? defaultValue : value;
-    }
-    function callSlot(ctx, parent, key, name, dynamic, extra, defaultContent) {
-        key = key + "__slot_" + name;
-        const slots = ctx.props[TARGET].slots || {};
-        const { __render, __ctx, __scope } = slots[name] || {};
-        const slotScope = Object.create(__ctx || {});
-        if (__scope) {
-            slotScope[__scope] = extra;
+    // -----------------------------------------------------------------------------
+    // Slots
+    // -----------------------------------------------------------------------------
+    function parseTSlot(node, ctx) {
+        if (!node.hasAttribute("t-slot")) {
+            return null;
         }
-        const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
-        if (defaultContent) {
-            let child1 = undefined;
-            let child2 = undefined;
-            if (slotBDom) {
-                child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+        const name = node.getAttribute("t-slot");
+        node.removeAttribute("t-slot");
+        let attrs = null;
+        let on = null;
+        for (let attributeName of node.getAttributeNames()) {
+            const value = node.getAttribute(attributeName);
+            if (attributeName.startsWith("t-on-")) {
+                on = on || {};
+                on[attributeName.slice(5)] = value;
             }
             else {
-                child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+                attrs = attrs || {};
+                attrs[attributeName] = value;
             }
-            return multi([child1, child2]);
         }
-        return slotBDom || text("");
+        return {
+            type: 14 /* TSlot */,
+            name,
+            attrs,
+            on,
+            defaultContent: parseChildNodes(node, ctx),
+        };
     }
-    function capture(ctx) {
-        const component = ctx.__owl__.component;
-        const result = Object.create(component);
-        for (let k in ctx) {
-            result[k] = ctx[k];
+    function parseTTranslation(node, ctx) {
+        if (node.getAttribute("t-translation") !== "off") {
+            return null;
         }
-        return result;
-    }
-    function withKey(elem, k) {
-        elem.key = k;
-        return elem;
+        node.removeAttribute("t-translation");
+        return {
+            type: 16 /* TTranslation */,
+            content: parseNode(node, ctx),
+        };
     }
-    function prepareList(collection) {
-        let keys;
-        let values;
-        if (Array.isArray(collection)) {
-            keys = collection;
-            values = collection;
-        }
-        else if (collection) {
-            values = Object.keys(collection);
-            keys = Object.values(collection);
-        }
-        else {
-            throw new Error("Invalid loop expression");
+    // -----------------------------------------------------------------------------
+    // Portal
+    // -----------------------------------------------------------------------------
+    function parseTPortal(node, ctx) {
+        if (!node.hasAttribute("t-portal")) {
+            return null;
         }
-        const n = values.length;
-        return [keys, values, n, new Array(n)];
-    }
-    const isBoundary = Symbol("isBoundary");
-    function setContextValue(ctx, key, value) {
-        const ctx0 = ctx;
-        while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
-            const newCtx = ctx.__proto__;
-            if (!newCtx) {
-                ctx = ctx0;
-                break;
-            }
-            ctx = newCtx;
+        const target = node.getAttribute("t-portal");
+        node.removeAttribute("t-portal");
+        const content = parseNode(node, ctx);
+        if (!content) {
+            return {
+                type: 0 /* Text */,
+                value: "",
+            };
         }
-        ctx[key] = value;
-    }
-    function toNumber(val) {
-        const n = parseFloat(val);
-        return isNaN(n) ? val : n;
+        return {
+            type: 17 /* TPortal */,
+            target,
+            content,
+        };
     }
-    function shallowEqual(l1, l2) {
-        for (let i = 0, l = l1.length; i < l; i++) {
-            if (l1[i] !== l2[i]) {
-                return false;
+    // -----------------------------------------------------------------------------
+    // helpers
+    // -----------------------------------------------------------------------------
+    /**
+     * Parse all the child nodes of a given node and return a list of ast elements
+     */
+    function parseChildren(node, ctx) {
+        const children = [];
+        for (let child of node.childNodes) {
+            const childAst = parseNode(child, ctx);
+            if (childAst) {
+                if (childAst.type === 3 /* Multi */) {
+                    children.push(...childAst.content);
+                }
+                else {
+                    children.push(childAst);
+                }
             }
         }
-        return true;
-    }
-    class LazyValue {
-        constructor(fn, ctx, node) {
-            this.fn = fn;
-            this.ctx = capture(ctx);
-            this.node = node;
-        }
-        evaluate() {
-            return this.fn(this.ctx, this.node);
-        }
-        toString() {
-            return this.evaluate().toString();
-        }
+        return children;
     }
-    /*
-     * Safely outputs `value` as a block depending on the nature of `value`
+    /**
+     * Parse all the child nodes of a given node and return an ast if possible.
+     * In the case there are multiple children, they are wrapped in a astmulti.
      */
-    function safeOutput(value) {
-        if (!value) {
-            return value;
-        }
-        let safeKey;
-        let block;
-        if (value instanceof Markup) {
-            safeKey = `string_safe`;
-            block = html(value);
-        }
-        else if (value instanceof LazyValue) {
-            safeKey = `lazy_value`;
-            block = value.evaluate();
-        }
-        else if (value instanceof String || typeof value === "string") {
-            safeKey = "string_unsafe";
-            block = text(value);
-        }
-        else {
-            // Assuming it is a block
-            safeKey = "block_safe";
-            block = value;
+    function parseChildNodes(node, ctx) {
+        const children = parseChildren(node, ctx);
+        switch (children.length) {
+            case 0:
+                return null;
+            case 1:
+                return children[0];
+            default:
+                return { type: 3 /* Multi */, content: children };
         }
-        return toggler(safeKey, block);
     }
-    let boundFunctions = new WeakMap();
-    function bind(ctx, fn) {
-        let component = ctx.__owl__.component;
-        let boundFnMap = boundFunctions.get(component);
-        if (!boundFnMap) {
-            boundFnMap = new WeakMap();
-            boundFunctions.set(component, boundFnMap);
-        }
-        let boundFn = boundFnMap.get(fn);
-        if (!boundFn) {
-            boundFn = fn.bind(component);
-            boundFnMap.set(fn, boundFn);
+    /**
+     * Normalizes the content of an Element so that t-if/t-elif/t-else directives
+     * immediately follow one another (by removing empty text nodes or comments).
+     * Throws an error when a conditional branching statement is malformed. This
+     * function modifies the Element in place.
+     *
+     * @param el the element containing the tree that should be normalized
+     */
+    function normalizeTIf(el) {
+        let tbranch = el.querySelectorAll("[t-elif], [t-else]");
+        for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
+            let node = tbranch[i];
+            let prevElem = node.previousElementSibling;
+            let pattr = (name) => prevElem.getAttribute(name);
+            let nattr = (name) => +!!node.getAttribute(name);
+            if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
+                if (pattr("t-foreach")) {
+                    throw new Error("t-if cannot stay at the same level as t-foreach when using t-elif or t-else");
+                }
+                if (["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
+                    return a + b;
+                }) > 1) {
+                    throw new Error("Only one conditional branching directive is allowed per node");
+                }
+                // All text (with only spaces) and comment nodes (nodeType 8) between
+                // branch nodes are removed
+                let textNode;
+                while ((textNode = node.previousSibling) !== prevElem) {
+                    if (textNode.nodeValue.trim().length && textNode.nodeType !== 8) {
+                        throw new Error("text is not allowed between branching directives");
+                    }
+                    textNode.remove();
+                }
+            }
+            else {
+                throw new Error("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
+            }
         }
-        return boundFn;
     }
-    function multiRefSetter(refs, name) {
-        let count = 0;
-        return (el) => {
-            if (el) {
-                count++;
-                if (count > 1) {
-                    throw new Error("Cannot have 2 elements with same ref name at the same time");
-                }
+    /**
+     * Normalizes the content of an Element so that t-esc directives on components
+     * are removed and instead places a <t t-esc=""> as the default slot of the
+     * component. Also throws if the component already has content. This function
+     * modifies the Element in place.
+     *
+     * @param el the element containing the tree that should be normalized
+     */
+    function normalizeTEsc(el) {
+        const elements = [...el.querySelectorAll("[t-esc]")].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+        for (const el of elements) {
+            if (el.childNodes.length) {
+                throw new Error("Cannot have t-esc on a component that already has content");
             }
-            if (count === 0 || el) {
-                refs[name] = el;
+            const value = el.getAttribute("t-esc");
+            el.removeAttribute("t-esc");
+            const t = el.ownerDocument.createElement("t");
+            if (value != null) {
+                t.setAttribute("t-esc", value);
             }
-        };
+            el.appendChild(t);
+        }
     }
-    const helpers = {
-        withDefault,
-        zero: Symbol("zero"),
-        isBoundary,
-        callSlot,
-        capture,
-        withKey,
-        prepareList,
-        setContextValue,
-        multiRefSetter,
-        shallowEqual,
-        toNumber,
-        validateProps,
-        LazyValue,
-        safeOutput,
-        bind,
-        createCatcher,
-    };
-
-    const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+    /**
+     * Normalizes the tree inside a given element and do some preliminary validation
+     * on it. This function modifies the Element in place.
+     *
+     * @param el the element containing the tree that should be normalized
+     */
+    function normalizeXML(el) {
+        normalizeTIf(el);
+        normalizeTEsc(el);
+    }
+    /**
+     * Parses an XML string into an XML document, throwing errors on parser errors
+     * instead of returning an XML document containing the parseerror.
+     *
+     * @param xml the string to parse
+     * @returns an XML document corresponding to the content of the string
+     */
     function parseXML(xml) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(xml, "text/xml");
@@ -5281,84 +5311,131 @@
             throw new Error(msg);
         }
         return doc;
-    }
-    /**
-     * Returns the helpers object that will be injected in each template closure
-     * function
-     */
-    function makeHelpers(getTemplate) {
-        return Object.assign({}, helpers, {
-            Portal,
-            markRaw,
-            getTemplate,
-            call: (owner, subTemplate, ctx, parent, key) => {
-                const template = getTemplate(subTemplate);
-                return toggler(subTemplate, template.call(owner, ctx, parent, key));
-            },
-        });
-    }
-    class TemplateSet {
-        constructor(config = {}) {
-            this.rawTemplates = Object.create(globalTemplates);
-            this.templates = {};
-            this.dev = config.dev || false;
-            this.translateFn = config.translateFn;
-            this.translatableAttributes = config.translatableAttributes;
-            if (config.templates) {
-                this.addTemplates(config.templates);
-            }
-            this.helpers = makeHelpers(this.getTemplate.bind(this));
-        }
-        addTemplate(name, template, options = {}) {
-            if (name in this.rawTemplates && !options.allowDuplicate) {
-                throw new Error(`Template ${name} already defined`);
+    }
+
+    function compile(template, options = {}) {
+        // parsing
+        const ast = parse(template);
+        // some work
+        const hasSafeContext = template instanceof Node
+            ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
+            : !template.includes("t-set") && !template.includes("t-call");
+        // code generation
+        const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
+        const code = codeGenerator.generateCode();
+        // template function
+        return new Function("app, bdom, helpers", code);
+    }
+
+    const mainEventHandler = (data, ev, currentTarget) => {
+        const { data: _data, modifiers } = filterOutModifiersFromData(data);
+        data = _data;
+        let stopped = false;
+        if (modifiers.length) {
+            let selfMode = false;
+            const isSelf = ev.target === currentTarget;
+            for (const mod of modifiers) {
+                switch (mod) {
+                    case "self":
+                        selfMode = true;
+                        if (isSelf) {
+                            continue;
+                        }
+                        else {
+                            return stopped;
+                        }
+                    case "prevent":
+                        if ((selfMode && isSelf) || !selfMode)
+                            ev.preventDefault();
+                        continue;
+                    case "stop":
+                        if ((selfMode && isSelf) || !selfMode)
+                            ev.stopPropagation();
+                        stopped = true;
+                        continue;
+                }
             }
-            this.rawTemplates[name] = template;
         }
-        addTemplates(xml, options = {}) {
-            if (!xml) {
-                // empty string
-                return;
+        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
+        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
+        // as expected when there is a handler expression that evaluates to a falsy value
+        if (Object.hasOwnProperty.call(data, 0)) {
+            const handler = data[0];
+            if (typeof handler !== "function") {
+                throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
             }
-            xml = xml instanceof Document ? xml : parseXML(xml);
-            for (const template of xml.querySelectorAll("[t-name]")) {
-                const name = template.getAttribute("t-name");
-                this.addTemplate(name, template, options);
+            let node = data[1] ? data[1].__owl__ : null;
+            if (node ? node.status === 1 /* MOUNTED */ : true) {
+                handler.call(node ? node.component : null, ev);
             }
         }
-        getTemplate(name) {
-            if (!(name in this.templates)) {
-                const rawTemplate = this.rawTemplates[name];
-                if (rawTemplate === undefined) {
-                    let extraInfo = "";
-                    try {
-                        const componentName = getCurrent().component.constructor.name;
-                        extraInfo = ` (for component "${componentName}")`;
+        return stopped;
+    };
+
+    // -----------------------------------------------------------------------------
+    //  Scheduler
+    // -----------------------------------------------------------------------------
+    class Scheduler {
+        constructor() {
+            this.tasks = new Set();
+            this.frame = 0;
+            this.delayedRenders = [];
+            this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+        }
+        addFiber(fiber) {
+            this.tasks.add(fiber.root);
+        }
+        /**
+         * Process all current tasks. This only applies to the fibers that are ready.
+         * Other tasks are left unchanged.
+         */
+        flush() {
+            if (this.delayedRenders.length) {
+                let renders = this.delayedRenders;
+                this.delayedRenders = [];
+                for (let f of renders) {
+                    if (f.root && f.node.status !== 2 /* DESTROYED */ && f.node.fiber === f) {
+                        f.render();
                     }
-                    catch { }
-                    throw new Error(`Missing template: "${name}"${extraInfo}`);
                 }
-                const templateFn = this._compileTemplate(name, rawTemplate);
-                // first add a function to lazily get the template, in case there is a
-                // recursive call to the template name
-                const templates = this.templates;
-                this.templates[name] = function (context, parent) {
-                    return templates[name].call(this, context, parent);
-                };
-                const template = templateFn(bdom, this.helpers);
-                this.templates[name] = template;
             }
-            return this.templates[name];
+            if (this.frame === 0) {
+                this.frame = this.requestAnimationFrame(() => {
+                    this.frame = 0;
+                    this.tasks.forEach((fiber) => this.processFiber(fiber));
+                    for (let task of this.tasks) {
+                        if (task.node.status === 2 /* DESTROYED */) {
+                            this.tasks.delete(task);
+                        }
+                    }
+                });
+            }
         }
-        _compileTemplate(name, template) {
-            return compile(template, {
-                name,
-                dev: this.dev,
-                translateFn: this.translateFn,
-                translatableAttributes: this.translatableAttributes,
-            });
+        processFiber(fiber) {
+            if (fiber.root !== fiber) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            const hasError = fibersInError.has(fiber);
+            if (hasError && fiber.counter !== 0) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            if (fiber.node.status === 2 /* DESTROYED */) {
+                this.tasks.delete(fiber);
+                return;
+            }
+            if (fiber.counter === 0) {
+                if (!hasError) {
+                    fiber.complete();
+                }
+                this.tasks.delete(fiber);
+            }
         }
-    }
+    }
+    // capture the value of requestAnimationFrame as soon as possible, to avoid
+    // interactions with other code, such as test frameworks that override them
+    Scheduler.requestAnimationFrame = window.requestAnimationFrame.bind(window);
 
     let hasBeenLogged = false;
     const DEV_MSG = () => {
@@ -5377,6 +5454,7 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
             if (config.test) {
                 this.dev = true;
             }
+            this.warnIfNoStaticProps = config.warnIfNoStaticProps || false;
             if (this.dev && !config.test && !hasBeenLogged) {
                 console.info(DEV_MSG());
                 hasBeenLogged = true;
@@ -5388,6 +5466,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         }
         mount(target, options) {
             App.validateTarget(target);
+            if (this.dev) {
+                validateProps(this.Root, this.props, { __owl__: { app: this } });
+            }
             const node = this.makeNode(this.Root, this.props);
             const prom = this.mountNode(node, target, options);
             this.root = node;
@@ -5566,6 +5647,15 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     };
     const __info__ = {};
 
+    TemplateSet.prototype._compileTemplate = function _compileTemplate(name, template) {
+        return compile(template, {
+            name,
+            dev: this.dev,
+            translateFn: this.translateFn,
+            translatableAttributes: this.translatableAttributes,
+        });
+    };
+
     exports.App = App;
     exports.Component = Component;
     exports.EventBus = EventBus;
@@ -5596,15 +5686,16 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     exports.useRef = useRef;
     exports.useState = useState;
     exports.useSubEnv = useSubEnv;
+    exports.validate = validate;
     exports.whenReady = whenReady;
     exports.xml = xml;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.version = '2.0.0-beta-5';
-    __info__.date = '2022-04-07T13:36:37.300Z';
-    __info__.hash = '1179e84';
+    __info__.version = '2.0.0-beta-8';
+    __info__.date = '2022-05-31T12:25:19.319Z';
+    __info__.hash = 'b56a9c2';
     __info__.url = 'https://github.com/odoo/owl';