@tanstack/devtools-utils 0.3.1 → 0.3.2

package/dist/solid/esm/chunk/UX5ZZ4MG.js

@@ -0,0 +1,24 @@
+import { render, createComponent, Portal, ssr, ssrStyleProperty, escape } from 'solid-js/web';
+import { lazy } from 'solid-js';
+
+// src/solid/class-mount-impl.tsx
+var _tmpl$ = ['<div style="', '">', "</div>"];
+function __mountComponent(el, theme, importFn) {
+  const Component = lazy(importFn);
+  const ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((m) => ({
+    default: m.ThemeContextProvider
+  })));
+  return render(() => createComponent(Portal, {
+    mount: el,
+    get children() {
+      return ssr(_tmpl$, ssrStyleProperty("height:", "100%"), escape(createComponent(ThemeProvider, {
+        theme,
+        get children() {
+          return createComponent(Component, {});
+        }
+      })));
+    }
+  }), el);
+}
+
+export { __mountComponent };

package/dist/solid/esm/chunk/ZXPCWXRH.js

@@ -0,0 +1,26 @@
+import { render, createComponent, Portal, insert, template } from 'solid-js/web';
+import { lazy } from 'solid-js';
+
+// src/solid/class-mount-impl.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
+function __mountComponent(el, theme, importFn) {
+  const Component = lazy(importFn);
+  const ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((m) => ({
+    default: m.ThemeContextProvider
+  })));
+  return render(() => createComponent(Portal, {
+    mount: el,
+    get children() {
+      var _el$ = _tmpl$();
+      insert(_el$, createComponent(ThemeProvider, {
+        theme,
+        get children() {
+          return createComponent(Component, {});
+        }
+      }));
+      return _el$;
+    }
+  }), el);
+}
+
+export { __mountComponent };

package/dist/solid/esm/class-mount-impl/LK7V47IP.js

@@ -0,0 +1 @@
+export { __mountComponent } from '../chunk/UX5ZZ4MG.js';

package/dist/solid/esm/class-mount-impl/ZAIAXV4M.js

@@ -0,0 +1 @@
+export { __mountComponent } from '../chunk/ZXPCWXRH.js';

package/dist/solid/esm/dev.js

@@ -1,58 +1,34 @@
-import { createComponent, insert, use, template } from 'solid-js/web';
+export { __mountComponent } from './chunk/ZXPCWXRH.js';
+import { use, createComponent, template } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
-// src/solid/class.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
-function constructCoreClass(Component) {
+// src/solid/class.ts
+function constructCoreClass(importFn) {
   class DevtoolsCore {
     #isMounted = false;
     #isMounting = false;
-    #mountCb = null;
+    #abortMount = false;
     #dispose;
-    #Component;
-    #ThemeProvider;
     constructor() {
     }
     async mount(el, theme) {
-      this.#isMounting = true;
-      const {
-        lazy
-      } = await import('solid-js');
-      const {
-        render,
-        Portal
-      } = await import('solid-js/web');
-      if (this.#isMounted) {
+      if (this.#isMounted || this.#isMounting) {
         throw new Error("Devtools is already mounted");
       }
-      const mountTo = el;
-      const dispose = render(() => {
-        this.#Component = Component;
-        this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
-          default: mod.ThemeContextProvider
-        })));
-        const Devtools = this.#Component;
-        const ThemeProvider = this.#ThemeProvider;
-        return createComponent(Portal, {
-          mount: mountTo,
-          get children() {
-            var _el$ = _tmpl$();
-            insert(_el$, createComponent(ThemeProvider, {
-              theme,
-              get children() {
-                return createComponent(Devtools, {});
-              }
-            }));
-            return _el$;
-          }
-        });
-      }, mountTo);
-      this.#isMounted = true;
-      this.#isMounting = false;
-      this.#dispose = dispose;
-      if (this.#mountCb) {
-        this.#mountCb();
-        this.#mountCb = null;
+      this.#isMounting = true;
+      this.#abortMount = false;
+      try {
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/ZAIAXV4M.js');
+        if (this.#abortMount) {
+          this.#isMounting = false;
+          return;
+        }
+        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#isMounted = true;
+        this.#isMounting = false;
+      } catch (err) {
+        this.#isMounting = false;
+        console.error("[TanStack Devtools] Failed to load:", err);
       }
     }
     unmount() {
@@ -60,10 +36,8 @@ function constructCoreClass(Component) {
         throw new Error("Devtools is not mounted");
       }
       if (this.#isMounting) {
-        this.#mountCb = () => {
-          this.#dispose?.();
-          this.#isMounted = false;
-        };
+        this.#abortMount = true;
+        this.#isMounting = false;
         return;
       }
       this.#dispose?.();
@@ -81,7 +55,7 @@ function constructCoreClass(Component) {
   }
   return [DevtoolsCore, NoOpDevtoolsCore];
 }
