@tanstack/devtools-utils - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/react/esm/panel.js

@@ -8,10 +8,11 @@ import { jsx, Fragment } from "react/jsx-runtime";
     useEffect(() => {
-      const instance = new CoreClass();
-      devtools.current = instance;
+      if (devtools.current) return;
+      devtools.current = new CoreClass();
       if (devToolRef.current) {
-        instance.mount(devToolRef.current, props?.theme ?? "dark");
+        devtools.current.mount(devToolRef.current, props?.theme ?? "dark");
       }
       return () => {
-        instance.unmount();
-        devtools.current = null;
+        if (devToolRef.current) {
+          devtools.current?.unmount();
+        }
       };
@@ -18,0 +19,0 @@ }, [props?.theme]);

dist/react/esm/panel.js.map

@@ -1,1 +0,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      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;"}
+{"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.json

 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "TanStack Devtools utilities for creating your own devtools.",
@@ -5,0 +5,0 @@ "author": "Tanner Linsley",

src/react/panel.tsx

@@ -35,12 +35,14 @@ import { useEffect, useRef } from 'react'
     useEffect(() => {
-      const instance = new CoreClass()
-      devtools.current = instance
+      if (devtools.current) return
 
+      devtools.current = new CoreClass()
+
       if (devToolRef.current) {
-        instance.mount(devToolRef.current, props?.theme ?? 'dark')
+        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
       }
 
       return () => {
-        instance.unmount()
-        devtools.current = null
+        if (devToolRef.current) {
+          devtools.current?.unmount()
+        }
       }
@@ -47,0 +49,0 @@ }, [props?.theme])

No alert changes

Improved metrics

Total package byte prevSize

45815

0.3%

Lines of code

1137

0.18%

No dependency changes