feat(query-devtools): Lazyload Query Devtools Core (#5527)

Author: ardeora

packages/query-devtools/package.json

@@ -11,16 +11,20 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "build/lib/index.d.ts",
-  "main": "build/lib/index.cjs",
-  "module": "build/lib/index.js",
+  "types": "build/types/index.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
   "exports": {
     ".": {
-      "types": "./build/lib/index.d.ts",
-      "solid": "./build/lib/index.js",
-      "import": "./build/lib/index.js",
-      "require": "./build/lib/index.cjs",
-      "default": "./build/lib/index.cjs"
+      "types": "./build/types/index.d.ts",
+      "solid": "./build/source/index.jsx",
+      "import": "./build/esm/index.js",
+      "browser": {
+        "import": "./build/esm/index.js",
+        "require": "./build/cjs/index.js"
+      },
+      "require": "./build/cjs/index.js",
+      "node": "./build/cjs/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -31,7 +35,8 @@
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint",
-    "build": "pnpm build:rollup && pnpm build:types",
+    "build": "pnpm build:rollup && pnpm rename-build-dir",
+    "rename-build-dir": "rimraf ./build && mv ./dist ./build",
     "build:rollup": "rollup --config rollup.config.js",
     "build:types": "tsc --emitDeclarationOnly"
   },
@@ -51,6 +56,7 @@
   },
   "devDependencies": {
     "@tanstack/query-core": "^5.0.0-alpha.43",
+    "rollup-preset-solid": "^2.0.1",
     "vite-plugin-solid": "^2.5.0"
   }
 }

packages/query-devtools/rollup.config.js

@@ -1,14 +1,13 @@
 // @ts-check
+import withSolid from 'rollup-preset-solid'
 
-import { defineConfig } from 'rollup'
-import { buildConfigs } from '../../scripts/getRollupConfig.js'
+const config = withSolid({
+  input: 'src/index.tsx',
+  targets: ['esm', 'cjs'],
+})
 
-export default defineConfig(
-  buildConfigs({
-    name: 'query-devtools',
-    outputFile: 'index',
-    entryFile: './src/index.tsx',
-    forceBundle: true,
-    bundleDeps: true,
-  }),
-)
+if (!Array.isArray(config)) {
+  config.external = []
+}
+
+export default config

packages/query-devtools/src/Devtools.tsx

@@ -20,6 +20,7 @@ import {
   getQueryStatusColorByLabel,
   sortFns,
   convertRemToPixels,
+  getSidedProp,
 } from './utils'
 import {
   ArrowDown,
@@ -82,6 +83,8 @@ export const DevtoolsComponent: Component<QueryDevtoolsProps> = (props) => {
   )
 }
 
+export default DevtoolsComponent
+
 export const Devtools = () => {
   loadFonts()
 
@@ -315,6 +318,42 @@ export const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
     setSettingsOpen(false)
   }
 
+  createEffect(() => {
+    const rootContainer = panelRef.parentElement?.parentElement?.parentElement
+    if (!rootContainer) return
+    const styleProp = getSidedProp(
+      'padding',
+      props.localStore.position as DevtoolsPosition,
+    )
+    const isVertical =
+      props.localStore.position === 'left' ||
+      props.localStore.position === 'right'
+    const previousPaddings = (({
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }) => ({
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+    }))(rootContainer.style)
+
+    rootContainer.style[styleProp] = `${
+      isVertical ? props.localStore.width : props.localStore.height
+    }px`
+
+    onCleanup(() => {
+      Object.entries(previousPaddings).forEach(([property, previousValue]) => {
+        rootContainer.style[property as keyof typeof previousPaddings] =
+          previousValue
+      })
+    })
+  })
+
   return (
     <aside
       // Some context for styles here
@@ -1200,6 +1239,7 @@ const getStyles = () => {
         font-family: 'Inter', sans-serif;
         color: ${colors.gray[300]};
         box-sizing: border-box;
+        text-transform: none;
       }
     `,
     'devtoolsBtn-position-bottom-right': css`

packages/query-devtools/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
       }

packages/query-devtools/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}

packages/query-devtools/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)
 }