@odoo/owl 2.2.10 → 2.2.11

package/dist/owl.cjs.js

@@ -2626,7 +2626,7 @@ function wrapError(fn, hookName) {
                         result.catch(() => { }),
                         new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
                     ]).then((res) => {
-                        if (res === TIMEOUT && node.fiber === fiber) {
+                        if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
                             console.warn(timeoutError);
                         }
                     });
@@ -3516,7 +3516,7 @@ function compileExprToArray(expr) {
     const localVars = new Set();
     const tokens = tokenize(expr);
     let i = 0;
-    let stack = []; // to track last opening [ or {
+    let stack = []; // to track last opening (, [ or {
     while (i < tokens.length) {
         let token = tokens[i];
         let prevToken = tokens[i - 1];
@@ -3525,10 +3525,12 @@ function compileExprToArray(expr) {
         switch (token.type) {
             case "LEFT_BRACE":
             case "LEFT_BRACKET":
+            case "LEFT_PAREN":
                 stack.push(token.type);
                 break;
             case "RIGHT_BRACE":
             case "RIGHT_BRACKET":
+            case "RIGHT_PAREN":
                 stack.pop();
         }
         let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
@@ -3640,6 +3642,13 @@ function isProp(tag, key) {
     }
     return false;
 }
+/**
+ * Returns a template literal that evaluates to str. You can add interpolation
+ * sigils into the string if required
+ */
+function toStringExpression(str) {
+    return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
+}
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -3820,15 +3829,14 @@ class CodeGenerator {
             mainCode.push(``);
             for (let block of this.blocks) {
                 if (block.dom) {
-                    let xmlString = block.asXmlString();
-                    xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+                    let xmlString = toStringExpression(block.asXmlString());
                     if (block.dynamicTagName) {
-                        xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
-                        xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-                        mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
+                        xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+                        xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+                        mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
                     }
                     else {
-                        mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
+                        mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
                     }
                 }
             }
@@ -4006,7 +4014,7 @@ class CodeGenerator {
         const isNewBlock = !block || forceNewBlock;
         if (isNewBlock) {
             block = this.createBlock(block, "comment", ctx);
-            this.insertBlock(`comment(\`${ast.value}\`)`, block, {
+            this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
                 ...ctx,
                 forceNewBlock: forceNewBlock && !block,
             });
@@ -4028,7 +4036,7 @@ class CodeGenerator {
         }
         if (!block || forceNewBlock) {
             block = this.createBlock(block, "text", ctx);
-            this.insertBlock(`text(\`${value}\`)`, block, {
+            this.insertBlock(`text(${toStringExpression(value)})`, block, {
                 ...ctx,
                 forceNewBlock: forceNewBlock && !block,
             });
@@ -4249,7 +4257,8 @@ class CodeGenerator {
             expr = compileExpr(ast.expr);
             if (ast.defaultValue) {
                 this.helpers.add("withDefault");
-                expr = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+                // FIXME: defaultValue is not translated
+                expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
             }
         }
         if (!block || forceNewBlock) {
@@ -4502,7 +4511,7 @@ class CodeGenerator {
                 this.addLine(`${ctxVar}[zero] = ${bl};`);
             }
         }
-        const key = `key + \`${this.generateComponentKey()}\``;
+        const key = this.generateComponentKey();
         if (isDynamic) {
             const templateVar = generateId("template");
             if (!this.staticDefs.find((d) => d.id === "call")) {
@@ -4554,12 +4563,12 @@ class CodeGenerator {
         else {
             let value;
             if (ast.defaultValue) {
-                const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
+                const defaultValue = toStringExpression(ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue);
                 if (ast.value) {
-                    value = `withDefault(${expr}, \`${defaultValue}\`)`;
+                    value = `withDefault(${expr}, ${defaultValue})`;
                 }
                 else {
-                    value = `\`${defaultValue}\``;
+                    value = defaultValue;
                 }
             }
             else {
@@ -4570,12 +4579,12 @@ class CodeGenerator {
         }
         return null;
     }
-    generateComponentKey() {
+    generateComponentKey(currentKey = "key") {
         const parts = [generateId("__")];
         for (let i = 0; i < this.target.loopLevel; i++) {
             parts.push(`\${key${i + 1}}`);
         }
-        return parts.join("__");
+        return `${currentKey} + \`${parts.join("__")}\``;
     }
     /**
      * Formats a prop name and value into a string suitable to be inserted in the
@@ -4666,7 +4675,6 @@ class CodeGenerator {
             this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
         }
         // cmap key
-        const key = this.generateComponentKey();
         let expr;
         if (ast.isDynamic) {
             expr = generateId("Comp");
@@ -4682,7 +4690,7 @@ class CodeGenerator {
             // todo: check the forcenewblock condition
             this.insertAnchor(block);
         }
-        let keyArg = `key + \`${key}\``;
+        let keyArg = this.generateComponentKey();
         if (ctx.tKeyExpr) {
             keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
         }
@@ -4755,7 +4763,7 @@ class CodeGenerator {
         }
         let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
         if (isMultiple) {
-            key = `${key} + \`${this.generateComponentKey()}\``;
+            key = this.generateComponentKey(key);
         }
         const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
         const scope = this.getPropString(props, dynProps);
@@ -4796,7 +4804,6 @@ class CodeGenerator {
         }
         let { block } = ctx;
         const name = this.compileInNewTarget("slot", ast.content, ctx);
-        const key = this.generateComponentKey();
         let ctxStr = "ctx";
         if (this.target.loopLevel || !this.hasSafeContext) {
             ctxStr = generateId("ctx");
@@ -4809,7 +4816,8 @@ class CodeGenerator {
             expr: `app.createComponent(null, false, true, false, false)`,
         });
         const target = compileExpr(ast.target);
-        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+        const key = this.generateComponentKey();
+        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
         if (block) {
             this.insertAnchor(block);
         }
@@ -5542,7 +5550,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.2.10";
+const version = "2.2.11";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5973,6 +5981,7 @@ exports.Component = Component;
 exports.EventBus = EventBus;
 exports.OwlError = OwlError;
 exports.__info__ = __info__;
+exports.batched = batched;
 exports.blockDom = blockDom;
 exports.loadFile = loadFile;
 exports.markRaw = markRaw;
@@ -6005,6 +6014,6 @@ exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.date = '2024-04-02T10:25:32.577Z';
-__info__.hash = '97b69f1';
+__info__.date = '2024-06-17T13:31:12.099Z';
+__info__.hash = 'e7f405c';
 __info__.url = 'https://github.com/odoo/owl';

package/dist/owl.es.js

@@ -2622,7 +2622,7 @@ function wrapError(fn, hookName) {
                         result.catch(() => { }),
                         new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
                     ]).then((res) => {
-                        if (res === TIMEOUT && node.fiber === fiber) {
+                        if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
                             console.warn(timeoutError);
                         }
                     });
@@ -3512,7 +3512,7 @@ function compileExprToArray(expr) {
     const localVars = new Set();
     const tokens = tokenize(expr);
     let i = 0;
-    let stack = []; // to track last opening [ or {
+    let stack = []; // to track last opening (, [ or {
     while (i < tokens.length) {
         let token = tokens[i];
         let prevToken = tokens[i - 1];
@@ -3521,10 +3521,12 @@ function compileExprToArray(expr) {
         switch (token.type) {
             case "LEFT_BRACE":
             case "LEFT_BRACKET":
+            case "LEFT_PAREN":
                 stack.push(token.type);
                 break;
             case "RIGHT_BRACE":
             case "RIGHT_BRACKET":
+            case "RIGHT_PAREN":
                 stack.pop();
         }
         let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
@@ -3636,6 +3638,13 @@ function isProp(tag, key) {
     }
     return false;
 }
+/**
+ * Returns a template literal that evaluates to str. You can add interpolation
+ * sigils into the string if required
+ */
+function toStringExpression(str) {
+    return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
+}
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -3816,15 +3825,14 @@ class CodeGenerator {
             mainCode.push(``);
             for (let block of this.blocks) {
                 if (block.dom) {
-                    let xmlString = block.asXmlString();
-                    xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+                    let xmlString = toStringExpression(block.asXmlString());
                     if (block.dynamicTagName) {
-                        xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
-                        xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-                        mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
+                        xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+                        xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+                        mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
                     }
                     else {
-                        mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
+                        mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
                     }
                 }
             }
@@ -4002,7 +4010,7 @@ class CodeGenerator {
         const isNewBlock = !block || forceNewBlock;
         if (isNewBlock) {
             block = this.createBlock(block, "comment", ctx);
-            this.insertBlock(`comment(\`${ast.value}\`)`, block, {
+            this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
                 ...ctx,
                 forceNewBlock: forceNewBlock && !block,
             });
@@ -4024,7 +4032,7 @@ class CodeGenerator {
         }
         if (!block || forceNewBlock) {
             block = this.createBlock(block, "text", ctx);
-            this.insertBlock(`text(\`${value}\`)`, block, {
+            this.insertBlock(`text(${toStringExpression(value)})`, block, {
                 ...ctx,
                 forceNewBlock: forceNewBlock && !block,
             });
@@ -4245,7 +4253,8 @@ class CodeGenerator {
             expr = compileExpr(ast.expr);
             if (ast.defaultValue) {
                 this.helpers.add("withDefault");
-                expr = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+                // FIXME: defaultValue is not translated
+                expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
             }
         }
         if (!block || forceNewBlock) {
@@ -4498,7 +4507,7 @@ class CodeGenerator {
                 this.addLine(`${ctxVar}[zero] = ${bl};`);
             }
         }
-        const key = `key + \`${this.generateComponentKey()}\``;
+        const key = this.generateComponentKey();
         if (isDynamic) {
             const templateVar = generateId("template");
             if (!this.staticDefs.find((d) => d.id === "call")) {
@@ -4550,12 +4559,12 @@ class CodeGenerator {
         else {
             let value;
             if (ast.defaultValue) {
-                const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
+                const defaultValue = toStringExpression(ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue);
                 if (ast.value) {
-                    value = `withDefault(${expr}, \`${defaultValue}\`)`;
+                    value = `withDefault(${expr}, ${defaultValue})`;
                 }
                 else {
-                    value = `\`${defaultValue}\``;
+                    value = defaultValue;
                 }
             }
             else {
@@ -4566,12 +4575,12 @@ class CodeGenerator {
         }
         return null;
     }
-    generateComponentKey() {
+    generateComponentKey(currentKey = "key") {
         const parts = [generateId("__")];
         for (let i = 0; i < this.target.loopLevel; i++) {
             parts.push(`\${key${i + 1}}`);
         }
-        return parts.join("__");
+        return `${currentKey} + \`${parts.join("__")}\``;
     }
     /**
      * Formats a prop name and value into a string suitable to be inserted in the
@@ -4662,7 +4671,6 @@ class CodeGenerator {
             this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
         }
         // cmap key
-        const key = this.generateComponentKey();
         let expr;
         if (ast.isDynamic) {
             expr = generateId("Comp");
@@ -4678,7 +4686,7 @@ class CodeGenerator {
             // todo: check the forcenewblock condition
             this.insertAnchor(block);
         }
-        let keyArg = `key + \`${key}\``;
+        let keyArg = this.generateComponentKey();
         if (ctx.tKeyExpr) {
             keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
         }
@@ -4751,7 +4759,7 @@ class CodeGenerator {
         }
         let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
         if (isMultiple) {
-            key = `${key} + \`${this.generateComponentKey()}\``;
+            key = this.generateComponentKey(key);
         }
         const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
         const scope = this.getPropString(props, dynProps);
@@ -4792,7 +4800,6 @@ class CodeGenerator {
         }
         let { block } = ctx;
         const name = this.compileInNewTarget("slot", ast.content, ctx);
-        const key = this.generateComponentKey();
         let ctxStr = "ctx";
         if (this.target.loopLevel || !this.hasSafeContext) {
             ctxStr = generateId("ctx");
@@ -4805,7 +4812,8 @@ class CodeGenerator {
             expr: `app.createComponent(null, false, true, false, false)`,
         });
         const target = compileExpr(ast.target);
-        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+        const key = this.generateComponentKey();
+        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
         if (block) {
             this.insertAnchor(block);
         }
@@ -5538,7 +5546,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.2.10";
+const version = "2.2.11";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5964,9 +5972,9 @@ 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 };
+export { App, Component, EventBus, OwlError, __info__, batched, 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 = '2024-04-02T10:25:32.577Z';
-__info__.hash = '97b69f1';
+__info__.date = '2024-06-17T13:31:12.099Z';
+__info__.hash = 'e7f405c';
 __info__.url = 'https://github.com/odoo/owl';

package/dist/owl.iife.js

@@ -2625,7 +2625,7 @@
                             result.catch(() => { }),
                             new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
                         ]).then((res) => {
-                            if (res === TIMEOUT && node.fiber === fiber) {
+                            if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
                                 console.warn(timeoutError);
                             }
                         });
@@ -3515,7 +3515,7 @@
         const localVars = new Set();
         const tokens = tokenize(expr);
         let i = 0;
-        let stack = []; // to track last opening [ or {
+        let stack = []; // to track last opening (, [ or {
         while (i < tokens.length) {
             let token = tokens[i];
             let prevToken = tokens[i - 1];
@@ -3524,10 +3524,12 @@
             switch (token.type) {
                 case "LEFT_BRACE":
                 case "LEFT_BRACKET":
+                case "LEFT_PAREN":
                     stack.push(token.type);
                     break;
                 case "RIGHT_BRACE":
                 case "RIGHT_BRACKET":
+                case "RIGHT_PAREN":
                     stack.pop();
             }
             let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
@@ -3639,6 +3641,13 @@
         }
         return false;
     }
+    /**
+     * Returns a template literal that evaluates to str. You can add interpolation
+     * sigils into the string if required
+     */
+    function toStringExpression(str) {
+        return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
+    }
     // -----------------------------------------------------------------------------
     // BlockDescription
     // -----------------------------------------------------------------------------
@@ -3819,15 +3828,14 @@
                 mainCode.push(``);
                 for (let block of this.blocks) {
                     if (block.dom) {
-                        let xmlString = block.asXmlString();
-                        xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
+                        let xmlString = toStringExpression(block.asXmlString());
                         if (block.dynamicTagName) {
-                            xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
-                            xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-                            mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
+                            xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+                            xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+                            mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
                         }
                         else {
-                            mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
+                            mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
                         }
                     }
                 }
@@ -4005,7 +4013,7 @@
             const isNewBlock = !block || forceNewBlock;
             if (isNewBlock) {
                 block = this.createBlock(block, "comment", ctx);
-                this.insertBlock(`comment(\`${ast.value}\`)`, block, {
+                this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
                     ...ctx,
                     forceNewBlock: forceNewBlock && !block,
                 });
@@ -4027,7 +4035,7 @@
             }
             if (!block || forceNewBlock) {
                 block = this.createBlock(block, "text", ctx);
-                this.insertBlock(`text(\`${value}\`)`, block, {
+                this.insertBlock(`text(${toStringExpression(value)})`, block, {
                     ...ctx,
                     forceNewBlock: forceNewBlock && !block,
                 });
@@ -4248,7 +4256,8 @@
                 expr = compileExpr(ast.expr);
                 if (ast.defaultValue) {
                     this.helpers.add("withDefault");
-                    expr = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+                    // FIXME: defaultValue is not translated
+                    expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
                 }
             }
             if (!block || forceNewBlock) {
@@ -4501,7 +4510,7 @@
                     this.addLine(`${ctxVar}[zero] = ${bl};`);
                 }
             }
-            const key = `key + \`${this.generateComponentKey()}\``;
+            const key = this.generateComponentKey();
             if (isDynamic) {
                 const templateVar = generateId("template");
                 if (!this.staticDefs.find((d) => d.id === "call")) {
@@ -4553,12 +4562,12 @@
             else {
                 let value;
                 if (ast.defaultValue) {
-                    const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
+                    const defaultValue = toStringExpression(ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue);
                     if (ast.value) {
-                        value = `withDefault(${expr}, \`${defaultValue}\`)`;
+                        value = `withDefault(${expr}, ${defaultValue})`;
                     }
                     else {
-                        value = `\`${defaultValue}\``;
+                        value = defaultValue;
                     }
                 }
                 else {
@@ -4569,12 +4578,12 @@
             }
             return null;
         }
-        generateComponentKey() {
+        generateComponentKey(currentKey = "key") {
             const parts = [generateId("__")];
             for (let i = 0; i < this.target.loopLevel; i++) {
                 parts.push(`\${key${i + 1}}`);
             }
-            return parts.join("__");
+            return `${currentKey} + \`${parts.join("__")}\``;
         }
         /**
          * Formats a prop name and value into a string suitable to be inserted in the
@@ -4665,7 +4674,6 @@
                 this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
             }
             // cmap key
-            const key = this.generateComponentKey();
             let expr;
             if (ast.isDynamic) {
                 expr = generateId("Comp");
@@ -4681,7 +4689,7 @@
                 // todo: check the forcenewblock condition
                 this.insertAnchor(block);
             }
-            let keyArg = `key + \`${key}\``;
+            let keyArg = this.generateComponentKey();
             if (ctx.tKeyExpr) {
                 keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
             }
@@ -4754,7 +4762,7 @@
             }
             let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
             if (isMultiple) {
-                key = `${key} + \`${this.generateComponentKey()}\``;
+                key = this.generateComponentKey(key);
             }
             const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
             const scope = this.getPropString(props, dynProps);
@@ -4795,7 +4803,6 @@
             }
             let { block } = ctx;
             const name = this.compileInNewTarget("slot", ast.content, ctx);
-            const key = this.generateComponentKey();
             let ctxStr = "ctx";
             if (this.target.loopLevel || !this.hasSafeContext) {
                 ctxStr = generateId("ctx");
@@ -4808,7 +4815,8 @@
                 expr: `app.createComponent(null, false, true, false, false)`,
             });
             const target = compileExpr(ast.target);
-            const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
+            const key = this.generateComponentKey();
+            const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
             if (block) {
                 this.insertAnchor(block);
             }
@@ -5541,7 +5549,7 @@
     }
 
     // do not modify manually. This file is generated by the release script.
-    const version = "2.2.10";
+    const version = "2.2.11";
 
     // -----------------------------------------------------------------------------
     //  Scheduler
@@ -5972,6 +5980,7 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     exports.EventBus = EventBus;
     exports.OwlError = OwlError;
     exports.__info__ = __info__;
+    exports.batched = batched;
     exports.blockDom = blockDom;
     exports.loadFile = loadFile;
     exports.markRaw = markRaw;
@@ -6006,8 +6015,8 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __info__.date = '2024-04-02T10:25:32.577Z';
-    __info__.hash = '97b69f1';
+    __info__.date = '2024-06-17T13:31:12.099Z';
+    __info__.hash = 'e7f405c';
     __info__.url = 'https://github.com/odoo/owl';