[REL] v2.0.1

# v2.0.1

- fix: runtime: correctly throw an error for duplicate object keys
- fix: parser: give t-set-slot="default" priority over the content
- fix: blockdom: correctly reorder children in heterogeneous t-foreach
- fix: portal: correctly move portal content when target is after it
- fix: blockdom: fix event_catcher traceback when a parent component has an empty child

package.json

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

src/runtime/blockdom/block_compiler.ts

@@ -517,8 +517,9 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBeforeDOMNode(node: Node | null) {
-      nodeInsertBefore.call(this.parentEl, this.el!, node);
+    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+      this.parentEl = parent;
+      nodeInsertBefore.call(parent, this.el!, node);
     }
 
     moveBeforeVNode(other: Block | null, afterNode: Node | null) {

src/runtime/blockdom/event_catcher.ts

@@ -46,7 +46,7 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
           const target = ev.target;
           let currentNode: any = self.child.firstNode();
           const afterNode = self.afterNode;
-          while (currentNode !== afterNode) {
+          while (currentNode && currentNode !== afterNode) {
             if (currentNode.contains(target)) {
               return origFn.call(this, ev);
             }
@@ -56,9 +56,10 @@ export function createCatcher(eventsSpec: EventsSpec): Catcher {
       }
     }
 
-    moveBeforeDOMNode(node: Node | null) {
-      this.child.moveBeforeDOMNode(node);
-      this.parentEl!.insertBefore(this.afterNode!, node);
+    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+      this.parentEl = parent;
+      this.child.moveBeforeDOMNode(node, parent);
+      parent!.insertBefore(this.afterNode!, node);
     }
 
     moveBeforeVNode(other: VCatcher | null, afterNode: Node | null) {

src/runtime/blockdom/html.ts

@@ -29,8 +29,8 @@ class VHtml {
     }
   }
 
-  moveBeforeDOMNode(node: Node | null) {
-    const parent = this.parentEl;
+  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+    this.parentEl = parent;
     for (let elem of this.content) {
       nodeInsertBefore.call(parent, elem, node);
     }

src/runtime/blockdom/index.ts

@@ -10,7 +10,7 @@ export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBeforeDOMNode(node: Node | null): void;
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void;
   moveBeforeVNode(other: T | null, afterNode: Node | null): void;
   patch(other: T, withBeforeRemove: boolean): void;
   beforeRemove(): void;

src/runtime/blockdom/list.ts

@@ -38,12 +38,13 @@ class VList {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null) {
+  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+    this.parentEl = parent;
     const children = this.children;
     for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeDOMNode(node);
+      children[i].moveBeforeDOMNode(node, parent);
     }
-    this.parentEl!.insertBefore(this.anchor!, node);
+    parent!.insertBefore(this.anchor!, node);
   }
 
   moveBeforeVNode(other: VList | null, afterNode: Node | null) {

src/runtime/blockdom/multi.ts

@@ -38,14 +38,14 @@ export class VMulti {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null) {
+  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+    this.parentEl = parent;
     const children = this.children;
-    const parent = this.parentEl;
     const anchors = this.anchors;
     for (let i = 0, l = children.length; i < l; i++) {
       let child = children[i];
       if (child) {
-        child.moveBeforeDOMNode(node);
+        child.moveBeforeDOMNode(node, parent);
       } else {
         const anchor = anchors![i];
         nodeInsertBefore.call(parent, anchor, node);

src/runtime/blockdom/text.ts

@@ -23,8 +23,9 @@ abstract class VSimpleNode {
     this.el = node;
   }
 
-  moveBeforeDOMNode(node: Node | null) {
-    nodeInsertBefore.call(this.parentEl, this.el!, node);
+  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
+    this.parentEl = parent;
+    nodeInsertBefore.call(parent, this.el!, node);
   }
 
   moveBeforeVNode(other: VText | null, afterNode: Node | null) {

src/runtime/blockdom/toggler.ts

@@ -20,8 +20,8 @@ class VToggler {
     this.child.mount(parent, afterNode);
   }
 
-  moveBeforeDOMNode(node: Node | null) {
-    this.child.moveBeforeDOMNode(node);
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement) {
+    this.child.moveBeforeDOMNode(node, parent);
   }
 
   moveBeforeVNode(other: VToggler | null, afterNode: Node | null) {

src/runtime/component_node.ts

@@ -306,8 +306,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.fiber = null;
   }
 
-  moveBeforeDOMNode(node: Node | null): void {
-    this.bdom!.moveBeforeDOMNode(node);
+  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void {
+    this.bdom!.moveBeforeDOMNode(node, parent);
   }
 
   moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {

src/runtime/portal.ts

@@ -75,7 +75,7 @@ export class Portal extends Component {
       if (!portal.target) {
         const target: HTMLElement = document.querySelector(this.props.target);
         if (target) {
-          portal.content!.moveBeforeVNode(target, null);
+          portal.content!.moveBeforeDOMNode(target.firstChild, target);
         } else {
           throw new OwlError("invalid portal target");
         }

tests/components/__snapshots__/t_on.test.ts.snap

@@ -456,3 +456,45 @@ exports[`t-on t-on on t-slots 2`] = `
   }
 }"
 `;
+
+exports[`t-on t-on when first component child is an empty component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { createCatcher } = helpers;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, false);
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click\\"><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['push'], ctx];
+    const hdlr2 = [()=>{}, ctx];
+    const b2 = catcher1(comp1({list: ctx['list']}, key + \`__1\`, node, this, null), [hdlr2]);
+    return block1([hdlr1], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on when first component child is an empty component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  let block2 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['props'].list);;
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`c\`] = v_block1[i1];
+      ctx[\`c_index\`] = i1;
+      const key1 = ctx['c_index'];
+      let txt1 = ctx['c'];
+      c_block1[i1] = withKey(block2([txt1]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;

tests/components/t_on.test.ts

@@ -41,6 +41,30 @@ describe("t-on", () => {
     expect(steps).toEqual(["click"]);
   });
 
+  test("t-on when first component child is an empty component", async () => {
+    class Child extends Component {
+      static template = xml`
+        <span t-foreach="props.list" t-as="c" t-key="c_index" t-esc="c"/>
+      `;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <div t-on-click="push"><Child list="list" t-on-click="() => {}"/></div>
+      `;
+      static components = { Child };
+      list = useState([] as string[]);
+      push() {
+        this.list.push("foo");
+      }
+    }
+    const parent = await mount(Parent, fixture);
+    const el = elem(parent);
+    expect(el.innerHTML).toBe("");
+    el.click();
+    await nextTick();
+    expect(el.innerHTML).toBe("<span>foo</span>");
+  });
+
   test("t-on expression in t-foreach", async () => {
     class Comp extends Component {
       static template = xml`

tests/misc/portal.test.ts

@@ -892,7 +892,7 @@ describe("Portal", () => {
     }
     await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe(
-      '<span>child</span><div class="portal"></div><span>portal</span>'
+      '<span>child</span><div class="portal"><span>portal</span></div>'
     );
   });