@odoo/owl 2.0.0-beta-8 → 2.0.0-beta-9

package/dist/owl.cjs.js

@@ -1291,29 +1291,35 @@ function html(str) {
 }
 
 function createCatcher(eventsSpec) {
-    let setupFns = [];
-    let removeFns = [];
-    for (let name in eventsSpec) {
-        let index = eventsSpec[name];
-        let { setup, remove } = createEventHandler(name);
-        setupFns[index] = setup;
-        removeFns[index] = remove;
-    }
-    let n = setupFns.length;
+    const n = Object.keys(eventsSpec).length;
     class VCatcher {
         constructor(child, handlers) {
+            this.handlerFns = [];
             this.afterNode = null;
             this.child = child;
-            this.handlers = handlers;
+            this.handlerData = handlers;
         }
         mount(parent, afterNode) {
             this.parentEl = parent;
-            this.afterNode = afterNode;
             this.child.mount(parent, afterNode);
+            this.afterNode = document.createTextNode("");
+            parent.insertBefore(this.afterNode, afterNode);
+            this.wrapHandlerData();
+            for (let name in eventsSpec) {
+                const index = eventsSpec[name];
+                const handler = createEventHandler(name);
+                this.handlerFns[index] = handler;
+                handler.setup.call(parent, this.handlerData[index]);
+            }
+        }
+        wrapHandlerData() {
             for (let i = 0; i < n; i++) {
-                let origFn = this.handlers[i][0];
+                let handler = this.handlerData[i];
+                // handler = [...mods, fn, comp], so we need to replace second to last elem
+                let idx = handler.length - 2;
+                let origFn = handler[idx];
                 const self = this;
-                this.handlers[i][0] = function (ev) {
+                handler[idx] = function (ev) {
                     const target = ev.target;
                     let currentNode = self.child.firstNode();
                     const afterNode = self.afterNode;
@@ -1324,18 +1330,21 @@ function createCatcher(eventsSpec) {
                         currentNode = currentNode.nextSibling;
                     }
                 };
-                setupFns[i].call(parent, this.handlers[i]);
             }
         }
         moveBefore(other, afterNode) {
-            this.afterNode = null;
             this.child.moveBefore(other ? other.child : null, afterNode);
+            this.parentEl.insertBefore(this.afterNode, afterNode);
         }
         patch(other, withBeforeRemove) {
             if (this === other) {
                 return;
             }
-            this.handlers = other.handlers;
+            this.handlerData = other.handlerData;
+            this.wrapHandlerData();
+            for (let i = 0; i < n; i++) {
+                this.handlerFns[i].update.call(this.parentEl, this.handlerData[i]);
+            }
             this.child.patch(other.child, withBeforeRemove);
         }
         beforeRemove() {
@@ -1343,9 +1352,10 @@ function createCatcher(eventsSpec) {
         }
         remove() {
             for (let i = 0; i < n; i++) {
-                removeFns[i].call(this.parentEl);
+                this.handlerFns[i].remove.call(this.parentEl);
             }
             this.child.remove();
+            this.afterNode.remove();
         }
         firstNode() {
             return this.child.firstNode();
@@ -2178,15 +2188,15 @@ function useComponent() {
 }
 /**
  * Apply default props (only top level).
- *
- * Note that this method does modify in place the props
  */
 function applyDefaultProps(props, defaultProps) {
+    const result = Object.assign({}, props);
     for (let propName in defaultProps) {
         if (props[propName] === undefined) {
-            props[propName] = defaultProps[propName];
+            result[propName] = defaultProps[propName];
         }
     }
+    return result;
 }
 // -----------------------------------------------------------------------------
 // Integration with reactivity system (useState)
@@ -2239,7 +2249,7 @@ function component(name, props, key, ctx, parent) {
             node.forceNextRender = false;
         }
         else {
-            const currentProps = node.component.props;
+            const currentProps = node.props;
             shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
         }
         if (shouldRender) {
@@ -2286,11 +2296,12 @@ class ComponentNode {
         currentNode = this;
         this.app = app;
         this.parent = parent;
+        this.props = props;
         this.parentKey = parentKey;
         this.level = parent ? parent.level + 1 : 0;
         const defaultProps = C.defaultProps;
         if (defaultProps) {
-            applyDefaultProps(props, defaultProps);
+            props = applyDefaultProps(props, defaultProps);
         }
         const env = (parent && parent.childEnv) || app.env;
         this.childEnv = env;
@@ -2401,13 +2412,14 @@ class ComponentNode {
         this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
+        const rawProps = props;
         // update
         const fiber = makeChildFiber(this, parentFiber);
         this.fiber = fiber;
         const component = this.component;
         const defaultProps = component.constructor.defaultProps;
         if (defaultProps) {
-            applyDefaultProps(props, defaultProps);
+            props = applyDefaultProps(props, defaultProps);
         }
         currentNode = this;
         for (const key in props) {
@@ -2423,6 +2435,7 @@ class ComponentNode {
             return;
         }
         component.props = props;
+        this.props = rawProps;
         fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
@@ -2925,22 +2938,33 @@ function safeOutput(value) {
     }
     let safeKey;
     let block;
-    if (value instanceof Markup) {
-        safeKey = `string_safe`;
-        block = html(value);
-    }
-    else if (value instanceof LazyValue) {
-        safeKey = `lazy_value`;
-        block = value.evaluate();
-    }
-    else if (value instanceof String || typeof value === "string") {
-        safeKey = "string_unsafe";
-        block = text(value);
-    }
-    else {
-        // Assuming it is a block
-        safeKey = "block_safe";
-        block = value;
+    switch (typeof value) {
+        case "object":
+            if (value instanceof Markup) {
+                safeKey = `string_safe`;
+                block = html(value);
+            }
+            else if (value instanceof LazyValue) {
+                safeKey = `lazy_value`;
+                block = value.evaluate();
+            }
+            else if (value instanceof String) {
+                safeKey = "string_unsafe";
+                block = text(value);
+            }
+            else {
+                // Assuming it is a block
+                safeKey = "block_safe";
+                block = value;
+            }
+            break;
+        case "string":
+            safeKey = "string_unsafe";
+            block = text(value);
+            break;
+        default:
+            safeKey = "string_unsafe";
+            block = text(String(value));
     }
     return toggler(safeKey, block);
 }
@@ -3442,15 +3466,17 @@ function compileExpr(expr) {
         .map((t) => paddedValues.get(t.value) || t.value)
         .join("");
 }
-const INTERP_REGEXP = /\{\{.*?\}\}/g;
-const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
-function interpolate(s) {
+const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
+function replaceDynamicParts(s, replacer) {
     let matches = s.match(INTERP_REGEXP);
     if (matches && matches[0].length === s.length) {
-        return `(${compileExpr(s.slice(2, -2))})`;
+        return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
     }
-    let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+    let r = s.replace(INTERP_REGEXP, (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}");
     return "`" + r + "`";
+}
+function interpolate(s) {
+    return replaceDynamicParts(s, compileExpr);
 }
 
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
@@ -3950,8 +3976,8 @@ class CodeGenerator {
             this.target.hasRef = true;
             const isDynamic = INTERP_REGEXP.test(ast.ref);
             if (isDynamic) {
-                const str = ast.ref.replace(INTERP_REGEXP, (expr) => "${" + this.captureExpression(expr.slice(2, -2), true) + "}");
-                const idx = block.insertData(`(el) => refs[\`${str}\`] = el`, "ref");
+                const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+                const idx = block.insertData(`(el) => refs[${str}] = el`, "ref");
                 attrs["block-ref"] = String(idx);
             }
             else {
@@ -4401,21 +4427,20 @@ class CodeGenerator {
         return `${name}: ${value || undefined}`;
     }
     formatPropObject(obj) {
-        const params = [];
-        for (const [n, v] of Object.entries(obj)) {
-            params.push(this.formatProp(n, v));
+        return Object.entries(obj).map(([k, v]) => this.formatProp(k, v));
+    }
+    getPropString(props, dynProps) {
+        let propString = `{${props.join(",")}}`;
+        if (dynProps) {
+            propString = `Object.assign({}, ${compileExpr(dynProps)}${props.length ? ", " + propString : ""})`;
         }
-        return params.join(", ");
+        return propString;
     }
     compileComponent(ast, ctx) {
         let { block } = ctx;
         // props
         const hasSlotsProp = "slots" in (ast.props || {});
-        const props = [];
-        const propExpr = this.formatPropObject(ast.props || {});
-        if (propExpr) {
-            props.push(propExpr);
-        }
+        const props = ast.props ? this.formatPropObject(ast.props) : [];
         // slots
         let slotDef = "";
         if (ast.slots) {
@@ -4438,7 +4463,7 @@ class CodeGenerator {
                     params.push(`__scope: "${scope}"`);
                 }
                 if (ast.slots[slotName].attrs) {
-                    params.push(this.formatPropObject(ast.slots[slotName].attrs));
+                    params.push(...this.formatPropObject(ast.slots[slotName].attrs));
                 }
                 const slotInfo = `{${params.join(", ")}}`;
                 slotStr.push(`'${slotName}': ${slotInfo}`);
@@ -4449,11 +4474,7 @@ class CodeGenerator {
             this.helpers.add("markRaw");
             props.push(`slots: markRaw(${slotDef})`);
         }
-        const propStr = `{${props.join(",")}}`;
-        let propString = propStr;
-        if (ast.dynamicProps) {
-            propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${props.length ? ", " + propStr : ""})`;
-        }
+        let propString = this.getPropString(props, ast.dynamicProps);
         let propVar;
         if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
             propVar = generateId("props");
@@ -4525,7 +4546,12 @@ class CodeGenerator {
         else {
             slotName = "'" + ast.name + "'";
         }
-        const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
+        const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
+        if (ast.attrs) {
+            delete ast.attrs["t-props"];
+        }
+        const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
+        const scope = this.getPropString(props, dynProps);
         if (ast.defaultContent) {
             const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
             blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
@@ -5692,7 +5718,7 @@ exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.version = '2.0.0-beta-8';
-__info__.date = '2022-05-31T12:25:19.319Z';
-__info__.hash = 'b56a9c2';
+__info__.version = '2.0.0-beta-9';
+__info__.date = '2022-06-09T12:32:25.382Z';
+__info__.hash = '83d4471';
 __info__.url = 'https://github.com/odoo/owl';

package/dist/owl.es.js

@@ -1287,29 +1287,35 @@ function html(str) {
 }
 
 function createCatcher(eventsSpec) {
-    let setupFns = [];
-    let removeFns = [];
-    for (let name in eventsSpec) {
-        let index = eventsSpec[name];
-        let { setup, remove } = createEventHandler(name);
-        setupFns[index] = setup;
-        removeFns[index] = remove;
-    }
-    let n = setupFns.length;
+    const n = Object.keys(eventsSpec).length;
     class VCatcher {
         constructor(child, handlers) {
+            this.handlerFns = [];
             this.afterNode = null;
             this.child = child;
-            this.handlers = handlers;
+            this.handlerData = handlers;
         }
         mount(parent, afterNode) {
             this.parentEl = parent;
-            this.afterNode = afterNode;
             this.child.mount(parent, afterNode);
+            this.afterNode = document.createTextNode("");
+            parent.insertBefore(this.afterNode, afterNode);
+            this.wrapHandlerData();
+            for (let name in eventsSpec) {
+                const index = eventsSpec[name];
+                const handler = createEventHandler(name);
+                this.handlerFns[index] = handler;
+                handler.setup.call(parent, this.handlerData[index]);
+            }
+        }
+        wrapHandlerData() {
             for (let i = 0; i < n; i++) {
-                let origFn = this.handlers[i][0];
+                let handler = this.handlerData[i];
+                // handler = [...mods, fn, comp], so we need to replace second to last elem
+                let idx = handler.length - 2;
+                let origFn = handler[idx];
                 const self = this;
-                this.handlers[i][0] = function (ev) {
+                handler[idx] = function (ev) {
                     const target = ev.target;
                     let currentNode = self.child.firstNode();
                     const afterNode = self.afterNode;
@@ -1320,18 +1326,21 @@ function createCatcher(eventsSpec) {
                         currentNode = currentNode.nextSibling;
                     }
                 };
-                setupFns[i].call(parent, this.handlers[i]);
             }
         }
         moveBefore(other, afterNode) {
-            this.afterNode = null;
             this.child.moveBefore(other ? other.child : null, afterNode);
+            this.parentEl.insertBefore(this.afterNode, afterNode);
         }
         patch(other, withBeforeRemove) {
             if (this === other) {
                 return;
             }
-            this.handlers = other.handlers;
+            this.handlerData = other.handlerData;
+            this.wrapHandlerData();
+            for (let i = 0; i < n; i++) {
+                this.handlerFns[i].update.call(this.parentEl, this.handlerData[i]);
+            }
             this.child.patch(other.child, withBeforeRemove);
         }
         beforeRemove() {
@@ -1339,9 +1348,10 @@ function createCatcher(eventsSpec) {
         }
         remove() {
             for (let i = 0; i < n; i++) {
-                removeFns[i].call(this.parentEl);
+                this.handlerFns[i].remove.call(this.parentEl);
             }
             this.child.remove();
+            this.afterNode.remove();
         }
         firstNode() {
             return this.child.firstNode();
@@ -2174,15 +2184,15 @@ function useComponent() {
 }
 /**
  * Apply default props (only top level).
- *
- * Note that this method does modify in place the props
  */
 function applyDefaultProps(props, defaultProps) {
+    const result = Object.assign({}, props);
     for (let propName in defaultProps) {
         if (props[propName] === undefined) {
-            props[propName] = defaultProps[propName];
+            result[propName] = defaultProps[propName];
         }
     }
+    return result;
 }
 // -----------------------------------------------------------------------------
 // Integration with reactivity system (useState)
@@ -2235,7 +2245,7 @@ function component(name, props, key, ctx, parent) {
             node.forceNextRender = false;
         }
         else {
-            const currentProps = node.component.props;
+            const currentProps = node.props;
             shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
         }
         if (shouldRender) {
@@ -2282,11 +2292,12 @@ class ComponentNode {
         currentNode = this;
         this.app = app;
         this.parent = parent;
+        this.props = props;
         this.parentKey = parentKey;
         this.level = parent ? parent.level + 1 : 0;
         const defaultProps = C.defaultProps;
         if (defaultProps) {
-            applyDefaultProps(props, defaultProps);
+            props = applyDefaultProps(props, defaultProps);
         }
         const env = (parent && parent.childEnv) || app.env;
         this.childEnv = env;
@@ -2397,13 +2408,14 @@ class ComponentNode {
         this.status = 2 /* DESTROYED */;
     }
     async updateAndRender(props, parentFiber) {
+        const rawProps = props;
         // update
         const fiber = makeChildFiber(this, parentFiber);
         this.fiber = fiber;
         const component = this.component;
         const defaultProps = component.constructor.defaultProps;
         if (defaultProps) {
-            applyDefaultProps(props, defaultProps);
+            props = applyDefaultProps(props, defaultProps);
         }
         currentNode = this;
         for (const key in props) {
@@ -2419,6 +2431,7 @@ class ComponentNode {
             return;
         }
         component.props = props;
+        this.props = rawProps;
         fiber.render();
         const parentRoot = parentFiber.root;
         if (this.willPatch.length) {
@@ -2921,22 +2934,33 @@ function safeOutput(value) {
     }
     let safeKey;
     let block;
-    if (value instanceof Markup) {
-        safeKey = `string_safe`;
-        block = html(value);
-    }
-    else if (value instanceof LazyValue) {
-        safeKey = `lazy_value`;
-        block = value.evaluate();
-    }
-    else if (value instanceof String || typeof value === "string") {
-        safeKey = "string_unsafe";
-        block = text(value);
-    }
-    else {
-        // Assuming it is a block
-        safeKey = "block_safe";
-        block = value;
+    switch (typeof value) {
+        case "object":
+            if (value instanceof Markup) {
+                safeKey = `string_safe`;
+                block = html(value);
+            }
+            else if (value instanceof LazyValue) {
+                safeKey = `lazy_value`;
+                block = value.evaluate();
+            }
+            else if (value instanceof String) {
+                safeKey = "string_unsafe";
+                block = text(value);
+            }
+            else {
+                // Assuming it is a block
+                safeKey = "block_safe";
+                block = value;
+            }
+            break;
+        case "string":
+            safeKey = "string_unsafe";
+            block = text(value);
+            break;
+        default:
+            safeKey = "string_unsafe";
+            block = text(String(value));
     }
     return toggler(safeKey, block);
 }
@@ -3438,15 +3462,17 @@ function compileExpr(expr) {
         .map((t) => paddedValues.get(t.value) || t.value)
         .join("");
 }
-const INTERP_REGEXP = /\{\{.*?\}\}/g;
-const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
-function interpolate(s) {
+const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
+function replaceDynamicParts(s, replacer) {
     let matches = s.match(INTERP_REGEXP);
     if (matches && matches[0].length === s.length) {
-        return `(${compileExpr(s.slice(2, -2))})`;
+        return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
     }
-    let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+    let r = s.replace(INTERP_REGEXP, (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}");
     return "`" + r + "`";
+}
+function interpolate(s) {
+    return replaceDynamicParts(s, compileExpr);
 }
 
 // using a non-html document so that <inner/outer>HTML serializes as XML instead
@@ -3946,8 +3972,8 @@ class CodeGenerator {
             this.target.hasRef = true;
             const isDynamic = INTERP_REGEXP.test(ast.ref);
             if (isDynamic) {
-                const str = ast.ref.replace(INTERP_REGEXP, (expr) => "${" + this.captureExpression(expr.slice(2, -2), true) + "}");
-                const idx = block.insertData(`(el) => refs[\`${str}\`] = el`, "ref");
+                const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
+                const idx = block.insertData(`(el) => refs[${str}] = el`, "ref");
                 attrs["block-ref"] = String(idx);
             }
             else {
@@ -4397,21 +4423,20 @@ class CodeGenerator {
         return `${name}: ${value || undefined}`;
     }
     formatPropObject(obj) {
-        const params = [];
-        for (const [n, v] of Object.entries(obj)) {
-            params.push(this.formatProp(n, v));
+        return Object.entries(obj).map(([k, v]) => this.formatProp(k, v));
+    }
+    getPropString(props, dynProps) {
+        let propString = `{${props.join(",")}}`;
+        if (dynProps) {
+            propString = `Object.assign({}, ${compileExpr(dynProps)}${props.length ? ", " + propString : ""})`;
         }
-        return params.join(", ");
+        return propString;
     }
     compileComponent(ast, ctx) {
         let { block } = ctx;
         // props
         const hasSlotsProp = "slots" in (ast.props || {});
-        const props = [];
-        const propExpr = this.formatPropObject(ast.props || {});
-        if (propExpr) {
-            props.push(propExpr);
-        }
+        const props = ast.props ? this.formatPropObject(ast.props) : [];
         // slots
         let slotDef = "";
         if (ast.slots) {
@@ -4434,7 +4459,7 @@ class CodeGenerator {
                     params.push(`__scope: "${scope}"`);
                 }
                 if (ast.slots[slotName].attrs) {
-                    params.push(this.formatPropObject(ast.slots[slotName].attrs));
+                    params.push(...this.formatPropObject(ast.slots[slotName].attrs));
                 }
                 const slotInfo = `{${params.join(", ")}}`;
                 slotStr.push(`'${slotName}': ${slotInfo}`);
@@ -4445,11 +4470,7 @@ class CodeGenerator {
             this.helpers.add("markRaw");
             props.push(`slots: markRaw(${slotDef})`);
         }
-        const propStr = `{${props.join(",")}}`;
-        let propString = propStr;
-        if (ast.dynamicProps) {
-            propString = `Object.assign({}, ${compileExpr(ast.dynamicProps)}${props.length ? ", " + propStr : ""})`;
-        }
+        let propString = this.getPropString(props, ast.dynamicProps);
         let propVar;
         if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
             propVar = generateId("props");
@@ -4521,7 +4542,12 @@ class CodeGenerator {
         else {
             slotName = "'" + ast.name + "'";
         }
-        const scope = ast.attrs ? `{${this.formatPropObject(ast.attrs)}}` : null;
+        const dynProps = ast.attrs ? ast.attrs["t-props"] : null;
+        if (ast.attrs) {
+            delete ast.attrs["t-props"];
+        }
+        const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
+        const scope = this.getPropString(props, dynProps);
         if (ast.defaultContent) {
             const name = this.compileInNewTarget("defaultContent", ast.defaultContent, ctx);
             blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope}, ${name})`;
@@ -5656,7 +5682,7 @@ 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 };
 
 
-__info__.version = '2.0.0-beta-8';
-__info__.date = '2022-05-31T12:25:19.319Z';
-__info__.hash = 'b56a9c2';
+__info__.version = '2.0.0-beta-9';
+__info__.date = '2022-06-09T12:32:25.382Z';
+__info__.hash = '83d4471';
 __info__.url = 'https://github.com/odoo/owl';