@odoo/owl 2.1.3 → 2.2.1

package/dist/owl.iife.js

@@ -125,14 +125,16 @@
         }
         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);
+        if (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`);
@@ -178,11 +180,21 @@
     }
     function attrsSetter(attrs) {
         if (isArray(attrs)) {
-            setAttribute.call(this, attrs[0], attrs[1]);
+            if (attrs[0] === "class") {
+                setClass.call(this, attrs[1]);
+            }
+            else {
+                setAttribute.call(this, attrs[0], attrs[1]);
+            }
         }
         else {
             for (let k in attrs) {
-                setAttribute.call(this, k, attrs[k]);
+                if (k === "class") {
+                    setClass.call(this, attrs[k]);
+                }
+                else {
+                    setAttribute.call(this, k, attrs[k]);
+                }
             }
         }
     }
@@ -194,7 +206,12 @@
                 if (val === oldAttrs[1]) {
                     return;
                 }
-                setAttribute.call(this, name, val);
+                if (name === "class") {
+                    updateClass.call(this, val, oldAttrs[1]);
+                }
+                else {
+                    setAttribute.call(this, name, val);
+                }
             }
             else {
                 removeAttribute.call(this, oldAttrs[0]);
@@ -204,13 +221,23 @@
         else {
             for (let k in oldAttrs) {
                 if (!(k in attrs)) {
-                    removeAttribute.call(this, k);
+                    if (k === "class") {
+                        updateClass.call(this, "", oldAttrs[k]);
+                    }
+                    else {
+                        removeAttribute.call(this, k);
+                    }
                 }
             }
             for (let k in attrs) {
                 const val = attrs[k];
                 if (val !== oldAttrs[k]) {
-                    setAttribute.call(this, k, val);
+                    if (k === "class") {
+                        updateClass.call(this, val, oldAttrs[k]);
+                    }
+                    else {
+                        setAttribute.call(this, k, val);
+                    }
                 }
             }
         }
@@ -289,20 +316,13 @@
      * @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();
+        let scheduled = false;
+        return async (...args) => {
+            if (!scheduled) {
+                scheduled = true;
+                await Promise.resolve();
+                scheduled = false;
+                callback(...args);
             }
         };
     }
@@ -1635,8 +1655,7 @@
             let node = fiber.node;
             fiber.render = throwOnRender;
             if (node.status === 0 /* NEW */) {
-                node.destroy();
-                delete node.parent.children[node.parentKey];
+                node.cancel();
             }
             node.fiber = null;
             if (fiber.bdom) {
@@ -2363,6 +2382,9 @@
             }
         }
         async render(deep) {
+            if (this.status >= 2 /* CANCELLED */) {
+                return;
+            }
             let current = this.fiber;
             if (current && (current.root.locked || current.bdom === true)) {
                 await Promise.resolve();
@@ -2388,7 +2410,7 @@
             this.fiber = fiber;
             this.app.scheduler.addFiber(fiber);
             await Promise.resolve();
-            if (this.status === 2 /* DESTROYED */) {
+            if (this.status >= 2 /* CANCELLED */) {
                 return;
             }
             // We only want to actually render the component if the following two
@@ -2406,6 +2428,18 @@
                 fiber.render();
             }
         }
+        cancel() {
+            this._cancel();
+            delete this.parent.children[this.parentKey];
+            this.app.scheduler.scheduleDestroy(this);
+        }
+        _cancel() {
+            this.status = 2 /* CANCELLED */;
+            const children = this.children;
+            for (let childKey in children) {
+                children[childKey]._cancel();
+            }
+        }
         destroy() {
             let shouldRemove = this.status === 1 /* MOUNTED */;
             this._destroy();
@@ -2433,7 +2467,7 @@
                     this.app.handleError({ error: e, node: this });
                 }
             }
-            this.status = 2 /* DESTROYED */;
+            this.status = 3 /* DESTROYED */;
         }
         async updateAndRender(props, parentFiber) {
             this.nextProps = props;
@@ -2966,12 +3000,22 @@
             keys = collection;
             values = collection;
         }
-        else if (collection) {
-            values = Object.keys(collection);
-            keys = Object.values(collection);
+        else if (collection instanceof Map) {
+            keys = [...collection.keys()];
+            values = [...collection.values()];
+        }
+        else if (collection && typeof collection === "object") {
+            if (Symbol.iterator in collection) {
+                keys = [...collection];
+                values = keys;
+            }
+            else {
+                values = Object.keys(collection);
+                keys = Object.values(collection);
+            }
         }
         else {
-            throw new OwlError("Invalid loop expression");
+            throw new OwlError(`Invalid loop expression: "${collection}" is not iterable`);
         }
         const n = values.length;
         return [keys, values, n, new Array(n)];
@@ -3878,6 +3922,10 @@
             })
                 .join("");
         }
+        translate(str) {
+            const match = translationRE.exec(str);
+            return match[1] + this.translateFn(match[2]) + match[3];
+        }
         /**
          * @returns the newly created block name, if any
          */
@@ -3955,8 +4003,7 @@
             let { block, forceNewBlock } = ctx;
             let value = ast.value;
             if (value && ctx.translate !== false) {
-                const match = translationRE.exec(value);
-                value = match[1] + this.translateFn(match[2]) + match[3];
+                value = this.translate(value);
             }
             if (!ctx.inPreTag) {
                 value = value.replace(whitespaceRE, " ");
@@ -4497,11 +4544,12 @@
             else {
                 let value;
                 if (ast.defaultValue) {
+                    const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
                     if (ast.value) {
-                        value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+                        value = `withDefault(${expr}, \`${defaultValue}\`)`;
                     }
                     else {
-                        value = `\`${ast.defaultValue}\``;
+                        value = `\`${defaultValue}\``;
                     }
                 }
                 else {
@@ -4794,10 +4842,10 @@
             parseTCall(node, ctx) ||
             parseTCallBlock(node) ||
             parseTEscNode(node, ctx) ||
+            parseTOutNode(node, ctx) ||
             parseTKey(node, ctx) ||
             parseTTranslation(node, ctx) ||
             parseTSlot(node, ctx) ||
-            parseTOutNode(node, ctx) ||
             parseComponent(node, ctx) ||
             parseDOMNode(node, ctx) ||
             parseTSetNode(node, ctx) ||
@@ -4882,10 +4930,10 @@
         let model = null;
         for (let attr of nodeAttrsNames) {
             const value = node.getAttribute(attr);
-            if (attr.startsWith("t-on")) {
-                if (attr === "t-on") {
-                    throw new OwlError("Missing event name with t-on directive");
-                }
+            if (attr === "t-on" || attr === "t-on-") {
+                throw new OwlError("Missing event name with t-on directive");
+            }
+            if (attr.startsWith("t-on-")) {
                 on = on || {};
                 on[attr.slice(5)] = value;
             }
@@ -4910,10 +4958,8 @@
                 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");
@@ -4925,8 +4971,8 @@
                     specialInitTargetAttr: isRadioInput ? "checked" : null,
                     eventType,
                     hasDynamicChildren: false,
-                    shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
-                    shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
+                    shouldTrim: hasTrimMod,
+                    shouldNumberize: hasNumberMod,
                 };
                 if (isSelect) {
                     // don't pollute the original ctx
@@ -4989,9 +5035,6 @@
                 content: [tesc],
             };
         }
-        if (ast.type === 11 /* TComponent */) {
-            throw new OwlError("t-esc is not supported on Component nodes");
-        }
         return tesc;
     }
     // -----------------------------------------------------------------------------
