[FIX] playground: use ES owl version instead of iife

Otherwise, it will try to import owl from the iife build, which will not
work

docs/owl.js

@@ -1,6 +1,3 @@
-(function (exports) {
-    'use strict';
-
 function filterOutModifiersFromData(dataList) {
     dataList = dataList.slice();
     const modifiers = [];
@@ -280,32 +277,96 @@
         }
     }
 }
-    function makePropSetter(name) {
+
-        return function setProp(value) {
+/**
-            // support 0, fallback to empty string for other falsy values
+ * Creates a batched version of a callback so that all calls to it in the same
-            this[name] = value === 0 ? 0 : value ? value.valueOf() : "";
+ * microtick will only call the original callback once.
+ *
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
+ */
+function batched(callback) {
+    let called = false;
+    return async () => {
+        // This await blocks all calls to the callback here, then releases them sequentially
+        // in the next microtick. This line decides the granularity of the batch.
+        await Promise.resolve();
+        if (!called) {
+            called = true;
+            // wait for all calls in this microtick to fall through before resetting "called"
+            // so that only the first call to the batched function calls the original callback.
+            // Schedule this before calling the callback so that calls to the batched function
+            // within the callback will proceed only after resetting called to false, and have
+            // a chance to execute the callback again
+            Promise.resolve().then(() => (called = false));
+            callback();
+        }
     };
 }
-    function isProp(tag, key) {
+/**
-        switch (tag) {
+ * Determine whether the given element is contained in its ownerDocument:
-            case "input":
+ * either directly or with a shadow root in between.
-                return (key === "checked" ||
+ */
-                    key === "indeterminate" ||
+function inOwnerDocument(el) {
-                    key === "value" ||
+    if (!el) {
-                    key === "readonly" ||
-                    key === "disabled");
-            case "option":
-                return key === "selected" || key === "disabled";
-            case "textarea":
-                return key === "value" || key === "readonly" || key === "disabled";
-            case "select":
-                return key === "value" || key === "disabled";
-            case "button":
-            case "optgroup":
-                return key === "disabled";
-        }
         return false;
     }
+    if (el.ownerDocument.contains(el)) {
+        return true;
+    }
+    const rootNode = el.getRootNode();
+    return rootNode instanceof ShadowRoot && el.ownerDocument.contains(rootNode.host);
+}
+function validateTarget(target) {
+    // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+    const document = target && target.ownerDocument;
+    if (document) {
+        const HTMLElement = document.defaultView.HTMLElement;
+        if (target instanceof HTMLElement || target instanceof ShadowRoot) {
+            if (!document.body.contains(target instanceof HTMLElement ? target : target.host)) {
+                throw new OwlError("Cannot mount a component on a detached dom node");
+            }
+            return;
+        }
+    }
+    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
+}
+class EventBus extends EventTarget {
+    trigger(name, payload) {
+        this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+    }
+}
+function whenReady(fn) {
+    return new Promise(function (resolve) {
+        if (document.readyState !== "loading") {
+            resolve(true);
+        }
+        else {
+            document.addEventListener("DOMContentLoaded", resolve, false);
+        }
+    }).then(fn || function () { });
+}
+async function loadFile(url) {
+    const result = await fetch(url);
+    if (!result.ok) {
+        throw new OwlError("Error while fetching xml templates");
+    }
+    return await result.text();
+}
+/*
+ * This class just transports the fact that a string is safe
+ * to be injected as HTML. Overriding a JS primitive is quite painful though
+ * so we need to redfine toString and valueOf.
+ */
+class Markup extends String {
+}
+/*
+ * Marks a value as safe, that is, a value that can be injected as HTML directly.
+ * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
+ */
+function markup(value) {
+    return new Markup(value);
+}
 
 function createEventHandler(rawEvent) {
     const eventName = rawEvent.split(".")[0];
@@ -326,7 +387,7 @@
     }
     function listener(ev) {
         const currentTarget = ev.currentTarget;
-            if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget))
+        if (!currentTarget || !inOwnerDocument(currentTarget))
             return;
         const data = currentTarget[eventKey];
         if (!data)
@@ -608,6 +669,12 @@
 const nodeGetFirstChild = getDescriptor$1(nodeProto$2, "firstChild").get;
 const nodeGetNextSibling = getDescriptor$1(nodeProto$2, "nextSibling").get;
 const NO_OP = () => { };
