@tanstack/query-devtools 5.21.3 → 5.23.0

package/build/index.js

@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/SUV2KM2F.js'));
+        Devtools = lazy(() => import('./Devtools/QUGYIDRL.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/VAJS2OS4.jsx"));
+        Devtools = lazy(() => import("./Devtools/6EDF3GZQ.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.21.3",
+  "version": "5.23.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.21.2"
+    "@tanstack/query-core": "5.22.2"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -2,12 +2,14 @@ import {
   For,
   Show,
   batch,
+  createContext,
   createEffect,
   createMemo,
   createSignal,
   on,
   onCleanup,
   onMount,
+  useContext,
 } from 'solid-js'
 import { rankItem } from '@tanstack/match-sorter-utils'
 import { css } from 'goober'
@@ -17,6 +19,7 @@ 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 { tokens } from './theme'
 import {
   convertRemToPixels,
@@ -42,6 +45,7 @@ import {
   Moon,
   Offline,
   PauseCircle,
+  PiPIcon,
   Search,
   Settings,
   Sun,
@@ -109,6 +113,161 @@ const [panelWidth, setPanelWidth] = createSignal(0)
 
 export type DevtoolsComponentType = Component<QueryDevtoolsProps>
 
+interface PiPProviderProps {
+  children: JSX.Element
+}
+
+type PiPContextType = {
+  pipWindow: Window | null
+  requestPipWindow: (width: number, height: number) => Promise<void>
+  closePipWindow: () => void
+}
+
+const PiPContext = createContext<Accessor<PiPContextType> | undefined>(
+  undefined,
+)
+
+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 = async (width: number, height: number) => {
+    // We don't want to allow multiple requests.
+    if (pipWindow() != null) {
+      return
+    }
+
+    const pip = window.open('', '', `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.',
+      )
+    }
+    pip.document.title = 'TanStack Query Devtools'
+    pip.document.body.style.margin = '0'
+
+    // Detect when window is closed by user
+    pip.addEventListener('pagehide', () => {
+      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
+    ;[...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,
+    )
+    setPipWindow(pip)
+  }
+
+  createEffect(() => {
+    // Close pipWindow when the main window is closed
+    const closePipWindowOnUnload = () => {
+      closePipWindow()
+    }
+
+    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 w = pipWindow()
+    if (gooberStyles && w) {
+      const observer = new MutationObserver(() => {
+        const pip_style = w.document.getElementById('_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,
+  }))
+
+  return (
+    <PiPContext.Provider value={value}>{props.children}</PiPContext.Provider>
+  )
+}
+
+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
+}
+
 const DevtoolsComponent: DevtoolsComponentType = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: 'TanstackQueryDevtools',
@@ -127,9 +286,11 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
 
   return (
     <QueryDevtoolsContext.Provider value={props}>
-      <ThemeContext.Provider value={theme}>
-        <Devtools localStore={localStore} setLocalStore={setLocalStore} />
-      </ThemeContext.Provider>
+      <PiPProvider>
+        <ThemeContext.Provider value={theme}>
+          <Devtools localStore={localStore} setLocalStore={setLocalStore} />
+        </ThemeContext.Provider>
+      </PiPProvider>
     </QueryDevtoolsContext.Provider>
   )
 }
@@ -142,6 +303,8 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
     return theme() === 'dark' ? darkStyles : lightStyles
   })
 
+  const pip = usePiPWindow()
+
   const buttonPosition = createMemo(() => {
     return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION
   })
@@ -196,76 +359,156 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
   })
 
   return (
-    <div
-      // styles for animating the panel in and out
-      class={cx(
-        css`
-          & .tsqd-panel-transition-exit-active,
-          & .tsqd-panel-transition-enter-active {
-            transition:
-              opacity 0.3s,
-              transform 0.3s;
-          }
+    <>
+      <Show when={pip().pipWindow}>
+        <Portal mount={pip().pipWindow?.document.body}>
+          <PiPPanel>
+            <ContentView
+              localStore={props.localStore}
+              setLocalStore={props.setLocalStore}
+            />
+          </PiPPanel>
+        </Portal>
+      </Show>
+      <div
+        // styles for animating the panel in and out
+        class={cx(
+          css`
+            & .tsqd-panel-transition-exit-active,
+            & .tsqd-panel-transition-enter-active {
+              transition:
+                opacity 0.3s,
+                transform 0.3s;
+            }
 
-          & .tsqd-panel-transition-exit-to,
-          & .tsqd-panel-transition-enter {
-            ${position() === 'top' || position() === 'bottom'
-              ? `transform: translateY(var(--tsqd-panel-height));`
-              : `transform: translateX(var(--tsqd-panel-width));`}
-          }
+            & .tsqd-panel-transition-exit-to,
+            & .tsqd-panel-transition-enter {
+              ${position() === 'top' || position() === 'bottom'
+                ? `transform: translateY(var(--tsqd-panel-height));`
+                : `transform: translateX(var(--tsqd-panel-width));`}
+            }
 
-          & .tsqd-button-transition-exit-active,
-          & .tsqd-button-transition-enter-active {
-            transition:
-              opacity 0.3s,
-              transform 0.3s;
-            opacity: 1;
-          }
+            & .tsqd-button-transition-exit-active,
+            & .tsqd-button-transition-enter-active {
+              transition:
+                opacity 0.3s,
+                transform 0.3s;
+              opacity: 1;
+            }
 
-          & .tsqd-button-transition-exit-to,
-          & .tsqd-button-transition-enter {
-            transform: ${buttonPosition() === 'relative'
-              ? `none;`
-              : buttonPosition() === 'top-left'
-                ? `translateX(-72px);`
-                : buttonPosition() === 'top-right'
-                  ? `translateX(72px);`
-                  : `translateY(72px);`};
-            opacity: 0;
-          }
-        `,
-        'tsqd-transitions-container',
+            & .tsqd-button-transition-exit-to,
+            & .tsqd-button-transition-enter {
+              transform: ${buttonPosition() === 'relative'
+                ? `none;`
+                : buttonPosition() === 'top-left'
+                  ? `translateX(-72px);`
+                  : buttonPosition() === 'top-right'
+                    ? `translateX(72px);`
+                    : `translateY(72px);`};
+              opacity: 0;
+            }
+          `,
+          'tsqd-transitions-container',
+        )}
+        ref={transitionsContainerRef}
+      >
+        <TransitionGroup name="tsqd-panel-transition">
+          <Show when={isOpen() && !pip().pipWindow}>
+            <DevtoolsPanel
+              localStore={props.localStore}
+              setLocalStore={props.setLocalStore}
+            />
+          </Show>
+        </TransitionGroup>
+        <TransitionGroup name="tsqd-button-transition">
+          <Show when={!isOpen()}>
+            <div
+              class={cx(
+                styles().devtoolsBtn,
+                styles()[`devtoolsBtn-position-${buttonPosition()}`],
+                'tsqd-open-btn-container',
+              )}
+            >
+              <div aria-hidden="true">
+                <TanstackLogo />
+              </div>
+              <button
+                aria-label="Open Tanstack query devtools"
+                onClick={() => props.setLocalStore('open', 'true')}
+                class="tsqd-open-btn"
+              >
+                <TanstackLogo />
+              </button>
+            </div>
+          </Show>
+        </TransitionGroup>
+      </div>
+    </>
+  )
+}
+
+const PiPPanel: Component<{
+  children: JSX.Element
+}> = (props) => {
+  const pip = usePiPWindow()
+  const theme = useTheme()
+  const styles = createMemo(() => {
+    return theme() === 'dark' ? darkStyles : lightStyles
+  })
+
+  const getPanelDynamicStyles = () => {
+    const { colors } = tokens
+    const t = (light: string, dark: string) =>
+      theme() === 'dark' ? dark : light
+    if (panelWidth() < secondBreakpoint) {
+      return css`
+        flex-direction: column;
+        background-color: ${t(colors.gray[300], colors.gray[600])};
+      `
+    }
+    return css`
+      flex-direction: row;
+      background-color: ${t(colors.gray[200], colors.darkGray[900])};
+    `
+  }
+
+  createEffect(() => {
+    const win = pip().pipWindow
+    const resizeCB = () => {
+      if (!win) return
+      setPanelWidth(win.innerWidth)
+    }
+    if (win) {
+      win.addEventListener('resize', resizeCB)
+    }
+
+    onCleanup(() => {
+      if (win) {
+        win.removeEventListener('resize', resizeCB)
+      }
+    })
+  })
+
+  return (
+    <div
+      style={{
+        '--tsqd-font-size': '16px',
+        'max-height': '100vh',
+        height: '100vh',
+        width: '100vw',
+      }}
+      class={cx(
+        styles().panel,
+        getPanelDynamicStyles(),
+        {
+          [css`
+            min-width: min-content;
+          `]: panelWidth() < thirdBreakpoint,
+        },
+        'tsqd-main-panel',
       )}
-      ref={transitionsContainerRef}
     >
-      <TransitionGroup name="tsqd-panel-transition">
-        <Show when={isOpen()}>
-          <DevtoolsPanel
-            localStore={props.localStore}
-            setLocalStore={props.setLocalStore}
-          />
-        </Show>
-      </TransitionGroup>
-      <TransitionGroup name="tsqd-button-transition">
-        <Show when={!isOpen()}>
-          <div
-            class={cx(
-              styles().devtoolsBtn,
-              styles()[`devtoolsBtn-position-${buttonPosition()}`],
-            )}
-          >
-            <div aria-hidden="true">
-              <TanstackLogo />
-            </div>
-            <button
-              aria-label="Open Tanstack query devtools"
-              onClick={() => props.setLocalStore('open', 'true')}
-            >
-              <TanstackLogo />
-            </button>
-          </div>
-        </Show>
-      </TransitionGroup>
+      {props.children}
     </div>
   )
 }
@@ -478,6 +721,8 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
     return theme() === 'dark' ? darkStyles : lightStyles
   })
 
+  const pip = usePiPWindow()
+
   const [selectedView, setSelectedView] = createSignal<'queries' | 'mutations'>(
     'queries',
   )
@@ -616,7 +861,11 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
           <div class={styles().logoAndToggleContainer}>
             <button
               class={cx(styles().logo, 'tsqd-text-logo-container')}
-              onClick={() => props.setLocalStore('open', 'false')}
+              onClick={() => {
+                if (!pip().pipWindow) {
+                  props.setLocalStore('open', 'false')
+                }
+              }}
               aria-label="Close Tanstack query devtools"
             >
               <span
@@ -691,7 +940,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                     props.setLocalStore('mutationFilter', e.currentTarget.value)
                   }
                 }}
-                class="tsqd-query-filter-textfield"
+                class={cx('tsqd-query-filter-textfield')}
                 name="tsqd-query-filter-input"
                 value={
                   selectedView() === 'queries'
@@ -831,6 +1080,25 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
             >
               {offline() ? <Offline /> : <Wifi />}
             </button>
+            <Show when={!pip().pipWindow}>
+              <button
+                onClick={() => {
+                  pip().requestPipWindow(
+                    Number(window.innerWidth),
+                    Number(props.localStore.height ?? 500),
+                  )
+                }}
+                class={cx(
+                  styles().actionsBtn,
+                  'tsqd-actions-btn',
+                  'tsqd-action-open-pip',
+                )}
+                aria-label="Open in picture-in-picture mode"
+                title={`Open in picture-in-picture mode`}
+              >
+                <PiPIcon />
+              </button>
+            </Show>
 
             <DropdownMenu.Root gutter={4}>
               <DropdownMenu.Trigger
@@ -844,6 +1112,11 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               </DropdownMenu.Trigger>
               <DropdownMenu.Portal
                 ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                mount={
+                  pip().pipWindow
+                    ? pip().pipWindow!.document.body
+                    : document.body
+                }
               >
                 <DropdownMenu.Content
                   class={cx(styles().settingsMenu, 'tsqd-settings-menu')}
@@ -869,6 +1142,11 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                     </DropdownMenu.SubTrigger>
                     <DropdownMenu.Portal
                       ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                      mount={
+                        pip().pipWindow
+                          ? pip().pipWindow!.document.body
+                          : document.body
+                      }
                     >
                       <DropdownMenu.SubContent
                         class={cx(
@@ -948,6 +1226,11 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                     </DropdownMenu.SubTrigger>
                     <DropdownMenu.Portal
                       ref={(el) => setComputedVariables(el as HTMLDivElement)}
+                      mount={
+                        pip().pipWindow
+                          ? pip().pipWindow!.document.body
+                          : document.body
+                      }
                     >
                       <DropdownMenu.SubContent
                         class={cx(
@@ -2420,7 +2703,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: css`
@@ -2600,8 +2883,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       gap: ${tokens.size[2]};
       & > button {
         cursor: pointer;
-        padding: ${tokens.size[0.5]} ${tokens.size[2]};
-        padding-right: ${tokens.size[1.5]};
+        padding: ${tokens.size[0.5]} ${tokens.size[1.5]} ${tokens.size[0.5]}
+          ${tokens.size[2]};
         border-radius: ${tokens.border.radius.sm};
         background-color: ${t(colors.gray[100], colors.darkGray[400])};
         border: 1px solid ${t(colors.gray[300], colors.darkGray[200])};
@@ -2785,7 +3068,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -2810,7 +3094,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       flex: 1 1 700px;
       background-color: ${t(colors.gray[50], colors.darkGray[700])};
       color: ${t(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -2818,7 +3102,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-align: left;
     `,
     detailsHeader: css`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -2850,7 +3134,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -2875,7 +3160,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -2960,7 +3245,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     settingsMenu: css`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size[0.5]};

package/src/Explorer.tsx

@@ -489,7 +489,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     entry: css`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;

package/src/icons/index.tsx

@@ -268,6 +268,26 @@ export function Settings() {
   )
 }
 
+export function PiPIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V8M11.5 12.5L17 7M17 7H12M17 7V12M6.2 21H8.8C9.9201 21 10.4802 21 10.908 20.782C11.2843 20.5903 11.5903 20.2843 11.782 19.908C12 19.4802 12 18.9201 12 17.8V15.2C12 14.0799 12 13.5198 11.782 13.092C11.5903 12.7157 11.2843 12.4097 10.908 12.218C10.4802 12 9.92011 12 8.8 12H6.2C5.0799 12 4.51984 12 4.09202 12.218C3.71569 12.4097 3.40973 12.7157 3.21799 13.092C3 13.5198 3 14.0799 3 15.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
 export function Copier() {
   return (
     <svg