@@ -5433,19 +5476,21 @@
      *
      * @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 OwlError("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);
+    function normalizeTEscTOut(el) {
+        for (const d of ["t-esc", "t-out"]) {
+            const elements = [...el.querySelectorAll(`[${d}]`)].filter((el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component"));
+            for (const el of elements) {
+                if (el.childNodes.length) {
+                    throw new OwlError(`Cannot have ${d} on a component that already has content`);
+                }
+                const value = el.getAttribute(d);
+                el.removeAttribute(d);
+                const t = el.ownerDocument.createElement("t");
+                if (value != null) {
+                    t.setAttribute(d, value);
+                }
+                el.appendChild(t);
             }
-            el.appendChild(t);
         }
     }
     /**
@@ -5456,7 +5501,7 @@
      */
     function normalizeXML(el) {
         normalizeTIf(el);
-        normalizeTEsc(el);
+        normalizeTEscTOut(el);
     }
     /**
      * Parses an XML string into an XML document, throwing errors on parser errors
@@ -5509,7 +5554,7 @@
     }
 
     // do not modify manually. This file is generated by the release script.
-    const version = "2.1.2";
+    const version = "2.2";
 
     // -----------------------------------------------------------------------------
     //  Scheduler
@@ -5519,11 +5564,18 @@
             this.tasks = new Set();
             this.frame = 0;
             this.delayedRenders = [];
+            this.cancelledNodes = new Set();
             this.requestAnimationFrame = Scheduler.requestAnimationFrame;
         }
         addFiber(fiber) {
             this.tasks.add(fiber.root);
         }
+        scheduleDestroy(node) {
+            this.cancelledNodes.add(node);
+            if (this.frame === 0) {
+                this.frame = this.requestAnimationFrame(() => this.processTasks());
+            }
+        }
         /**
          * Process all current tasks. This only applies to the fibers that are ready.
          * Other tasks are left unchanged.
@@ -5533,21 +5585,28 @@
                 let renders = this.delayedRenders;
                 this.delayedRenders = [];
                 for (let f of renders) {
-                    if (f.root && f.node.status !== 2 /* DESTROYED */ && f.node.fiber === f) {
+                    if (f.root && f.node.status !== 3 /* DESTROYED */ && f.node.fiber === f) {
                         f.render();
                     }
                 }
             }
             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);