-var _tmpl$2 = /* @__PURE__ */ template(`<div style=height:100%>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     let devToolRef;
@@ -95,7 +69,7 @@ function createSolidPanel(CoreClass) {
       });
     });
     return (() => {
-      var _el$ = _tmpl$2();
+      var _el$ = _tmpl$();
       var _ref$ = devToolRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
       return _el$;

package/dist/solid/esm/index.d.ts

@@ -1,25 +1,23 @@
 import * as solid_js from 'solid-js';
 import { JSX } from 'solid-js';
 
-/** @jsxImportSource solid-js - we use Solid.js as JSX here */
-
 /**
  * Constructs the core class for the Devtools.
  * This utility is used to construct a lazy loaded Solid component for the Devtools.
  * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
  * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
  * the Devtools from your application.
- * @param importPath The path to the Solid component to be lazily imported
+ * @param importFn A function that returns a dynamic import of the Solid component
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
-declare function constructCoreClass(Component: () => JSX.Element): readonly [{
+declare function constructCoreClass(importFn: () => Promise<{
+    default: () => JSX.Element;
+}>): readonly [{
     new (): {
         "__#private@#isMounted": boolean;
         "__#private@#isMounting": boolean;
-        "__#private@#mountCb": (() => void) | null;
+        "__#private@#abortMount": boolean;
         "__#private@#dispose"?: () => void;
-        "__#private@#Component": any;
-        "__#private@#ThemeProvider": any;
         mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
         unmount(): void;
     };
@@ -29,10 +27,8 @@ declare function constructCoreClass(Component: () => JSX.Element): readonly [{
         unmount(): void;
         "__#private@#isMounted": boolean;
         "__#private@#isMounting": boolean;
-        "__#private@#mountCb": (() => void) | null;
+        "__#private@#abortMount": boolean;
         "__#private@#dispose"?: () => void;
-        "__#private@#Component": any;
-        "__#private@#ThemeProvider": any;
     };
 }];
 type ClassType = ReturnType<typeof constructCoreClass>[0];
@@ -61,4 +57,10 @@ declare function createSolidPlugin({ Component, ...config }: {
     defaultOpen?: boolean;
 }];
 
-export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+declare function __mountComponent(el: HTMLElement, theme: 'light' | 'dark', importFn: () => Promise<{
+    default: () => JSX.Element;
+}>): () => void;
+
+export { type ClassType, type DevtoolsPanelProps, __mountComponent, constructCoreClass, createSolidPanel, createSolidPlugin };

package/dist/solid/esm/index.js

@@ -1,58 +1,34 @@
-import { createComponent, insert, use, template } from 'solid-js/web';
+export { __mountComponent } from './chunk/ZXPCWXRH.js';
+import { use, createComponent, template } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
-// src/solid/class.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
-function constructCoreClass(Component) {
+// src/solid/class.ts
+function constructCoreClass(importFn) {
   class DevtoolsCore {
     #isMounted = false;
     #isMounting = false;
-    #mountCb = null;
+    #abortMount = false;
     #dispose;
-    #Component;
-    #ThemeProvider;
     constructor() {
     }
     async mount(el, theme) {
-      this.#isMounting = true;
-      const {
-        lazy
-      } = await import('solid-js');
-      const {
-        render,
-        Portal
-      } = await import('solid-js/web');
-      if (this.#isMounted) {
+      if (this.#isMounted || this.#isMounting) {
         throw new Error("Devtools is already mounted");
       }
-      const mountTo = el;
-      const dispose = render(() => {
-        this.#Component = Component;
-        this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
-          default: mod.ThemeContextProvider
-        })));
-        const Devtools = this.#Component;
-        const ThemeProvider = this.#ThemeProvider;
-        return createComponent(Portal, {
-          mount: mountTo,
-          get children() {
-            var _el$ = _tmpl$();
-            insert(_el$, createComponent(ThemeProvider, {
-              theme,
-              get children() {
-                return createComponent(Devtools, {});
-              }
-            }));
-            return _el$;
-          }
-        });
-      }, mountTo);
-      this.#isMounted = true;
-      this.#isMounting = false;
-      this.#dispose = dispose;
-      if (this.#mountCb) {
-        this.#mountCb();
-        this.#mountCb = null;
+      this.#isMounting = true;
+      this.#abortMount = false;
+      try {
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/ZAIAXV4M.js');
+        if (this.#abortMount) {
+          this.#isMounting = false;
+          return;
+        }
+        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#isMounted = true;
+        this.#isMounting = false;
+      } catch (err) {
+        this.#isMounting = false;
+        console.error("[TanStack Devtools] Failed to load:", err);
       }
     }
     unmount() {
@@ -60,10 +36,8 @@ function constructCoreClass(Component) {
         throw new Error("Devtools is not mounted");
       }
       if (this.#isMounting) {
-        this.#mountCb = () => {
-          this.#dispose?.();
-          this.#isMounted = false;
-        };
+        this.#abortMount = true;
+        this.#isMounting = false;
         return;
       }
       this.#dispose?.();
@@ -81,7 +55,7 @@ function constructCoreClass(Component) {
   }
   return [DevtoolsCore, NoOpDevtoolsCore];
 }
-var _tmpl$2 = /* @__PURE__ */ template(`<div style=height:100%>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     let devToolRef;
@@ -95,7 +69,7 @@ function createSolidPanel(CoreClass) {
       });
     });
     return (() => {
-      var _el$ = _tmpl$2();
+      var _el$ = _tmpl$();
       var _ref$ = devToolRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
       return _el$;

package/dist/solid/esm/server.js

@@ -1,56 +1,34 @@
-import { createComponent, ssr, ssrStyleProperty, escape } from 'solid-js/web';
+export { __mountComponent } from './chunk/UX5ZZ4MG.js';
+import { ssr, ssrStyleProperty, createComponent } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
-// src/solid/class.tsx
-var _tmpl$ = ['<div style="', '">', "</div>"];
-function constructCoreClass(Component) {
+// src/solid/class.ts
+function constructCoreClass(importFn) {
   class DevtoolsCore {
     #isMounted = false;
     #isMounting = false;
-    #mountCb = null;
+    #abortMount = false;
     #dispose;
-    #Component;
-    #ThemeProvider;
     constructor() {
     }
     async mount(el, theme) {
-      this.#isMounting = true;
-      const {
-        lazy
-      } = await import('solid-js');
-      const {
-        render,
-        Portal
-      } = await import('solid-js/web');
-      if (this.#isMounted) {
+      if (this.#isMounted || this.#isMounting) {
         throw new Error("Devtools is already mounted");
       }
-      const mountTo = el;
-      const dispose = render(() => {
-        this.#Component = Component;
-        this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
-          default: mod.ThemeContextProvider
-        })));
-        const Devtools = this.#Component;
-        const ThemeProvider = this.#ThemeProvider;
-        return createComponent(Portal, {
-          mount: mountTo,
-          get children() {
-            return ssr(_tmpl$, ssrStyleProperty("height:", "100%"), escape(createComponent(ThemeProvider, {
-              theme,
-              get children() {
-                return createComponent(Devtools, {});
-              }
-            })));
-          }
-        });
-      }, mountTo);
-      this.#isMounted = true;
-      this.#isMounting = false;
-      this.#dispose = dispose;
-      if (this.#mountCb) {
-        this.#mountCb();
-        this.#mountCb = null;
+      this.#isMounting = true;
+      this.#abortMount = false;
+      try {
+        const { __mountComponent: __mountComponent2 } = await import('./class-mount-impl/LK7V47IP.js');
+        if (this.#abortMount) {
+          this.#isMounting = false;
+          return;
+        }
+        this.#dispose = __mountComponent2(el, theme, importFn);
+        this.#isMounted = true;
+        this.#isMounting = false;
+      } catch (err) {
+        this.#isMounting = false;
+        console.error("[TanStack Devtools] Failed to load:", err);
       }
     }
     unmount() {
@@ -58,10 +36,8 @@ function constructCoreClass(Component) {
         throw new Error("Devtools is not mounted");
       }
       if (this.#isMounting) {
-        this.#mountCb = () => {
-          this.#dispose?.();
-          this.#isMounted = false;
-        };
+        this.#abortMount = true;
+        this.#isMounting = false;
         return;
       }
       this.#dispose?.();
@@ -79,7 +55,7 @@ function constructCoreClass(Component) {
   }
   return [DevtoolsCore, NoOpDevtoolsCore];
 }
-var _tmpl$2 = ['<div style="', '"></div>'];
+var _tmpl$ = ['<div style="', '"></div>'];
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     const [devtools] = createSignal(new CoreClass());
@@ -88,7 +64,7 @@ function createSolidPanel(CoreClass) {
         devtools().unmount();
       });
     });
