@tanstack/devtools-utils 0.1.0 → 0.2.1

package/dist/react/esm/panel.js

@@ -5,15 +5,14 @@ function createReactPanel(CoreClass) {
     const devToolRef = useRef(null);
     const devtools = useRef(null);
     useEffect(() => {
-      if (devtools.current) return;
-      devtools.current = new CoreClass();
+      const instance = new CoreClass();
+      devtools.current = instance;
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? "dark");
+        instance.mount(devToolRef.current, props?.theme ?? "dark");
       }
       return () => {
-        if (devToolRef.current) {
-          devtools.current?.unmount();
-        }
+        instance.unmount();
+        devtools.current = null;
       };
     }, [props?.theme]);
     return /* @__PURE__ */ jsx("div", { style: { height: "100%" }, ref: devToolRef });

package/dist/react/esm/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      if (devtools.current) return\n\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n        }\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,iBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,UAAI,SAAS,QAAS;AAEtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}
+{"version":3,"file":"panel.js","sources":["../../../src/react/panel.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a React component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-react'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A React component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [ReactDevtoolsPanel, NoOpReactDevtoolsPanel] = createReactPanel('@tanstack/devtools-react', 'DevtoolsCore')\n * ```\n */\nexport function createReactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      const instance = new CoreClass()\n      devtools.current = instance\n\n      if (devToolRef.current) {\n        instance.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        instance.unmount()\n        devtools.current = null\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAuBO,SAAS,iBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,YAAM,WAAW,IAAI,UAAA;AACrB,eAAS,UAAU;AAEnB,UAAI,WAAW,SAAS;AACtB,iBAAS,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MAC3D;AAEA,aAAO,MAAM;AACX,iBAAS,QAAA;AACT,iBAAS,UAAU;AAAA,MACrB;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}

package/dist/solid/esm/dev.js

@@ -6,12 +6,15 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function constructCoreClass(Component) {
   class DevtoolsCore {
     #isMounted = false;
+    #isMounting = false;
+    #mountCb = null;
     #dispose;
     #Component;
     #ThemeProvider;
     constructor() {
     }
     async mount(el, theme) {
+      this.#isMounting = true;
       const {
         lazy
       } = await import('solid-js');
@@ -46,12 +49,24 @@ function constructCoreClass(Component) {
         });
       }, 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;
     }

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

@@ -15,6 +15,8 @@ import { JSX } from 'solid-js';
 declare function constructCoreClass(Component: () => JSX.Element): readonly [{
     new (): {
         "__#private@#isMounted": boolean;
+        "__#private@#isMounting": boolean;
+        "__#private@#mountCb": (() => void) | null;
         "__#private@#dispose"?: () => void;
         "__#private@#Component": any;
         "__#private@#ThemeProvider": any;
@@ -26,6 +28,8 @@ declare function constructCoreClass(Component: () => JSX.Element): readonly [{
         mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
         unmount(): void;
         "__#private@#isMounted": boolean;
+        "__#private@#isMounting": boolean;
+        "__#private@#mountCb": (() => void) | null;
         "__#private@#dispose"?: () => void;
         "__#private@#Component": any;
         "__#private@#ThemeProvider": any;

package/dist/solid/esm/index.js

@@ -6,12 +6,15 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function constructCoreClass(Component) {
   class DevtoolsCore {
     #isMounted = false;
+    #isMounting = false;
+    #mountCb = null;
     #dispose;
     #Component;
     #ThemeProvider;
     constructor() {
     }
     async mount(el, theme) {
+      this.#isMounting = true;
       const {
         lazy
       } = await import('solid-js');
@@ -46,12 +49,24 @@ function constructCoreClass(Component) {
         });
       }, 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;
     }

package/dist/solid/esm/server.js

@@ -6,12 +6,15 @@ var _tmpl$ = ['<div style="', '">', "</div>"];
 function constructCoreClass(Component) {
   class DevtoolsCore {
     #isMounted = false;
+    #isMounting = false;
+    #mountCb = null;
     #dispose;
     #Component;
     #ThemeProvider;
     constructor() {
     }
     async mount(el, theme) {
+      this.#isMounting = true;
       const {
         lazy
       } = await import('solid-js');
@@ -43,12 +46,24 @@ function constructCoreClass(Component) {
         });
       }, 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;
     }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TanStack/devtools.git",
-    "directory": "packages/devtools"
+    "url": "git+https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools-utils"
   },
   "homepage": "https://tanstack.com/devtools",
   "funding": {

package/src/react/panel.tsx

@@ -32,18 +32,16 @@ export function createReactPanel<
     const devToolRef = useRef<HTMLDivElement>(null)
     const devtools = useRef<TCoreDevtoolsClass | null>(null)
     useEffect(() => {
-      if (devtools.current) return
-
-      devtools.current = new CoreClass()
+      const instance = new CoreClass()
+      devtools.current = instance
 
       if (devToolRef.current) {
-        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+        instance.mount(devToolRef.current, props?.theme ?? 'dark')
       }
 
       return () => {
-        if (devToolRef.current) {
-          devtools.current?.unmount()
-        }
+        instance.unmount()
+        devtools.current = null
       }
     }, [props?.theme])
 

package/src/solid/class.tsx

@@ -14,6 +14,8 @@ 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
@@ -21,6 +23,7 @@ export function constructCoreClass(Component: () => JSX.Element) {
     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
     }