@tanstack/query-devtools 5.52.3 → 5.54.0

package/src/DevtoolsPanelComponent.tsx

@@ -0,0 +1,47 @@
+import { createLocalStorage } from '@solid-primitives/storage'
+import { createMemo } from 'solid-js'
+import { ContentView, ParentPanel } from './Devtools'
+import { getPreferredColorScheme } from './utils'
+import { THEME_PREFERENCE } from './constants'
+import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
+import type { DevtoolsComponentType } from './Devtools'
+
+const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
+  const [localStore, setLocalStore] = createLocalStorage({
+    prefix: 'TanstackQueryDevtools',
+  })
+
+  const colorScheme = getPreferredColorScheme()
+
+  const theme = createMemo(() => {
+    const preference = (localStore.theme_preference || THEME_PREFERENCE) as
+      | 'system'
+      | 'dark'
+      | 'light'
+    if (preference !== 'system') return preference
+    return colorScheme()
+  })
+
+  return (
+    <QueryDevtoolsContext.Provider value={props}>
+      <PiPProvider
+        disabled
+        localStore={localStore}
+        setLocalStore={setLocalStore}
+      >
+        <ThemeContext.Provider value={theme}>
+          <ParentPanel>
+            <ContentView
+              localStore={localStore}
+              setLocalStore={setLocalStore}
+              onClose={props.onClose}
+              showPanelViewOnly
+            />
+          </ParentPanel>
+        </ThemeContext.Provider>
+      </PiPProvider>
+    </QueryDevtoolsContext.Provider>
+  )
+}
+
+export default DevtoolsPanelComponent

package/src/Explorer.tsx

@@ -10,7 +10,7 @@ import {
   updateNestedDataByPath,
 } from './utils'
 import { Check, CopiedCopier, Copier, ErrorCopier, List, Trash } from './icons'
