@tanstack/query-devtools 5.24.0 → 5.27.3

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/7LTSZCE6.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/335X72D7.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/LJVATCV2.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/36BZFNWK.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.24.0",
+  "version": "5.27.3",
   "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.27.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,7 +12,7 @@ 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'
@@ -111,7 +111,9 @@ 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
@@ -240,11 +242,15 @@ const PiPProvider = (props: PiPProviderProps) => {
 
   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
         }
@@ -313,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()
@@ -470,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 = () => {
@@ -534,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)
@@ -736,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()
@@ -1355,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
@@ -1463,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
@@ -1606,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 (
@@ -1677,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 (
@@ -1695,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
@@ -1802,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
@@ -2193,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
@@ -2470,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)
@@ -3397,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)
+  }
 }