[IMP] component: validate mounting target at patch time

src/app/app.ts

@@ -4,6 +4,7 @@ import { MountOptions } from "../component/fibers";
 import { Scheduler } from "../component/scheduler";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { nodeErrorHandlers } from "../component/error_handling";
+import { validateTarget } from "../utils";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -48,22 +49,13 @@ export class App<
   }
 
   mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
-    this.checkTarget(target);
+    validateTarget(target);
     const node = this.makeNode(this.Root, this.props);
     const prom = this.mountNode(node, target, options);
     this.root = node;
     return prom;
   }
 
-  checkTarget(target: HTMLElement) {
-    if (!(target instanceof HTMLElement)) {
-      throw new Error("Cannot mount component: the target is not a valid DOM element");
-    }
-    if (!document.body.contains(target)) {
-      throw new Error("Cannot mount a component on a detached dom node");
-    }
-  }
-
   makeNode(Component: ComponentConstructor, props: any): ComponentNode {
     return new ComponentNode(Component, props, this);
   }

src/component/fibers.ts

@@ -1,4 +1,5 @@
 import { BDom, mount } from "../blockdom";
+import { validateTarget } from "../utils";
 import type { ComponentNode } from "./component_node";
 import { fibersInError, handleError } from "./error_handling";
 import { STATUS } from "./status";
@@ -158,6 +159,7 @@ export class MountFiber extends RootFiber {
   complete() {
     let current: Fiber | undefined = this;
     try {
+      validateTarget(this.target);
       const node = this.node;
       if (node.bdom) {
         // this is a complicated situation: if we mount a fiber with an existing

src/utils.ts

@@ -24,6 +24,15 @@ export function batched(callback: Callback): Callback {
   };
 }
 
+export function validateTarget(target: HTMLElement) {
+  if (!(target instanceof HTMLElement)) {
+    throw new Error("Cannot mount component: the target is not a valid DOM element");
+  }
+  if (!document.body.contains(target)) {
+    throw new Error("Cannot mount a component on a detached dom node");
+  }
+}
+
 export class EventBus extends EventTarget {
   trigger(name: string, payload?: any) {
     this.dispatchEvent(new CustomEvent(name, { detail: payload }));