@tanstack/devtools-utils 0.0.2 → 0.0.3

package/dist/react/esm/panel.js

@@ -11,7 +11,9 @@ function createReactPanel(CoreClass) {
         devtools.current.mount(devToolRef.current, props?.theme ?? "dark");
       }
       return () => {
-        devtools.current?.unmount();
+        if (devToolRef.current) {
+          devtools.current?.unmount();
+        }
       };
     }, [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        devtools.current?.unmount()\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,iBAAS,SAAS,QAAA;AAAA,MACpB;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      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;"}

package/dist/solid/esm/dev.js

@@ -1,5 +1,5 @@
 import { createComponent, template, insert, use } from 'solid-js/web';
-import { onMount, onCleanup } from 'solid-js';
+import { createSignal, onMount, onCleanup } from 'solid-js';
 
 // src/solid/class.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
@@ -24,9 +24,7 @@ function constructCoreClass(Component) {
       }
       const mountTo = el;
       const dispose = render(() => {
-        this.#Component = lazy(async () => ({
-          default: Component
-        }));
+        this.#Component = Component;
         this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
           default: mod.ThemeContextProvider
         })));
@@ -73,14 +71,14 @@ var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     let devToolRef;
+    const [devtools] = createSignal(new CoreClass());
     onMount(() => {
-      const devtools = new CoreClass();
       if (devToolRef) {
-        devtools.mount(devToolRef, props?.theme ?? "dark");
-        onCleanup(() => {
-          devtools.unmount();
-        });
+        devtools().mount(devToolRef, props?.theme ?? "dark");
       }
+      onCleanup(() => {
+        devtools().unmount();
+      });
     });
     return (() => {
       var _el$ = _tmpl$2();

package/dist/solid/esm/index.js

@@ -1,5 +1,5 @@
 import { createComponent, template, insert, use } from 'solid-js/web';
-import { onMount, onCleanup } from 'solid-js';
+import { createSignal, onMount, onCleanup } from 'solid-js';
 
 // src/solid/class.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
@@ -24,9 +24,7 @@ function constructCoreClass(Component) {
       }
       const mountTo = el;
       const dispose = render(() => {
-        this.#Component = lazy(async () => ({
-          default: Component
-        }));
+        this.#Component = Component;
         this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
           default: mod.ThemeContextProvider
         })));
@@ -73,14 +71,14 @@ var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     let devToolRef;
+    const [devtools] = createSignal(new CoreClass());
     onMount(() => {
-      const devtools = new CoreClass();
       if (devToolRef) {
-        devtools.mount(devToolRef, props?.theme ?? "dark");
-        onCleanup(() => {
-          devtools.unmount();
-        });
+        devtools().mount(devToolRef, props?.theme ?? "dark");
       }
+      onCleanup(() => {
+        devtools().unmount();
+      });
     });
     return (() => {
       var _el$ = _tmpl$2();

package/dist/solid/esm/server.js

@@ -1,5 +1,5 @@
 import { createComponent, ssr, escape } from 'solid-js/web';
-import { onMount } from 'solid-js';
+import { createSignal, onMount, onCleanup } from 'solid-js';
 
 // src/solid/class.tsx
 var _tmpl$ = ['<div style="', '">', "</div>"];
@@ -24,9 +24,7 @@ function constructCoreClass(Component) {
       }
       const mountTo = el;
       const dispose = render(() => {
-        this.#Component = lazy(async () => ({
-          default: Component
-        }));
+        this.#Component = Component;
         this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
           default: mod.ThemeContextProvider
         })));
@@ -69,8 +67,11 @@ function constructCoreClass(Component) {
 var _tmpl$2 = ['<div style="', '"></div>'];
 function createSolidPanel(CoreClass) {
   function Panel(props) {
+    const [devtools] = createSignal(new CoreClass());
     onMount(() => {
-      new CoreClass();
+      onCleanup(() => {
+        devtools().unmount();
+      });
     });
     return ssr(_tmpl$2, "height:100%");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/react/panel.tsx

@@ -41,7 +41,9 @@ export function createReactPanel<
       }
 
       return () => {
-        devtools.current?.unmount()
+        if (devToolRef.current) {
+          devtools.current?.unmount()
+        }
       }
     }, [props?.theme])
 

package/src/solid/class.tsx

@@ -28,8 +28,7 @@ export function constructCoreClass(Component: () => JSX.Element) {
       }
       const mountTo = el
       const dispose = render(() => {
-        // eslint-disable-next-line @typescript-eslint/require-await
-        this.#Component = lazy(async () => ({ default: Component }))
+        this.#Component = Component
 
         this.#ThemeProvider = lazy(() =>
           import('@tanstack/devtools-ui').then((mod) => ({

package/src/solid/panel.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource solid-js - we use Solid.js as JSX here */
 
-import { onCleanup, onMount } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 import type { ClassType } from './class'
 
 export interface DevtoolsPanelProps {
@@ -12,17 +12,14 @@ export function createSolidPanel<
 >(CoreClass: ClassType) {
   function Panel(props: TComponentProps) {
     let devToolRef: HTMLDivElement | undefined
-
+    const [devtools] = createSignal(new CoreClass())
     onMount(() => {
-      const devtools = new CoreClass()
-
       if (devToolRef) {
-        devtools.mount(devToolRef, props?.theme ?? 'dark')
-
-        onCleanup(() => {
-          devtools.unmount()
-        })
+        devtools().mount(devToolRef, props?.theme ?? 'dark')
       }
+      onCleanup(() => {
+        devtools().unmount()
+      })
     })
 
     return <div style={{ height: '100%' }} ref={devToolRef} />