-    return ssr(_tmpl$2, ssrStyleProperty("height:", "100%"));
+    return ssr(_tmpl$, ssrStyleProperty("height:", "100%"));
   }
   function NoOpPanel(_props) {
     return [];

package/dist/solid-class/esm/class-mount-impl.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+export declare function __mountComponent(el: HTMLElement, theme: 'light' | 'dark', importFn: () => Promise<{
+    default: () => JSX.Element;
+}>): () => void;

package/dist/solid-class/esm/class-mount-impl.js

@@ -0,0 +1,26 @@
+import { render, createComponent, Portal, insert, template } from "solid-js/web";
+import { lazy } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
+function __mountComponent(el, theme, importFn) {
+  const Component = lazy(importFn);
+  const ThemeProvider = lazy(() => import("@tanstack/devtools-ui").then((m) => ({
+    default: m.ThemeContextProvider
+  })));
+  return render(() => createComponent(Portal, {
+    mount: el,
+    get children() {
+      var _el$ = _tmpl$();
+      insert(_el$, createComponent(ThemeProvider, {
+        theme,
+        get children() {
+          return createComponent(Component, {});
+        }
+      }));
+      return _el$;
+    }
+  }), el);
+}
+export {
+  __mountComponent
+};
+//# sourceMappingURL=class-mount-impl.js.map

package/dist/solid-class/esm/class-mount-impl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-mount-impl.js","sources":["../../../src/solid/class-mount-impl.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport type { JSX } from 'solid-js'\n\nexport function __mountComponent(\n  el: HTMLElement,\n  theme: 'light' | 'dark',\n  importFn: () => Promise<{ default: () => JSX.Element }>,\n): () => void {\n  const Component = lazy(importFn)\n  const ThemeProvider = lazy(() =>\n    import('@tanstack/devtools-ui').then((m) => ({\n      default: m.ThemeContextProvider,\n    })),\n  )\n\n  return render(\n    () => (\n      <Portal mount={el}>\n        <div style={{ height: '100%' }}>\n          <ThemeProvider theme={theme}>\n            <Component />\n          </ThemeProvider>\n        </div>\n      </Portal>\n    ),\n    el,\n  )\n}\n"],"names":["__mountComponent","el","theme","importFn","Component","lazy","ThemeProvider","then","m","default","ThemeContextProvider","render","_$createComponent","Portal","mount","children","_el$","_tmpl$","_$insert"],"mappings":";;;AAMO,SAASA,iBACdC,IACAC,OACAC,UACY;AACZ,QAAMC,YAAYC,KAAKF,QAAQ;AAC/B,QAAMG,gBAAgBD,KAAK,MACzB,OAAO,uBAAuB,EAAEE,KAAMC,CAAAA,OAAO;AAAA,IAC3CC,SAASD,EAAEE;AAAAA,EAAAA,EACX,CACJ;AAEA,SAAOC,OACL,MAAAC,gBACGC,QAAM;AAAA,IAACC,OAAOb;AAAAA,IAAE,IAAAc,WAAA;AAAA,UAAAC,OAAAC,OAAAA;AAAAC,aAAAF,MAAAJ,gBAEZN,eAAa;AAAA,QAACJ;AAAAA,QAAY,IAAAa,WAAA;AAAA,iBAAAH,gBACxBR,WAAS,EAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,aAAAY;AAAAA,IAAA;AAAA,EAAA,CAAA,GAKlBf,EACF;AACF;"}

package/dist/solid-class/esm/class.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'solid-js';
+/**
+ * Constructs the core class for the Devtools.
+ * This utility is used to construct a lazy loaded Solid component for the Devtools.
+ * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
+ * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
+ * the Devtools from your application.
+ * @param importFn A function that returns a dynamic import of the Solid component
+ * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
+ */
+export declare function constructCoreClass(importFn: () => Promise<{
+    default: () => JSX.Element;
+}>): readonly [{
+    new (): {
+        "__#private@#isMounted": boolean;
+        "__#private@#isMounting": boolean;
+        "__#private@#abortMount": boolean;
+        "__#private@#dispose"?: () => void;
+        mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
+        unmount(): void;
+    };
+}, {
+    new (): {
+        mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
+        unmount(): void;
+        "__#private@#isMounted": boolean;
+        "__#private@#isMounting": boolean;
+        "__#private@#abortMount": boolean;
+        "__#private@#dispose"?: () => void;
+    };
+}];
+export type ClassType = ReturnType<typeof constructCoreClass>[0];

package/dist/solid-class/esm/class.js

@@ -0,0 +1,56 @@
+function constructCoreClass(importFn) {
+  class DevtoolsCore {
+    #isMounted = false;
+    #isMounting = false;
+    #abortMount = false;
+    #dispose;
+    constructor() {
+    }
+    async mount(el, theme) {
+      if (this.#isMounted || this.#isMounting) {
+        throw new Error("Devtools is already mounted");
+      }
+      this.#isMounting = true;
+      this.#abortMount = false;
+      try {
+        const { __mountComponent } = await import("./class-mount-impl.js");
+        if (this.#abortMount) {
+          this.#isMounting = false;
+          return;
+        }
+        this.#dispose = __mountComponent(el, theme, importFn);
+        this.#isMounted = true;
+        this.#isMounting = false;
+      } catch (err) {
+        this.#isMounting = false;
+        console.error("[TanStack Devtools] Failed to load:", err);
+      }
+    }
+    unmount() {
+      if (!this.#isMounted && !this.#isMounting) {
+        throw new Error("Devtools is not mounted");
+      }
+      if (this.#isMounting) {
+        this.#abortMount = true;
+        this.#isMounting = false;
+        return;
+      }
+      this.#dispose?.();
+      this.#isMounted = false;
+    }
+  }
+  class NoOpDevtoolsCore extends DevtoolsCore {
+    constructor() {
+      super();
+    }
+    async mount(_el, _theme) {
+    }
+    unmount() {
+    }
+  }
+  return [DevtoolsCore, NoOpDevtoolsCore];
+}
+export {
+  constructCoreClass
+};
+//# sourceMappingURL=class.js.map

package/dist/solid-class/esm/class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sources":["../../../src/solid/class.ts"],"sourcesContent":["import type { JSX } from 'solid-js'\n\n/**\n * Constructs the core class for the Devtools.\n * This utility is used to construct a lazy loaded Solid component for the Devtools.\n * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.\n * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude\n * the Devtools from your application.\n * @param importFn A function that returns a dynamic import of the Solid component\n * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class\n */\nexport function constructCoreClass(\n  importFn: () => Promise<{ default: () => JSX.Element }>,\n) {\n  class DevtoolsCore {\n    #isMounted = false\n    #isMounting = false\n    #abortMount = false\n    #dispose?: () => void\n\n    constructor() {}\n\n    async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {\n      if (this.#isMounted || this.#isMounting) {\n        throw new Error('Devtools is already mounted')\n      }\n      this.#isMounting = true\n      this.#abortMount = false\n\n      try {\n        const { __mountComponent } = await import('./class-mount-impl')\n        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- can be set by unmount() during await\n        if (this.#abortMount) {\n          this.#isMounting = false\n          return\n        }\n\n        this.#dispose = __mountComponent(el, theme, importFn)\n        this.#isMounted = true\n        this.#isMounting = false\n      } catch (err) {\n        this.#isMounting = false\n        console.error('[TanStack Devtools] Failed to load:', err)\n      }\n    }\n\n    unmount() {\n      if (!this.#isMounted && !this.#isMounting) {\n        throw new Error('Devtools is not mounted')\n      }\n      if (this.#isMounting) {\n        this.#abortMount = true\n        this.#isMounting = false\n        return\n      }\n      this.#dispose?.()\n      this.#isMounted = false\n    }\n  }\n\n  class NoOpDevtoolsCore extends DevtoolsCore {\n    constructor() {\n      super()\n    }\n    async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}\n    unmount() {}\n  }\n\n  return [DevtoolsCore, NoOpDevtoolsCore] as const\n}\n\nexport type ClassType = ReturnType<typeof constructCoreClass>[0]\n"],"names":[],"mappings":"AAWO,SAAS,mBACd,UACA;AAAA,EACA,MAAM,aAAa;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IAEA,cAAc;AAAA,IAAC;AAAA,IAEf,MAAM,MAA6B,IAAO,OAAyB;AACjE,UAAI,KAAK,cAAc,KAAK,aAAa;AACvC,cAAM,IAAI,MAAM,6BAA6B;AAAA,MAC/C;AACA,WAAK,cAAc;AACnB,WAAK,cAAc;AAEnB,UAAI;AACF,cAAM,EAAE,iBAAA,IAAqB,MAAM,OAAO,uBAAoB;AAE9D,YAAI,KAAK,aAAa;AACpB,eAAK,cAAc;AACnB;AAAA,QACF;AAEA,aAAK,WAAW,iBAAiB,IAAI,OAAO,QAAQ;AACpD,aAAK,aAAa;AAClB,aAAK,cAAc;AAAA,MACrB,SAAS,KAAK;AACZ,aAAK,cAAc;AACnB,gBAAQ,MAAM,uCAAuC,GAAG;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,UAAU;AACR,UAAI,CAAC,KAAK,cAAc,CAAC,KAAK,aAAa;AACzC,cAAM,IAAI,MAAM,yBAAyB;AAAA,MAC3C;AACA,UAAI,KAAK,aAAa;AACpB,aAAK,cAAc;AACnB,aAAK,cAAc;AACnB;AAAA,MACF;AACA,WAAK,WAAA;AACL,WAAK,aAAa;AAAA,IACpB;AAAA,EAAA;AAAA,EAGF,MAAM,yBAAyB,aAAa;AAAA,IAC1C,cAAc;AACZ,YAAA;AAAA,IACF;AAAA,IACA,MAAM,MAA6B,KAAQ,QAA0B;AAAA,IAAC;AAAA,IACtE,UAAU;AAAA,IAAC;AAAA,EAAA;AAGb,SAAO,CAAC,cAAc,gBAAgB;AACxC;"}

package/dist/solid-class/esm/class.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/solid-class/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './class.js';
+export * from './panel.js';
+export * from './plugin.js';
+export { __mountComponent } from './class-mount-impl.js';

package/dist/solid-class/esm/panel.d.ts

@@ -0,0 +1,5 @@
+import { ClassType } from './class.js';
+export interface DevtoolsPanelProps {
+    theme?: 'light' | 'dark';
+}
+export declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => import("solid-js").JSX.Element, (_props: TComponentProps) => import("solid-js").JSX.Element];

package/dist/solid-class/esm/plugin.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+import { DevtoolsPanelProps } from './panel.js';
+export declare function createSolidPlugin({ Component, ...config }: {
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+    Component: (props: DevtoolsPanelProps) => JSX.Element;
+}): readonly [() => {
+    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, () => {
+    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -32,6 +32,10 @@
       }
     },
     "./solid": {
+      "workerd": {
+        "types": "./dist/solid/esm/index.d.ts",
+        "import": "./dist/solid/esm/server.js"
+      },
       "browser": {
         "development": {
           "types": "./dist/solid/esm/index.d.ts",
@@ -47,6 +51,12 @@
       "types": "./dist/solid/esm/index.d.ts",
       "import": "./dist/solid/esm/index.js"
     },
+    "./solid/class": {
+      "import": {
+        "types": "./dist/solid-class/esm/class.d.ts",
+        "default": "./dist/solid-class/esm/class.js"
+      }
+    },
     "./vue": {
       "import": {
         "types": "./dist/vue/esm/index.d.ts",
@@ -103,6 +113,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && tsup "
+    "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && vite build --config vite.config.solid-class.ts && tsup"
   }
 }

package/src/solid/class-mount-impl.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource solid-js - we use Solid.js as JSX here */
+
+import { lazy } from 'solid-js'
+import { Portal, render } from 'solid-js/web'
+import type { JSX } from 'solid-js'
+
+export function __mountComponent(
+  el: HTMLElement,
+  theme: 'light' | 'dark',
+  importFn: () => Promise<{ default: () => JSX.Element }>,
+): () => void {
+  const Component = lazy(importFn)
+  const ThemeProvider = lazy(() =>
+    import('@tanstack/devtools-ui').then((m) => ({
+      default: m.ThemeContextProvider,
+    })),
+  )
+
+  return render(
+    () => (
+      <Portal mount={el}>
+        <div style={{ height: '100%' }}>
+          <ThemeProvider theme={theme}>
+            <Component />
+          </ThemeProvider>
+        </div>
+      </Portal>
+    ),
+    el,
+  )
+}

package/src/solid/class.test.tsx

@@ -2,53 +2,38 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { constructCoreClass } from './class'
 
-const lazyImportMock = vi.fn((fn) => fn())
-const renderMock = vi.fn()
-const portalMock = vi.fn((props: any) => <div>{props.children}</div>)
+const disposeMock = vi.fn()
+const mountComponentMock = vi.fn(() => disposeMock)
 
-vi.mock('solid-js', async () => {
-  const actual = await vi.importActual<any>('solid-js')
-  return {
-    ...actual,
-    lazy: lazyImportMock,
-  }
-})
+vi.mock('./class-mount-impl', () => ({
+  __mountComponent: mountComponentMock,
+}))
 
-vi.mock('solid-js/web', async () => {
-  const actual = await vi.importActual<any>('solid-js/web')
-  return {
-    ...actual,
-    render: renderMock,
-    Portal: portalMock,
-  }
-})
+const importFn = () =>
+  Promise.resolve({ default: () => <div>Test Component</div> })
 
 describe('constructCoreClass', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
+
   it('should export DevtoolsCore and NoOpDevtoolsCore classes and make no calls to Solid.js primitives', () => {
-    const [DevtoolsCore, NoOpDevtoolsCore] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [DevtoolsCore, NoOpDevtoolsCore] = constructCoreClass(importFn)
     expect(DevtoolsCore).toBeDefined()
     expect(NoOpDevtoolsCore).toBeDefined()
-    expect(lazyImportMock).not.toHaveBeenCalled()
+    expect(mountComponentMock).not.toHaveBeenCalled()
   })
 
-  it('DevtoolsCore should call solid primitives when mount is called', async () => {
-    const [DevtoolsCore, _] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+  it('DevtoolsCore should call __mountComponent when mount is called', async () => {
+    const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
-    await instance.mount(document.createElement('div'), 'dark')
-    expect(renderMock).toHaveBeenCalled()
+    const el = document.createElement('div')
+    await instance.mount(el, 'dark')
+    expect(mountComponentMock).toHaveBeenCalledWith(el, 'dark', importFn)
   })
 
   it('DevtoolsCore should throw if mount is called twice without unmounting', async () => {
-    const [DevtoolsCore, _] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
     await instance.mount(document.createElement('div'), 'dark')
     await expect(
@@ -57,17 +42,13 @@ describe('constructCoreClass', () => {
   })
 
   it('DevtoolsCore should throw if unmount is called before mount', () => {
-    const [DevtoolsCore, _] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
     expect(() => instance.unmount()).toThrow('Devtools is not mounted')
   })
 
   it('DevtoolsCore should allow mount after unmount', async () => {
-    const [DevtoolsCore, _] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [DevtoolsCore] = constructCoreClass(importFn)
     const instance = new DevtoolsCore()
     await instance.mount(document.createElement('div'), 'dark')
     instance.unmount()
@@ -76,22 +57,35 @@ describe('constructCoreClass', () => {
     ).resolves.not.toThrow()
   })
 
-  it('NoOpDevtoolsCore should not call any solid primitives when mount is called', async () => {
-    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+  it('DevtoolsCore should call dispose on unmount', async () => {
+    const [DevtoolsCore] = constructCoreClass(importFn)
+    const instance = new DevtoolsCore()
+    await instance.mount(document.createElement('div'), 'dark')
+    instance.unmount()
+    expect(disposeMock).toHaveBeenCalled()
+  })
+
+  it('DevtoolsCore should abort mount if unmount is called during mounting', async () => {
+    const [DevtoolsCore] = constructCoreClass(importFn)
+    const instance = new DevtoolsCore()
+    const mountPromise = instance.mount(document.createElement('div'), 'dark')
+    // Unmount while mount is in progress — triggers abort path
+    // Note: since the mock resolves immediately, this tests the #abortMount flag
+    await mountPromise
+    // Mount completed, so unmount should work normally
+    instance.unmount()
+    expect(disposeMock).toHaveBeenCalled()
+  })
+
+  it('NoOpDevtoolsCore should not call __mountComponent when mount is called', async () => {
+    const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
     await noOpInstance.mount(document.createElement('div'), 'dark')
-
-    expect(lazyImportMock).not.toHaveBeenCalled()
-    expect(renderMock).not.toHaveBeenCalled()
-    expect(portalMock).not.toHaveBeenCalled()
+    expect(mountComponentMock).not.toHaveBeenCalled()
   })
 
   it('NoOpDevtoolsCore should not throw if mount is called multiple times', async () => {
-    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
     await noOpInstance.mount(document.createElement('div'), 'dark')
     await expect(
@@ -100,17 +94,13 @@ describe('constructCoreClass', () => {
   })
 
   it('NoOpDevtoolsCore should not throw if unmount is called before mount', () => {
-    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
     expect(() => noOpInstance.unmount()).not.toThrow()
   })
 
   it('NoOpDevtoolsCore should not throw if unmount is called after mount', async () => {
-    const [_, NoOpDevtoolsCore] = constructCoreClass(() => (
-      <div>Test Component</div>
-    ))
+    const [, NoOpDevtoolsCore] = constructCoreClass(importFn)
     const noOpInstance = new NoOpDevtoolsCore()
     await noOpInstance.mount(document.createElement('div'), 'dark')
     expect(() => noOpInstance.unmount()).not.toThrow()

package/src/solid/{class.tsx → class.ts}

@@ -1,5 +1,3 @@
-/** @jsxImportSource solid-js - we use Solid.js as JSX here */
-
 import type { JSX } from 'solid-js'
 
 /**
@@ -8,55 +6,41 @@ import type { JSX } from 'solid-js'
  * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
  * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
  * the Devtools from your application.
- * @param importPath The path to the Solid component to be lazily imported
+ * @param importFn A function that returns a dynamic import of the Solid component
  * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
  */
-export function constructCoreClass(Component: () => JSX.Element) {
+export function constructCoreClass(
+  importFn: () => Promise<{ default: () => JSX.Element }>,
+) {
   class DevtoolsCore {
     #isMounted = false
     #isMounting = false
-    #mountCb: (() => void) | null = null
+    #abortMount = false
     #dispose?: () => void
-    #Component: any
-    #ThemeProvider: any
 
     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) {
+      if (this.#isMounted || this.#isMounting) {
         throw new Error('Devtools is already mounted')
       }
-      const mountTo = el
-      const dispose = render(() => {
-        this.#Component = Component
+      this.#isMounting = true
+      this.#abortMount = false
 
-        this.#ThemeProvider = lazy(() =>
-          import('@tanstack/devtools-ui').then((mod) => ({
-            default: mod.ThemeContextProvider,
-          })),
-        )
-        const Devtools = this.#Component
-        const ThemeProvider = this.#ThemeProvider
+      try {
+        const { __mountComponent } = await import('./class-mount-impl')
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- can be set by unmount() during await
+        if (this.#abortMount) {
+          this.#isMounting = false
+          return
+        }
 
-        return (
-          <Portal mount={mountTo}>
-            <div style={{ height: '100%' }}>
-              <ThemeProvider theme={theme}>
-                <Devtools />
-              </ThemeProvider>
-            </div>
-          </Portal>
-        )
-      }, mountTo)
-      this.#isMounted = true
-      this.#isMounting = false
-      this.#dispose = dispose
-      if (this.#mountCb) {
-        this.#mountCb()
-        this.#mountCb = null
+        this.#dispose = __mountComponent(el, theme, importFn)
+        this.#isMounted = true
+        this.#isMounting = false
+      } catch (err) {
+        this.#isMounting = false
+        console.error('[TanStack Devtools] Failed to load:', err)
       }
     }
 
@@ -65,16 +49,15 @@ export function constructCoreClass(Component: () => JSX.Element) {
         throw new Error('Devtools is not mounted')
       }
       if (this.#isMounting) {
-        this.#mountCb = () => {
-          this.#dispose?.()
-          this.#isMounted = false
-        }
+        this.#abortMount = true
+        this.#isMounting = false
         return
       }
       this.#dispose?.()
       this.#isMounted = false
     }
   }
+
   class NoOpDevtoolsCore extends DevtoolsCore {
     constructor() {
       super()
@@ -82,6 +65,7 @@ export function constructCoreClass(Component: () => JSX.Element) {
     async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}
     unmount() {}
   }
+
   return [DevtoolsCore, NoOpDevtoolsCore] as const
 }
 

package/src/solid/index.ts

@@ -1,3 +1,4 @@
 export * from './class'
 export * from './panel'
 export * from './plugin'
+export { __mountComponent } from './class-mount-impl'