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

package/dist/owl.cjs.js

@@ -1372,51 +1372,6 @@ function remove(vnode, withBeforeRemove = false) {
     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
@@ -1600,7 +1555,7 @@ function reactive(target, callback = () => { }) {
         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)) {
@@ -1900,18 +1855,20 @@ class Markup extends String {
  */
 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();
@@ -2005,6 +1962,9 @@ function makeRootFiber(node) {
     }
     return fiber;
 }
+function throwOnRender() {
+    throw new Error("Attempted to render cancelled fiber");
+}
 /**
  * @returns number of not-yet rendered fibers cancelled
  */
@@ -2012,6 +1972,7 @@ function cancelFibers(fibers) {
     let result = 0;
     for (let fiber of fibers) {
         let node = fiber.node;
+        fiber.render = throwOnRender;
         if (node.status === 0 /* NEW */) {
             node.destroy();
         }
@@ -2205,145 +2166,6 @@ class MountFiber extends RootFiber {
     }
 }
 
-/**
- * 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) {
@@ -2354,6 +2176,18 @@ function getCurrent() {
 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)
 // -----------------------------------------------------------------------------
@@ -2372,7 +2206,7 @@ function useState(state) {
     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));
@@ -2381,7 +2215,9 @@ function useState(state) {
 }
 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;
         }
     }
@@ -2403,7 +2239,7 @@ function component(name, props, key, ctx, parent) {
             node.forceNextRender = false;
         }
         else {
-            const currentProps = node.component.props[TARGET];
+            const currentProps = node.component.props;
             shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
         }
         if (shouldRender) {
@@ -2421,6 +2257,9 @@ function component(name, props, key, ctx, parent) {
             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;
@@ -2449,10 +2288,18 @@ class ComponentNode {
         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();
@@ -2480,7 +2327,7 @@ class ComponentNode {
             fiber.render();
         }
     }
-    async render(deep = false) {
+    async render(deep) {
         let current = this.fiber;
         if (current && (current.root.locked || current.bdom === true)) {
             await Promise.resolve();
@@ -2558,9 +2405,17 @@ class ComponentNode {
         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;
@@ -2654,663 +2509,1234 @@ class ComponentNode {
     }
 }
 
-// -----------------------------------------------------------------------------
-//  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
@@ -3329,7 +3755,7 @@ class CodeGenerator {
             .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);
                 }
@@ -3469,7 +3895,7 @@ class CodeGenerator {
             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;
             }
@@ -3539,7 +3965,7 @@ class CodeGenerator {
                     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);
@@ -3551,10 +3977,10 @@ class CodeGenerator {
         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;
@@ -3563,7 +3989,7 @@ class CodeGenerator {
                 attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
             }
             else if (hasDynamicChildren) {
-                const bValueId = this.generateId("bValue");
+                const bValueId = generateId("bValue");
                 tModelSelectedExpr = `${bValueId}`;
                 this.define(tModelSelectedExpr, fullExpression);
             }
@@ -3765,7 +4191,7 @@ class CodeGenerator {
         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}) {`);
@@ -3794,7 +4220,7 @@ class CodeGenerator {
         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,
@@ -3877,19 +4303,20 @@ class CodeGenerator {
         }
         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,
@@ -3940,7 +4367,7 @@ class CodeGenerator {
         }
     }
     generateComponentKey() {
-        const parts = [this.generateId("__")];
+        const parts = [generateId("__")];
         for (let i = 0; i < this.target.loopLevel; i++) {
             parts.push(`\${key${i + 1}}`);
         }
@@ -3994,7 +4421,7 @@ class CodeGenerator {
         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)`);
             }
@@ -4029,7 +4456,7 @@ class CodeGenerator {
         }
         let propVar;
         if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
-            propVar = this.generateId("props");
+            propVar = generateId("props");
             this.define(propVar, propString);
             propString = propVar;
         }
@@ -4041,7 +4468,7 @@ class CodeGenerator {
         const key = this.generateComponentKey();
         let expr;
         if (ast.isDynamic) {
-            expr = this.generateId("Comp");
+            expr = generateId("Comp");
             this.define(expr, compileExpr(ast.name));
         }
         else {
@@ -4072,11 +4499,11 @@ class CodeGenerator {
     }
     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]);
@@ -4105,7 +4532,7 @@ class CodeGenerator {
         }
         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}))`;
             }
@@ -4121,1140 +4548,743 @@ class CodeGenerator {
             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");
@@ -5282,84 +5312,131 @@ function parseXML(xml) {
         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 = () => {
@@ -5378,6 +5455,7 @@ class App extends TemplateSet {
         if (config.test) {
             this.dev = true;
         }
+        this.warnIfNoStaticProps = config.warnIfNoStaticProps || false;
         if (this.dev && !config.test && !hasBeenLogged) {
             console.info(DEV_MSG());
             hasBeenLogged = true;
@@ -5389,6 +5467,9 @@ class App extends TemplateSet {
     }
     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;
@@ -5567,6 +5648,15 @@ const blockDom = {
 };
 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;
@@ -5597,11 +5687,12 @@ exports.useExternalListener = useExternalListener;
 exports.useRef = useRef;
 exports.useState = useState;
 exports.useSubEnv = useSubEnv;
+exports.validate = validate;
 exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__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';