-import { useQueryDevtoolsContext, useTheme } from './Context'
+import { useQueryDevtoolsContext, useTheme } from './contexts'
 import type { Query } from '@tanstack/query-core'
 
 /**

package/src/{index.tsx → TanstackQueryDevtools.tsx}

@@ -11,10 +11,9 @@ import type {
   DevtoolsErrorType,
   DevtoolsPosition,
   QueryDevtoolsProps,
-} from './Context'
+} from './contexts'
 import type { Signal } from 'solid-js'
 
-export type { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType }
 export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
   styleNonce?: string
   shadowDOMTarget?: ShadowRoot
@@ -95,7 +94,7 @@ class TanstackQueryDevtools {
       if (this.#Component) {
         Devtools = this.#Component
       } else {
-        Devtools = lazy(() => import('./Devtools'))
+        Devtools = lazy(() => import('./DevtoolsComponent'))
         this.#Component = Devtools
       }
 

package/src/TanstackQueryDevtoolsPanel.tsx

@@ -0,0 +1,153 @@
+import { render } from 'solid-js/web'
+import { createSignal, lazy } from 'solid-js'
+import { setupStyleSheet } from './utils'
+import type {
+  QueryClient,
+  onlineManager as TOnlineManager,
+} from '@tanstack/query-core'
+import type { DevtoolsComponentType } from './Devtools'
+import type {
+  DevtoolsButtonPosition,
+  DevtoolsErrorType,
+  DevtoolsPosition,
+  QueryDevtoolsProps,
+} from './contexts'
+import type { Signal } from 'solid-js'
+
+export interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
+  styleNonce?: string
+  shadowDOMTarget?: ShadowRoot
+  onClose?: () => unknown
+}
+
+class TanstackQueryDevtoolsPanel {
+  #client: Signal<QueryClient>
+  #onlineManager: typeof TOnlineManager
+  #queryFlavor: string
+  #version: string
+  #isMounted = false
+  #styleNonce?: string
+  #shadowDOMTarget?: ShadowRoot
+  #buttonPosition: Signal<DevtoolsButtonPosition | undefined>
+  #position: Signal<DevtoolsPosition | undefined>
+  #initialIsOpen: Signal<boolean | undefined>
+  #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
+  #onClose: Signal<(() => unknown) | undefined>
+  #Component: DevtoolsComponentType | undefined
+  #dispose?: () => void
+
+  constructor(config: TanstackQueryDevtoolsPanelConfig) {
+    const {
+      client,
+      queryFlavor,
+      version,
+      onlineManager,
+      buttonPosition,
+      position,
+      initialIsOpen,
+      errorTypes,
+      styleNonce,
+      shadowDOMTarget,
+      onClose,
+    } = config
+    this.#client = createSignal(client)
+    this.#queryFlavor = queryFlavor
+    this.#version = version
+    this.#onlineManager = onlineManager
+    this.#styleNonce = styleNonce
+    this.#shadowDOMTarget = shadowDOMTarget
+    this.#buttonPosition = createSignal(buttonPosition)
+    this.#position = createSignal(position)
+    this.#initialIsOpen = createSignal(initialIsOpen)
+    this.#errorTypes = createSignal(errorTypes)
+    this.#onClose = createSignal(onClose)
+  }
+
+  setButtonPosition(position: DevtoolsButtonPosition) {
+    this.#buttonPosition[1](position)
+  }
+
+  setPosition(position: DevtoolsPosition) {
+    this.#position[1](position)
+  }
+
+  setInitialIsOpen(isOpen: boolean) {
+    this.#initialIsOpen[1](isOpen)
+  }
+
+  setErrorTypes(errorTypes: Array<DevtoolsErrorType>) {
+    this.#errorTypes[1](errorTypes)
+  }
+
+  setClient(client: QueryClient) {
+    this.#client[1](client)
+  }
+
+  setOnClose(onClose: () => unknown) {
+    this.#onClose[1](() => onClose)
+  }
+
+  mount<T extends HTMLElement>(el: T) {
+    if (this.#isMounted) {
+      throw new Error('Devtools is already mounted')
+    }
+    const dispose = render(() => {
+      const [btnPosition] = this.#buttonPosition
+      const [pos] = this.#position
+      const [isOpen] = this.#initialIsOpen
+      const [errors] = this.#errorTypes
+      const [queryClient] = this.#client
+      const [onClose] = this.#onClose
+      let Devtools: DevtoolsComponentType
+
+      if (this.#Component) {
+        Devtools = this.#Component
+      } else {
+        Devtools = lazy(() => import('./DevtoolsPanelComponent'))
+        this.#Component = Devtools
+      }
+
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget)
+      return (
+        <Devtools
+          queryFlavor={this.#queryFlavor}
+          version={this.#version}
+          onlineManager={this.#onlineManager}
+          shadowDOMTarget={this.#shadowDOMTarget}
+          {...{
+            get client() {
+              return queryClient()
+            },
+            get buttonPosition() {
+              return btnPosition()
+            },
+            get position() {
+              return pos()
+            },
+            get initialIsOpen() {
+              return isOpen()
+            },
+            get errorTypes() {
+              return errors()
+            },
+            get onClose() {
+              return onClose()
+            },
+          }}
+        />
+      )
+    }, el)
+    this.#isMounted = true
+    this.#dispose = dispose
+  }
+
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error('Devtools is not mounted')
+    }
+    this.#dispose?.()
+    this.#isMounted = false
+  }
+}
+
+export { TanstackQueryDevtoolsPanel }

package/src/constants.ts

@@ -0,0 +1,17 @@
+import { mutationSortFns, sortFns } from './utils'
+import type { DevtoolsButtonPosition, DevtoolsPosition } from './contexts'
+
+export const firstBreakpoint = 1024
+export const secondBreakpoint = 796
+export const thirdBreakpoint = 700
+
+export const BUTTON_POSITION: DevtoolsButtonPosition = 'bottom-right'
+export const POSITION: DevtoolsPosition = 'bottom'
+export const THEME_PREFERENCE = 'system'
+export const INITIAL_IS_OPEN = false
+export const DEFAULT_HEIGHT = 500
+export const PIP_DEFAULT_HEIGHT = 500
+export const DEFAULT_WIDTH = 500
+export const DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0]
+export const DEFAULT_SORT_ORDER = 1
+export const DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0]

package/src/contexts/PiPContext.tsx

@@ -0,0 +1,191 @@
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
+import { clearDelegatedEvents, delegateEvents } from 'solid-js/web'
+import { PIP_DEFAULT_HEIGHT } from '../constants'
+import { useQueryDevtoolsContext } from './QueryDevtoolsContext'
+import type { Accessor, JSX } from 'solid-js'
+import type { StorageObject, StorageSetter } from '@solid-primitives/storage'
+
+interface PiPProviderProps {
+  children: JSX.Element
+  localStore: StorageObject<string>
+  setLocalStore: StorageSetter<string, unknown>
+  disabled?: boolean
+}
+
+type PiPContextType = {
+  pipWindow: Window | null
+  requestPipWindow: (width: number, height: number) => void
+  closePipWindow: () => void
+  disabled: boolean
+}
+
+const PiPContext = createContext<Accessor<PiPContextType> | undefined>(
+  undefined,
+)
+
+export const PiPProvider = (props: PiPProviderProps) => {
+  // Expose pipWindow that is currently active
+  const [pipWindow, setPipWindow] = createSignal<Window | null>(null)
+
+  // Close pipWindow programmatically
+  const closePipWindow = () => {
+    const w = pipWindow()
+    if (w != null) {
+      w.close()
+      setPipWindow(null)
+    }
+  }
+
+  // Open new pipWindow
+  const requestPipWindow = (width: number, height: number) => {
+    // We don't want to allow multiple requests.
+    if (pipWindow() != null) {
+      return
+    }
+
+    const pip = window.open(
+      '',
+      'TSQD-Devtools-Panel',
+      `width=${width},height=${height},popup`,
+    )
+
+    if (!pip) {
+      throw new Error(
+        'Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.',
+      )
+    }
+
+    // Remove existing styles
+    pip.document.head.innerHTML = ''
+    // Remove existing body
+    pip.document.body.innerHTML = ''
+    // Clear Delegated Events
+    clearDelegatedEvents(pip.document)
+
+    pip.document.title = 'TanStack Query Devtools'
+    pip.document.body.style.margin = '0'
+
+    // Detect when window is closed by user
+    pip.addEventListener('pagehide', () => {
+      props.setLocalStore('pip_open', 'false')
+      setPipWindow(null)
+    })
+
+    // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all
+    // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window
+    ;[
+      ...(useQueryDevtoolsContext().shadowDOMTarget || document).styleSheets,
+    ].forEach((styleSheet) => {
+      try {
+        const cssRules = [...styleSheet.cssRules]
+          .map((rule) => rule.cssText)
+          .join('')
+        const style = document.createElement('style')
+        const style_node = styleSheet.ownerNode
+        let style_id = ''
+
+        if (style_node && 'id' in style_node) {
+          style_id = style_node.id
+        }
+
+        if (style_id) {
+          style.setAttribute('id', style_id)
+        }
+        style.textContent = cssRules
+        pip.document.head.appendChild(style)
+      } catch (e) {
+        const link = document.createElement('link')
+        if (styleSheet.href == null) {
+          return
+        }
+
+        link.rel = 'stylesheet'
+        link.type = styleSheet.type
+        link.media = styleSheet.media.toString()
+        link.href = styleSheet.href
+        pip.document.head.appendChild(link)
+      }
+    })
+    delegateEvents(
+      [
+        'focusin',
+        'focusout',
+        'pointermove',
+        'keydown',
+        'pointerdown',
+        'pointerup',
+        'click',
+        'mousedown',
+        'input',
+      ],
+      pip.document,
+    )
+    props.setLocalStore('pip_open', 'true')
+    setPipWindow(pip)
+  }
+
+  createEffect(() => {
+    const pip_open = (props.localStore.pip_open ?? 'false') as 'true' | 'false'
+    if (pip_open === 'true' && !props.disabled) {
+      requestPipWindow(
+        Number(window.innerWidth),
+        Number(props.localStore.height || PIP_DEFAULT_HEIGHT),
+      )
+    }
+  })
+
+  createEffect(() => {
+    // Setup mutation observer for goober styles with id `_goober
+    const gooberStyles = (
+      useQueryDevtoolsContext().shadowDOMTarget || document
+    ).querySelector('#_goober')
+    const w = pipWindow()
+    if (gooberStyles && w) {
+      const observer = new MutationObserver(() => {
+        const pip_style = (
+          useQueryDevtoolsContext().shadowDOMTarget || w.document
+        ).querySelector('#_goober')
+        if (pip_style) {
+          pip_style.textContent = gooberStyles.textContent
+        }
+      })
+      observer.observe(gooberStyles, {
+        childList: true, // observe direct children
+        subtree: true, // and lower descendants too
+        characterDataOldValue: true, // pass old data to callback
+      })
+      onCleanup(() => {
+        observer.disconnect()
+      })
+    }
+  })
+
+  const value = createMemo(() => ({
+    pipWindow: pipWindow(),
+    requestPipWindow,
+    closePipWindow,
+    disabled: props.disabled ?? false,
+  }))
+
+  return (
+    <PiPContext.Provider value={value}>{props.children}</PiPContext.Provider>
+  )
+}
+
+export const usePiPWindow = () => {
+  const context = createMemo(() => {
+    const ctx = useContext(PiPContext)
+    if (!ctx) {
+      throw new Error('usePiPWindow must be used within a PiPProvider')
+    }
+    return ctx()
+  })
+  return context
+}

package/src/{Context.ts → contexts/QueryDevtoolsContext.ts}

@@ -1,5 +1,4 @@
 import { createContext, useContext } from 'solid-js'
-import type { Accessor } from 'solid-js'
 import type { Query, QueryClient, onlineManager } from '@tanstack/query-core'
 
 type XPosition = 'left' | 'right'
@@ -29,6 +28,7 @@ export interface QueryDevtoolsProps {
   initialIsOpen?: boolean
   errorTypes?: Array<DevtoolsErrorType>
   shadowDOMTarget?: ShadowRoot
+  onClose?: () => unknown
 }
 
 export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
@@ -42,11 +42,3 @@ export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
 export function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext)
 }
-
-export const ThemeContext = createContext<Accessor<'light' | 'dark'>>(
-  () => 'dark' as const,
-)
-
-export function useTheme() {
-  return useContext(ThemeContext)
-}

package/src/contexts/ThemeContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'solid-js'
+import type { Accessor } from 'solid-js'
+
+export const ThemeContext = createContext<Accessor<'light' | 'dark'>>(
+  () => 'dark' as const,
+)
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}

package/src/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from './PiPContext'
+export * from './QueryDevtoolsContext'
+export * from './ThemeContext'

package/src/index.ts

@@ -0,0 +1,13 @@
+export type {
+  DevtoolsButtonPosition,
+  DevtoolsErrorType,
+  DevtoolsPosition,
+} from './contexts'
+export {
+  TanstackQueryDevtools,
+  type TanstackQueryDevtoolsConfig,
+} from './TanstackQueryDevtools'
+export {
+  TanstackQueryDevtoolsPanel,
+  type TanstackQueryDevtoolsPanelConfig,
+} from './TanstackQueryDevtoolsPanel'

package/src/utils.tsx

@@ -1,7 +1,7 @@
 import { serialize } from 'superjson'
 import { createSignal, onCleanup, onMount } from 'solid-js'
 import type { Mutation, Query } from '@tanstack/query-core'
-import type { DevtoolsPosition } from './Context'
+import type { DevtoolsPosition } from './contexts'
 
 export function getQueryStatusLabel(query: Query) {
   return query.state.fetchStatus === 'fetching'