sync rendering

src/runtime/component_node.ts

@@ -6,7 +6,7 @@ import { OwlError } from "../common/owl_error";
 import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
 import { STATUS } from "./status";
-import { batched, Callback } from "./utils";
+import { batched, Callback, possiblySync } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -128,21 +128,29 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.initiateRender(fiber);
   }
 
-  async initiateRender(fiber: Fiber | MountFiber) {
+  initiateRender(fiber: Fiber | MountFiber) {
     this.fiber = fiber;
     if (this.mounted.length) {
       fiber.root!.mounted.push(fiber);
     }
     const component = this.component;
-    try {
+    return possiblySync(
-      await Promise.all(this.willStart.map((f) => f.call(component)));
+      () => {
-    } catch (e) {
+        const willStartResults = this.willStart.map((f) => f.call(component));
-      this.app.handleError({ node: this, error: e });
+        if (willStartResults.some((r) => typeof r?.then === "function")) {
-      return;
+          return Promise.all(willStartResults);
         }
+        return;
+      },
+      () => {
         if (this.status === STATUS.NEW && this.fiber === fiber) {
           fiber.render();
         }
+      },
+      (e: any) => {
+        this.app.handleError({ node: this, error: e });
+      }
+    );
   }
 
   async render(deep: boolean) {
@@ -238,7 +246,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     this.status = STATUS.DESTROYED;
   }
 
-  async updateAndRender(props: P, parentFiber: Fiber) {
+  updateAndRender(props: P, parentFiber: Fiber) {
     this.nextProps = props;
     props = Object.assign({}, props);
     // update
@@ -258,8 +266,15 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       }
     }
     currentNode = null;
-    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    return possiblySync(
-    await prom;
+      () => {
+        const willUpdateProps = this.willUpdateProps.map((f) => f.call(component, props));
+        if (willUpdateProps.some((p) => typeof p?.then === "function")) {
+          return Promise.all(willUpdateProps);
+        }
+        return;
+      },
+      () => {
         if (fiber !== this.fiber) {
           return;
         }
@@ -273,6 +288,8 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
           parentRoot.patched.push(fiber);
         }
       }
+    );
+  }
 
   /**
    * Finds a child that has dom that is not yet updated, and update it. This

src/runtime/utils.ts

@@ -88,3 +88,24 @@ export class Markup extends String {}
 export function markup(value: any) {
   return new Markup(value);
 }
+
+export function possiblySync(computation: Function, onSuccess: Function, onError?: Function) {
+  try {
+    let result;
+    if (onError) {
+      try {
+        result = computation();
+      } catch (e) {
+        return onError(e);
+      }
+    } else {
+      result = computation();
+    }
+    if (typeof result?.then === "function") {
+      return result.then(onSuccess, onError);
+    }
+    return onSuccess(result);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+}

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

@@ -1861,10 +1861,10 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
+  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`D\`);
+    const b2 = text(\`C\`);
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);
@@ -1878,10 +1878,10 @@ exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] =
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   
-  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
+  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    const b2 = text(\`C\`);
+    const b2 = text(\`D\`);
     let hdlr1 = [ctx['increment'], ctx];
     let txt1 = ctx['state'].val;
     const b3 = block3([hdlr1, txt1]);

tests/components/error_handling.test.ts

@@ -76,8 +76,9 @@ describe("basics", () => {
     }
     const app = new App(Parent);
     let error: Error;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       'Cannot find the definition of component "SomeMispelledComponent"'
     );
     await mountProm;
@@ -96,8 +97,9 @@ describe("basics", () => {
     }
     const app = new App(Parent, { test: true });
     let error: Error;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       'Cannot find the definition of component "SomeMispelledComponent"'
     );
     await mountProm;
@@ -116,8 +118,9 @@ describe("basics", () => {
     }
     const app = new App(Parent as typeof Component);
     let error: Error;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       '"SomeComponent" is not a Component. It must inherit from the Component class'
     );
     await mountProm;
@@ -133,8 +136,9 @@ describe("basics", () => {
     }
     const app = new App(Parent as typeof Component);
     let error: Error;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       'Cannot find the definition of component "MissingChild", missing static components key in parent'
     );
     await mountProm;
@@ -197,8 +201,9 @@ function(app, bdom, helpers) {
 }`;
     const app = new App(Parent as typeof Component);
     let error: Error;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(expectedErrorMessage);
+    await expect(appError).resolves.toThrow(expectedErrorMessage);
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(expectedErrorMessage);
@@ -244,8 +249,9 @@ describe("errors and promises", () => {
 
     const app = new App(Root);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -268,8 +274,9 @@ describe("errors and promises", () => {
 
     const app = new App(Root);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -291,8 +298,9 @@ describe("errors and promises", () => {
 
     const app = new App(Root, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await expect(appError).resolves.toThrow("error occurred in onMounted");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.stack).toContain("Root.setup");
@@ -317,8 +325,9 @@ describe("errors and promises", () => {
 
     const app = new App(Root, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillRender");
+    await expect(appError).resolves.toThrow("error occurred in onWillRender");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -358,8 +367,9 @@ describe("errors and promises", () => {
 
     const app = new App(Root, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await expect(appError).resolves.toThrow("error occurred in onWillStart");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -426,8 +436,9 @@ describe("errors and promises", () => {
 
     const app = new App(Parent);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -472,8 +483,9 @@ describe("errors and promises", () => {
 
     const app = new App(Parent);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -502,8 +514,9 @@ describe("errors and promises", () => {
 
     const app = new App(Example, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await expect(appError).resolves.toThrow("error occurred in onMounted");
     await mountProm;
     expect(error!.message).toBe(`The following error occurred in onMounted: "Error in mounted"`);
     // 1 additional error is logged because the destruction of the app causes
@@ -577,9 +590,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
-    const crashProm = expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    const appError = nextAppError(app);
     await app.mount(fixture).catch((e: Error) => (error = e));
-    await crashProm;
+    await expect(appError).resolves.toThrow("error occurred in onWillStart");
     expect(error!.message).toBe(
       `The following error occurred in onWillStart: "No active component (a hook function should only be called in 'setup')"`
     );
@@ -599,8 +612,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onMounted");
+    await expect(appError).resolves.toThrow("error occurred in onMounted");
     await mountProm;
     expect(error!.message).toBe(`The following error occurred in onMounted: "test error"`);
     expect(error!.cause).toBe(err);
@@ -621,8 +635,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occurred in onWillStart");
+    await expect(appError).resolves.toThrow("error occurred in onWillStart");
     await mountProm;
     expect(error!.message).toBe(`The following error occurred in onWillStart: "test error"`);
     expect(error!.cause).toBe(err);
@@ -642,8 +657,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
@@ -666,8 +682,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
@@ -688,8 +705,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root, { test: true });
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("not an Error was thrown in onMounted");
+    await expect(appError).resolves.toThrow("not an Error was thrown in onMounted");
     await mountProm;
     expect(error!.message).toBe(
       `Something that is not an Error was thrown in onMounted (see this Error's "cause" property)`
@@ -710,8 +728,9 @@ describe("can catch errors", () => {
     }
     const app = new App(Root);
     let error: OwlError;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!.message).toBe(
       `An error occured in the owl lifecycle (see this Error's "cause" property)`
@@ -956,13 +975,13 @@ describe("can catch errors", () => {
         "Root:willRender",
         "ErrorBoundary:setup",
         "ErrorBoundary:willStart",
-        "Root:rendered",
         "ErrorBoundary:willRender",
         "ErrorComponent:setup",
         "ErrorComponent:willStart",
-        "ErrorBoundary:rendered",
         "ErrorComponent:willRender",
         "ErrorComponent:rendered",
+        "ErrorBoundary:rendered",
+        "Root:rendered",
         "ErrorComponent:mounted",
         "boom",
         "ErrorBoundary:willRender",
@@ -1008,9 +1027,9 @@ describe("can catch errors", () => {
         "Root:willRender",
         "ErrorComponent:setup",
         "ErrorComponent:willStart",
-        "Root:rendered",
         "ErrorComponent:willRender",
         "ErrorComponent:rendered",
+        "Root:rendered",
         "ErrorComponent:mounted",
         "boom",
         "Root:willRender",
@@ -1071,17 +1090,17 @@ describe("can catch errors", () => {
         "A:willRender",
         "B:setup",
         "B:willStart",
-        "A:rendered",
         "B:willRender",
         "C:setup",
         "C:willStart",
-        "B:rendered",
         "C:willRender",
         "Boom:setup",
         "Boom:willStart",
-        "C:rendered",
         "Boom:willRender",
         "Boom:rendered",
+        "C:rendered",
+        "B:rendered",
+        "A:rendered",
         "Boom:mounted",
         "boom",
         "C:willRender",
@@ -1144,17 +1163,17 @@ describe("can catch errors", () => {
         "Root:willRender",
         "OK:setup",
         "OK:willStart",
-        "ErrorBoundary:setup",
-        "ErrorBoundary:willStart",
-        "Root:rendered",
         "OK:willRender",
         "OK:rendered",
+        "ErrorBoundary:setup",
+        "ErrorBoundary:willStart",
         "ErrorBoundary:willRender",
         "ErrorComponent:setup",
         "ErrorComponent:willStart",
-        "ErrorBoundary:rendered",
         "ErrorComponent:willRender",
         "ErrorComponent:rendered",
+        "ErrorBoundary:rendered",
+        "Root:rendered",
         "ErrorComponent:mounted",
         "boom",
         "ErrorBoundary:willRender",
@@ -1497,9 +1516,9 @@ describe("can catch errors", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -1576,9 +1595,9 @@ describe("can catch errors", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
       ]
     `);
     parent.state.hasChild = false;

tests/components/hooks.test.ts

@@ -660,8 +660,9 @@ describe("hooks", () => {
 
       let error: OwlError;
       const app = new App(MyComponent);
+      const appError = nextAppError(app);
       const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+      await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
       await mountProm;
       expect(error!.cause.message).toBe("Intentional error");
       // no console.error because the error has been caught in this test

tests/components/lifecycle.test.ts

@@ -342,15 +342,16 @@ describe("lifecycle hooks", () => {
     parent.state.n = 2;
     await nextTick();
     app.destroy();
-    expect(steps).toEqual([
+    expect(steps.splice(0)).toMatchInlineSnapshot(`
+      Array [
         "parent:willPatch",
-      "child:willPatch",
         "childchild:willPatch",
-      "childchild:patched",
+        "child:willPatch",
         "child:patched",
+        "childchild:patched",
         "parent:patched",
-    ]);
+      ]
-    Object.freeze(steps);
+    `);
   });
 
   test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
@@ -463,9 +464,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -478,9 +479,9 @@ describe("lifecycle hooks", () => {
       Array [
         "Parent:willRender",
         "Child:willUpdateProps",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Parent:willPatch",
         "Child:willPatch",
         "Child:patched",
@@ -528,9 +529,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -650,9 +651,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -712,13 +713,13 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "GrandChild:setup",
         "GrandChild:willStart",
-        "Child:rendered",
         "GrandChild:willRender",
         "GrandChild:rendered",
+        "Child:rendered",
+        "Parent:rendered",
         "Parent:willPatch",
         "GrandChild:mounted",
         "Child:mounted",
@@ -834,11 +835,11 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "GrandChild:setup",
         "GrandChild:willStart",
         "Child:rendered",
+        "Parent:rendered",
       ]
     `);
 
@@ -878,9 +879,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -925,9 +926,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -939,9 +940,9 @@ describe("lifecycle hooks", () => {
       Array [
         "Parent:willRender",
         "Child:willUpdateProps",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Parent:willPatch",
         "Child:willPatch",
         "Child:patched",
@@ -986,9 +987,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -1113,21 +1114,21 @@ describe("lifecycle hooks", () => {
         "A:willRender",
         "B:setup",
         "B:willStart",
-        "C:setup",
-        "C:willStart",
-        "A:rendered",
         "B:willRender",
         "B:rendered",
+        "C:setup",
+        "C:willStart",
         "C:willRender",
         "D:setup",
         "D:willStart",
-        "E:setup",
-        "E:willStart",
-        "C:rendered",
         "D:willRender",
         "D:rendered",
+        "E:setup",
+        "E:willStart",
         "E:willRender",
         "E:rendered",
+        "C:rendered",
+        "A:rendered",
         "E:mounted",
         "D:mounted",
         "C:mounted",
@@ -1144,9 +1145,9 @@ describe("lifecycle hooks", () => {
         "C:willRender",
         "F:setup",
         "F:willStart",
-        "C:rendered",
         "F:willRender",
         "F:rendered",
+        "C:rendered",
         "C:willPatch",
         "E:willUnmount",
         "E:willDestroy",
@@ -1181,9 +1182,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -1209,9 +1210,9 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Parent:willPatch",
         "Child:mounted",
         "Parent:patched",
@@ -1465,6 +1466,8 @@ describe("lifecycle hooks", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Parent:rendered",
         "Parent:willUnmount",
         "Child:willDestroy",

tests/components/props.test.ts

@@ -279,9 +279,9 @@ test("bound functions are considered 'alike'", async () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]
@@ -341,9 +341,9 @@ test(".alike suffix in a simple case", async () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]
@@ -403,13 +403,13 @@ test(".alike suffix in a list", async () => {
       "Parent:willRender",
       "Todo:setup",
       "Todo:willStart",
+      "Todo:willRender",
+      "Todo:rendered",
       "Todo:setup",
       "Todo:willStart",
+      "Todo:willRender",
+      "Todo:rendered",
       "Parent:rendered",
-      "Todo:willRender",
-      "Todo:rendered",
-      "Todo:willRender",
-      "Todo:rendered",
       "Todo:mounted",
       "Todo:mounted",
       "Parent:mounted",

tests/components/props_validation.test.ts

@@ -51,8 +51,9 @@ describe("props validation", () => {
 
     const app = new App(Parent, { test: true });
     let error: OwlError | undefined;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       "Invalid props for component 'SubComp': 'message' is missing"
     );
     await mountProm;
@@ -80,8 +81,9 @@ describe("props validation", () => {
 
     const app = new App(Parent, { test: true });
     let error: OwlError | undefined;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       "Invalid props for component 'SubComp': 'message' is missing"
     );
     await mountProm;
@@ -131,8 +133,9 @@ describe("props validation", () => {
       props = {};
       let app = new App(Parent, { test: true });
       let error: OwlError | undefined;
+      let appError = nextAppError(app);
       let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -148,8 +151,9 @@ describe("props validation", () => {
       expect(error!).toBeUndefined();
       props = { p: test.ko };
       app = new App(Parent, { test: true });
+      appError = nextAppError(app);
       mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -183,8 +187,9 @@ describe("props validation", () => {
       props = {};
       let app = new App(Parent, { test: true });
       let error: OwlError | undefined;
+      let appError = nextAppError(app);
       let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -200,8 +205,9 @@ describe("props validation", () => {
       expect(error!).toBeUndefined();
       props = { p: test.ko };
       app = new App(Parent, { test: true });
+      appError = nextAppError(app);
       mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow("Invalid props for component '_a'");
+      await expect(appError).resolves.toThrow("Invalid props for component '_a'");
       await mountProm;
       expect(error!).toBeDefined();
       expect(error!.message).toBe(
@@ -240,8 +246,9 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: 1 };
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -279,8 +286,9 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: 1 };
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is not a string");
@@ -316,14 +324,16 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: [1] };
     let app = new App(Parent, { test: true });
+    let appError = nextAppError(app);
     let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     error = undefined;
     app = new App(Parent, { test: true });
+    appError = nextAppError(app);
     mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
   });
@@ -365,8 +375,9 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: [true, 1] };
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -399,8 +410,9 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: { id: 1, url: "url", extra: true } };
     let app = new App(Parent, { test: true });
+    let appError = nextAppError(app);
     let mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -408,8 +420,9 @@ describe("props validation", () => {
     );
     props = { p: { id: "1", url: "url" } };
     app = new App(Parent, { test: true });
+    appError = nextAppError(app);
     mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -418,8 +431,9 @@ describe("props validation", () => {
     error = undefined;
     props = { p: { id: 1 } };
     app = new App(Parent, { test: true });
+    appError = nextAppError(app);
     mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -465,8 +479,9 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     props = { p: { id: 1, url: [12, true] } };
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -675,8 +690,9 @@ describe("props validation", () => {
     }
     let error: Error;
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'SubComp'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'SubComp'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'SubComp': 'p' is missing");
@@ -765,8 +781,9 @@ describe("props validation", () => {
     }
     let error: Error;
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("Invalid props for component 'Child'");
+    await expect(appError).resolves.toThrow("Invalid props for component 'Child'");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(
@@ -821,8 +838,9 @@ describe("props validation", () => {
 
     const app = new App(Parent, { test: true });
     let error: OwlError | undefined;
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       "Invalid props for component 'Child': 'message' is missing"
     );
     await mountProm;
@@ -895,10 +913,9 @@ describe("default props", () => {
     }
     let error: Error;
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow("default value cannot be defined for a mandatory prop");
-      "default value cannot be defined for a mandatory prop"
-    );
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(

tests/components/reactivity.test.ts

@@ -151,9 +151,10 @@ describe("reactivity in lifecycle", () => {
       }
     }
     const prom = mount(Comp, fixture);
+    expect(steps).toEqual([1]);
     (STATE as any).val = 2;
     await prom;
-    expect(steps).toEqual([2]);
+    expect(steps).toEqual([1, 2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
 
@@ -182,9 +183,9 @@ describe("reactivity in lifecycle", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]

tests/components/refs.test.ts

@@ -125,10 +125,11 @@ describe("refs", () => {
     }
 
     const app = new App(Test, { test: true });
+    const appError = nextAppError(app);
     const mountProm = expect(app.mount(fixture)).rejects.toThrowError(
       'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
     );
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow(
       'Cannot set the same ref more than once in the same component, ref "coucou" was set multiple times in Test'
     );
     await mountProm;

tests/components/rendering.test.ts

@@ -49,9 +49,9 @@ describe("rendering semantics", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -179,9 +179,9 @@ describe("rendering semantics", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -198,9 +198,9 @@ describe("rendering semantics", () => {
       Array [
         "Parent:willRender",
         "Child:willUpdateProps",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
       ]
     `);
 
@@ -213,9 +213,9 @@ describe("rendering semantics", () => {
       Array [
         "Parent:willRender",
         "Child:willUpdateProps",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Parent:willPatch",
         "Child:willPatch",
         "Child:patched",
@@ -253,9 +253,9 @@ describe("rendering semantics", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -305,9 +305,9 @@ describe("rendering semantics", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -404,13 +404,13 @@ describe("rendering semantics", () => {
         "A:willRender",
         "B:setup",
         "B:willStart",
-        "A:rendered",
         "B:willRender",
         "C:setup",
         "C:willStart",
-        "B:rendered",
         "C:willRender",
         "C:rendered",
+        "B:rendered",
+        "A:rendered",
         "C:mounted",
         "B:mounted",
         "A:mounted",
@@ -473,13 +473,13 @@ test("force render in case of existing render", async () => {
       "A:willRender",
       "B:setup",
       "B:willStart",
-      "A:rendered",
       "B:willRender",
       "C:setup",
       "C:willStart",
-      "B:rendered",
       "C:willRender",
       "C:rendered",
+      "B:rendered",
+      "A:rendered",
       "C:mounted",
       "B:mounted",
       "A:mounted",
@@ -516,14 +516,14 @@ test("force render in case of existing render", async () => {
     Array [
       "B:willRender",
       "C:willUpdateProps",
-      "B:rendered",
       "C:willRender",
       "C:rendered",
+      "B:rendered",
       "A:willPatch",
-      "B:willPatch",
       "C:willPatch",
-      "C:patched",
+      "B:willPatch",
       "B:patched",
+      "C:patched",
       "A:patched",
     ]
   `);
@@ -561,9 +561,9 @@ test("children, default props and renderings", async () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]

tests/components/slots.test.ts

@@ -223,8 +223,9 @@ describe("slots", () => {
 
     let error: Error;
     const app = new App(Parent);
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).not.toBeNull();
     expect(mockConsoleWarn).toBeCalledTimes(1);

tests/components/style_class.test.ts

@@ -349,8 +349,9 @@ describe("style and class handling", () => {
     }
     let error: OwlError;
     const app = new App(Parent);
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();

tests/components/t_component.test.ts

@@ -36,9 +36,9 @@ describe("t-component", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]
@@ -77,9 +77,9 @@ describe("t-component", () => {
         "Parent:willRender",
         "ChildA:setup",
         "ChildA:willStart",
-        "Parent:rendered",
         "ChildA:willRender",
         "ChildA:rendered",
+        "Parent:rendered",
         "ChildA:mounted",
         "Parent:mounted",
       ]
@@ -94,9 +94,9 @@ describe("t-component", () => {
         "Parent:willRender",
         "ChildB:setup",
         "ChildB:willStart",
-        "Parent:rendered",
         "ChildB:willRender",
         "ChildB:rendered",
+        "Parent:rendered",
         "Parent:willPatch",
         "ChildA:willUnmount",
         "ChildA:willDestroy",

tests/components/t_foreach.test.ts

@@ -99,13 +99,13 @@ describe("list of components", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Parent:rendered",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willRender",
-        "Child:rendered",
         "Child:mounted",
         "Child:mounted",
         "Parent:mounted",
@@ -326,10 +326,11 @@ describe("list of components", () => {
     }
 
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = expect(app.mount(fixture)).rejects.toThrow(
       "Got duplicate key in t-foreach: child"
     );
-    await expect(nextAppError(app)).resolves.toThrow("Got duplicate key in t-foreach: child");
+    await expect(appError).resolves.toThrow("Got duplicate key in t-foreach: child");
     await mountProm;
     console.info = consoleInfo;
     expect(mockConsoleWarn).toBeCalledTimes(1);
@@ -352,12 +353,11 @@ describe("list of components", () => {
     }
 
     const app = new App(Parent, { test: true });
+    const appError = nextAppError(app);
     const mountProm = expect(app.mount(fixture)).rejects.toThrow(
       "Got duplicate key in t-foreach: [object Object]"
     );
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(appError).resolves.toThrow("Got duplicate key in t-foreach: [object Object]");
-      "Got duplicate key in t-foreach: [object Object]"
-    );
     await mountProm;
     console.info = consoleInfo;
     expect(mockConsoleWarn).toBeCalledTimes(1);

tests/helpers.ts

@@ -235,7 +235,7 @@ expect.extend({
     };
 
     const currentSteps = steps.splice(0);
-    const pass = this.equals(currentSteps, expected);
+    let pass = this.equals(currentSteps, expected);
 
     const message = pass
       ? () =>

tests/misc/portal.test.ts

@@ -270,8 +270,9 @@ describe("Portal", () => {
 
     let error: Error;
     const app = new App(Parent);
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
+    await expect(appError).resolves.toThrow("invalid portal target");
     await mountProm;
 
     expect(error!).toBeDefined();
@@ -1002,8 +1003,9 @@ describe("Portal: Props validation", () => {
     }
     let error: OwlError;
     const app = new App(Parent);
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("error occured in the owl lifecycle");
+    await expect(appError).resolves.toThrow("error occured in the owl lifecycle");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.cause).toBeDefined();
@@ -1021,8 +1023,9 @@ describe("Portal: Props validation", () => {
     }
     let error: Error;
     const app = new App(Parent);
+    const appError = nextAppError(app);
     const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow("invalid portal target");
+    await expect(appError).resolves.toThrow("invalid portal target");
     await mountProm;
     expect(error!).toBeDefined();
     expect(error!.message).toBe(`invalid portal target`);

tests/reactivity.test.ts

@@ -1858,13 +1858,13 @@ describe("Reactivity: useState", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Parent:rendered",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willRender",
-        "Child:rendered",
         "Child:mounted",
         "Child:mounted",
         "Parent:mounted",
@@ -1916,13 +1916,13 @@ describe("Reactivity: useState", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Child:setup",
         "Child:willStart",
+        "Child:willRender",
+        "Child:rendered",
         "Parent:rendered",
-        "Child:willRender",
-        "Child:rendered",
-        "Child:willRender",
-        "Child:rendered",
         "Child:mounted",
         "Child:mounted",
         "Parent:mounted",
@@ -1992,17 +1992,17 @@ describe("Reactivity: useState", () => {
         "GrandFather:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:setup",
-        "Parent:willStart",
-        "GrandFather:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:setup",
+        "Parent:willStart",
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
+        "GrandFather:rendered",
         "Child:mounted",
         "Parent:mounted",
         "Child:mounted",
@@ -2215,9 +2215,9 @@ describe("Reactivity: useState", () => {
         "Parent:willRender",
         "Child:setup",
         "Child:willStart",
-        "Parent:rendered",
         "Child:willRender",
         "Child:rendered",
+        "Parent:rendered",
         "Child:mounted",
         "Parent:mounted",
       ]