+function makePropSetter(name) {
+    return function setProp(value) {
+        // support 0, fallback to empty string for other falsy values
+        this[name] = value === 0 ? 0 : value ? value.valueOf() : "";
+    };
+}
 const cache$1 = {};
 /**
  * Compiling blocks is a multi-step process:
@@ -725,6 +792,15 @@
                             tag: tagName,
                         });
                     }
+                    else if (attrName.startsWith("block-property-")) {
+                        const idx = parseInt(attrName.slice(15), 10);
+                        info.push({
+                            type: "property",
+                            idx,
+                            name: attrValue,
+                            tag: tagName,
+                        });
+                    }
                     else if (attrName === "block-attributes") {
                         info.push({
                             type: "attributes",
@@ -871,16 +947,22 @@
                     };
                 }
                 break;
+            case "property": {
+                const refIdx = info.refIdx;
+                const setProp = makePropSetter(info.name);
+                ctx.locations.push({
+                    idx: info.idx,
+                    refIdx,
+                    setData: setProp,
+                    updateData: setProp,
+                });
+                break;
+            }
             case "attribute": {
                 const refIdx = info.refIdx;
                 let updater;
                 let setter;
-                    if (isProp(info.tag, info.name)) {
+                if (info.name === "class") {
-                        const setProp = makePropSetter(info.name);
-                        setter = setProp;
-                        updater = setProp;
-                    }
-                    else if (info.name === "class") {
                     setter = setClass;
                     updater = updateClass;
                 }
@@ -1888,10 +1970,15 @@
     const targets = callbacksToTargets.get(callback) || [];
     return [...targets].map((target) => {
         const keysToCallbacks = targetToKeysToCallbacks.get(target);
-            return {
+        let keys = [];
-                target,
+        if (keysToCallbacks) {
-                keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
+            for (const [key, cbs] of keysToCallbacks) {
-            };
+                if (cbs.has(callback)) {
+                    keys.push(key);
+                }
+            }
+        }
+        return { target, keys };
     });
 }
 // Maps reactive objects to the underlying target
@@ -2165,82 +2252,6 @@
     });
 }
 
-    /**
-     * Creates a batched version of a callback so that all calls to it in the same
-     * microtick will only call the original callback once.
-     *
-     * @param callback the callback to batch
-     * @returns a batched version of the original callback
-     */
-    function batched(callback) {
-        let called = false;
-        return async () => {
-            // This await blocks all calls to the callback here, then releases them sequentially
-            // in the next microtick. This line decides the granularity of the batch.
-            await Promise.resolve();
-            if (!called) {
-                called = true;
-                // wait for all calls in this microtick to fall through before resetting "called"
-                // so that only the first call to the batched function calls the original callback.
-                // Schedule this before calling the callback so that calls to the batched function
-                // within the callback will proceed only after resetting called to false, and have
-                // a chance to execute the callback again
-                Promise.resolve().then(() => (called = false));
-                callback();
-            }
-        };
-    }
-    function validateTarget(target) {
-        // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-        const document = target && target.ownerDocument;
-        if (document) {
-            const HTMLElement = document.defaultView.HTMLElement;
-            if (target instanceof HTMLElement) {
-                if (!document.body.contains(target)) {
-                    throw new OwlError("Cannot mount a component on a detached dom node");
-                }
-                return;
-            }
-        }
-        throw new OwlError("Cannot mount component: the target is not a valid DOM element");
-    }
-    class EventBus extends EventTarget {
-        trigger(name, payload) {
-            this.dispatchEvent(new CustomEvent(name, { detail: payload }));
-        }
-    }
-    function whenReady(fn) {
-        return new Promise(function (resolve) {
-            if (document.readyState !== "loading") {
-                resolve(true);
-            }
-            else {
-                document.addEventListener("DOMContentLoaded", resolve, false);
-            }
-        }).then(fn || function () { });
-    }
-    async function loadFile(url) {
-        const result = await fetch(url);
-        if (!result.ok) {
-            throw new OwlError("Error while fetching xml templates");
-        }
-        return await result.text();
-    }
-    /*
-     * This class just transports the fact that a string is safe
-     * to be injected as HTML. Overriding a JS primitive is quite painful though
-     * so we need to redfine toString and valueOf.
-     */
-    class Markup extends String {
-    }
-    /*
-     * Marks a value as safe, that is, a value that can be injected as HTML directly.
-     * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
-     */
-    function markup(value) {
-        return new Markup(value);
-    }
-
 let currentNode = null;
 function getCurrent() {
     if (!currentNode) {
@@ -2292,6 +2303,7 @@
         this.bdom = null;
         this.status = 0 /* NEW */;
         this.forceNextRender = false;
+        this.nextProps = null;
         this.children = Object.create(null);
         this.refs = {};
         this.willStart = [];
@@ -2421,7 +2433,7 @@
         this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
-            const rawProps = props;
+        this.nextProps = props;
         props = Object.assign({}, props);
         // update
         const fiber = makeChildFiber(this, parentFiber);
@@ -2445,7 +2457,6 @@
             return;
         }
         component.props = props;
-            this.props = rawProps;
         fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
@@ -2480,6 +2491,18 @@
             this.fiber = null;
         }
     }
