feat: add solid devtools panel export to solid devtools (#9551)

* feat: add solid devtools panel export to solid devtools

* ci: apply automated fixes

* fix knip + eslint

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
Co-authored-by: Oscar Beaumont <oscar@otbeaumont.me>

Author: 4 people

packages/react-query-devtools/src/index.ts

@@ -16,3 +16,5 @@ export const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtools
         return null
       }
     : DevtoolsPanel.ReactQueryDevtoolsPanel
+
+export type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions

packages/solid-query-devtools/src/devtoolsPanel.tsx

@@ -0,0 +1,85 @@
+import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { onlineManager, useQueryClient } from '@tanstack/solid-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can 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 so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+
+  /**
+   * Custom styles for the devtools panel
+   * @default { height: '500px' }
+   * @example { height: '100%' }
+   * @example { height: '100%', width: '100%' }
+   */
+  style?: CSSStyleValue
+
+  /**
+   * Callback function that is called when the devtools panel is closed
+   */
+  onClose?: () => unknown
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+}
+
+export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
+  const queryClient = useQueryClient()
+  const client = createMemo(() => props.client || queryClient)
+  let ref!: HTMLDivElement
+  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
+  const devtools = new TanstackQueryDevtoolsPanel({
+    client: client(),
+    queryFlavor: 'Solid Query',
+    version: '5',
+    onlineManager,
+    buttonPosition: 'bottom-left',
+    position: 'bottom',
+    initialIsOpen: true,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    onClose: props.onClose,
+    hideDisabledQueries,
+  })
+  createEffect(() => {
+    devtools.setClient(client())
+  })
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  })
+
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || [])
+  })
+
+  onMount(() => {
+    devtools.mount(ref)
+    onCleanup(() => devtools.unmount())
+  })
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      class="tsqd-parent-container"
+      ref={ref}
+    />
+  )
+}

packages/solid-query-devtools/src/index.tsx

@@ -1,9 +1,18 @@
 import { isDev } from 'solid-js/web'
 import clientOnly from './clientOnly'
 import type SolidQueryDevtoolsComp from './devtools'
+import type SolidQueryDevtoolsCompPanel from './devtoolsPanel'
 
 export const SolidQueryDevtools: typeof SolidQueryDevtoolsComp = isDev
   ? clientOnly(() => import('./devtools'))
   : function () {
       return null
     }
+
+export const SolidQueryDevtoolsPanel: typeof SolidQueryDevtoolsCompPanel = isDev
+  ? clientOnly(() => import('./devtoolsPanel'))
+  : function () {
+      return null
+    }
+
+export type { DevtoolsPanelOptions } from './devtoolsPanel'