@tanstack/query-devtools 5.90.1 → 5.91.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,6 +11,7 @@ import type {
11
11
  DevtoolsErrorType,
12
12
  DevtoolsPosition,
13
13
  QueryDevtoolsProps,
14
+ Theme,
14
15
  } from './contexts'
15
16
  import type { Signal } from 'solid-js'
16
17
 
@@ -35,6 +36,7 @@ class TanstackQueryDevtoolsPanel {
35
36
  #hideDisabledQueries: Signal<boolean | undefined>
36
37
  #onClose: Signal<(() => unknown) | undefined>
37
38
  #Component: DevtoolsComponentType | undefined
39
+ #theme: Signal<Theme | undefined>
38
40
  #dispose?: () => void
39
41
 
40
42
  constructor(config: TanstackQueryDevtoolsPanelConfig) {
@@ -51,6 +53,7 @@ class TanstackQueryDevtoolsPanel {
51
53
  shadowDOMTarget,
52
54
  onClose,
53
55
  hideDisabledQueries,
56
+ theme,
54
57
  } = config
55
58
  this.#client = createSignal(client)
56
59
  this.#queryFlavor = queryFlavor
@@ -64,6 +67,7 @@ class TanstackQueryDevtoolsPanel {
64
67
  this.#errorTypes = createSignal(errorTypes)
65
68
  this.#hideDisabledQueries = createSignal(hideDisabledQueries)
66
69
  this.#onClose = createSignal(onClose)
70
+ this.#theme = createSignal(theme)
67
71
  }
68
72
 
69
73
  setButtonPosition(position: DevtoolsButtonPosition) {
@@ -90,6 +94,10 @@ class TanstackQueryDevtoolsPanel {
90
94
  this.#onClose[1](() => onClose)
91
95
  }
92
96
 
97
+ setTheme(theme?: Theme) {
98
+ this.#theme[1](theme)
99
+ }
100
+
93
101
  mount<T extends HTMLElement>(el: T) {
94
102
  if (this.#isMounted) {
95
103
  throw new Error('Devtools is already mounted')
@@ -102,6 +110,7 @@ class TanstackQueryDevtoolsPanel {
102
110
  const [hideDisabledQueries] = this.#hideDisabledQueries
103
111
  const [queryClient] = this.#client
104
112
  const [onClose] = this.#onClose
113
+ const [theme] = this.#theme
105
114
  let Devtools: DevtoolsComponentType
106
115
 
107
116
  if (this.#Component) {
@@ -140,6 +149,9 @@ class TanstackQueryDevtoolsPanel {
140
149
  get onClose() {
141
150
  return onClose()
142
151
  },
152
+ get theme() {
153
+ return theme()
154
+ },
143
155
  }}
144
156
  />
145
157
  )
@@ -5,6 +5,7 @@ type XPosition = 'left' | 'right'
5
5
  type YPosition = 'top' | 'bottom'
6
6
  export type DevtoolsPosition = XPosition | YPosition
7
7
  export type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative'
8
+ export type Theme = 'dark' | 'light' | 'system'
8
9
 
9
10
  export interface DevtoolsErrorType {
10
11
  /**
@@ -30,6 +31,7 @@ export interface QueryDevtoolsProps {
30
31
  shadowDOMTarget?: ShadowRoot
31
32
  onClose?: () => unknown
32
33
  hideDisabledQueries?: boolean
34
+ theme?: Theme
33
35
  }
34
36
 
35
37
  export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
package/src/index.ts CHANGED
@@ -2,6 +2,7 @@ export type {
2
2
  DevtoolsButtonPosition,
3
3
  DevtoolsErrorType,
4
4
  DevtoolsPosition,
5
+ Theme,
5
6
  } from './contexts'
6
7
  export {
7
8
  TanstackQueryDevtools,