@tanstack/query-devtools 5.23.0 → 5.27.0

package/build/index.d.cts

@@ -23,10 +23,12 @@ interface QueryDevtoolsProps {
     position?: DevtoolsPosition;
     initialIsOpen?: boolean;
     errorTypes?: Array<DevToolsErrorType>;
+    shadowDOMTarget?: ShadowRoot;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
     styleNonce?: string;
+    shadowDOMTarget?: ShadowRoot;
 }
 declare class TanstackQueryDevtools {
     #private;

package/build/index.d.ts

@@ -23,10 +23,12 @@ interface QueryDevtoolsProps {
     position?: DevtoolsPosition;
     initialIsOpen?: boolean;
     errorTypes?: Array<DevToolsErrorType>;
+    shadowDOMTarget?: ShadowRoot;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
     styleNonce?: string;
+    shadowDOMTarget?: ShadowRoot;
 }
 declare class TanstackQueryDevtools {
     #private;

package/build/index.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/XKKA3NOX.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/BWUNFN7M.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -8,6 +8,7 @@ var TanstackQueryDevtools = class {
   #version;
   #isMounted = false;
   #styleNonce;
+  #shadowDOMTarget;
   #buttonPosition;
   #position;
   #initialIsOpen;
@@ -24,13 +25,15 @@ var TanstackQueryDevtools = class {
       position,
       initialIsOpen,
       errorTypes,
-      styleNonce
+      styleNonce,
+      shadowDOMTarget
     } = 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);
@@ -66,10 +69,10 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/QUGYIDRL.js'));
+        Devtools = lazy(() => import('./Devtools/DBFR2OSQ.js'));
         this.#Component = Devtools;
       }
-      setupStyleSheet(this.#styleNonce);
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
       return createComponent(Devtools, mergeProps({
         get queryFlavor() {
           return _self$.#queryFlavor;
@@ -79,6 +82,9 @@ var TanstackQueryDevtools = class {
         },
         get onlineManager() {
           return _self$.#onlineManager;
+        },
+        get shadowDOMTarget() {
+          return _self$.#shadowDOMTarget;
         }
       }, {
         get client() {

package/build/index.jsx

@@ -3,7 +3,7 @@ import {
   lazy,
   render,
   setupStyleSheet
-} from "./chunk/AZNCIVVX.jsx";
+} from "./chunk/4MX274MJ.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -13,6 +13,7 @@ var TanstackQueryDevtools = class {
   #version;
   #isMounted = false;
   #styleNonce;
+  #shadowDOMTarget;
   #buttonPosition;
   #position;
   #initialIsOpen;
@@ -29,13 +30,15 @@ var TanstackQueryDevtools = class {
       position,
       initialIsOpen,
       errorTypes,
-      styleNonce
+      styleNonce,
+      shadowDOMTarget
     } = 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);
@@ -70,14 +73,15 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/6EDF3GZQ.jsx"));
+        Devtools = lazy(() => import("./Devtools/ZI3HPF3S.jsx"));
         this.#Component = Devtools;
       }
-      setupStyleSheet(this.#styleNonce);
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
       return <Devtools
         queryFlavor={this.#queryFlavor}
         version={this.#version}
         onlineManager={this.#onlineManager}
+        shadowDOMTarget={this.#shadowDOMTarget}
         {...{
           get client() {
             return queryClient();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.23.0",
+  "version": "5.27.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.13.3",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.9.1",
-    "@tanstack/query-core": "5.22.2"
+    "@tanstack/query-core": "5.26.3"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Context.ts

@@ -28,6 +28,7 @@ export interface QueryDevtoolsProps {
   position?: DevtoolsPosition
   initialIsOpen?: boolean
   errorTypes?: Array<DevToolsErrorType>
+  shadowDOMTarget?: ShadowRoot
 }
 
 export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
@@ -35,6 +36,7 @@ export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
   onlineManager: undefined as unknown as typeof onlineManager,
   queryFlavor: '',
   version: '',
+  shadowDOMTarget: undefined,
 })
 
 export function useQueryDevtoolsContext() {

package/src/Devtools.tsx

@@ -12,14 +12,14 @@ import {
   useContext,
 } from 'solid-js'
 import { rankItem } from '@tanstack/match-sorter-utils'
-import { css } from 'goober'
+import * as goober from 'goober'
 import { clsx as cx } from 'clsx'
 import { TransitionGroup } from 'solid-transition-group'
 import { Key } from '@solid-primitives/keyed'
 import { createLocalStorage } from '@solid-primitives/storage'
 import { createResizeObserver } from '@solid-primitives/resize-observer'
 import { DropdownMenu, RadioGroup } from '@kobalte/core'
-import { Portal, delegateEvents } from 'solid-js/web'
+import { Portal, clearDelegatedEvents, delegateEvents } from 'solid-js/web'
 import { tokens } from './theme'
 import {
   convertRemToPixels,
@@ -111,10 +111,14 @@ const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
 )
 const [panelWidth, setPanelWidth] = createSignal(0)
 
-export type DevtoolsComponentType = Component<QueryDevtoolsProps>
+export type DevtoolsComponentType = Component<QueryDevtoolsProps> & {
+  shadowDOMTarget?: ShadowRoot
+}
 
 interface PiPProviderProps {
   children: JSX.Element
+  localStore: StorageObject<string>
+  setLocalStore: StorageSetter<string, unknown>
 }
 
 type PiPContextType = {
@@ -147,17 +151,31 @@ const PiPProvider = (props: PiPProviderProps) => {
       return
     }
 
-    const pip = window.open('', '', `width=${width},height=${height},popup`)
+    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)
     })
 
@@ -208,29 +226,31 @@ const PiPProvider = (props: PiPProviderProps) => {
       ],
       pip.document,
     )
+    props.setLocalStore('pip_open', 'true')
     setPipWindow(pip)
   }
 
   createEffect(() => {
-    // Close pipWindow when the main window is closed
-    const closePipWindowOnUnload = () => {
-      closePipWindow()
+    const pip_open = (props.localStore.pip_open ?? 'false') as 'true' | 'false'
+    if (pip_open === 'true') {
+      requestPipWindow(
+        Number(window.innerWidth),
+        Number(props.localStore.height || DEFAULT_HEIGHT),
+      )
     }
-
-    window.addEventListener('beforeunload', closePipWindowOnUnload)
-
-    onCleanup(() => {
-      window.removeEventListener('beforeunload', closePipWindowOnUnload)
-    })
   })
 
   createEffect(() => {
     // Setup mutation observer for goober styles with id `_goober
-    const gooberStyles = document.getElementById('_goober')
+    const gooberStyles = (
+      useQueryDevtoolsContext().shadowDOMTarget || document
+    ).querySelector('#_goober')
     const w = pipWindow()
     if (gooberStyles && w) {
       const observer = new MutationObserver(() => {
-        const pip_style = w.document.getElementById('_goober')
+        const pip_style = (
+          useQueryDevtoolsContext().shadowDOMTarget || w.document
+        ).querySelector('#_goober')
         if (pip_style) {
           pip_style.textContent = gooberStyles.textContent
         }
@@ -286,7 +306,7 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
 
   return (
     <QueryDevtoolsContext.Provider value={props}>
-      <PiPProvider>
+      <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
         <ThemeContext.Provider value={theme}>
           <Devtools localStore={localStore} setLocalStore={setLocalStore} />
         </ThemeContext.Provider>
@@ -299,8 +319,11 @@ export default DevtoolsComponent
 
 const Devtools: Component<DevtoolsPanelProps> = (props) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const pip = usePiPWindow()
@@ -358,9 +381,13 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
     })
   })
 
+  const pip_open = createMemo(
+    () => (props.localStore.pip_open ?? 'false') as 'true' | 'false',
+  )
+
   return (
     <>
-      <Show when={pip().pipWindow}>
+      <Show when={pip().pipWindow && pip_open() == 'true'}>
         <Portal mount={pip().pipWindow?.document.body}>
           <PiPPanel>
             <ContentView
@@ -413,7 +440,7 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
         ref={transitionsContainerRef}
       >
         <TransitionGroup name="tsqd-panel-transition">
-          <Show when={isOpen() && !pip().pipWindow}>
+          <Show when={isOpen() && !pip().pipWindow && pip_open() == 'false'}>
             <DevtoolsPanel
               localStore={props.localStore}
               setLocalStore={props.setLocalStore}
@@ -452,8 +479,11 @@ const PiPPanel: Component<{
 }> = (props) => {
   const pip = usePiPWindow()
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const getPanelDynamicStyles = () => {
@@ -480,6 +510,7 @@ const PiPPanel: Component<{
     }
     if (win) {
       win.addEventListener('resize', resizeCB)
+      resizeCB()
     }
 
     onCleanup(() => {
@@ -515,8 +546,11 @@ const PiPPanel: Component<{
 
 const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const [isResizing, setIsResizing] = createSignal(false)
@@ -717,8 +751,11 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
 
   let containerRef!: HTMLDivElement
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const pip = usePiPWindow()
@@ -1336,8 +1373,11 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
 
 const QueryRow: Component<{ query: Query }> = (props) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const { colors, alpha } = tokens
@@ -1444,8 +1484,11 @@ const QueryRow: Component<{ query: Query }> = (props) => {
 
 const MutationRow: Component<{ mutation: Mutation }> = (props) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const { colors, alpha } = tokens
@@ -1587,8 +1630,11 @@ const QueryStatusCount: Component = () => {
   )
 
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   return (
@@ -1658,8 +1704,11 @@ const MutationStatusCount: Component = () => {
   )
 
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   return (
@@ -1676,8 +1725,11 @@ const MutationStatusCount: Component = () => {
 
 const QueryStatus: Component<QueryStatusProps> = (props) => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const { colors, alpha } = tokens
@@ -1783,8 +1835,11 @@ const QueryStatus: Component<QueryStatusProps> = (props) => {
 
 const QueryDetails = () => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const { colors } = tokens
@@ -2174,8 +2229,11 @@ const QueryDetails = () => {
 
 const MutationDetails = () => {
   const theme = useTheme()
+  const css = useQueryDevtoolsContext().shadowDOMTarget
+    ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
+    : goober.css
   const styles = createMemo(() => {
-    return theme() === 'dark' ? darkStyles : lightStyles
+    return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
   })
 
   const { colors } = tokens
@@ -2451,7 +2509,10 @@ const createSubscribeToMutationCacheBatcher = <T,>(
   return value
 }
 
-const stylesFactory = (theme: 'light' | 'dark') => {
+const stylesFactory = (
+  theme: 'light' | 'dark',
+  css: (typeof goober)['css'],
+) => {
   const { colors, font, size, alpha, shadow, border } = tokens
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
@@ -3378,5 +3439,5 @@ const stylesFactory = (theme: 'light' | 'dark') => {
   }
 }
 
-const lightStyles = stylesFactory('light')
-const darkStyles = stylesFactory('dark')
+const lightStyles = (css: (typeof goober)['css']) => stylesFactory('light', css)
+const darkStyles = (css: (typeof goober)['css']) => stylesFactory('dark', css)

package/src/index.tsx

@@ -17,6 +17,7 @@ import type { Signal } from 'solid-js'
 export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }
 export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
   styleNonce?: string
+  shadowDOMTarget?: ShadowRoot
 }
 
 class TanstackQueryDevtools {
@@ -26,6 +27,7 @@ class TanstackQueryDevtools {
   #version: string
   #isMounted = false
   #styleNonce?: string
+  #shadowDOMTarget?: ShadowRoot
   #buttonPosition: Signal<DevtoolsButtonPosition | undefined>
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
@@ -44,12 +46,14 @@ class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes,
       styleNonce,
+      shadowDOMTarget,
     } = 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)
@@ -95,12 +99,13 @@ class TanstackQueryDevtools {
         this.#Component = Devtools
       }
 
-      setupStyleSheet(this.#styleNonce)
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget)
       return (
         <Devtools
           queryFlavor={this.#queryFlavor}
           version={this.#version}
           onlineManager={this.#onlineManager}
+          shadowDOMTarget={this.#shadowDOMTarget}
           {...{
             get client() {
               return queryClient()

package/src/utils.tsx

@@ -304,14 +304,20 @@ export const deleteNestedDataByPath = (
 
 // Sets up the goober stylesheet
 // Adds a nonce to the style tag if needed
-export const setupStyleSheet = (nonce?: string) => {
+export const setupStyleSheet = (nonce?: string, target?: ShadowRoot) => {
   if (!nonce) return
-  const styleExists = document.querySelector('#_goober')
+  const styleExists =
+    document.querySelector('#_goober') || target?.querySelector('#_goober')
+
   if (styleExists) return
   const styleTag = document.createElement('style')
   const textNode = document.createTextNode('')
   styleTag.appendChild(textNode)
   styleTag.id = '_goober'
   styleTag.setAttribute('nonce', nonce)
-  document.head.appendChild(styleTag)
+  if (target) {
+    target.appendChild(styleTag)
+  } else {
+    document.head.appendChild(styleTag)
+  }
 }