-                        }
-                    }
-                });
+                this.frame = this.requestAnimationFrame(() => this.processTasks());
+            }
+        }
+        processTasks() {
+            this.frame = 0;
+            for (let node of this.cancelledNodes) {
+                node._destroy();
+            }
+            this.cancelledNodes.clear();
+            for (let task of this.tasks) {
+                this.processFiber(task);
+            }
+            for (let task of this.tasks) {
+                if (task.node.status === 3 /* DESTROYED */) {
+                    this.tasks.delete(task);
+                }
             }
         }
         processFiber(fiber) {
@@ -5560,7 +5619,7 @@
                 this.tasks.delete(fiber);
                 return;
             }
-            if (fiber.node.status === 2 /* DESTROYED */) {
+            if (fiber.node.status === 3 /* DESTROYED */) {
                 this.tasks.delete(fiber);
                 return;
             }
@@ -5588,6 +5647,8 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         apps: new Set(),
         Fiber: Fiber,
         RootFiber: RootFiber,
+        toRaw: toRaw,
+        reactive: reactive,
     });
     class App extends TemplateSet {
         constructor(Root, config = {}) {
@@ -5782,9 +5843,11 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
         switch (component.__owl__.status) {
             case 0 /* NEW */:
                 return "new";
+            case 2 /* CANCELLED */:
+                return "cancelled";
             case 1 /* MOUNTED */:
                 return "mounted";
-            case 2 /* DESTROYED */:
+            case 3 /* DESTROYED */:
                 return "destroyed";
         }
     }
@@ -5840,8 +5903,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
      * will run a cleanup function before patching and before unmounting the
      * the component.
      *
-     * @param {Effect} effect the effect to run on component mount and/or patch
-     * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
+     * @template T
+     * @param {Effect<T>} effect the effect to run on component mount and/or patch
+     * @param {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
      *      dependencies that will decide if the effect needs to be cleaned up and
      *      run again. If the dependencies did not change, the effect will not run
      *      again. The default value returns an array containing only NaN because
@@ -5959,8 +6023,8 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.date = '2023-04-29T07:45:54.333Z';
-    __info__.hash = 'aabb755';
+    __info__.date = '2023-07-19T13:22:24.480Z';
+    __info__.hash = '2e07799';
     __info__.url = 'https://github.com/odoo/owl';