@odoo/owl 2.0.0-beta-14 → 2.0.0-beta-17

package/dist/owl.es.js

@@ -77,6 +77,68 @@ function toggler(key, child) {
     return new VToggler(key, child);
 }
 
+// Custom error class that wraps error that happen in the owl lifecycle
+class OwlError extends Error {
+}
+// Maps fibers to thrown errors
+const fibersInError = new WeakMap();
+const nodeErrorHandlers = new WeakMap();
+function _handleError(node, error) {
+    if (!node) {
+        return false;
+    }
+    const fiber = node.fiber;
+    if (fiber) {
+        fibersInError.set(fiber, error);
+    }
+    const errorHandlers = nodeErrorHandlers.get(node);
+    if (errorHandlers) {
+        let handled = false;
+        // execute in the opposite order
+        for (let i = errorHandlers.length - 1; i >= 0; i--) {
+            try {
+                errorHandlers[i](error);
+                handled = true;
+                break;
+            }
+            catch (e) {
+                error = e;
+            }
+        }
+        if (handled) {
+            return true;
+        }
+    }
+    return _handleError(node.parent, error);
+}
+function handleError(params) {
+    let { error } = params;
+    // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
+    if (!(error instanceof OwlError)) {
+        error = Object.assign(new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`), { cause: error });
+    }
+    const node = "node" in params ? params.node : params.fiber.node;
+    const fiber = "fiber" in params ? params.fiber : node.fiber;
+    // resets the fibers on components if possible. This is important so that
+    // new renderings can be properly included in the initial one, if any.
+    let current = fiber;
+    do {
+        current.node.fiber = current;
+        current = current.parent;
+    } while (current);
+    fibersInError.set(fiber.root, error);
+    const handled = _handleError(node, error);
+    if (!handled) {
+        console.warn(`[Owl] Unhandled error. Destroying the root component`);
+        try {
+            node.app.destroy();
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }
+}
+
 const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
 const tokenList = DOMTokenList.prototype;
 const tokenListAdd = tokenList.add;
@@ -698,7 +760,7 @@ function buildTree(node, parent = null, domParentTree = null) {
             };
         }
     }
-    throw new Error("boom");
+    throw new OwlError("boom");
 }
 function addRef(tree) {
     tree.isRef = true;
@@ -1382,61 +1444,6 @@ function remove(vnode, withBeforeRemove = false) {
     vnode.remove();
 }
 
-// Maps fibers to thrown errors
-const fibersInError = new WeakMap();
-const nodeErrorHandlers = new WeakMap();
-function _handleError(node, error) {
-    if (!node) {
-        return false;
-    }
-    const fiber = node.fiber;
-    if (fiber) {
-        fibersInError.set(fiber, error);
-    }
-    const errorHandlers = nodeErrorHandlers.get(node);
-    if (errorHandlers) {
-        let handled = false;
-        // execute in the opposite order
-        for (let i = errorHandlers.length - 1; i >= 0; i--) {
-            try {
-                errorHandlers[i](error);
-                handled = true;
-                break;
-            }
-            catch (e) {
-                error = e;
-            }
-        }
-        if (handled) {
-            return true;
-        }
-    }
-    return _handleError(node.parent, error);
-}
-function handleError(params) {
-    const error = params.error;
-    const node = "node" in params ? params.node : params.fiber.node;
-    const fiber = "fiber" in params ? params.fiber : node.fiber;
-    // resets the fibers on components if possible. This is important so that
-    // new renderings can be properly included in the initial one, if any.
-    let current = fiber;
-    do {
-        current.node.fiber = current;
-        current = current.parent;
-    } while (current);
-    fibersInError.set(fiber.root, error);
-    const handled = _handleError(node, error);
-    if (!handled) {
-        console.warn(`[Owl] Unhandled error. Destroying the root component`);
-        try {
-            node.app.destroy();
-        }
-        catch (e) {
-            console.error(e);
-        }
-    }
-}
-
 function makeChildFiber(node, parent) {
     let current = node.fiber;
     if (current) {
@@ -1475,7 +1482,7 @@ function makeRootFiber(node) {
     return fiber;
 }
 function throwOnRender() {
-    throw new Error("Attempted to render cancelled fiber");
+    throw new OwlError("Attempted to render cancelled fiber");
 }
 /**
  * @returns number of not-yet rendered fibers cancelled
@@ -1852,7 +1859,7 @@ const reactiveCache = new WeakMap();
  */
 function reactive(target, callback = () => { }) {
     if (!canBeMadeReactive(target)) {
-        throw new Error(`Cannot make the given value reactive`);
+        throw new OwlError(`Cannot make the given value reactive`);
     }
     if (SKIP in target) {
         return target;
@@ -2120,12 +2127,18 @@ function batched(callback) {
     };
 }
 function validateTarget(target) {
-    if (!(target instanceof HTMLElement)) {
-        throw new Error("Cannot mount component: the target is not a valid DOM element");
-    }
-    if (!document.body.contains(target)) {
-        throw new Error("Cannot mount a component on a detached dom node");
+    // 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) {
@@ -2145,7 +2158,7 @@ function whenReady(fn) {
 async function loadFile(url) {
     const result = await fetch(url);
     if (!result.ok) {
-        throw new Error("Error while fetching xml templates");
+        throw new OwlError("Error while fetching xml templates");
     }
     return await result.text();
 }
@@ -2167,7 +2180,7 @@ function markup(value) {
 let currentNode = null;
 function getCurrent() {
     if (!currentNode) {
-        throw new Error("No active component (a hook function should only be called in 'setup')");
+        throw new OwlError("No active component (a hook function should only be called in 'setup')");
     }
     return currentNode;
 }
@@ -2229,7 +2242,6 @@ class ComponentNode {
         this.parent = parent;
         this.props = props;
         this.parentKey = parentKey;
-        this.level = parent ? parent.level + 1 : 0;
         const defaultProps = C.defaultProps;
         props = Object.assign({}, props);
         if (defaultProps) {
@@ -2462,17 +2474,27 @@ class ComponentNode {
 
 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 error = new OwlError(`The following error occurred in ${hookName}: `);
+    const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
     const node = getCurrent();
     return (...args) => {
+        const onError = (cause) => {
+            error.cause = cause;
+            if (cause instanceof Error) {
+                error.message += `"${cause.message}"`;
+            }
+            else {
+                error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
+            }
+            throw error;
+        };
         try {
             const result = fn(...args);
             if (result instanceof Promise) {
                 if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
                     const fiber = node.fiber;
                     Promise.race([
-                        result,
+                        result.catch(() => { }),
                         new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
                     ]).then((res) => {
                         if (res === TIMEOUT && node.fiber === fiber) {
@@ -2480,21 +2502,12 @@ function wrapError(fn, hookName) {
                         }
                     });
                 }
-                return result.catch((cause) => {
-                    error.cause = cause;
-                    if (cause instanceof Error) {
-                        error.message += `"${cause.message}"`;
-                    }
-                    throw error;
-                });
+                return result.catch(onError);
             }
             return result;
         }
         catch (cause) {
-            if (cause instanceof Error) {
-                error.message += `"${cause.message}"`;
-            }
-            throw error;
+            onError(cause);
         }
     };
 }
@@ -2598,7 +2611,7 @@ class VPortal extends VText {
             }
             this.target = el && el.querySelector(this.selector);
             if (!this.target) {
-                throw new Error("invalid portal target");
+                throw new OwlError("invalid portal target");
             }
         }
         this.realBDom.mount(this.target, null);
@@ -2692,7 +2705,7 @@ function toSchema(spec) {
 function validate(obj, spec) {
     let errors = validateSchema(obj, spec);
     if (errors.length) {
-        throw new Error("Invalid object: " + errors.join(", "));
+        throw new OwlError("Invalid object: " + errors.join(", "));
     }
 }
 /**
@@ -2845,7 +2858,7 @@ function prepareList(collection) {
         keys = Object.values(collection);
     }
     else {
-        throw new Error("Invalid loop expression");
+        throw new OwlError("Invalid loop expression");
     }
     const n = values.length;
     return [keys, values, n, new Array(n)];
@@ -2951,7 +2964,7 @@ function multiRefSetter(refs, name) {
         if (el) {
             count++;
             if (count > 1) {
-                throw new Error("Cannot have 2 elements with same ref name at the same time");
+                throw new OwlError("Cannot have 2 elements with same ref name at the same time");
             }
         }
         if (count === 0 || el) {
@@ -2988,13 +3001,13 @@ function validateProps(name, props, parent) {
             : 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})`);
+                throw new OwlError(`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`);
             }
         }
     }
     const errors = validateSchema(props, schema);
     if (errors.length) {
-        throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
+        throw new OwlError(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
     }
 }
 const helpers = {
@@ -3015,6 +3028,7 @@ const helpers = {
     bind,
     createCatcher,
     markRaw,
+    OwlError,
 };
 
 const bdom = { text, createBlock, list, multi, html, toggler, comment };
@@ -3042,7 +3056,7 @@ function parseXML$1(xml) {
                 }
             }
         }
