wip

src/runtime/component_node.ts

@@ -164,10 +164,9 @@ 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 )) {
-      await Promise.resolve();
-      // situation may have changed after the microtask tick
-      current = this.fiber;
+    if (current && (current.root!.locked || current as any).bdom === true) {
+      this.app.scheduler.requestAnimationFrame(() => this.render(deep));
+      return;
     }
     if (current) {
       if (!current.bdom && !fibersInError.has(current)) {

src/runtime/fibers.ts

@@ -56,6 +56,7 @@ function cancelFibers(fibers: Fiber[]): number {
     let node = fiber.node;
     fiber.render = throwOnRender;
     if (node.status === STATUS.NEW) {
+      console.log('asdfasdfsdf')
       node.destroy();
       delete node.parent!.children[node.parentKey!];
     }

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

@@ -1730,10 +1730,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]);
@@ -1747,10 +1747,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/concurrency.test.ts

@@ -103,15 +103,13 @@ test("destroying/recreating a subwidget with different props (if start is not ov
   expect(n).toBe(0);
 
   w.state.val = 2;
-  await nextMicroTick();
-  await nextMicroTick();
+  await nextTick();
   expect(n).toBe(1);
 
   expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
 
   w.state.val = 3;
-  await nextMicroTick();
-  await nextMicroTick();
+  await nextTick();
   expect(n).toBe(2);
 
   expect([
@@ -176,14 +174,16 @@ test("destroying/recreating a subcomponent, other scenario", async () => {
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
+    "Child:willRender",
+    "Child:rendered",
     "Parent:rendered",
     "Child:willDestroy",
     "Parent:willRender",
     "Child:setup",
     "Child:willStart",
-    "Parent:rendered",
     "Child:willRender",
     "Child:rendered",
+    "Parent:rendered",
     "Parent:willPatch",
     "Child:mounted",
     "Parent:patched",
@@ -319,9 +319,9 @@ test("creating two async components, scenario 2", async () => {
     "Parent:willRender",
     "ChildA:setup",
     "ChildA:willStart",
-    "Parent:rendered",
     "ChildA:willRender",
     "ChildA:rendered",
+    "Parent:rendered",
     "ChildA:mounted",
     "Parent:mounted",
   ]).toBeLogged();
@@ -3777,7 +3777,7 @@ test("delayed fiber does not get rendered if it was cancelled", async () => {
   ]).toBeLogged();
 });
 
-test("destroyed component causes other soon to be destroyed component to rerender, weird stuff happens", async () => {
+test.only("destroyed component causes other soon to be destroyed component to rerender, weird stuff happens", async () => {
   let def = makeDeferred();
   let c: any = null;
 
@@ -3785,6 +3785,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
     static template = xml`<t t-esc="props.value"/>`;
     setup() {
       useLogLifecycle();
+      onWillStart(async () => {
+        await nextMicroTick();
+      });
       onRendered(() => {
         def.resolve();
       });
@@ -3800,6 +3803,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
     setup() {
       c = this;
       useLogLifecycle();
+      onWillStart(async () => {
+        await nextMicroTick();
+      })
     }
   }
 
@@ -3814,6 +3820,9 @@ test("destroyed component causes other soon to be destroyed component to rerende
     state = useState({ flag: false, valueB: 1, valueC: 2 });
     setup() {
       useLogLifecycle();
+      onWillStart(async () => {
+        await nextMicroTick();
+      })
     }
   }
 
@@ -3915,17 +3924,17 @@ test("delayed rendering, destruction, stuff happens", async () => {
     "A:willRender",
     "B:setup",
     "B:willStart",
-    "A:rendered",
     "B:willRender",
     "C:setup",
     "C:willStart",
-    "B:rendered",
     "C:willRender",
     "D:setup",
     "D:willStart",
-    "C:rendered",
     "D:willRender",
     "D:rendered",
+    "C:rendered",
+    "B:rendered",
+    "A:rendered",
     "D:mounted",
     "C:mounted",
     "B:mounted",
@@ -3938,10 +3947,10 @@ test("delayed rendering, destruction, stuff happens", async () => {
   expect([
     "A:willRender",
     "B:willUpdateProps",
-    "A:rendered",
     "B:willRender",
     "C:willUpdateProps",
     "B:rendered",
+    "A:rendered",
   ]).toBeLogged();
 
   // update B => removes child C
@@ -4016,19 +4025,19 @@ test("renderings, destruction, patch, stuff, ... yet another variation", async (
     "A:willRender",
     "B:setup",
     "B:willStart",
-    "D:setup",
-    "D:willStart",
-    "A:rendered",
     "B:willRender",
     "C:setup",
     "C:willStart",
-    "B:rendered",
-    "D:willRender",
-    "D:rendered",
     "C:willRender",
     "C:rendered",
-    "C:mounted",
+    "B:rendered",
+    "D:setup",
+    "D:willStart",
+    "D:willRender",
+    "D:rendered",
+    "A:rendered",
     "D:mounted",
+    "C:mounted",
     "B:mounted",
     "A:mounted",
   ]).toBeLogged();

tests/utils.test.ts

@@ -1,5 +1,4 @@
 import { EventBus } from "../src/runtime/utils";
-import { nextMicroTick } from "./helpers";
 
 describe("event bus behaviour", () => {
   test("can subscribe and be notified", () => {