sync rendering

Author: sdegueldre

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 {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
-    } catch (e) {
-      this.app.handleError({ node: this, error: e });
-      return;
-    }
-    if (this.status === STATUS.NEW && this.fiber === fiber) {
-      fiber.render();
-    }
+    return possiblySync(
+      () => {
+        const willStartResults = this.willStart.map((f) => f.call(component));
+        if (willStartResults.some((r) => typeof r?.then === "function")) {
+          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) {

src/runtime/utils.ts

@@ -88,3 +88,20 @@ 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;
+    try {
+      result = computation();
+    } catch (e) {
+      return onError(e);
+    }
+    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]);