@tanstack/query-devtools 5.0.0-alpha.53 → 5.0.0-alpha.54

package/src/Explorer.tsx

@@ -1,5 +1,5 @@
 import { displayValue } from './utils'
-import * as superjson from 'superjson'
+import { stringify } from 'superjson'
 import { css, cx } from '@emotion/css'
 import { tokens } from './theme'
 import { createMemo, createSignal, Index, Match, Show, Switch } from 'solid-js'
@@ -77,23 +77,21 @@ const CopyButton = (props: { value: unknown }) => {
       onClick={
         copyState() === 'NoCopy'
           ? () => {
-              navigator.clipboard
-                .writeText(superjson.stringify(props.value))
-                .then(
-                  () => {
-                    setCopyState('SuccessCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                  (err) => {
-                    console.error('Failed to copy: ', err)
-                    setCopyState('ErrorCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                )
+              navigator.clipboard.writeText(stringify(props.value)).then(
+                () => {
+                  setCopyState('SuccessCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+                (err) => {
+                  console.error('Failed to copy: ', err)
+                  setCopyState('ErrorCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+              )
             }
           : undefined
       }

package/src/index.tsx

@@ -2,7 +2,7 @@ import type {
   QueryClient,
   onlineManager as TonlineManager,
 } from '@tanstack/query-core'
-import { DevtoolsComponent } from './Devtools'
+import type { DevtoolsComponent } from './Devtools'
 import { render } from 'solid-js/web'
 import type {
   DevtoolsButtonPosition,
@@ -11,7 +11,7 @@ import type {
   DevToolsErrorType,
 } from './Context'
 import type { Signal } from 'solid-js'
-import { createSignal } from 'solid-js'
+import { createSignal, lazy } from 'solid-js'
 
 export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }
 export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {}
@@ -26,6 +26,7 @@ class TanstackQueryDevtools {
   position: Signal<DevtoolsPosition | undefined>
   initialIsOpen: Signal<boolean | undefined>
   errorTypes: Signal<DevToolsErrorType[] | undefined>
+  Component: typeof DevtoolsComponent | undefined
   dispose?: () => void
 
   constructor(config: TanstackQueryDevtoolsConfig) {
@@ -79,8 +80,18 @@ class TanstackQueryDevtools {
       const [isOpen] = this.initialIsOpen
       const [errors] = this.errorTypes
       const [queryClient] = this.client
+
+      let Devtools: typeof DevtoolsComponent
+
+      if (this.Component) {
+        Devtools = this.Component
+      } else {
+        Devtools = lazy(() => import('./Devtools'))
+        this.Component = Devtools
+      }
+
       return (
-        <DevtoolsComponent
+        <Devtools
           queryFlavor={this.queryFlavor}
           version={this.version}
           onlineManager={this.onlineManager}

package/src/utils.tsx

@@ -1,5 +1,6 @@
 import type { Query } from '@tanstack/query-core'
-import * as superjson from 'superjson'
+import { serialize } from 'superjson'
+import type { DevtoolsPosition } from './Context'
 
 export function getQueryStatusLabel(query: Query) {
   return query.state.fetchStatus === 'fetching'
@@ -22,6 +23,15 @@ export const queryStatusLabels = [
 ] as const
 export type IQueryStatusLabel = (typeof queryStatusLabels)[number]
 
+export function getSidedProp<T extends string>(
+  prop: T,
+  side: DevtoolsPosition,
+) {
+  return `${prop}${
+    side.charAt(0).toUpperCase() + side.slice(1)
+  }` as `${T}${Capitalize<DevtoolsPosition>}`
+}
+
 export function getQueryStatusColor({
   queryState,
   observerCount,
@@ -60,7 +70,7 @@ export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
  * @param {boolean} beautify Formats json to multiline
  */
 export const displayValue = (value: unknown, beautify: boolean = false) => {
-  const { json } = superjson.serialize(value)
+  const { json } = serialize(value)
 
   return JSON.stringify(json, null, beautify ? 2 : undefined)
 }

package/build/lib/Context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAG7E,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AACjC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAA;AACjC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAA;AACpD,MAAM,MAAM,sBAAsB,GAAG,GAAG,SAAS,IAAI,SAAS,EAAE,CAAA;AAEhE,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAA;CACrC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,EAAE,OAAO,aAAa,CAAA;IAEnC,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACjC;AAED,eAAO,MAAM,oBAAoB,gDAK/B,CAAA;AAEF,wBAAgB,uBAAuB,uBAEtC"}

package/build/lib/Devtools.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Devtools.d.ts","sourceRoot":"","sources":["../../src/Devtools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,SAAS,EAAE,GAAG,EAAU,MAAM,UAAU,CAAA;AAchE,OAAO,KAAK,EAAE,KAAK,EAA0B,MAAM,sBAAsB,CAAA;AAoBzE,OAAO,KAAK,EACV,kBAAkB,EAInB,MAAM,WAAW,CAAA;AAKlB,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAI7E,UAAU,kBAAkB;IAC1B,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACjC,aAAa,EAAE,aAAa,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC9C;AAED,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IACtD,KAAK,EAAE,MAAM,CAAA;CACd;AAmBD,eAAO,MAAM,iBAAiB,EAAE,SAAS,CAAC,kBAAkB,CAM3D,CAAA;AAED,eAAO,MAAM,QAAQ,mBAkGpB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,kBAAkB,CAyWvD,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAqFhD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,SA+C9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAsFnD,CAAA"}

package/build/lib/Explorer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Explorer.d.ts","sourceRoot":"","sources":["../../src/Explorer.tsx"],"names":[],"mappings":"AAQA;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,EACpE,KAAK,EAAE,CAAC,EAAE,EACV,IAAI,EAAE,MAAM,GACX,CAAC,EAAE,EAAE,CASP;AAsFD,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,CAAA;IACd,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;CAC3B,CAAA;AAMD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,kCAwIpD"}

package/build/lib/__tests__/devtools.test.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=devtools.test.d.ts.map

package/build/lib/__tests__/devtools.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/devtools.test.tsx"],"names":[],"mappings":""}

package/build/lib/fonts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/fonts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,YAMrB,CAAA"}

package/build/lib/icons/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/icons/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,MAAM,mCAkBrB;AAED,wBAAgB,WAAW,mCAkB1B;AAED,wBAAgB,OAAO,mCAkBtB;AAED,wBAAgB,SAAS,mCAkBxB;AAED,wBAAgB,IAAI,mCAenB;AAED,wBAAgB,OAAO,mCAkBtB;AAED,wBAAgB,QAAQ,mCAyBvB;AAED,wBAAgB,MAAM,mCAmBrB;AAED,wBAAgB,YAAY,mCAkB3B;AAED,wBAAgB,WAAW,mCAkB1B;AAED,wBAAgB,YAAY,mCAy1B3B"}