[IMP] components: make initial component sync if possible

Author: ged-odoo

src/runtime/app.ts

@@ -135,9 +135,17 @@ export class App extends TemplateSet {
 
         const fiber = new MountFiber(node, target, options);
         this.scheduler.addFiber(fiber);
-        const prev = getCurrentComputation();
-        node.initiateRender(fiber);
-        setComputation(prev);
+        if (node.willStart.length) {
+          const prev = getCurrentComputation();
+          node.initiateRender(fiber);
+          setComputation(prev);
+        } else {
+          node.fiber = fiber;
+          if (node.mounted.length) {
+            fiber.root!.mounted.push(fiber);
+          }
+          fiber.render();
+        }
         return promise;
       },
       destroy: () => {

tests/app/sub_root.test.ts

@@ -114,7 +114,6 @@ test("destroy a subroot while another component is mounted in main app", async (
 
   const app = new App();
   const comp = await app.createRoot(SomeComponent).mount(fixture);
-  expect(fixture.innerHTML).toBe("a<div></div>");
   await nextTick();
   expect(fixture.innerHTML).toBe("a<div>c</div>");
   comp.state.flag = true;

tests/components/error_handling.test.ts

@@ -321,11 +321,12 @@ describe("errors and promises", () => {
 
     const app = new App();
     let error: OwlError;
-    const mountProm = app
-      .createRoot(Root)
+    const root = app.createRoot(Root);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;
@@ -347,11 +348,12 @@ describe("errors and promises", () => {
 
     const app = new App({ test: true });
     let error: OwlError;
-    const mountProm = app
-      .createRoot(Root)
+    const root = app.createRoot(Root);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;
@@ -375,11 +377,12 @@ describe("errors and promises", () => {
 
     const app = new App({ test: true });
     let error: OwlError;
-    const mountProm = app
-      .createRoot(Root)
+    const root = app.createRoot(Root);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;

tests/components/props_validation.test.ts

@@ -49,11 +49,12 @@ describe("props validation", () => {
 
     const app = new App({ test: true });
     let error: OwlError | undefined;
-    const mountProm = app
-      .createRoot(Parent)
+    const root = app.createRoot(Parent);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;
@@ -81,11 +82,12 @@ describe("props validation", () => {
 
     const app = new App({ test: true });
     let error: OwlError | undefined;
-    const mountProm = app
-      .createRoot(Parent)
+    const root = app.createRoot(Parent);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;
@@ -135,11 +137,12 @@ describe("props validation", () => {
       state = {};
       let app = new App({ test: true });
       let error: OwlError | undefined;
-      let mountProm = app
-        .createRoot(Parent)
+      let root = app.createRoot(Parent);
+      let errorProm = nextAppError(app);
+      let mountProm = root
         .mount(fixture)
         .catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow(
+      await expect(errorProm).resolves.toThrow(
         "[Owl] Unhandled error. Destroying the root component"
       );
       await mountProm;
@@ -155,11 +158,12 @@ describe("props validation", () => {
       expect(error!).toBeUndefined();
       state = { p: test.ko };
       app = new App({ test: true });
-      mountProm = app
-        .createRoot(Parent)
+      root = app.createRoot(Parent);
+      errorProm = nextAppError(app);
+      mountProm = root
         .mount(fixture)
         .catch((e: Error) => (error = e));
-      await expect(nextAppError(app)).resolves.toThrow(
+      await expect(errorProm).resolves.toThrow(
         "[Owl] Unhandled error. Destroying the root component"
       );
       await mountProm;
@@ -198,11 +202,12 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     state = { p: 1 };
     const app = new App({ test: true });
-    const mountProm = app
-      .createRoot(Parent)
+    const root = app.createRoot(Parent);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;
@@ -240,11 +245,12 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     state = { p: 1 };
     const app = new App({ test: true });
-    const mountProm = app
-      .createRoot(Parent)
+    const root = app.createRoot(Parent);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;
@@ -333,11 +339,12 @@ describe("props validation", () => {
     expect(error!).toBeUndefined();
     state = { p: [true, 1] };
     const app = new App({ test: true });
-    const mountProm = app
-      .createRoot(Parent)
+    const root = app.createRoot(Parent);
+    const errorProm = nextAppError(app);
+    const mountProm = root
       .mount(fixture)
       .catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
+    await expect(errorProm).resolves.toThrow(
       "[Owl] Unhandled error. Destroying the root component"
     );
     await mountProm;

tests/components/reactivity.test.ts

@@ -185,7 +185,9 @@ describe("reactivity in lifecycle", () => {
     const prom = mount(Comp, fixture);
     (STATE as any).val = 2;
     await prom;
-    expect(steps).toEqual([2]);
+    // The first render happens synchronously (fast path, no willStart),
+    // so the template executes with val=1. Then val=2 triggers a re-render.
+    expect(steps).toEqual([1, 2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
 

tests/components/refs.test.ts

@@ -131,10 +131,12 @@ describe("refs", () => {
     }
 
     const app = new App({ test: true });
-    const mountProm = expect(app.createRoot(Test).mount(fixture)).rejects.toThrow(
+    const root = app.createRoot(Test);
+    const errorProm = nextAppError(app);
+    const mountProm = expect(root.mount(fixture)).rejects.toThrow(
       '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(errorProm).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/helpers.ts

@@ -277,27 +277,21 @@ expect.extend({
 });
 
 export function nextAppError(app: any) {
-  const { _handleError } = app;
-  const rootPromises = [...app.roots].map((r) => r.promise);
-
-  let settled = false;
-
-  const done = (error: any, restore = true) => {
-    if (settled) return;
-    settled = true;
-    if (restore) app._handleError = _handleError;
-    resolve(error);
-  };
-
   let resolve: (value: any) => void;
   const result = new Promise((res) => (resolve = res));
 
+  const original = app._handleError;
   app._handleError = (error: any) => {
-    done(error);
+    app._handleError = original;
+    resolve(error);
   };
 
-  for (const p of rootPromises) {
-    p.catch((err: any) => done(err));
+  // Also catch rejections from root mount promises
+  for (const root of app.roots) {
+    root.promise.catch((err: any) => {
+      app._handleError = original;
+      resolve(err);
+    });
   }
 
   return result;