fix: unmounting of devtools

Author: AlemTuzlak

packages/devtools-utils/src/solid/class.tsx

@@ -14,13 +14,16 @@ import type { JSX } from 'solid-js'
 export function constructCoreClass(Component: () => JSX.Element) {
   class DevtoolsCore {
     #isMounted = false
+    #isMounting = false;
+    #mountCb: (() => void) | null = null;
     #dispose?: () => void
     #Component: any
     #ThemeProvider: any
 
-    constructor() {}
+    constructor() { }
 
     async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {
+      this.#isMounting = true;
       const { lazy } = await import('solid-js')
       const { render, Portal } = await import('solid-js/web')
       if (this.#isMounted) {
@@ -49,13 +52,25 @@ export function constructCoreClass(Component: () => JSX.Element) {
         )
       }, mountTo)
       this.#isMounted = true
+      this.#isMounting = false;
       this.#dispose = dispose
+      if (this.#mountCb) {
+        this.#mountCb();
+        this.#mountCb = null;
+      }
     }
 
     unmount() {
-      if (!this.#isMounted) {
+      if (!this.#isMounted && !this.#isMounting) {
         throw new Error('Devtools is not mounted')
       }
+      if (this.#isMounting) {
+        this.#mountCb = () => {
+          this.#dispose?.()
+          this.#isMounted = false
+        }
+        return;
+      }
       this.#dispose?.()
       this.#isMounted = false
     }
@@ -64,8 +79,8 @@ export function constructCoreClass(Component: () => JSX.Element) {
     constructor() {
       super()
     }
-    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
-    unmount() {}
+    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') { }
+    unmount() { }
   }
   return [DevtoolsCore, NoOpDevtoolsCore] as const
 }