wip

src/runtime/component_node.ts

@@ -12,7 +12,7 @@ import {
   TARGET,
 } from "./reactivity";
 import { STATUS } from "./status";
-import { batched, Callback } from "./utils";
+import { Callback } from "./utils";
 
 let currentNode: ComponentNode | null = null;
 
@@ -56,7 +56,7 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
   const node = getCurrent();
   let render = batchedRenderFunctions.get(node)!;
   if (!render) {
-    render = batched(node.render.bind(node, false));
+    render = node.render.bind(node, false);
     batchedRenderFunctions.set(node, render);
     // manual implementation of onWillDestroy to break cyclic dependency
     node.willDestroy.push(clearReactivesForCallback.bind(null, render));
@@ -140,11 +140,22 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
       fiber.root!.mounted.push(fiber);
     }
     const component = this.component;
-    try {
+    if (this.willStart.length) {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
+      let willStartResults;
-    } catch (e) {
+      try {
-      handleError({ node: this, error: e });
+        willStartResults = this.willStart.map((f) => f.call(component));
-      return;
+      } catch (e) {
+        handleError({ node: this, error: e });
+        return;
+      }
+      if (willStartResults.some((result) => result instanceof Promise)) {
+        try {
+          await Promise.all(willStartResults);
+        } catch (e) {
+          handleError({ node: this, error: e });
+          return;
+        }
+      }
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
       fiber.render();
@@ -153,7 +164,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
 
   async render(deep: boolean) {
     let current = this.fiber;
-    if (current && (current.root!.locked || (current as any).bdom === true)) {
+    if (current && (current.root!.locked )) {
       await Promise.resolve();
       // situation may have changed after the microtask tick
       current = this.fiber;
@@ -175,26 +186,28 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     const fiber = makeRootFiber(this);
     fiber.deep = deep;
     this.fiber = fiber;
+    const scheduler = this.app.scheduler;
 
-    this.app.scheduler.addFiber(fiber);
+    scheduler.requestAnimationFrame(() => {
-    await Promise.resolve();
+      if (this.status === STATUS.DESTROYED) {
-    if (this.status === STATUS.DESTROYED) {
+        return;
-      return;
+      }
-    }
+      // We only want to actually render the component if the following two
-    // We only want to actually render the component if the following two
+      // conditions are true:
-    // conditions are true:
+      // * this.fiber: it could be null, in which case the render has been cancelled
-    // * this.fiber: it could be null, in which case the render has been cancelled
+      // * (current || !fiber.parent): if current is not null, this means that the
-    // * (current || !fiber.parent): if current is not null, this means that the
+      //   render function was called when a render was already occurring. In this
-    //   render function was called when a render was already occurring. In this
+      //   case, the pending rendering was cancelled, and the fiber needs to be
-    //   case, the pending rendering was cancelled, and the fiber needs to be
+      //   rendered to complete the work.  If current is null, we check that the
-    //   rendered to complete the work.  If current is null, we check that the
+      //   fiber has no parent.  If that is the case, the fiber was downgraded from
-    //   fiber has no parent.  If that is the case, the fiber was downgraded from
+      //   a root fiber to a child fiber in the previous microtick, because it was
-    //   a root fiber to a child fiber in the previous microtick, because it was
+      //   embedded in a rendering coming from above, so the fiber will be rendered
-    //   embedded in a rendering coming from above, so the fiber will be rendered
+      //   in the next microtick anyway, so we should not render it again.
-    //   in the next microtick anyway, so we should not render it again.
+      if (this.fiber === fiber && (current || !fiber.parent)) {
-    if (this.fiber === fiber && (current || !fiber.parent)) {
+        fiber.render();
-      fiber.render();
+      }
-    }
+    });
+    scheduler.addFiber(fiber);
   }
 
   destroy() {
@@ -247,14 +260,17 @@ 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)));
+    if (this.willUpdateProps.length) {
-    await prom;
+      const willUpdatePropsResults = this.willUpdateProps.map((f) => f.call(component, props));
-    if (fiber !== this.fiber) {
+      if (willUpdatePropsResults.some((res) => res instanceof Promise)) {
-      return;
+        await Promise.all(willUpdatePropsResults);
+      }
+      if (fiber !== this.fiber) {
+        return;
+      }
     }
     component.props = props;
     this.props = rawProps;
-    fiber.render();
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
       parentRoot.willPatch.push(fiber);
@@ -262,6 +278,7 @@ export class ComponentNode<P extends Props = any, E = any> implements VNode<Comp
     if (this.patched.length) {
       parentRoot.patched.push(fiber);
     }
+    fiber.render();
   }
 
   /**

src/runtime/fibers.ts

@@ -20,6 +20,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
     // which means any arbitrary code can be run in onWillDestroy, which may
     // trigger new renderings
     root.locked = true;
+    debugger
     root.setCounter(root.counter + 1 - cancelFibers(current.children));
     root.locked = false;
     current.children = [];
@@ -151,6 +152,7 @@ export class RootFiber extends Fiber {
   complete() {
     const node = this.node;
     this.locked = true;
+    debugger
     let current: Fiber | undefined = undefined;
     try {
       // Step 1: calling all willPatch lifecycle hooks

src/runtime/scheduler.ts

@@ -11,12 +11,29 @@ export class Scheduler {
   // interactions with other code, such as test frameworks that override them
   static requestAnimationFrame = window.requestAnimationFrame.bind(window);
   tasks: Set<RootFiber> = new Set();
-  requestAnimationFrame: Window["requestAnimationFrame"];
+  _requestAnimationFrame: Window["requestAnimationFrame"];
+  cbs: Function[] = [];
   frame: number = 0;
   delayedRenders: Fiber[] = [];
+  shouldFlush = false;
 
   constructor() {
-    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+    this._requestAnimationFrame = Scheduler.requestAnimationFrame;
+  }
+
+  requestAnimationFrame(cb: Function) {
+    this.cbs.push(cb);
+    if (this.frame === 0) {
+      this.frame = this._requestAnimationFrame(() => {
+        // note that some callbacks may be added to this.cbs while this look is
+        // running, and they will be executed immediately
+        for (let i = 0; i < this.cbs.length; i++) {
+          this.cbs[i]();
+        }
+        this.cbs = [];
+        this.frame = 0;
+      });
+    }
   }
 
   addFiber(fiber: Fiber) {
@@ -37,18 +54,18 @@ export class Scheduler {
         }
       }
     }
-
+    // if (this.shouldFlush === false) {
-    if (this.frame === 0) {
+    // this.shouldFlush = true;
-      this.frame = this.requestAnimationFrame(() => {
+    this.requestAnimationFrame(() => {
-        this.frame = 0;
+      // this.shouldFlush = false;
-        this.tasks.forEach((fiber) => this.processFiber(fiber));
+      this.tasks.forEach((fiber) => this.processFiber(fiber));
-        for (let task of this.tasks) {
+      for (let task of this.tasks) {
-          if (task.node.status === STATUS.DESTROYED) {
+        if (task.node.status === STATUS.DESTROYED) {
-            this.tasks.delete(task);
+          this.tasks.delete(task);
-          }
         }
-      });
+      }
-    }
+    });
+    // }
   }
 
   processFiber(fiber: RootFiber) {

src/runtime/utils.ts

@@ -10,6 +10,7 @@ export type Callback = () => void;
 export function batched(callback: Callback): Callback {
   let called = false;
   return async () => {
+    debugger;
     // This await blocks all calls to the callback here, then releases them sequentially
     // in the next microtick. This line decides the granularity of the batch.
     await Promise.resolve();

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

@@ -131,6 +131,19 @@ exports[`can catch errors an error in onWillDestroy 2`] = `
 }"
 `;
 
+exports[`can catch errors an error in onWillDestroy 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`can catch errors an error in onWillDestroy, variation 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/concurrency.test.ts

@@ -2235,13 +2235,13 @@ test("concurrent renderings scenario 16", 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",
@@ -2906,9 +2906,9 @@ test("two sequential renderings before an animation frame", async () => {
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
-    "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
+    "Parent:rendered",
     "Child:mounted",
     "Parent:mounted",
   ]).toBeLogged();
@@ -2920,13 +2920,7 @@ test("two sequential renderings before an animation frame", async () => {
   await nextMicroTick();
   await nextMicroTick();
   expect(fixture.innerHTML).toBe("0");
-  expect([
+  expect([]).toBeLogged();
-    "Parent:willRender",
-    "Child:willUpdateProps",
-    "Parent:rendered",
-    "Child:willRender",
-    "Child:rendered",
-  ]).toBeLogged();
 
   parent.state.value = 2;
   // enough microticks to wait for render + willupdateprops
@@ -2936,17 +2930,21 @@ test("two sequential renderings before an animation frame", async () => {
   await nextMicroTick();
   await nextMicroTick();
   expect(fixture.innerHTML).toBe("0");
-  expect([
+  expect([]).toBeLogged();
-    "Parent:willRender",
-    "Child:willUpdateProps",
-    "Parent:rendered",
-    "Child:willRender",
-    "Child:rendered",
-  ]).toBeLogged();
 
   await nextTick();
   // we check here that the willPatch and patched hooks are called only once
-  expect(["Parent:willPatch", "Child:willPatch", "Child:patched", "Parent:patched"]).toBeLogged();
+  expect([
+    "Parent:willRender",
+    "Child:willUpdateProps",
+    "Child:willRender",
+    "Child:rendered",
+    "Parent:rendered",
+    "Parent:willPatch",
+    "Child:willPatch",
+    "Child:patched",
+    "Parent:patched",
+  ]).toBeLogged();
 });
 
 test("t-key on dom node having a component", async () => {
@@ -3736,15 +3734,15 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
     "A:setup",
     "A:willRender",
     "B:setup",
-    "A:rendered",
     "B:willRender",
     "C:setup",
-    "B:rendered",
     "C:willRender",
     "D:setup",
-    "C:rendered",
     "D:willRender",
     "D:rendered",
+    "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "D:mounted",
     "C:mounted",
     "B:mounted",
@@ -3753,7 +3751,7 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
   // Start a render in C
   c!.render(true);
   await nextMicroTick();
-  expect(["C:willRender", "C:rendered"]).toBeLogged();
+  expect(["C:willRender", "D:willRender", "D:rendered", "C:rendered"]).toBeLogged();
   // Start a render in A such that C is already rendered, but D will be delayed
   // (because A is rendering) then cancelled (when the render from A reaches C)
   a.render(true);
@@ -3761,13 +3759,13 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
   await nextTick();
   expect([
     "A:willRender",
-    "A:rendered",
     "B:willRender",
-    "B:rendered",
     "C:willRender",
-    "C:rendered",
     "D:willRender",
     "D:rendered",
+    "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "A:willPatch",
     "B:willPatch",
     "C:willPatch",

tests/components/error_handling.test.ts

@@ -3,10 +3,10 @@ import {
   onError,
   onMounted,
   onPatched,
-  onWillPatch,
-  onWillStart,
-  onWillRender,
   onRendered,
+  onWillPatch,
+  onWillRender,
+  onWillStart,
   onWillUnmount,
   useState,
   xml,
@@ -14,8 +14,8 @@ import {
 import {
   logStep,
   makeTestFixture,
-  nextTick,
   nextMicroTick,
+  nextTick,
   snapshotEverything,
   useLogLifecycle,
 } from "../helpers";
@@ -1251,9 +1251,9 @@ describe("can catch errors", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -1276,7 +1276,7 @@ describe("can catch errors", () => {
     expect(fixture.innerHTML).toBe("2");
   });
 
-  test("an error in onWillDestroy, variation", async () => {
+  test.only("an error in onWillDestroy, variation", async () => {
     class Child extends Component {
       static template = xml`<div>abc</div>`;
       setup() {
@@ -1314,27 +1314,26 @@ describe("can catch errors", () => {
     ]).toBeLogged();
 
     parent.state.hasChild = true;
-    await nextMicroTick();
+    await nextTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
-    await nextMicroTick();
     expect([
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:mounted",
+      "Parent:patched",
     ]).toBeLogged();
     parent.state.hasChild = false;
     await nextTick();
     expect([
-      "Child:willDestroy",
       "Parent:willRender",
       "Parent:rendered",
       "Parent:willPatch",
-      "Parent:patched",
+      "Child:willUnmount",
+      "Child:willDestroy",
     ]).toBeLogged();
     expect(fixture.innerHTML).toBe("2");
   });

tests/components/lifecycle.test.ts

@@ -461,9 +461,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -474,9 +474,9 @@ describe("lifecycle hooks", () => {
     expect([
       "Parent:willRender",
       "Child:willUpdateProps",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
@@ -520,9 +520,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -638,9 +638,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -694,13 +694,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",
@@ -803,11 +803,11 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "GrandChild:setup",
       "GrandChild:willStart",
       "Child:rendered",
+      "Parent:rendered",
     ]).toBeLogged();
 
     app.destroy();
@@ -843,9 +843,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -886,9 +886,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -898,9 +898,9 @@ describe("lifecycle hooks", () => {
     expect([
       "Parent:willRender",
       "Child:willUpdateProps",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
@@ -943,9 +943,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -1060,21 +1060,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",
@@ -1089,9 +1089,9 @@ describe("lifecycle hooks", () => {
       "C:willRender",
       "F:setup",
       "F:willStart",
-      "C:rendered",
       "F:willRender",
       "F:rendered",
+      "C:rendered",
       "C:willPatch",
       "E:willUnmount",
       "E:willDestroy",
@@ -1124,9 +1124,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -1148,9 +1148,9 @@ describe("lifecycle hooks", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:mounted",
       "Parent:patched",
@@ -1171,7 +1171,7 @@ describe("lifecycle hooks", () => {
     }
 
     await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("<span></span>");
+    expect(fixture.innerHTML).toBe("<span>Patched</span>");
     expect([
       "Parent:setup",
       "Parent:willStart",
@@ -1180,11 +1180,13 @@ describe("lifecycle hooks", () => {
       "Parent:mounted",
       "Parent:willRender",
       "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
     ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
+    expect([]).toBeLogged();
   });
 
   test("render in patched", async () => {
@@ -1215,7 +1217,7 @@ describe("lifecycle hooks", () => {
 
     parent.render();
     await nextTick();
-    expect(fixture.innerHTML).toBe("<span></span>");
+    expect(fixture.innerHTML).toBe("<span>Patched</span>");
     expect([
       "Parent:willRender",
       "Parent:rendered",
@@ -1223,11 +1225,13 @@ describe("lifecycle hooks", () => {
       "Parent:patched",
       "Parent:willRender",
       "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
     ]).toBeLogged();
 
     await nextTick();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
+    expect([]).toBeLogged();
   });
 
   test("render in willPatch", async () => {
@@ -1265,12 +1269,15 @@ describe("lifecycle hooks", () => {
       "Parent:rendered",
       "Parent:willPatch",
       "Parent:patched",
-      "Parent:willRender",
-      "Parent:rendered",
     ]).toBeLogged();
 
     await nextTick();
-    expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
     expect(fixture.innerHTML).toBe("<span>Patched</span>");
   });
 
@@ -1333,6 +1340,9 @@ describe("lifecycle hooks", () => {
       static template = xml`child`;
       setup() {
         useLogLifecycle();
+        onWillStart(async () => {
+          await nextMicroTick();
+        });
       }
     }
 

tests/components/reactivity.test.ts

@@ -152,7 +152,7 @@ describe("reactivity in lifecycle", () => {
     const prom = mount(Comp, fixture);
     (STATE as any).val = 2;
     await prom;
-    expect(steps).toEqual([2]);
+    expect(steps).toEqual([1, 2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
 

tests/components/rendering.test.ts

@@ -1,11 +1,10 @@
 import { Component, mount, onRendered, onWillUpdateProps, useState, xml } from "../../src";
 import {
-  makeTestFixture,
-  snapshotEverything,
-  nextTick,
-  useLogLifecycle,
   makeDeferred,
-  nextMicroTick,
+  makeTestFixture,
+  nextTick,
+  snapshotEverything,
+  useLogLifecycle,
 } from "../helpers";
 
 let fixture: HTMLElement;
@@ -47,9 +46,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -139,11 +138,16 @@ describe("rendering semantics", () => {
     expect(childN).toBe(1);
   });
 
-  test("render with deep=true followed by render with deep=false work as expected", async () => {
+  test.only("render with deep=true followed by render with deep=false work as expected", async () => {
     class Child extends Component {
       static template = xml`child<t t-esc="env.getValue()"/>`;
       setup() {
         useLogLifecycle();
+        onRendered(() => {
+          if (value === 4) {
+            parent.state.value = "B";
+          }
+        });
       }
     }
 
@@ -173,9 +177,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -184,33 +188,39 @@ describe("rendering semantics", () => {
     parent.render(true);
 
     // wait for child to be rendered, but dom not yet patched
-    await nextMicroTick();
+    // await nextMicroTick();
-    await nextMicroTick();
+    // await nextMicroTick();
-    await nextMicroTick();
+    // await nextMicroTick();
-    expect([
+    // expect([
-      "Parent:willRender",
+    //   "Parent:willRender",
-      "Child:willUpdateProps",
+    //   "Child:willUpdateProps",
-      "Parent:rendered",
+    //   "Child:willRender",
-      "Child:willRender",
+    //   "Child:rendered",
-      "Child:rendered",
+    //   "Parent:rendered",
-    ]).toBeLogged();
+    // ]).toBeLogged();
 
-    parent.state.value = "B";
+    // parent.state.value = "B";
 
     await nextTick();
+    // await nextTick();
 
-    expect(fixture.innerHTML).toBe("parentBchild4");
     expect([
       "Parent:willRender",
       "Child:willUpdateProps",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
+      "Parent:willRender",
+      "Child:willUpdateProps",
+      "Child:willRender",
+      "Child:rendered",
+      "Parent:rendered",
       "Parent:willPatch",
       "Child:willPatch",
       "Child:patched",
       "Parent:patched",
     ]).toBeLogged();
+    expect(fixture.innerHTML).toBe("parentBchild4");
   });
 
   test("props are reactive", async () => {
@@ -241,9 +251,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -284,9 +294,9 @@ describe("rendering semantics", () => {
       "Parent:willRender",
       "Child:setup",
       "Child:willStart",
-      "Parent:rendered",
       "Child:willRender",
       "Child:rendered",
+      "Parent:rendered",
       "Child:mounted",
       "Parent:mounted",
     ]).toBeLogged();
@@ -372,13 +382,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",
@@ -437,13 +447,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",
@@ -466,9 +476,9 @@ test("force render in case of existing render", async () => {
   expect([
     "B:willRender",
     "C:willUpdateProps",
-    "B:rendered",
     "C:willRender",
     "C:rendered",
+    "B:rendered",
     "A:willPatch",
     "B:willPatch",
     "C:willPatch",
@@ -509,9 +519,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",
   ]).toBeLogged();