+    /**
+     * Sets a ref to a given HTMLElement.
+     *
+     * @param name the name of the ref to set
+     * @param el the HTMLElement to set the ref to. The ref is not set if the el
+     *  is null, but useRef will not return elements that are not in the DOM
+     */
+    setRef(name, el) {
+        if (el) {
+            this.refs[name] = el;
+        }
+    }
     // ---------------------------------------------------------------------------
     // Block DOM methods
     // ---------------------------------------------------------------------------
@@ -2508,6 +2531,7 @@
             // by the component will be patched independently in the appropriate
             // fiber.complete
             this._patch();
+            this.props = this.nextProps;
         }
     }
     _patch() {
@@ -2789,6 +2813,7 @@
     if (Array.isArray(schema)) {
         schema = toSchema(schema);
     }
+    obj = toRaw(obj);
     let errors = [];
     // check if each value in obj has correct shape
     for (let key in obj) {
@@ -2857,14 +2882,27 @@
     if ("element" in descr) {
         result = validateArrayType(key, value, descr.element);
     }
-        else if ("shape" in descr && !result) {
+    else if ("shape" in descr) {
         if (typeof value !== "object" || Array.isArray(value)) {
             result = `'${key}' is not an object`;
         }
         else {
             const errors = validateSchema(value, descr.shape);
             if (errors.length) {
-                    result = `'${key}' has not the correct shape (${errors.join(", ")})`;
+                result = `'${key}' doesn't have the correct shape (${errors.join(", ")})`;
+            }
+        }
+    }
+    else if ("values" in descr) {
+        if (typeof value !== "object" || Array.isArray(value)) {
+            result = `'${key}' is not an object`;
+        }
+        else {
+            const errors = Object.entries(value)
+                .map(([key, value]) => validateType(key, value, descr.values))
+                .filter(Boolean);
+            if (errors.length) {
+                result = `some of the values in '${key}' are invalid (${errors.join(", ")})`;
             }
         }
     }
@@ -3014,36 +3052,6 @@
     }
     return toggler(safeKey, block);
 }
-    let boundFunctions = new WeakMap();
-    const WeakMapGet = WeakMap.prototype.get;
-    const WeakMapSet = WeakMap.prototype.set;
-    function bind(component, fn) {
-        let boundFnMap = WeakMapGet.call(boundFunctions, component);
-        if (!boundFnMap) {
-            boundFnMap = new WeakMap();
-            WeakMapSet.call(boundFunctions, component, boundFnMap);
-        }
-        let boundFn = WeakMapGet.call(boundFnMap, fn);
-        if (!boundFn) {
-            boundFn = fn.bind(component);
-            WeakMapSet.call(boundFnMap, fn, boundFn);
-        }
-        return boundFn;
-    }
-    function multiRefSetter(refs, name) {
-        let count = 0;
-        return (el) => {
-            if (el) {
-                count++;
-                if (count > 1) {
-                    throw new OwlError("Cannot have 2 elements with same ref name at the same time");
-                }
-            }
-            if (count === 0 || el) {
-                refs[name] = el;
-            }
-        };
-    }
 /**
  * Validate the component props (or next props) against the (static) props
  * description.  This is potentially an expensive operation: it may needs to
@@ -3082,6 +3090,16 @@
         throw new OwlError(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
     }
 }
+function makeRefWrapper(node) {
+    let refNames = new Set();
+    return (name, fn) => {
+        if (refNames.has(name)) {
+            throw new OwlError(`Cannot set the same ref more than once in the same component, ref "${name}" was set multiple times in ${node.name}`);
+        }
+        refNames.add(name);
+        return fn;
+    };
+}
 const helpers = {
     withDefault,
     zero: Symbol("zero"),
@@ -3091,16 +3109,15 @@
     withKey,
     prepareList,
     setContextValue,
-        multiRefSetter,
     shallowEqual,
     toNumber,
     validateProps,
     LazyValue,
     safeOutput,
-        bind,
     createCatcher,
     markRaw,
     OwlError,
+    makeRefWrapper,
 };
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
@@ -3527,6 +3544,7 @@
     return replaceDynamicParts(s, compileExpr);
 }
 
+const whitespaceRE = /\s+/g;
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
 // of HTML (as we will parse it as xml later)
 const xmlDoc = document.implementation.createDocument(null, null, null);
@@ -3536,6 +3554,27 @@
     nextDataIds[prefix] = (nextDataIds[prefix] || 0) + 1;
     return prefix + nextDataIds[prefix];
 }
+function isProp(tag, key) {
+    switch (tag) {
+        case "input":
+            return (key === "checked" ||
+                key === "indeterminate" ||
+                key === "value" ||
+                key === "readonly" ||
+                key === "readOnly" ||
+                key === "disabled");
+        case "option":
+            return key === "selected" || key === "disabled";
+        case "textarea":
+            return key === "value" || key === "readonly" || key === "readOnly" || key === "disabled";
+        case "select":
+            return key === "value" || key === "disabled";
+        case "button":
+        case "optgroup":
+            return key === "disabled";
+    }
+    return false;
+}
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -3611,10 +3650,8 @@
         this.code = [];
         this.hasRoot = false;
         this.hasCache = false;
-            this.hasRef = false;
-            // maps ref name to [id, expr]
-            this.refInfo = {};
         this.shouldProtectScope = false;
+        this.hasRefWrapper = false;
         this.name = name;
         this.on = on || null;
     }
@@ -3630,17 +3667,13 @@
     generateCode() {
         let result = [];
         result.push(`function ${this.name}(ctx, node, key = "") {`);
-            if (this.hasRef) {
-                result.push(`  const refs = this.__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.hasRefWrapper) {
+            result.push(`  let refWrapper = makeRefWrapper(this.__owl__);`);
+        }
         if (this.hasCache) {
             result.push(`  let cache = ctx.cache || {};`);
             result.push(`  let nextCache = ctx.cache = {};`);
@@ -3922,6 +3955,9 @@
             const match = translationRE.exec(value);
             value = match[1] + this.translateFn(match[2]) + match[3];
         }
+        if (!ctx.inPreTag) {
+            value = value.replace(whitespaceRE, " ");
+        }
         if (!block || forceNewBlock) {
             block = this.createBlock(block, "text", ctx);
             this.insertBlock(`text(\`${value}\`)`, block, {
@@ -3986,15 +4022,22 @@
                 attrName = key === "t-att" ? null : key.slice(6);
                 expr = compileExpr(ast.attrs[key]);
                 if (attrName && isProp(ast.tag, attrName)) {
+                    if (attrName === "readonly") {
+                        // the property has a different name than the attribute
+                        attrName = "readOnly";
+                    }
                     // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
                     if (attrName === "value") {
-                            // When the expression is falsy, fall back to an empty string
+                        // When the expression is falsy (except 0), fall back to an empty string
-                            expr = `new String((${expr}) || "")`;
+                        expr = `new String((${expr}) === 0 ? 0 : ((${expr}) || ""))`;
                     }
                     else {
                         expr = `new Boolean(${expr})`;
                     }
+                    const idx = block.insertData(expr, "prop");
+                    attrs[`block-property-${idx}`] = attrName;
                 }
+                else {
                     const idx = block.insertData(expr, "attr");
                     if (key === "t-att") {
                         attrs[`block-attributes`] = String(idx);
@@ -4003,6 +4046,7 @@
                         attrs[`block-attribute-${idx}`] = attrName;
                     }
                 }
+            }
             else if (this.translatableAttributes.includes(key)) {
                 attrs[key] = this.translateFn(ast.attrs[key]);
             }
@@ -4037,8 +4081,8 @@
                         targetExpr = compileExpr(dynamicTgExpr);
                     }
                 }
-                    idx = block.insertData(`${fullExpression} === ${targetExpr}`, "attr");
+                idx = block.insertData(`${fullExpression} === ${targetExpr}`, "prop");
-                    attrs[`block-attribute-${idx}`] = specialInitTargetAttr;
+                attrs[`block-property-${idx}`] = specialInitTargetAttr;
             }
             else if (hasDynamicChildren) {
                 const bValueId = generateId("bValue");
@@ -4046,8 +4090,8 @@
                 this.define(tModelSelectedExpr, fullExpression);
             }
             else {
-                    idx = block.insertData(`${fullExpression}`, "attr");
+                idx = block.insertData(`${fullExpression}`, "prop");
-                    attrs[`block-attribute-${idx}`] = targetAttr;
+                attrs[`block-property-${idx}`] = targetAttr;
             }
             this.helpers.add("toNumber");
             let valueCode = `ev.target.${targetAttr}`;
@@ -4065,31 +4109,22 @@
         }
         // t-ref
         if (ast.ref) {
-                this.target.hasRef = true;
+            if (this.dev) {
+                this.helpers.add("makeRefWrapper");
+                this.target.hasRefWrapper = true;
+            }
             const isDynamic = INTERP_REGEXP.test(ast.ref);
+            let name = `\`${ast.ref}\``;
             if (isDynamic) {
-                    const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+                name = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-                    const idx = block.insertData(`(el) => refs[${str}] = el`, "ref");
+            }
+            let setRefStr = `(el) => this.__owl__.setRef((${name}), el)`;
+            if (this.dev) {
+                setRefStr = `refWrapper(${name}, ${setRefStr})`;
+            }
+            const idx = block.insertData(setRefStr, "ref");
             attrs["block-ref"] = String(idx);
         }
-                else {
-                    let name = ast.ref;
-                    if (name in this.target.refInfo) {
-                        // ref has already been defined
-                        this.helpers.add("multiRefSetter");
-                        const info = this.target.refInfo[name];
-                        const index = block.data.push(info[0]) - 1;
-                        attrs["block-ref"] = String(index);
-                        info[1] = `multiRefSetter(refs, \`${name}\`)`;
-                    }
-                    else {
-                        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);
-                    }
-                }
-            }
         const dom = xmlDoc.createElement(ast.tag);
         for (const [attr, val] of Object.entries(attrs)) {
             if (!(attr === "class" && val === "")) {
@@ -4111,6 +4146,7 @@
                     tKeyExpr: ctx.tKeyExpr,
                     nameSpace,
                     tModelSelectedExpr,
+                    inPreTag: ctx.inPreTag || ast.tag === "pre",
                 });
                 this.compileAST(child, subCtx);
             }
@@ -4495,12 +4531,14 @@
         value = this.captureExpression(value);
         if (name.includes(".")) {
             let [_name, suffix] = name.split(".");
-                if (suffix === "bind") {
-                    this.helpers.add("bind");
             name = _name;
-                    value = `bind(this, ${value || undefined})`;
+            switch (suffix) {
-                }
+                case "bind":
-                else {
+                    value = `(${value}).bind(this)`;
+                    break;
+                case "alike":
+                    break;
+                default:
                     throw new OwlError("Invalid prop suffix");
             }
         }
@@ -4588,10 +4626,24 @@
             keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
         }
         let id = generateId("comp");
+        const propList = [];
+        for (let p in ast.props || {}) {
+            let [name, suffix] = p.split(".");
+            if (!suffix) {
+                propList.push(`"${name}"`);
+            }
+        }
         this.staticDefs.push({
             id,
-                expr: `app.createComponent(${ast.isDynamic ? null : expr}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, ${!ast.props && !ast.dynamicProps})`,
+            expr: `app.createComponent(${ast.isDynamic ? null : expr}, ${!ast.isDynamic}, ${!!ast.slots}, ${!!ast.dynamicProps}, [${propList}])`,
         });
+        if (ast.isDynamic) {
+            // If the component class changes, this can cause delayed renders to go
+            // through if the key doesn't change. Use the component name for now.
+            // This means that two component classes with the same name isn't supported
+            // in t-component. We can generate a unique id per class later if needed.
+            keyArg = `(${expr}).name + ${keyArg}`;
+        }
         let blockExpr = `${id}(${propString}, ${keyArg}, node, this, ${ast.isDynamic ? expr : null})`;
         if (ast.isDynamic) {
             blockExpr = `toggler(${expr}, ${blockExpr})`;
@@ -4761,16 +4813,12 @@
 // 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 (!ctx.inPreTag && lineBreakRE.test(value) && !value.trim()) {
-                if (lineBreakRE.test(value) && !value.trim()) {
             return null;
         }
-                value = value.replace(whitespaceRE, " ");
-            }
         return { type: 0 /* Text */, value };
     }
     else if (node.nodeType === Node.COMMENT_NODE) {
@@ -5457,50 +5505,8 @@
     return new Function("app, bdom, helpers", code);
 }
 
