[FIX] component: improve error handling

In the following situation: A parent of B, B parent of C, with an error
when C is mounted, caught by B and retriggering a rendering in B, then
the onMounted hook of A wasn't properly called. This commit fixes this
problem.

src/component/component_node.ts

@@ -221,6 +221,28 @@ export class ComponentNode<T extends typeof Component = typeof Component>
     this._render(fiber);
   }
 
+  /**
+   * Finds a child that has dom that is not yet updated, and update it. This
+   * method is meant to be used only in the context of repatching the dom after
+   * a mounted hook failed and was handled.
+   */
+  updateDom() {
+    if (this.bdom === this.fiber!.bdom) {
+      // If the error was handled by some child component, we need to find it to
+      // apply its change
+      for (let k in this.children) {
+        const child = this.children[k];
+        child.updateDom();
+      }
+    } else {
+      // if we get here, this is the component that handled the error and rerendered
+      // itself, so we can simply patch the dom
+      this.bdom!.patch(this.fiber!.bdom, false);
+      this.fiber!.appliedToDom = true;
+      this.fiber = null;
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // Block DOM methods
   // ---------------------------------------------------------------------------

src/component/error_handling.ts

@@ -45,6 +45,14 @@ export function handleError(params: ErrorParams) {
   const node = "node" in params ? params.node : params.fiber.node;
   const fiber = "fiber" in params ? params.fiber : node.fiber!;
 
+  // resets the fibers on components if possible. This is important so that
+  // new renderings can be properly included in the initial one, if any.
+  let current: Fiber | null = fiber;
+  do {
+    current.node.fiber = current;
+    current = current.parent;
+  } while (current);
+
   fibersInError.set(fiber.root, error);
 
   const handled = _handleError(node, error, true);

src/component/fibers.ts

@@ -1,8 +1,7 @@
-import type { BDom } from "../blockdom";
-import { mount } from "../blockdom";
+import { BDom, mount } from "../blockdom";
 import type { ComponentNode } from "./component_node";
-import { STATUS } from "./status";
 import { fibersInError, handleError } from "./error_handling";
+import { STATUS } from "./status";
 
 export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
   let current = node.fiber;
@@ -30,6 +29,7 @@ export function makeRootFiber(node: ComponentNode): Fiber {
     if (fibersInError.has(current)) {
       fibersInError.delete(current);
       fibersInError.delete(root);
+      current.appliedToDom = false;
     }
     return current;
   }
@@ -168,12 +168,20 @@ export class MountFiber extends RootFiber {
     let current: Fiber | undefined = this;
     try {
       const node = this.node;
-      node.bdom = this.bdom;
-      if (this.position === "last-child" || this.target.childNodes.length === 0) {
-        mount(node.bdom!, this.target);
+      if (node.bdom) {
+        // this is a complicated situation: if we mount a fiber with an existing
+        // bdom, this means that this same fiber was already completed, mounted,
+        // but a crash occurred in some mounted hook. Then, it was handled and
+        // the new rendering is being applied.
+        node.updateDom();
       } else {
-        const firstChild = this.target.childNodes[0];
-        mount(node.bdom!, this.target, firstChild);
+        node.bdom = this.bdom;
+        if (this.position === "last-child" || this.target.childNodes.length === 0) {
+          mount(node.bdom!, this.target);
+        } else {
+          const firstChild = this.target.childNodes[0];
+          mount(node.bdom!, this.target, firstChild);
+        }
       }
       node.status = STATUS.MOUNTED;
       this.appliedToDom = true;