[REL] v2.2

# v2.2

 - [IMP] runtime: add support for Map and other iterables in t-foreach
 - [IMP] runtime: only destroy component in raf callback
 - [REF] runtime: simplify implementation of batched
 - [FIX] compiler: allow t-model.number to work with select
 - [FIX] devtools: Fix crash when no root node
 - [FIX] devtools: fix/imp env display
 - [FIX] devtools: fix symbols handling and display

doc/reference/templates.md

@@ -376,15 +376,16 @@ An important difference should be made with the usual `QWeb` behaviour: Owl
 requires the presence of a `t-key` directive, to be able to properly reconcile
 renderings.
 
-`t-foreach` can iterate on an array (the current item will be the current value)
+`t-foreach` can iterate on any iterable, and also has special support for objects
-or an object (the current item will be the current key).
+and maps, it will expose the key of the current iteration as the contents of the
+`t-as`, and the corresponding value with the same name and the suffix `_value`.
 
-In addition to the name passed via t-as, `t-foreach` provides a few other
+In addition to the name passed via t-as, `t-foreach` provides a few other useful
-variables for various data points (note: `$as` will be replaced with the name
+variables (note: `$as` will be replaced with the name passed to `t-as`):
-passed to `t-as`):
 
-- `$as_value`: the current iteration value, identical to `$as` for lists and
+- `$as_value`: the current iteration value, identical to `$as` for arrays and
-  integers, but for objects, it provides the value (where `$as` provides the key)
+  other iterables, but for objects and maps, it provides the value (where `$as`
+  provides the key)
 - `$as_index`: the current iteration index (the first item of the iteration has index 0)
 - `$as_first`: whether the current item is the first of the iteration
   (equivalent to `$as_index == 0`)

docs/owl.js

@@ -122,14 +122,16 @@ function handleError(params) {
     }
     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