-    const mainEventHandler = (data, ev, currentTarget) => {
+// do not modify manually. This file is generated by the release script.
-        const { data: _data, modifiers } = filterOutModifiersFromData(data);
+const version = "2.1.1";
-        data = _data;
-        let stopped = false;
-        if (modifiers.length) {
-            let selfMode = false;
-            const isSelf = ev.target === currentTarget;
-            for (const mod of modifiers) {
-                switch (mod) {
-                    case "self":
-                        selfMode = true;
-                        if (isSelf) {
-                            continue;
-                        }
-                        else {
-                            return stopped;
-                        }
-                    case "prevent":
-                        if ((selfMode && isSelf) || !selfMode)
-                            ev.preventDefault();
-                        continue;
-                    case "stop":
-                        if ((selfMode && isSelf) || !selfMode)
-                            ev.stopPropagation();
-                        stopped = true;
-                        continue;
-                }
-            }
-        }
-        // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
-        // We check this rather than data[0] being truthy (or typeof function) so that it crashes
-        // as expected when there is a handler expression that evaluates to a falsy value
-        if (Object.hasOwnProperty.call(data, 0)) {
-            const handler = data[0];
-            if (typeof handler !== "function") {
-                throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
-            }
-            let node = data[1] ? data[1].__owl__ : null;
-            if (node ? node.status === 1 /* MOUNTED */ : true) {
-                handler.call(node ? node.component : null, ev);
-            }
-        }
-        return stopped;
-    };
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5577,12 +5583,15 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
 };
 window.__OWL_DEVTOOLS__ || (window.__OWL_DEVTOOLS__ = {
     apps: new Set(),
+    Fiber: Fiber,
+    RootFiber: RootFiber,
 });
 class App extends TemplateSet {
     constructor(Root, config = {}) {
         super(config);
         this.scheduler = new Scheduler();
         this.root = null;
+        this.name = config.name || "";
         this.Root = Root;
         window.__OWL_DEVTOOLS__.apps.add(this);
         if (config.test) {
@@ -5643,21 +5652,36 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         }
         window.__OWL_DEVTOOLS__.apps.delete(this);
     }
-        createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, hasNoProp) {
+    createComponent(name, isStatic, hasSlotsProp, hasDynamicPropList, propList) {
         const isDynamic = !isStatic;
-            function _arePropsDifferent(props1, props2) {
+        let arePropsDifferent;
+        const hasNoProp = propList.length === 0;
+        if (hasSlotsProp) {
+            arePropsDifferent = (_1, _2) => true;
+        }
+        else if (hasDynamicPropList) {
+            arePropsDifferent = function (props1, props2) {
                 for (let k in props1) {
                     if (props1[k] !== props2[k]) {
                         return true;
                     }
                 }
-                return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
+                return Object.keys(props1).length !== Object.keys(props2).length;
+            };
+        }
+        else if (hasNoProp) {
+            arePropsDifferent = (_1, _2) => false;
+        }
+        else {
+            arePropsDifferent = function (props1, props2) {
+                for (let p of propList) {
+                    if (props1[p] !== props2[p]) {
+                        return true;
+                    }
+                }
+                return false;
+            };
         }
-            const arePropsDifferent = hasSlotsProp
-                ? (_1, _2) => true
-                : hasNoProp
-                    ? (_1, _2) => false
-                    : _arePropsDifferent;
         const updateAndRender = ComponentNode.prototype.updateAndRender;
         const initiateRender = ComponentNode.prototype.initiateRender;
         return (props, key, ctx, parent, C) => {
@@ -5701,10 +5725,56 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     }
 }
 App.validateTarget = validateTarget;
+App.version = version;
 async function mount(C, target, config = {}) {
     return new App(C, config).mount(target, config);
 }
 
+const mainEventHandler = (data, ev, currentTarget) => {
+    const { data: _data, modifiers } = filterOutModifiersFromData(data);
+    data = _data;
+    let stopped = false;
+    if (modifiers.length) {
+        let selfMode = false;
+        const isSelf = ev.target === currentTarget;
+        for (const mod of modifiers) {
+            switch (mod) {
+                case "self":
+                    selfMode = true;
+                    if (isSelf) {
+                        continue;
+                    }
+                    else {
+                        return stopped;
+                    }
+                case "prevent":
+                    if ((selfMode && isSelf) || !selfMode)
+                        ev.preventDefault();
+                    continue;
+                case "stop":
+                    if ((selfMode && isSelf) || !selfMode)
+                        ev.stopPropagation();
+                    stopped = true;
+                    continue;
+            }
+        }
+    }
+    // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
+    // We check this rather than data[0] being truthy (or typeof function) so that it crashes
+    // as expected when there is a handler expression that evaluates to a falsy value
+    if (Object.hasOwnProperty.call(data, 0)) {
+        const handler = data[0];
+        if (typeof handler !== "function") {
+            throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
+        }
+        let node = data[1] ? data[1].__owl__ : null;
+        if (node ? node.status === 1 /* MOUNTED */ : true) {
+            handler.call(node ? node.component : null, ev);
+        }
+    }
+    return stopped;
+};
+
 function status(component) {
     switch (component.__owl__.status) {
         case 0 /* NEW */:
@@ -5728,7 +5798,8 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     const refs = node.refs;
     return {
         get el() {
-                return refs[name] || null;
+            const el = refs[name];
+            return inOwnerDocument(el) ? el : null;
         },
     };
 }
@@ -5833,7 +5904,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     html,
     comment,
 };
-    const __info__ = {};
+const __info__ = {
+    version: App.version,
+};
 
 TemplateSet.prototype._compileTemplate = function _compileTemplate(name, template) {
     return compile(template, {
@@ -5844,48 +5917,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     });
 };
 
-    exports.App = App;
+export { App, Component, EventBus, OwlError, __info__, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
-    exports.Component = Component;
-    exports.EventBus = EventBus;
-    exports.OwlError = OwlError;
-    exports.__info__ = __info__;
-    exports.blockDom = blockDom;
-    exports.loadFile = loadFile;
-    exports.markRaw = markRaw;
-    exports.markup = markup;
-    exports.mount = mount;
-    exports.onError = onError;
-    exports.onMounted = onMounted;
-    exports.onPatched = onPatched;
-    exports.onRendered = onRendered;
-    exports.onWillDestroy = onWillDestroy;
-    exports.onWillPatch = onWillPatch;
-    exports.onWillRender = onWillRender;
-    exports.onWillStart = onWillStart;
-    exports.onWillUnmount = onWillUnmount;
-    exports.onWillUpdateProps = onWillUpdateProps;
-    exports.reactive = reactive;
-    exports.status = status;
-    exports.toRaw = toRaw;
-    exports.useChildSubEnv = useChildSubEnv;
-    exports.useComponent = useComponent;
-    exports.useEffect = useEffect;
-    exports.useEnv = useEnv;
-    exports.useExternalListener = useExternalListener;
-    exports.useRef = useRef;
-    exports.useState = useState;
-    exports.useSubEnv = useSubEnv;
-    exports.validate = validate;
-    exports.whenReady = whenReady;
-    exports.xml = xml;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.version = '2.0.5';
+__info__.date = '2023-04-24T13:41:41.071Z';
-    __info__.date = '2023-01-27T14:29:31.753Z';
+__info__.hash = '53ce7ed';
-    __info__.hash = 'ea5d2be';
 __info__.url = 'https://github.com/odoo/owl';
-
-
-})(this.owl = this.owl || {});