[REL] v1.3.2

# v1.3.2

Fixes

- components: correctly propagate errors to parent

README.md

@@ -120,7 +120,7 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.3.0](https://github.com/odoo/owl/releases/tag/v1.3.0)
+- [owl-1.3.2](https://github.com/odoo/owl/releases/tag/v1.3.2)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.3.0
+- Current version: 1.3.2
 - Status: stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

src/component/fiber.ts

@@ -326,16 +326,30 @@ export class Fiber {
 
     const qweb = component.env.qweb;
     let root = component;
-    let canCatch = false;
-    while (component && !(canCatch = !!component.catchError)) {
-      root = component;
-      component = component.__owl__.parent!;
-    }
-    qweb.trigger("error", error);
 
-    if (canCatch) {
-      component.catchError!(error);
-    } else {
+    function handle(error) {
+      let canCatch = false;
+      qweb.trigger("error", error);
+      while (component && !(canCatch = !!component.catchError)) {
+        root = component;
+        component = component.__owl__.parent!;
+      }
+      if (canCatch) {
+        try {
+          component.catchError!(error);
+        } catch (e) {
+          root = component;
+          component = component.__owl__.parent!;
+          return handle(e);
+        }
+        return true;
+      }
+      return false;
+    }
+
+    let isHandled = handle(error);
+
+    if (!isHandled) {
       // the 3 next lines aim to mark the root fiber as being in error, and
       // to force it to end, without waiting for its children
       this.root.counter = 0;

src/qweb/base_directives.ts

@@ -281,7 +281,9 @@ QWeb.addDirective({
 
     // Step 4: add the appropriate function call to current component
     // ------------------------------------------------
-    const parentComponent = `utils.getComponent(context)`;
+    const parentComponent = ctx.rootContext.shouldDefineParent
+      ? `parent`
+      : `utils.getComponent(context)`;
     const key = ctx.generateTemplateKey();
     const parentNode = ctx.parentNode ? `c${ctx.parentNode}` : "result";
     const extra = `Object.assign({}, extra, {parentNode: ${parentNode}, parent: ${parentComponent}, key: ${key}})`;

src/qweb/qweb.ts

@@ -436,6 +436,7 @@ export class QWeb extends EventBus {
       ctx.variables = Object.create(null);
       ctx.parentNode = ctx.generateID();
       ctx.allowMultipleRoots = true;
+      ctx.shouldDefineParent = true;
       ctx.hasParentWidget = true;
       ctx.shouldDefineResult = false;
       ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);

tests/component/__snapshots__/component.test.ts.snap

@@ -1573,6 +1573,7 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 ) {
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let h = this.h;
     let c2 = extra.parentNode;
     let key0 = extra.key || \\"\\";
@@ -1591,6 +1592,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
 ) {
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;

tests/component/__snapshots__/slots.test.ts.snap

@@ -68,6 +68,7 @@ exports[`t-slot directive can define and call slots 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_header_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -81,6 +82,7 @@ exports[`t-slot directive can define and call slots 4`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c6 = extra.parentNode;
     let c7 = [], p7 = {key:7};
@@ -158,6 +160,7 @@ exports[`t-slot directive can define and call slots using old t-set keyword 3`]
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_header_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -171,6 +174,7 @@ exports[`t-slot directive can define and call slots using old t-set keyword 4`]
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c6 = extra.parentNode;
     let c7 = [], p7 = {key:7};
@@ -184,6 +188,7 @@ exports[`t-slot directive content is the default slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -214,6 +219,7 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     c4.push({text: \`sts rocks\`});
@@ -243,6 +249,7 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -260,6 +267,7 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_content_template\\"
+    let parent = extra.parent;
     let h = this.h;
     let c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
@@ -295,6 +303,7 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
 ) {
     // Template name: \\"slot_footer_template\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     context.__owl__.refs = context.__owl__.refs || {};
     let h = this.h;
     let c8 = extra.parentNode;
@@ -321,6 +330,7 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
 ) {
     // Template name: \\"slot_footer_template\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let h = this.h;
     let c8 = extra.parentNode;
     let c9 = [], p9 = {key:9,on:{}};
@@ -418,6 +428,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c10 = extra.parentNode;
@@ -516,6 +527,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c10 = extra.parentNode;
@@ -570,6 +582,7 @@ exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c4 = extra.parentNode;

tests/component/error_handling.test.ts

@@ -1,4 +1,4 @@
-import { Component, Env, STATUS } from "../../src/component/component";
+import { Component, Env, mount, STATUS } from "../../src/component/component";
 import { useState } from "../../src/hooks";
 import { xml } from "../../src/tags";
 import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
@@ -520,4 +520,70 @@ describe("component error handling (catchError)", () => {
     expect(error).toBeDefined();
     expect(error.message).toBe("Cannot read property 'y' of undefined");
   });
+
+  test("simple catchError", async () => {
+    class Boom extends Component {
+      static template = xml`<div t-esc="a.b.c"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <t t-if="error">Error</t>
+          <t t-else="">
+            <Boom />
+          </t>
+        </div>`;
+      static components = { Boom };
+
+      error = false;
+
+      catchError(error) {
+        this.error = error;
+        this.render();
+      }
+    }
+
+    await mount(Parent, { target: fixture });
+    expect(fixture.innerHTML).toBe("<div>Error</div>");
+  });
+
+  test("catchError in catchError", async () => {
+    class Boom extends Component {
+      static template = xml`<div t-esc="a.b.c"/>`;
+    }
+
+    class Child extends Component {
+      static template = xml`
+        <div>
+          <Boom />
+        </div>`;
+      static components = { Boom };
+
+      catchError(error) {
+        throw error;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <t t-if="error">Error</t>
+          <t t-else="">
+            <Child />
+          </t>
+        </div>`;
+      static components = { Child };
+
+      error = false;
+
+      catchError(error) {
+        this.error = error;
+        this.render();
+      }
+    }
+
+    await mount(Parent, { target: fixture });
+    expect(fixture.innerHTML).toBe("<div>Error</div>");
+  });
 });

tests/component/slots.test.ts

@@ -1118,4 +1118,37 @@ describe("t-slot directive", () => {
 
     expect(env.qweb.templates[Toggler.template].fn.toString()).toMatchSnapshot();
   });
+
+  test("t-slot within dynamic t-call", async () => {
+    let child;
+    class Child extends Component {
+      static template = xml`<div class="child"/>`;
+      constructor(...args) {
+        super(...args);
+        child = this;
+      }
+    }
+
+    class Slotted extends Component {
+      static template = xml`<div class="slotted"><t t-slot="default" /></div>`;
+    }
+
+    class UsingTcallInSlotted extends Component {
+      tcallTemplate = xml`<div class="slot"><Child/></div>`;
+      static template = xml`
+      <div>
+        <Slotted>
+          <t t-call="{{ tcallTemplate }}"/>
+        </Slotted>
+      </div>`;
+      static components = { Slotted, Child };
+    }
+
+    await mount(UsingTcallInSlotted, { target: fixture });
+
+    expect(child.__owl__.parent).toBeInstanceOf(Slotted);
+    expect(fixture.innerHTML).toBe(
+      `<div><div class="slotted"><div class="slot"><div class="child"></div></div></div></div>`
+    );
+  });
 });

tests/qweb/__snapshots__/qweb.test.ts.snap

@@ -1514,6 +1514,7 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
 ) {
     // Template name: \\"recursive\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c3 = extra.parentNode;
@@ -1530,7 +1531,7 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
         scope = Object.create(scope);
         scope.__access_mode__ = 'ro';
         let k7 = \`__7__\${key0}__\`;
-        this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c4, parent: utils.getComponent(context), key: k7}));
+        this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c4, parent: parent, key: k7}));
         scope = _origScope6;
     }
 }"
@@ -1566,6 +1567,7 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
 ) {
     // Template name: \\"nodeTemplate\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;
@@ -1607,7 +1609,7 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
                 scope[utils.zero] = c__0;
             }
             let k11 = \`__11__\${key0}__\${key1}__\`;
-            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: utils.getComponent(context), key: k11}));
+            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: parent, key: k11}));
         }
         scope = _origScope10;
     }
@@ -1645,6 +1647,7 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
 ) {
     // Template name: \\"nodeTemplate\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;
@@ -1686,7 +1689,7 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
                 scope[utils.zero] = c__0;
             }
             let k11 = \`__11__\${key0}__\${key1}__\`;
-            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: utils.getComponent(context), key: k11}));
+            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: parent, key: k11}));
         }
         scope = _origScope10;
     }
@@ -1725,6 +1728,7 @@ exports[`t-call (template calling recursive template, part 4: with t-set recursi
 ) {
     // Template name: \\"nodeTemplate\\"
     let utils = this.constructor.utils;
+    let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
     let c2 = extra.parentNode;
@@ -1771,7 +1775,7 @@ exports[`t-call (template calling recursive template, part 4: with t-set recursi
                 scope[utils.zero] = c__0;
             }
             let k11 = \`__11__\${key0}__\${key1}__\`;
-            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: utils.getComponent(context), key: k11}));
+            this.constructor.subTemplates['1'].call(this, scope, Object.assign({}, extra, {parentNode: c3, parent: parent, key: k11}));
         }
         scope = _origScope10;
     }