You're Invited:Meet the Socket Team at RSAC and BSidesSF 2026, March 23–26.RSVP →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@tanstack/query-devtools

Package Overview
Dependencies
Maintainers
6
Versions
141
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/query-devtools - npm Package Compare versions

Comparing version
5.93.0
 to
5.94.4
+5
-6
package.json
{
"name": "@tanstack/query-devtools",
"version": "5.93.0",
"version": "5.94.4",
"description": "Developer tools to interact with and visualize the TanStack Query cache",

@@ -60,3 +60,3 @@ "author": "tannerlinsley",

"vite-plugin-solid": "^2.11.6",
"@tanstack/query-core": "5.90.20"
"@tanstack/query-core": "5.94.4"
},

@@ -68,6 +68,2 @@ "scripts": {

"test:types": "npm-run-all --serial test:types:*",
"test:types:ts50": "node ../../node_modules/typescript50/lib/tsc.js --build",
"test:types:ts51": "node ../../node_modules/typescript51/lib/tsc.js --build",
"test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js --build",
"test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js --build",
"test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build",

@@ -77,3 +73,6 @@ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build",

"test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build",
"test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --build",
"test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --build",
"test:types:tscurrent": "tsc --build",
"test:types:ts60": "node ../../node_modules/typescript60/lib/tsc.js --build",
"test:lib": "vitest",

@@ -80,0 +79,0 @@ "test:lib:dev": "pnpm run test:lib --watch",

build/chunk/6FXOYLZD.js

Sorry, the diff of this file is too big to display

build/chunk/73LUVHE2.js

Sorry, the diff of this file is too big to display

build/chunk/HNLWDMU5.js

Sorry, the diff of this file is too big to display

build/chunk/NITRNJ62.js

Sorry, the diff of this file is too big to display

build/dev.cjs

Sorry, the diff of this file is too big to display

-279
build/dev.js
import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/6FXOYLZD.js';
// src/TanstackQueryDevtools.tsx
var TanstackQueryDevtools = class {
#client;
#onlineManager;
#queryFlavor;
#version;
#isMounted = false;
#styleNonce;
#shadowDOMTarget;
#buttonPosition;
#position;
#initialIsOpen;
#errorTypes;
#hideDisabledQueries;
#Component;
#theme;
#dispose;
constructor(config) {
const {
client,
queryFlavor,
version,
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = 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);
this.#errorTypes = createSignal(errorTypes);
this.#hideDisabledQueries = createSignal(hideDisabledQueries);
this.#theme = createSignal(theme);
}
setButtonPosition(position) {
this.#buttonPosition[1](position);
}
setPosition(position) {
this.#position[1](position);
}
setInitialIsOpen(isOpen) {
this.#initialIsOpen[1](isOpen);
}
setErrorTypes(errorTypes) {
this.#errorTypes[1](errorTypes);
}
setClient(client) {
this.#client[1](client);
}
setTheme(theme) {
this.#theme[1](theme);
}
mount(el) {
if (this.#isMounted) {
throw new Error("Devtools is already mounted");
}
const dispose = render(() => {
const _self$ = this;
const [btnPosition] = this.#buttonPosition;
const [pos] = this.#position;
const [isOpen] = this.#initialIsOpen;
const [errors] = this.#errorTypes;
const [hideDisabledQueries] = this.#hideDisabledQueries;
const [queryClient] = this.#client;
const [theme] = this.#theme;
let Devtools;
if (this.#Component) {
Devtools = this.#Component;
} else {
Devtools = lazy(() => import('./DevtoolsComponent/B5PP2USH.js'));
this.#Component = Devtools;
}
setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
return createComponent(Devtools, mergeProps({
get queryFlavor() {
return _self$.#queryFlavor;
},
get version() {
return _self$.#version;
},
get onlineManager() {
return _self$.#onlineManager;
},
get shadowDOMTarget() {
return _self$.#shadowDOMTarget;
}
}, {
get client() {
return queryClient();
},
get buttonPosition() {
return btnPosition();
},
get position() {
return pos();
},
get initialIsOpen() {
return isOpen();
},
get errorTypes() {
return errors();
},
get hideDisabledQueries() {
return hideDisabledQueries();
},
get theme() {
return theme();
}
}));
}, el);
this.#isMounted = true;
this.#dispose = dispose;
}
unmount() {
if (!this.#isMounted) {
throw new Error("Devtools is not mounted");
}
this.#dispose?.();
this.#isMounted = false;
}
};
// src/TanstackQueryDevtoolsPanel.tsx
var TanstackQueryDevtoolsPanel = class {
#client;
#onlineManager;
#queryFlavor;
#version;
#isMounted = false;
#styleNonce;
#shadowDOMTarget;
#buttonPosition;
#position;
#initialIsOpen;
#errorTypes;
#hideDisabledQueries;
#onClose;
#Component;
#theme;
#dispose;
constructor(config) {
const {
client,
queryFlavor,
version,
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose,
hideDisabledQueries,
theme
} = 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);
this.#errorTypes = createSignal(errorTypes);
this.#hideDisabledQueries = createSignal(hideDisabledQueries);
this.#onClose = createSignal(onClose);
this.#theme = createSignal(theme);
}
setButtonPosition(position) {
this.#buttonPosition[1](position);
}
setPosition(position) {
this.#position[1](position);
}
setInitialIsOpen(isOpen) {
this.#initialIsOpen[1](isOpen);
}
setErrorTypes(errorTypes) {
this.#errorTypes[1](errorTypes);
}
setClient(client) {
this.#client[1](client);
}
setOnClose(onClose) {
this.#onClose[1](() => onClose);
}
setTheme(theme) {
this.#theme[1](theme);
}
mount(el) {
if (this.#isMounted) {
throw new Error("Devtools is already mounted");
}
const dispose = render(() => {
const _self$ = this;
const [btnPosition] = this.#buttonPosition;
const [pos] = this.#position;
const [isOpen] = this.#initialIsOpen;
const [errors] = this.#errorTypes;
const [hideDisabledQueries] = this.#hideDisabledQueries;
const [queryClient] = this.#client;
const [onClose] = this.#onClose;
const [theme] = this.#theme;
let Devtools;
if (this.#Component) {
Devtools = this.#Component;
} else {
Devtools = lazy(() => import('./DevtoolsPanelComponent/WI32IQVE.js'));
this.#Component = Devtools;
}
setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
return createComponent(Devtools, mergeProps({
get queryFlavor() {
return _self$.#queryFlavor;
},
get version() {
return _self$.#version;
},
get onlineManager() {
return _self$.#onlineManager;
},
get shadowDOMTarget() {
return _self$.#shadowDOMTarget;
}
}, {
get client() {
return queryClient();
},
get buttonPosition() {
return btnPosition();
},
get position() {
return pos();
},
get initialIsOpen() {
return isOpen();
},
get errorTypes() {
return errors();
},
get hideDisabledQueries() {
return hideDisabledQueries();
},
get onClose() {
return onClose();
},
get theme() {
return theme();
}
}));
}, el);
this.#isMounted = true;
this.#dispose = dispose;
}
unmount() {
if (!this.#isMounted) {
throw new Error("Devtools is not mounted");
}
this.#dispose?.();
this.#isMounted = false;
}
};
export { TanstackQueryDevtools, TanstackQueryDevtoolsPanel };
-38
build/DevtoolsComponent/B5PP2USH.js
import { createLocalStorage, THEME_PREFERENCE, QueryDevtoolsContext, PiPProvider, ThemeContext, Devtools } from '../chunk/HNLWDMU5.js';
import { getPreferredColorScheme, createMemo, createComponent } from '../chunk/6FXOYLZD.js';
// src/DevtoolsComponent.tsx
var DevtoolsComponent = (props) => {
const [localStore, setLocalStore] = createLocalStorage({
prefix: "TanstackQueryDevtools"
});
const colorScheme = getPreferredColorScheme();
const theme = createMemo(() => {
const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
if (preference !== "system") return preference;
return colorScheme();
});
return createComponent(QueryDevtoolsContext.Provider, {
value: props,
get children() {
return createComponent(PiPProvider, {
localStore,
setLocalStore,
get children() {
return createComponent(ThemeContext.Provider, {
value: theme,
get children() {
return createComponent(Devtools, {
localStore,
setLocalStore
});
}
});
}
});
}
});
};
var DevtoolsComponent_default = DevtoolsComponent;
export { DevtoolsComponent_default as default };
-38
build/DevtoolsComponent/BAGVG3AX.js
import { createLocalStorage, THEME_PREFERENCE, QueryDevtoolsContext, PiPProvider, ThemeContext, Devtools } from '../chunk/NITRNJ62.js';
import { getPreferredColorScheme, createMemo, createComponent } from '../chunk/73LUVHE2.js';
// src/DevtoolsComponent.tsx
var DevtoolsComponent = (props) => {
const [localStore, setLocalStore] = createLocalStorage({
prefix: "TanstackQueryDevtools"
});
const colorScheme = getPreferredColorScheme();
const theme = createMemo(() => {
const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
if (preference !== "system") return preference;
return colorScheme();
});
return createComponent(QueryDevtoolsContext.Provider, {
value: props,
get children() {
return createComponent(PiPProvider, {
localStore,
setLocalStore,
get children() {
return createComponent(ThemeContext.Provider, {
value: theme,
get children() {
return createComponent(Devtools, {
localStore,
setLocalStore
});
}
});
}
});
}
});
};
var DevtoolsComponent_default = DevtoolsComponent;
export { DevtoolsComponent_default as default };
-47
build/DevtoolsPanelComponent/KZB72KQG.js
import { createLocalStorage, THEME_PREFERENCE, QueryDevtoolsContext, PiPProvider, ThemeContext, ParentPanel, ContentView } from '../chunk/NITRNJ62.js';
import { getPreferredColorScheme, createMemo, createComponent } from '../chunk/73LUVHE2.js';
// src/DevtoolsPanelComponent.tsx
var DevtoolsPanelComponent = (props) => {
const [localStore, setLocalStore] = createLocalStorage({
prefix: "TanstackQueryDevtools"
});
const colorScheme = getPreferredColorScheme();
const theme = createMemo(() => {
const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
if (preference !== "system") return preference;
return colorScheme();
});
return createComponent(QueryDevtoolsContext.Provider, {
value: props,
get children() {
return createComponent(PiPProvider, {
disabled: true,
localStore,
setLocalStore,
get children() {
return createComponent(ThemeContext.Provider, {
value: theme,
get children() {
return createComponent(ParentPanel, {
get children() {
return createComponent(ContentView, {
localStore,
setLocalStore,
get onClose() {
return props.onClose;
},
showPanelViewOnly: true
});
}
});
}
});
}
});
}
});
};
var DevtoolsPanelComponent_default = DevtoolsPanelComponent;
export { DevtoolsPanelComponent_default as default };
-47
build/DevtoolsPanelComponent/WI32IQVE.js
import { createLocalStorage, THEME_PREFERENCE, QueryDevtoolsContext, PiPProvider, ThemeContext, ParentPanel, ContentView } from '../chunk/HNLWDMU5.js';
import { getPreferredColorScheme, createMemo, createComponent } from '../chunk/6FXOYLZD.js';
// src/DevtoolsPanelComponent.tsx
var DevtoolsPanelComponent = (props) => {
const [localStore, setLocalStore] = createLocalStorage({
prefix: "TanstackQueryDevtools"
});
const colorScheme = getPreferredColorScheme();
const theme = createMemo(() => {
const preference = props.theme || localStore.theme_preference || THEME_PREFERENCE;
if (preference !== "system") return preference;
return colorScheme();
});
return createComponent(QueryDevtoolsContext.Provider, {
value: props,
get children() {
return createComponent(PiPProvider, {
disabled: true,
localStore,
setLocalStore,
get children() {
return createComponent(ThemeContext.Provider, {
value: theme,
get children() {
return createComponent(ParentPanel, {
get children() {
return createComponent(ContentView, {
localStore,
setLocalStore,
get onClose() {
return props.onClose;
},
showPanelViewOnly: true
});
}
});
}
});
}
});
}
});
};
var DevtoolsPanelComponent_default = DevtoolsPanelComponent;
export { DevtoolsPanelComponent_default as default };
build/index.cjs