+    if (fiber) {
-    // new renderings can be properly included in the initial one, if any.
+        // resets the fibers on components if possible. This is important so that
-    let current = fiber;
+        // new renderings can be properly included in the initial one, if any.
-    do {
+        let current = fiber;
-        current.node.fiber = current;
+        do {
-        current = current.parent;
+            current.node.fiber = current;
-    } while (current);
+            current = current.parent;
-    fibersInError.set(fiber.root, error);
+        } while (current);
+        fibersInError.set(fiber.root, error);
+    }
     const handled = _handleError(node, error);
     if (!handled) {
         console.warn(`[Owl] Unhandled error. Destroying the root component`);
@@ -311,20 +313,13 @@ function updateClass(val, oldVal) {
  * @returns a batched version of the original callback
  */
 function batched(callback) {
-    let called = false;
+    let scheduled = false;
-    return async () => {
+    return async (...args) => {
-        // This await blocks all calls to the callback here, then releases them sequentially
+        if (!scheduled) {
-        // in the next microtick. This line decides the granularity of the batch.
+            scheduled = true;
-        await Promise.resolve();
+            await Promise.resolve();
-        if (!called) {
+            scheduled = false;
-            called = true;
+            callback(...args);
-            // 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();
         }
     };
 }
@@ -1657,8 +1652,7 @@ function cancelFibers(fibers) {
         let node = fiber.node;
         fiber.render = throwOnRender;
         if (node.status === 0 /* NEW */) {
-            node.destroy();
+            node.cancel();
-            delete node.parent.children[node.parentKey];
         }
         node.fiber = null;
         if (fiber.bdom) {
@@ -2385,6 +2379,9 @@ class ComponentNode {
         }
     }
     async render(deep) {
+        if (this.status >= 2 /* CANCELLED */) {
+            return;
+        }
         let current = this.fiber;
         if (current && (current.root.locked || current.bdom === true)) {
             await Promise.resolve();
@@ -2410,7 +2407,7 @@ class ComponentNode {
         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
@@ -2428,6 +2425,18 @@ class ComponentNode {
             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();
@@ -2455,7 +2464,7 @@ class ComponentNode {
                 this.app.handleError({ error: e, node: this });
             }
         }
-        this.status = 2 /* DESTROYED */;
+        this.status = 3 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
         this.nextProps = props;
@@ -2988,12 +2997,22 @@ function prepareList(collection) {
         keys = collection;
         values = collection;
     }
-    else if (collection) {
+    else if (collection instanceof Map) {
-        values = Object.keys(collection);
+        keys = [...collection.keys()];
-        keys = Object.values(collection);
+        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)];
@@ -4936,10 +4955,8 @@ function parseDOMNode(node, ctx) {
             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");
@@ -4951,8 +4968,8 @@ function parseDOMNode(node, ctx) {
                 specialInitTargetAttr: isRadioInput ? "checked" : null,
                 eventType,
                 hasDynamicChildren: false,
-                shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+                shouldTrim: hasTrimMod,
-                shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
+                shouldNumberize: hasNumberMod,
             };
             if (isSelect) {
                 // don't pollute the original ctx
@@ -5535,7 +5552,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.1.3";
+const version = "2.1.4";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5545,11 +5562,18 @@ class Scheduler {
         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.
@@ -5559,21 +5583,28 @@ class Scheduler {
             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 = this.requestAnimationFrame(() => this.processTasks());
-                this.frame = 0;
+        }
-                this.tasks.forEach((fiber) => this.processFiber(fiber));
+    }
-                for (let task of this.tasks) {
+    processTasks() {
-                    if (task.node.status === 2 /* DESTROYED */) {
+        this.frame = 0;
-                        this.tasks.delete(task);
+        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) {
@@ -5586,7 +5617,7 @@ class Scheduler {
             this.tasks.delete(fiber);
             return;
         }
-        if (fiber.node.status === 2 /* DESTROYED */) {
+        if (fiber.node.status === 3 /* DESTROYED */) {
             this.tasks.delete(fiber);
             return;
         }
@@ -5810,9 +5841,11 @@ function status(component) {
     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";
     }
 }
@@ -5952,6 +5985,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 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 };
 
 
-__info__.date = '2023-06-28T09:17:13.630Z';
+__info__.date = '2023-07-18T14:07:26.565Z';
-__info__.hash = '432ff44';
+__info__.hash = '836e12b';
 __info__.url = 'https://github.com/odoo/owl';

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.4",
+  "version": "2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.4",
+  "version": "2.2",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

src/runtime/template_helpers.ts

@@ -60,18 +60,26 @@ function withKey(elem: any, k: string) {
   return elem;
 }
 
-function prepareList(collection: any): [any[], any[], number, any[]] {
+function prepareList(collection: unknown): [unknown[], unknown[], number, undefined[]] {
-  let keys: any[];
+  let keys: unknown[];
-  let values: any[];
+  let values: unknown[];
 
   if (Array.isArray(collection)) {
     keys = collection;
     values = collection;
-  } else if (collection) {
+  } else if (collection instanceof Map) {
-    values = Object.keys(collection);
+    keys = [...collection.keys()];
-    keys = Object.values(collection);
+    values = [...collection.values()];
+  } else if (collection && typeof collection === "object") {
+    if (Symbol.iterator in collection) {
+      keys = [...(<Iterable<unknown>>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)];

src/version.ts

@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.1.4";
+export const version = "2.2";

tests/compiler/__snapshots__/t_foreach.test.ts.snap

@@ -77,6 +77,62 @@ exports[`t-foreach iterate on items 1`] = `
 }"
 `;
 
+exports[`t-foreach iterate, Map param 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['value']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k_block1[i1];
+      const key1 = ctx['item_index'];
+      const b3 = text(\` [\`);
+      const b4 = text(ctx['item_index']);
+      const b5 = text(\`: \`);
+      const b6 = text(ctx['item']);
+      const b7 = text(\` \`);
+      const b8 = text(ctx['item_value']);
+      const b9 = text(\`] \`);
+      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`t-foreach iterate, Set param 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['value']);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k_block1[i1];
+      const key1 = ctx['item_index'];
+      const b3 = text(\` [\`);
+      const b4 = text(ctx['item_index']);
+      const b5 = text(\`: \`);
+      const b6 = text(ctx['item']);
+      const b7 = text(\` \`);
+      const b8 = text(ctx['item_value']);
+      const b9 = text(\`] \`);
+      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
 exports[`t-foreach iterate, dict param 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -108,6 +164,62 @@ exports[`t-foreach iterate, dict param 1`] = `
 }"
 `;
 
+exports[`t-foreach iterate, generator param 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['gen']());;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k_block1[i1];
+      const key1 = ctx['item_index'];
+      const b3 = text(\` [\`);
+      const b4 = text(ctx['item_index']);
+      const b5 = text(\`: \`);
+      const b6 = text(ctx['item']);
+      const b7 = text(\` \`);
+      const b8 = text(ctx['item_value']);
+      const b9 = text(\`] \`);
+      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`t-foreach iterate, iterable param 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['map'].values());;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`item\`] = v_block1[i1];
+      ctx[\`item_index\`] = i1;
+      ctx[\`item_value\`] = k_block1[i1];
+      const key1 = ctx['item_index'];
+      const b3 = text(\` [\`);
+      const b4 = text(ctx['item_index']);
+      const b5 = text(\`: \`);
+      const b6 = text(ctx['item']);
+      const b7 = text(\` \`);
+      const b8 = text(ctx['item_value']);
+      const b9 = text(\`] \`);
+      c_block1[i1] = withKey(multi([b3, b4, b5, b6, b7, b8, b9]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
 exports[`t-foreach iterate, position 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/compiler/t_foreach.test.ts

@@ -105,6 +105,64 @@ describe("t-foreach", () => {
     expect(renderToString(template, context)).toBe(expected);
   });
 
+  test("iterate, Map param", () => {
+    const template = `
+      <t t-foreach="value" t-as="item" t-key="item_index">
+        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+      </t>`;
+    const expected = ` [0: 1 a]  [1: 2 b]  [2: 3 c] `;
+    const context = {
+      value: new Map([
+        ["a", 1],
+        ["b", 2],
+        ["c", 3],
+      ]),
+    };
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
+  test("iterate, Set param", () => {
+    const template = `
+      <t t-foreach="value" t-as="item" t-key="item_index">
+        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+      </t>`;
+    const expected = ` [0: 1 1]  [1: 2 2]  [2: 3 3] `;
+    const context = { value: new Set([1, 2, 3]) };
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
+  test("iterate, iterable param", () => {
+    const template = `
+      <t t-foreach="map.values()" t-as="item" t-key="item_index">
+        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+      </t>`;
+    const expected = ` [0: 1 1]  [1: 2 2]  [2: 3 3] `;
+    const context = {
+      map: new Map([
+        ["a", 1],
+        ["b", 2],
+        ["c", 3],
+      ]),
+    };
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
+  test("iterate, generator param", () => {
+    const template = `
+      <t t-foreach="gen()" t-as="item" t-key="item_index">
+        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+      </t>`;
+    const expected = ` [0: 1 1]  [1: 2 2]  [2: 3 3] `;
+    const context = {
+      *gen() {
+        yield 1;
+        yield 2;
+        yield 3;
+      },
+    };
+    expect(renderToString(template, context)).toBe(expected);
+  });
+
   test("does not pollute the rendering context", () => {
     const template = `
         <div>
@@ -193,7 +251,9 @@ describe("t-foreach", () => {
 
   test("throws error if invalid loop expression", () => {
     const test = `<div><t t-foreach="abc" t-as="item" t-key="item"><span t-key="item_index"/></t></div>`;
-    expect(() => renderToString(test)).toThrow("Invalid loop expression");
+    expect(() => renderToString(test)).toThrow(
+      'Invalid loop expression: "undefined" is not iterable'
+    );
   });
 
   test("t-foreach with t-if inside", () => {