[IMP] component: wait for parent rendering to be complete before doing child

This is a breaking semantic change.  With this commit, the UI is frozen
whenever owl is waiting for a parent to change

Also, this allows Owl not to render components that will be removed
later.

src/component/component_node.ts

@@ -2,23 +2,16 @@ import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
 import {
   clearReactivesForCallback,
+  getSubscriptions,
+  NonReactive,
   Reactive,
   reactive,
   TARGET,
-  NonReactive,
-  getSubscriptions,
 } from "../reactivity";
 import { batched, Callback } from "../utils";
 import { Component, ComponentConstructor } from "./component";
 import { fibersInError, handleError } from "./error_handling";
-import {
-  Fiber,
-  makeChildFiber,
-  makeRootFiber,
-  MountFiber,
-  MountOptions,
-  RootFiber,
-} from "./fibers";
+import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";
 
@@ -126,6 +119,7 @@ export function component<P extends object>(
 
     node.initiateRender(new Fiber(node, parentFiber));
   }
+  parentFiber.root!.reachedChildren.add(node);
   return node;
 }
 
@@ -193,7 +187,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
-      this._render(fiber);
+      fiber.render();
     }
   }
 
@@ -238,17 +232,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     //   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.
     if (this.fiber === fiber && (current || !fiber.parent)) {
-      this._render(fiber);
-    }
-  }
-
-  _render(fiber: Fiber | RootFiber) {
-    try {
-      fiber.bdom = this.renderFn();
-      const root = fiber.root!;
-      root.setCounter(root.counter - 1);
-    } catch (e) {
-      handleError({ node: this, error: e });
+      fiber.render();
     }
   }
 
@@ -292,7 +276,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     component.props = props;
-    this._render(fiber);
+    fiber.render();
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
       parentRoot.willPatch.push(fiber);

src/component/fibers.ts

@@ -8,6 +8,10 @@ export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
   if (current) {
     cancelFibers(current.children);
     current.root = null;
+    if (current instanceof RootFiber && current.delayedRenders.length) {
+      let root = parent.root!;
+      root.delayedRenders = root.delayedRenders.concat(current.delayedRenders);
+    }
   }
   return new Fiber(node, parent);
 }
@@ -19,6 +23,9 @@ export function makeRootFiber(node: ComponentNode): Fiber {
     root.setCounter(root.counter + 1 - cancelFibers(current.children));
     current.children = [];
     current.bdom = null;
+    if (current === root) {
+      root.reachedChildren = new WeakSet();
+    }
     if (fibersInError.has(current)) {
       fibersInError.delete(current);
       fibersInError.delete(root);
@@ -81,6 +88,46 @@ export class Fiber {
       this.root = this as any;
     }
   }
+
+  render() {
+    // if some parent has a fiber => register in followup
+    let prev = this.root!.node;
+    let current = prev.parent;
+    while (current) {
+      if (current.fiber) {
+        let root = current.fiber.root!;
+        if (root.counter) {
+          root.delayedRenders.push(this);
+          return;
+        } else {
+          if (!root.reachedChildren.has(prev)) {
+            // is dead
+            this.node.app.scheduler.shouldClear = true;
+            return;
+          }
+          current = root.node;
+        }
+      }
+      prev = current;
+      current = current.parent;
+    }
+
+    // there are no current rendering from above => we can render
+    this._render();
+  }
+
+  _render() {
+    const node = this.node;
+    const root = this.root;
+    if (root) {
+      try {
+        this.bdom = node.renderFn();
+        root.setCounter(root.counter - 1);
+      } catch (e) {
+        handleError({ node, error: e });
+      }
+    }
+  }
 }
 
 export class RootFiber extends Fiber {
@@ -94,6 +141,9 @@ export class RootFiber extends Fiber {
   // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
   locked: boolean = false;
 
+  delayedRenders: Fiber[] = [];
+  reachedChildren: WeakSet<ComponentNode> = new WeakSet();
+
   complete() {
     const node = this.node;
     this.locked = true;
@@ -148,6 +198,14 @@ export class RootFiber extends Fiber {
   setCounter(newValue: number) {
     this.counter = newValue;
     if (newValue === 0) {
+      if (this.delayedRenders.length) {
+        for (let f of this.delayedRenders) {
+          if (f.root) {
+            f.render();
+          }
+        }
+        this.delayedRenders = [];
+      }
       this.node.app.scheduler.flush();
     }
   }

src/component/scheduler.ts

@@ -13,6 +13,7 @@ export class Scheduler {
   tasks: Set<RootFiber> = new Set();
   requestAnimationFrame: Window["requestAnimationFrame"];
   frame: number = 0;
+  shouldClear: boolean = false;
 
   constructor() {
     this.requestAnimationFrame = Scheduler.requestAnimationFrame;
@@ -31,6 +32,14 @@ export class Scheduler {
       this.frame = this.requestAnimationFrame(() => {
         this.frame = 0;
         this.tasks.forEach((fiber) => this.processFiber(fiber));
+        if (this.shouldClear) {
+          this.shouldClear = false;
+          for (let task of this.tasks) {
+            if (task.node.status === STATUS.DESTROYED) {
+              this.tasks.delete(task);
+            }
+          }
+        }
       });
     }
   }