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

package/dist/owl.iife.js

@@ -1290,29 +1290,35 @@
     }
 
     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;
@@ -1323,18 +1329,21 @@
                             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() {
@@ -1342,9 +1351,10 @@
             }
             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();
@@ -2177,15 +2187,15 @@
     }
     /**
      * 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)
@@ -2238,7 +2248,7 @@
                 node.forceNextRender = false;
             }
             else {
-                const currentProps = node.component.props;
+                const currentProps = node.props;
                 shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
             }
             if (shouldRender) {
@@ -2285,11 +2295,12 @@
             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;
@@ -2400,13 +2411,14 @@
             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) {
@@ -2422,6 +2434,7 @@
                 return;
             }
             component.props = props;
+            this.props = rawProps;
             fiber.render();
             const parentRoot = parentFiber.root;
             if (this.willPatch.length) {
@@ -2924,22 +2937,33 @@
         }
         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);
     }
@@ -3441,15 +3465,17 @@
             .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
@@ -3949,8 +3975,8 @@
                 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 {
@@ -4400,21 +4426,20 @@
             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) {
@@ -4437,7 +4462,7 @@
                         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}`);
@@ -4448,11 +4473,7 @@
                 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");
@@ -4524,7 +4545,12 @@
             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})`;
@@ -5693,9 +5719,9 @@ See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration
     Object.defineProperty(exports, '__esModule', { value: true });
 
 
-    __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';