@odoo/owl 2.0.0-beta-20 → 2.0.0-beta-22

package/README.md

@@ -124,5 +124,5 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
+- [owl](https://github.com/odoo/owl/releases/latest)
 

package/dist/owl.cjs.js

@@ -676,6 +676,15 @@ function buildTree(node, parent = null, domParentTree = null) {
                     : document.createElement(tagName);
             }
             if (el instanceof Element) {
+                if (!domParentTree) {
+                    // some html elements may have side effects when setting their attributes.
+                    // For example, setting the src attribute of an <img/> will trigger a
+                    // request to get the corresponding image. This is something that we
+                    // don't want at compile time. We avoid that by putting the content of
+                    // the block in a <template/> element
+                    const fragment = document.createElement("template").content;
+                    fragment.appendChild(el);
+                }
                 for (let i = 0; i < attrs.length; i++) {
                     const attrName = attrs[i].name;
                     const attrValue = attrs[i].value;
@@ -2600,67 +2609,71 @@ Component.template = "";
 
 const VText = text("").constructor;
 class VPortal extends VText {
-    constructor(selector, realBDom) {
+    constructor(selector, content) {
         super("");
         this.target = null;
         this.selector = selector;
-        this.realBDom = realBDom;
+        this.content = content;
     }
     mount(parent, anchor) {
         super.mount(parent, anchor);
         this.target = document.querySelector(this.selector);
-        if (!this.target) {
-            let el = this.el;
-            while (el && el.parentElement instanceof HTMLElement) {
-                el = el.parentElement;
-            }
-            this.target = el && el.querySelector(this.selector);
-            if (!this.target) {
-                throw new OwlError("invalid portal target");
-            }
+        if (this.target) {
+            this.content.mount(this.target, null);
+        }
+        else {
+            this.content.mount(parent, anchor);
         }
-        this.realBDom.mount(this.target, null);
     }
     beforeRemove() {
-        this.realBDom.beforeRemove();
+        this.content.beforeRemove();
     }
     remove() {
-        if (this.realBDom) {
+        if (this.content) {
             super.remove();
-            this.realBDom.remove();
-            this.realBDom = null;
+            this.content.remove();
+            this.content = null;
         }
     }
     patch(other) {
         super.patch(other);
-        if (this.realBDom) {
-            this.realBDom.patch(other.realBDom, true);
+        if (this.content) {
+            this.content.patch(other.content, true);
         }
         else {
-            this.realBDom = other.realBDom;
-            this.realBDom.mount(this.target, null);
+            this.content = other.content;
+            this.content.mount(this.target, null);
         }
     }
 }
 /**
- * <t t-slot="default"/>
+ * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
  */
 function portalTemplate(app, bdom, helpers) {
     let { callSlot } = helpers;
     return function template(ctx, node, key = "") {
-        return callSlot(ctx, node, key, "default", false, null);
+        return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
     };
 }
 class Portal extends Component {
     setup() {
         const node = this.__owl__;
-        const renderFn = node.renderFn;
-        node.renderFn = () => new VPortal(this.props.target, renderFn());
-        onWillUnmount(() => {
-            if (node.bdom) {
-                node.bdom.remove();
+        onMounted(() => {
+            const portal = node.bdom;
+            if (!portal.target) {
+                const target = document.querySelector(this.props.target);
+                if (target) {
+                    portal.content.moveBefore(target, null);
+                }
+                else {
+                    throw new OwlError("invalid portal target");
+                }
             }
         });
+        onWillUnmount(() => {
+            const portal = node.bdom;
+            portal.remove();
+        });
     }
 }
 Portal.template = "__portal__";
@@ -2894,14 +2907,15 @@ function shallowEqual(l1, l2) {
     return true;
 }
 class LazyValue {
-    constructor(fn, ctx, component, node) {
+    constructor(fn, ctx, component, node, key) {
         this.fn = fn;
         this.ctx = capture(ctx);
         this.component = component;
         this.node = node;
+        this.key = key;
     }
     evaluate() {
-        return this.fn.call(this.component, this.ctx, this.node);
+        return this.fn.call(this.component, this.ctx, this.node, this.key);
     }
     toString() {
         return this.evaluate().toString();
@@ -2983,10 +2997,10 @@ function multiRefSetter(refs, name) {
  * visit recursively the props and all the children to check if they are valid.
  * This is why it is only done in 'dev' mode.
  */
-function validateProps(name, props, parent) {
+function validateProps(name, props, comp) {
     const ComponentClass = typeof name !== "string"
         ? name
-        : parent.constructor.components[name];
+        : comp.constructor.components[name];
     if (!ComponentClass) {
         // this is an error, wrong component. We silently return here instead so the
         // error is triggered by the usual path ('component' function)
@@ -2994,7 +3008,7 @@ function validateProps(name, props, parent) {
     }
     const schema = ComponentClass.props;
     if (!schema) {
-        if (parent.__owl__.app.warnIfNoStaticProps) {
+        if (comp.__owl__.app.warnIfNoStaticProps) {
             console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
         }
         return;
@@ -3587,6 +3601,13 @@ class CodeTarget {
         result.push(`}`);
         return result.join("\n  ");
     }
+    currentKey(ctx) {
+        let key = this.loopLevel ? `key${this.loopLevel}` : "key";
+        if (ctx.tKeyExpr) {
+            key = `${ctx.tKeyExpr} + ${key}`;
+        }
+        return key;
+    }
 }
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
 const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
@@ -3716,18 +3737,14 @@ class CodeGenerator {
     }
     insertBlock(expression, block, ctx) {
         let blockExpr = block.generateExpr(expression);
-        const tKeyExpr = ctx.tKeyExpr;
         if (block.parentVar) {
-            let keyArg = `key${this.target.loopLevel}`;
-            if (tKeyExpr) {
-                keyArg = `${tKeyExpr} + ${keyArg}`;
-            }
+            let key = this.target.currentKey(ctx);
             this.helpers.add("withKey");
-            this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${keyArg});`);
+            this.addLine(`${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, ${key});`);
             return;
         }
-        if (tKeyExpr) {
-            blockExpr = `toggler(${tKeyExpr}, ${blockExpr})`;
+        if (ctx.tKeyExpr) {
+            blockExpr = `toggler(${ctx.tKeyExpr}, ${blockExpr})`;
         }
         if (block.isRoot && !ctx.preventRoot) {
             if (this.target.on) {
@@ -3772,74 +3789,62 @@ class CodeGenerator {
         })
             .join("");
     }
+    /**
+     * @returns the newly created block name, if any
+     */
     compileAST(ast, ctx) {
         switch (ast.type) {
             case 1 /* Comment */:
-                this.compileComment(ast, ctx);
-                break;
+                return this.compileComment(ast, ctx);
             case 0 /* Text */:
-                this.compileText(ast, ctx);
-                break;
+                return this.compileText(ast, ctx);
             case 2 /* DomNode */:
-                this.compileTDomNode(ast, ctx);
-                break;
+                return this.compileTDomNode(ast, ctx);
             case 4 /* TEsc */:
-                this.compileTEsc(ast, ctx);
-                break;
+                return this.compileTEsc(ast, ctx);
             case 8 /* TOut */:
-                this.compileTOut(ast, ctx);
-                break;
+                return this.compileTOut(ast, ctx);
             case 5 /* TIf */:
-                this.compileTIf(ast, ctx);
-                break;
+                return this.compileTIf(ast, ctx);
             case 9 /* TForEach */:
-                this.compileTForeach(ast, ctx);
-                break;
+                return this.compileTForeach(ast, ctx);
             case 10 /* TKey */:
-                this.compileTKey(ast, ctx);
-                break;
+                return this.compileTKey(ast, ctx);
             case 3 /* Multi */:
-                this.compileMulti(ast, ctx);
-                break;
+                return this.compileMulti(ast, ctx);
             case 7 /* TCall */:
-                this.compileTCall(ast, ctx);
-                break;
+                return this.compileTCall(ast, ctx);
             case 15 /* TCallBlock */:
-                this.compileTCallBlock(ast, ctx);
-                break;
+                return this.compileTCallBlock(ast, ctx);
             case 6 /* TSet */:
-                this.compileTSet(ast, ctx);
-                break;
+                return this.compileTSet(ast, ctx);
             case 11 /* TComponent */:
-                this.compileComponent(ast, ctx);
-                break;
+                return this.compileComponent(ast, ctx);
             case 12 /* TDebug */:
-                this.compileDebug(ast, ctx);
-                break;
+                return this.compileDebug(ast, ctx);
             case 13 /* TLog */:
-                this.compileLog(ast, ctx);
-                break;
+                return this.compileLog(ast, ctx);
             case 14 /* TSlot */:
-                this.compileTSlot(ast, ctx);
-                break;
+                return this.compileTSlot(ast, ctx);
             case 16 /* TTranslation */:
-                this.compileTTranslation(ast, ctx);
-                break;
+                return this.compileTTranslation(ast, ctx);
             case 17 /* TPortal */:
-                this.compileTPortal(ast, ctx);
+                return this.compileTPortal(ast, ctx);
         }
     }
     compileDebug(ast, ctx) {
         this.addLine(`debugger;`);
         if (ast.content) {
-            this.compileAST(ast.content, ctx);
+            return this.compileAST(ast.content, ctx);
         }
+        return null;
     }
     compileLog(ast, ctx) {
         this.addLine(`console.log(${compileExpr(ast.expr)});`);
         if (ast.content) {
-            this.compileAST(ast.content, ctx);
+            return this.compileAST(ast.content, ctx);
         }
+        return null;
     }
     compileComment(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3855,6 +3860,7 @@ class CodeGenerator {
             const text = xmlDoc.createComment(ast.value);
             block.insert(text);
         }
+        return block.varName;
     }
     compileText(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -3874,6 +3880,7 @@ class CodeGenerator {
             const createFn = ast.type === 0 /* Text */ ? xmlDoc.createTextNode : xmlDoc.createComment;
             block.insert(createFn.call(xmlDoc, value));
         }
+        return block.varName;
     }
     generateHandlerCode(rawEvent, handler) {
         const modifiers = rawEvent
@@ -4066,6 +4073,7 @@ class CodeGenerator {
                 this.addLine(`let ${block.children.map((c) => c.varName)};`, codeIdx);
             }
         }
+        return block.varName;
     }
     compileTEsc(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -4090,6 +4098,7 @@ class CodeGenerator {
             const text = xmlDoc.createElement(`block-text-${idx}`);
             block.insert(text);
         }
+        return block.varName;
     }
     compileTOut(ast, ctx) {
         let { block } = ctx;
@@ -4115,6 +4124,7 @@ class CodeGenerator {
             blockStr = `safeOutput(${compileExpr(ast.expr)})`;
         }
         this.insertBlock(blockStr, block, ctx);
+        return block.varName;
     }
     compileTIfBranch(content, block, ctx) {
         this.target.indentLevel++;
@@ -4169,6 +4179,7 @@ class CodeGenerator {
             const args = block.children.map((c) => c.varName).join(", ");
             this.insertBlock(`multi([${args}])`, block, ctx);
         }
+        return block.varName;
     }
     compileTForeach(ast, ctx) {
         let { block } = ctx;
@@ -4241,6 +4252,7 @@ class CodeGenerator {
             this.addLine(`ctx = ctx.__proto__;`);
         }
         this.insertBlock("l", block, ctx);
+        return block.varName;
     }
     compileTKey(ast, ctx) {
         const tKeyExpr = generateId("tKey_");
@@ -4250,7 +4262,7 @@ class CodeGenerator {
             block: ctx.block,
             index: ctx.index,
         });
-        this.compileAST(ast.content, ctx);
+        return this.compileAST(ast.content, ctx);
     }
     compileMulti(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -4258,11 +4270,13 @@ class CodeGenerator {
         let codeIdx = this.target.code.length;
         if (isNewBlock) {
             const n = ast.content.filter((c) => c.type !== 6 /* TSet */).length;
+            let result = null;
             if (n <= 1) {
                 for (let child of ast.content) {
-                    this.compileAST(child, ctx);
+                    const blockName = this.compileAST(child, ctx);
+                    result = result || blockName;
                 }
-                return;
+                return result;
             }
             block = this.createBlock(block, "multi", ctx);
         }
@@ -4302,6 +4316,7 @@ class CodeGenerator {
             const args = block.children.map((c) => c.varName).join(", ");
             this.insertBlock(`multi([${args}])`, block, ctx);
         }
+        return block.varName;
     }
     compileTCall(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -4314,12 +4329,11 @@ class CodeGenerator {
             this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
             this.addLine(`${ctxVar}[isBoundary] = 1;`);
             this.helpers.add("isBoundary");
-            const nextId = BlockDescription.nextBlockId;
             const subCtx = createContext(ctx, { preventRoot: true, ctxVar });
-            this.compileAST({ type: 3 /* Multi */, content: ast.body }, subCtx);
-            if (nextId !== BlockDescription.nextBlockId) {
+            const bl = this.compileMulti({ type: 3 /* Multi */, content: ast.body }, subCtx);
+            if (bl) {
                 this.helpers.add("zero");
-                this.addLine(`${ctxVar}[zero] = b${nextId};`);
+                this.addLine(`${ctxVar}[zero] = ${bl};`);
             }
         }
         const isDynamic = INTERP_REGEXP.test(ast.name);
@@ -4354,6 +4368,7 @@ class CodeGenerator {
         if (ast.body && !ctx.isLast) {
             this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
         }
+        return block.varName;
     }
     compileTCallBlock(ast, ctx) {
         let { block, forceNewBlock } = ctx;
@@ -4364,6 +4379,7 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+        return block.varName;
     }
     compileTSet(ast, ctx) {
         this.target.shouldProtectScope = true;
@@ -4373,7 +4389,8 @@ class CodeGenerator {
             this.helpers.add("LazyValue");
             const bodyAst = { type: 3 /* Multi */, content: ast.body };
             const name = this.compileInNewTarget("value", bodyAst, ctx);
-            let value = `new LazyValue(${name}, ctx, this, node)`;
+            let key = this.target.currentKey(ctx);
+            let value = `new LazyValue(${name}, ctx, this, node, ${key})`;
             value = ast.value ? (value ? `withDefault(${expr}, ${value})` : expr) : value;
             this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
         }
@@ -4393,6 +4410,7 @@ class CodeGenerator {
             this.helpers.add("setContextValue");
             this.addLine(`setContextValue(${ctx.ctxVar || "ctx"}, "${ast.name}", ${value});`);
         }
+        return null;
     }
     generateComponentKey() {
         const parts = [generateId("__")];
@@ -4498,7 +4516,7 @@ class CodeGenerator {
             expr = `\`${ast.name}\``;
         }
         if (this.dev) {
-            this.addLine(`helpers.validateProps(${expr}, ${propVar}, ctx);`);
+            this.addLine(`helpers.validateProps(${expr}, ${propVar}, this);`);
         }
         if (block && (ctx.forceNewBlock === false || ctx.tKeyExpr)) {
             // todo: check the forcenewblock condition
@@ -4523,6 +4541,7 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(blockExpr, block, ctx);
+        return block.varName;
     }
     wrapWithEventCatcher(expr, on) {
         this.helpers.add("createCatcher");
@@ -4589,11 +4608,13 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+        return block.varName;
     }
     compileTTranslation(ast, ctx) {
         if (ast.content) {
-            this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
+            return this.compileAST(ast.content, Object.assign({}, ctx, { translate: false }));
         }
+        return null;
     }
     compileTPortal(ast, ctx) {
         if (!this.staticDefs.find((d) => d.id === "Portal")) {
@@ -4620,6 +4641,7 @@ class CodeGenerator {
         }
         block = this.createBlock(block, "multi", ctx);
         this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+        return block.varName;
     }
 }
 
@@ -5787,7 +5809,7 @@ exports.whenReady = whenReady;
 exports.xml = xml;
 
 
-__info__.version = '2.0.0-beta-20';
-__info__.date = '2022-09-09T07:26:24.123Z';
-__info__.hash = 'b51756f';
+__info__.version = '2.0.0-beta-22';
+__info__.date = '2022-09-29T07:17:18.044Z';
+__info__.hash = '64bad25';
 __info__.url = 'https://github.com/odoo/owl';