-        throw new Error(msg);
+        throw new OwlError(msg);
     }
     return doc;
 }
@@ -3073,7 +3087,7 @@ class TemplateSet {
             if (currentAsString === newAsString) {
                 return;
             }
-            throw new Error(`Template ${name} already defined with different content`);
+            throw new OwlError(`Template ${name} already defined with different content`);
         }
         this.rawTemplates[name] = template;
     }
@@ -3098,7 +3112,7 @@ class TemplateSet {
                     extraInfo = ` (for component "${componentName}")`;
                 }
                 catch { }
-                throw new Error(`Missing template: "${name}"${extraInfo}`);
+                throw new OwlError(`Missing template: "${name}"${extraInfo}`);
             }
             const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
             const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
@@ -3114,7 +3128,7 @@ class TemplateSet {
         return this.templates[name];
     }
     _compileTemplate(name, template) {
-        throw new Error(`Unable to compile a template. Please use owl full build instead`);
+        throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
     }
     callTemplate(owner, subTemplate, ctx, parent, key) {
         const template = this.getTemplate(subTemplate);
@@ -3196,14 +3210,14 @@ let tokenizeString = function (expr) {
             i++;
             cur = expr[i];
             if (!cur) {
-                throw new Error("Invalid expression");
+                throw new OwlError("Invalid expression");
             }
             s += cur;
         }
         i++;
     }
     if (expr[i] !== start) {
-        throw new Error("Invalid expression");
+        throw new OwlError("Invalid expression");
     }
     s += start;
     if (start === "`") {
@@ -3310,7 +3324,7 @@ function tokenize(expr) {
         error = e; // Silence all errors and throw a generic error below
     }
     if (current.length || error) {
-        throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
+        throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
     }
     return result;
 }
