snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

packages/preact-query-devtools/src/PreactQueryDevtoolsPanel.tsx

@@ -0,0 +1,110 @@
+import { useRef, useState, useEffect } from 'preact/hooks'
+import { onlineManager, useQueryClient } from '@tanstack/preact-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/preact-query'
+import type { CSSProperties, VNode } from 'preact'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Use this to provide a custom QueryClient. Otherwise, the one from the
+   * nearest QueryClientProvider will be used.
+   */
+  client?: QueryClient
+  /**
+   * Custom error types to be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document
+   * head. This is useful if you are using a Content Security Policy (CSP)
+   * nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this to render the devtools inside a Shadow DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+  /**
+   * Custom styles for the devtools panel container.
+   */
+  style?: CSSProperties
+  /**
+   * Callback function when the devtools panel is closed.
+   */
+  onClose?: () => unknown
+  /**
+   * Use this to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+  /**
+   * Use this to set the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
+}
+
+export function PreactQueryDevtoolsPanel(
+  props: DevtoolsPanelOptions,
+): VNode | null {
+  const queryClient = useQueryClient(props.client)
+  const ref = useRef<HTMLDivElement>(null)
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
+  const [devtools] = useState(
+    () =>
+      new TanstackQueryDevtoolsPanel({
+        client: queryClient,
+        queryFlavor: 'Preact Query',
+        version: '5',
+        onlineManager,
+        buttonPosition: 'bottom-left',
+        position: 'bottom',
+        initialIsOpen: true,
+        errorTypes,
+        styleNonce,
+        shadowDOMTarget,
+        onClose: props.onClose,
+        hideDisabledQueries,
+        theme,
+      }),
+  )
+
+  useEffect(() => {
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
+
+  useEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  }, [props.onClose, devtools])
+
+  useEffect(() => {
+    devtools.setErrorTypes(errorTypes || [])
+  }, [errorTypes, devtools])
+
+  useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current)
+    }
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      className="tsqd-parent-container"
+      ref={ref}
+    />
+  )
+}