Sorry, the diff of this file is too big to display

-69
build/index.d.cts
import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
type XPosition = 'left' | 'right';
type YPosition = 'top' | 'bottom';
type DevtoolsPosition = XPosition | YPosition;
type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
type Theme = 'dark' | 'light' | 'system';
interface DevtoolsErrorType {
/**
* The name of the error.
*/
name: string;
/**
* How the error is initialized.
*/
initializer: (query: Query) => Error;
}
interface QueryDevtoolsProps {
readonly client: QueryClient;
queryFlavor: string;
version: string;
onlineManager: typeof onlineManager;
buttonPosition?: DevtoolsButtonPosition;
position?: DevtoolsPosition;
initialIsOpen?: boolean;
errorTypes?: Array<DevtoolsErrorType>;
shadowDOMTarget?: ShadowRoot;
onClose?: () => unknown;
hideDisabledQueries?: boolean;
theme?: Theme;
}
interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
styleNonce?: string;
shadowDOMTarget?: ShadowRoot;
}
declare class TanstackQueryDevtools {
#private;
constructor(config: TanstackQueryDevtoolsConfig);
setButtonPosition(position: DevtoolsButtonPosition): void;
setPosition(position: DevtoolsPosition): void;
setInitialIsOpen(isOpen: boolean): void;
setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
setClient(client: QueryClient): void;
setTheme(theme?: Theme): void;
mount<T extends HTMLElement>(el: T): void;
unmount(): void;
}
interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
styleNonce?: string;
shadowDOMTarget?: ShadowRoot;
onClose?: () => unknown;
}
declare class TanstackQueryDevtoolsPanel {
#private;
constructor(config: TanstackQueryDevtoolsPanelConfig);
setButtonPosition(position: DevtoolsButtonPosition): void;
setPosition(position: DevtoolsPosition): void;
setInitialIsOpen(isOpen: boolean): void;
setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
setClient(client: QueryClient): void;
setOnClose(onClose: () => unknown): void;
setTheme(theme?: Theme): void;
mount<T extends HTMLElement>(el: T): void;
unmount(): void;
}
export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig, type Theme };
-69
build/index.d.ts
import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
type XPosition = 'left' | 'right';
type YPosition = 'top' | 'bottom';
type DevtoolsPosition = XPosition | YPosition;
type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
type Theme = 'dark' | 'light' | 'system';
interface DevtoolsErrorType {
/**
* The name of the error.
*/
name: string;
/**
* How the error is initialized.
*/
initializer: (query: Query) => Error;
}
interface QueryDevtoolsProps {
readonly client: QueryClient;
queryFlavor: string;
version: string;
onlineManager: typeof onlineManager;
buttonPosition?: DevtoolsButtonPosition;
position?: DevtoolsPosition;
initialIsOpen?: boolean;
errorTypes?: Array<DevtoolsErrorType>;
shadowDOMTarget?: ShadowRoot;
onClose?: () => unknown;
hideDisabledQueries?: boolean;
theme?: Theme;
}
interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
styleNonce?: string;
shadowDOMTarget?: ShadowRoot;
}
declare class TanstackQueryDevtools {
#private;
constructor(config: TanstackQueryDevtoolsConfig);
setButtonPosition(position: DevtoolsButtonPosition): void;
setPosition(position: DevtoolsPosition): void;
setInitialIsOpen(isOpen: boolean): void;
setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
setClient(client: QueryClient): void;
setTheme(theme?: Theme): void;
mount<T extends HTMLElement>(el: T): void;
unmount(): void;
}
interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
styleNonce?: string;
shadowDOMTarget?: ShadowRoot;
onClose?: () => unknown;
}
declare class TanstackQueryDevtoolsPanel {
#private;
constructor(config: TanstackQueryDevtoolsPanelConfig);
setButtonPosition(position: DevtoolsButtonPosition): void;
setPosition(position: DevtoolsPosition): void;
setInitialIsOpen(isOpen: boolean): void;
setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
setClient(client: QueryClient): void;
setOnClose(onClose: () => unknown): void;
setTheme(theme?: Theme): void;
mount<T extends HTMLElement>(el: T): void;
unmount(): void;
}
export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig, type Theme };
-279
build/index.js
import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/73LUVHE2.js';
// src/TanstackQueryDevtools.tsx
var TanstackQueryDevtools = class {
#client;
#onlineManager;
#queryFlavor;
#version;
#isMounted = false;
#styleNonce;
#shadowDOMTarget;
#buttonPosition;
#position;
#initialIsOpen;
#errorTypes;
#hideDisabledQueries;
#Component;
#theme;
#dispose;
constructor(config) {
const {
client,
queryFlavor,
version,
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = 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);
this.#errorTypes = createSignal(errorTypes);
this.#hideDisabledQueries = createSignal(hideDisabledQueries);
this.#theme = createSignal(theme);
}
setButtonPosition(position) {
this.#buttonPosition[1](position);
}
setPosition(position) {
this.#position[1](position);
}
setInitialIsOpen(isOpen) {
this.#initialIsOpen[1](isOpen);
}
setErrorTypes(errorTypes) {
this.#errorTypes[1](errorTypes);
}
setClient(client) {
this.#client[1](client);
}
setTheme(theme) {
this.#theme[1](theme);
}
mount(el) {
if (this.#isMounted) {
throw new Error("Devtools is already mounted");
}
const dispose = render(() => {
const _self$ = this;
const [btnPosition] = this.#buttonPosition;
const [pos] = this.#position;
const [isOpen] = this.#initialIsOpen;
const [errors] = this.#errorTypes;
const [hideDisabledQueries] = this.#hideDisabledQueries;
const [queryClient] = this.#client;
const [theme] = this.#theme;
let Devtools;
if (this.#Component) {
Devtools = this.#Component;
} else {
Devtools = lazy(() => import('./DevtoolsComponent/BAGVG3AX.js'));
this.#Component = Devtools;
}
setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
return createComponent(Devtools, mergeProps({
get queryFlavor() {
return _self$.#queryFlavor;
},
get version() {
return _self$.#version;
},
get onlineManager() {
return _self$.#onlineManager;
},
get shadowDOMTarget() {
return _self$.#shadowDOMTarget;
}
}, {
get client() {
return queryClient();
},
get buttonPosition() {
return btnPosition();
},
get position() {
return pos();
},
get initialIsOpen() {
return isOpen();
},
get errorTypes() {
return errors();
},
get hideDisabledQueries() {
return hideDisabledQueries();
},
get theme() {
return theme();
}
}));
}, el);
this.#isMounted = true;
this.#dispose = dispose;
}
unmount() {
if (!this.#isMounted) {
throw new Error("Devtools is not mounted");
}
this.#dispose?.();
this.#isMounted = false;
}
};
// src/TanstackQueryDevtoolsPanel.tsx
var TanstackQueryDevtoolsPanel = class {
#client;
#onlineManager;
#queryFlavor;
#version;
#isMounted = false;
#styleNonce;
#shadowDOMTarget;
#buttonPosition;
#position;
#initialIsOpen;
#errorTypes;
#hideDisabledQueries;
#onClose;
#Component;
#theme;
#dispose;
constructor(config) {
const {
client,
queryFlavor,
version,
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose,
hideDisabledQueries,
theme
} = 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);
this.#errorTypes = createSignal(errorTypes);
this.#hideDisabledQueries = createSignal(hideDisabledQueries);
this.#onClose = createSignal(onClose);
this.#theme = createSignal(theme);
}
setButtonPosition(position) {
this.#buttonPosition[1](position);
}
setPosition(position) {
this.#position[1](position);
}
setInitialIsOpen(isOpen) {
this.#initialIsOpen[1](isOpen);
}
setErrorTypes(errorTypes) {
this.#errorTypes[1](errorTypes);
}
setClient(client) {
this.#client[1](client);
}
setOnClose(onClose) {
this.#onClose[1](() => onClose);
}
setTheme(theme) {
this.#theme[1](theme);
}
mount(el) {
if (this.#isMounted) {
throw new Error("Devtools is already mounted");
}
const dispose = render(() => {
const _self$ = this;
const [btnPosition] = this.#buttonPosition;
const [pos] = this.#position;
const [isOpen] = this.#initialIsOpen;
const [errors] = this.#errorTypes;
const [hideDisabledQueries] = this.#hideDisabledQueries;
const [queryClient] = this.#client;
const [onClose] = this.#onClose;
const [theme] = this.#theme;
let Devtools;
if (this.#Component) {
Devtools = this.#Component;
} else {
Devtools = lazy(() => import('./DevtoolsPanelComponent/KZB72KQG.js'));
this.#Component = Devtools;
}
setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
return createComponent(Devtools, mergeProps({
get queryFlavor() {
return _self$.#queryFlavor;
},
get version() {
return _self$.#version;
},
get onlineManager() {
return _self$.#onlineManager;
},
get shadowDOMTarget() {
return _self$.#shadowDOMTarget;
}
}, {
get client() {
return queryClient();
},
get buttonPosition() {
return btnPosition();
},
get position() {
return pos();
},
get initialIsOpen() {
return isOpen();
},
get errorTypes() {
return errors();
},
get hideDisabledQueries() {
return hideDisabledQueries();
},
get onClose() {
return onClose();
},
get theme() {
return theme();
}
}));
}, el);
this.#isMounted = true;
this.#dispose = dispose;
}
unmount() {
if (!this.#isMounted) {
throw new Error("Devtools is not mounted");
}
this.#dispose?.();
this.#isMounted = false;
}
};
export { TanstackQueryDevtools, TanstackQueryDevtoolsPanel };