@@ -3861,7 +3875,7 @@ class CodeGenerator {
             .slice(1)
             .map((m) => {
             if (!MODS.has(m)) {
-                throw new Error(`Unknown event modifier: '${m}'`);
+                throw new OwlError(`Unknown event modifier: '${m}'`);
             }
             return `"${m}"`;
         });
@@ -3907,8 +3921,13 @@ class CodeGenerator {
                 expr = compileExpr(ast.attrs[key]);
                 if (attrName && isProp(ast.tag, attrName)) {
                     // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
-                    const C = attrName === "value" ? "String" : "Boolean";
-                    expr = `new ${C}(${expr})`;
+                    if (attrName === "value") {
+                        // When the expression is falsy, fall back to an empty string
+                        expr = `new String((${expr}) || "")`;
+                    }
+                    else {
+                        expr = `new Boolean(${expr})`;
+                    }
                 }
                 const idx = block.insertData(expr, "attr");
                 if (key === "t-att") {
@@ -4182,7 +4201,8 @@ class CodeGenerator {
         this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
         if (this.dev) {
             // Throw error on duplicate keys in dev mode
-            this.addLine(`if (keys${block.id}.has(key${this.target.loopLevel})) { throw new Error(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
+            this.helpers.add("OwlError");
+            this.addLine(`if (keys${block.id}.has(key${this.target.loopLevel})) { throw new OwlError(\`Got duplicate key in t-foreach: \${key${this.target.loopLevel}}\`)}`);
             this.addLine(`keys${block.id}.add(key${this.target.loopLevel});`);
         }
         let id;
@@ -4396,7 +4416,7 @@ class CodeGenerator {
                 value = `bind(ctx, ${value || undefined})`;
             }
             else {
-                throw new Error("Invalid prop suffix");
+                throw new OwlError("Invalid prop suffix");
             }
         }
         name = /^[a-z_]+$/i.test(name) ? name : `'${name}'`;
@@ -4589,9 +4609,6 @@ class CodeGenerator {
     }
 }
 
-// -----------------------------------------------------------------------------
-// AST Type definition
-// -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // Parser
 // -----------------------------------------------------------------------------
@@ -4700,7 +4717,7 @@ function parseDOMNode(node, ctx) {
         return null;
     }
     if (tagName.startsWith("block-")) {
-        throw new Error(`Invalid tag name: '${tagName}'`);
+        throw new OwlError(`Invalid tag name: '${tagName}'`);
     }
     ctx = Object.assign({}, ctx);
     if (tagName === "pre") {
@@ -4719,14 +4736,14 @@ function parseDOMNode(node, ctx) {
         const value = node.getAttribute(attr);
         if (attr.startsWith("t-on")) {
             if (attr === "t-on") {
-                throw new Error("Missing event name with t-on directive");
+                throw new OwlError("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>");
+                throw new OwlError("The t-model directive only works with <input>, <textarea> and <select>");
             }
             let baseExpr, expr;
             if (hasDotAtTheEnd.test(value)) {
@@ -4740,7 +4757,7 @@ function parseDOMNode(node, ctx) {
                 expr = value.slice(index + 1, -1);
             }
             else {
-                throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+                throw new OwlError(`Invalid t-model expression: "${value}" (it should be assignable)`);
             }
             const typeAttr = node.getAttribute("type");
             const isInput = tagName === "input";
@@ -4770,11 +4787,11 @@ function parseDOMNode(node, ctx) {
             }
         }
         else if (attr.startsWith("block-")) {
-            throw new Error(`Invalid attribute: '${attr}'`);
+            throw new OwlError(`Invalid attribute: '${attr}'`);
         }
         else if (attr !== "t-name") {
             if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
-                throw new Error(`Unknown QWeb directive: '${attr}'`);
+                throw new OwlError(`Unknown QWeb directive: '${attr}'`);
             }
             const tModel = ctx.tModelInfo;
             if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
@@ -4825,7 +4842,7 @@ function parseTEscNode(node, ctx) {
         };
     }
     if (ast.type === 11 /* TComponent */) {
-        throw new Error("t-esc is not supported on Component nodes");
+        throw new OwlError("t-esc is not supported on Component nodes");
     }
     return tesc;
 }
@@ -4873,7 +4890,7 @@ function parseTForEach(node, ctx) {
     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}")`);
+        throw new OwlError(`"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`);
     }
     node.removeAttribute("t-key");
     const memo = node.getAttribute("t-memo") || "";
@@ -5033,7 +5050,7 @@ function parseComponent(node, ctx) {
     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}>)`);
+        throw new OwlError(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
     }
     if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
         return null;
@@ -5057,7 +5074,7 @@ function parseComponent(node, ctx) {
             }
             else {
                 const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
-                throw new Error(message || `unsupported directive on Component: ${name}`);
+                throw new OwlError(message || `unsupported directive on Component: ${name}`);
             }
         }
         else {
@@ -5072,7 +5089,7 @@ function parseComponent(node, ctx) {
         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}>)`);
+                throw new OwlError(`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
@@ -5237,25 +5254,25 @@ function normalizeTIf(el) {
         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");
+                throw new OwlError("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");
+                throw new OwlError("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");
+                    throw new OwlError("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");
+            throw new OwlError("t-elif and t-else directives must be preceded by a t-if or t-elif directive");
         }
     }
 }
@@ -5271,7 +5288,7 @@ 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");
+            throw new OwlError("Cannot have t-esc on a component that already has content");
         }
         const value = el.getAttribute("t-esc");
         el.removeAttribute("t-esc");
@@ -5323,7 +5340,7 @@ function parseXML(xml) {
                 }
             }
         }
-        throw new Error(msg);
+        throw new OwlError(msg);
     }
     return doc;
 }
@@ -5377,7 +5394,7 @@ const mainEventHandler = (data, ev, currentTarget) => {
     if (Object.hasOwnProperty.call(data, 0)) {
         const handler = data[0];
         if (typeof handler !== "function") {
-            throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
+            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) {
@@ -5561,10 +5578,10 @@ class App extends TemplateSet {
                 if (isStatic) {
                     C = parent.constructor.components[name];
                     if (!C) {
-                        throw new Error(`Cannot find the definition of component "${name}"`);
+                        throw new OwlError(`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`);
+                        throw new OwlError(`"${name}" is not a Component. It must inherit from the Component class`);
                     }
                 }
                 node = new ComponentNode(C, props, this, ctx, key);
@@ -5720,10 +5737,10 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
     });
 };
 
-export { App, Component, EventBus, __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, whenReady, xml };
+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, whenReady, xml };
 
 
-__info__.version = '2.0.0-beta-14';
-__info__.date = '2022-07-08T14:17:53.900Z';
-__info__.hash = 'd111845';
+__info__.version = '2.0.0-beta-17';
+__info__.date = '2022-09-01T13:41:44.572Z';
+__info__.hash = '9cb74d6';
 __info__.url = 'https://github.com/odoo/owl';