Launch Week Day 3: Introducing Organization Notifications in Socket.Learn More
Socket
Book a DemoSign in
Socket

@tanstack/react-query-devtools

Package Overview
Dependencies
Maintainers
6
Versions
545
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/react-query-devtools - npm Package Compare versions

Comparing version
5.91.3
to
5.94.4
+7
-8
package.json
{
"name": "@tanstack/react-query-devtools",
"version": "5.91.3",
"version": "5.94.4",
"description": "Developer tools to interact with and visualize the TanStack/react-query cache",

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

"dependencies": {
"@tanstack/query-devtools": "5.93.0"
"@tanstack/query-devtools": "5.94.4"
},

@@ -71,7 +71,7 @@ "devDependencies": {

"react": "^19.2.1",
"@tanstack/react-query": "5.90.20"
"@tanstack/react-query": "5.94.4"
},
"peerDependencies": {
"react": "^18 || ^19",
"@tanstack/react-query": "^5.90.20"
"@tanstack/react-query": "^5.94.4"
},

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

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

@@ -92,3 +88,6 @@ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build tsconfig.legacy.json",

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

@@ -95,0 +94,0 @@ "test:lib:dev": "pnpm run test:lib --watch",

"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
ReactQueryDevtools: () => ReactQueryDevtools2,
ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel2
});
module.exports = __toCommonJS(index_exports);
var Devtools = __toESM(require("./ReactQueryDevtools.cjs"), 1);
var DevtoolsPanel = __toESM(require("./ReactQueryDevtoolsPanel.cjs"), 1);
var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : DevtoolsPanel.ReactQueryDevtoolsPanel;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtools,
ReactQueryDevtoolsPanel
});
//# sourceMappingURL=index.cjs.map
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAEA,eAA0B;AAC1B,oBAA+B;AAExB,IAAMD,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;AAER,IAAMC,2BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACc;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.cjs';
import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'];
declare const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'];
type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
export { type DevtoolsPanelOptions, ReactQueryDevtools, ReactQueryDevtoolsPanel };
import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.js';
import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'];
declare const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'];
type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
export { type DevtoolsPanelOptions, ReactQueryDevtools, ReactQueryDevtoolsPanel };
"use client";
// src/index.ts
import * as Devtools from "./ReactQueryDevtools.js";
import * as DevtoolsPanel from "./ReactQueryDevtoolsPanel.js";
var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : DevtoolsPanel.ReactQueryDevtoolsPanel;
export {
ReactQueryDevtools2 as ReactQueryDevtools,
ReactQueryDevtoolsPanel2 as ReactQueryDevtoolsPanel
};
//# sourceMappingURL=index.js.map
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;AAEA,YAAY,cAAc;AAC1B,YAAY,mBAAmB;AAExB,IAAMA,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;AAER,IAAMC,2BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACc;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/production.ts
var production_exports = {};
__export(production_exports, {
ReactQueryDevtools: () => ReactQueryDevtools2,
ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel2
});
module.exports = __toCommonJS(production_exports);
var Devtools = __toESM(require("./ReactQueryDevtools.cjs"), 1);
var DevtoolsPanel = __toESM(require("./ReactQueryDevtoolsPanel.cjs"), 1);
var ReactQueryDevtools2 = Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = DevtoolsPanel.ReactQueryDevtoolsPanel;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtools,
ReactQueryDevtoolsPanel
});
//# sourceMappingURL=production.cjs.map
{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools = Devtools.ReactQueryDevtools\nexport const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAEA,eAA0B;AAC1B,oBAA+B;AAExB,IAAMD,sBAA8B;AACpC,IAAMC,2BAAwC;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.cjs';
import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.js';
import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
"use client";
// src/production.ts
import * as Devtools from "./ReactQueryDevtools.js";
import * as DevtoolsPanel from "./ReactQueryDevtoolsPanel.js";
var ReactQueryDevtools2 = Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = DevtoolsPanel.ReactQueryDevtoolsPanel;
export {
ReactQueryDevtools2 as ReactQueryDevtools,
ReactQueryDevtoolsPanel2 as ReactQueryDevtoolsPanel
};
//# sourceMappingURL=production.js.map
{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools = Devtools.ReactQueryDevtools\nexport const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel\n"],"mappings":";;;AAEA,YAAY,cAAc;AAC1B,YAAY,mBAAmB;AAExB,IAAMA,sBAA8B;AACpC,IAAMC,2BAAwC;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
import * as React from 'react';
import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
interface DevtoolsOptions {
/**
* Set this true if you want the dev tools to default to being open
*/
initialIsOpen?: boolean;
/**
* The position of the React Query logo to open and close the devtools panel.
* 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
* Defaults to 'bottom-right'.
*/
buttonPosition?: DevtoolsButtonPosition;
/**
* The position of the React Query devtools panel.
* 'top' | 'bottom' | 'left' | 'right'
* Defaults to 'bottom'.
*/
position?: DevtoolsPosition;
/**
* 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;
/**
* Set this to true to hide disabled queries from the devtools panel.
*/
hideDisabledQueries?: boolean;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
type Devtools_DevtoolsOptions = DevtoolsOptions;
declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
declare namespace Devtools {
export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
}
export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };
import * as React from 'react';
import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
interface DevtoolsOptions {
/**
* Set this true if you want the dev tools to default to being open
*/
initialIsOpen?: boolean;
/**
* The position of the React Query logo to open and close the devtools panel.
* 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
* Defaults to 'bottom-right'.
*/
buttonPosition?: DevtoolsButtonPosition;
/**
* The position of the React Query devtools panel.
* 'top' | 'bottom' | 'left' | 'right'
* Defaults to 'bottom'.
*/
position?: DevtoolsPosition;
/**
* 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;
/**
* Set this to true to hide disabled queries from the devtools panel.
*/
hideDisabledQueries?: boolean;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
type Devtools_DevtoolsOptions = DevtoolsOptions;
declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
declare namespace Devtools {
export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
}
export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ReactQueryDevtools.tsx
var ReactQueryDevtools_exports = {};
__export(ReactQueryDevtools_exports, {
ReactQueryDevtools: () => ReactQueryDevtools
});
module.exports = __toCommonJS(ReactQueryDevtools_exports);
var React = __toESM(require("react"), 1);
var import_react_query = require("@tanstack/react-query");
var import_query_devtools = require("@tanstack/query-devtools");
var import_jsx_runtime = require("react/jsx-runtime");
function ReactQueryDevtools(props) {
const queryClient = (0, import_react_query.useQueryClient)(props.client);
const ref = React.useRef(null);
const {
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new import_query_devtools.TanstackQueryDevtools({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager: import_react_query.onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
if (buttonPosition) {
devtools.setButtonPosition(buttonPosition);
}
}, [buttonPosition, devtools]);
React.useEffect(() => {
if (position) {
devtools.setPosition(position);
}
}, [position, devtools]);
React.useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false);
}, [initialIsOpen, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dir: "ltr", className: "tsqd-parent-container", ref });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtools
});
//# sourceMappingURL=ReactQueryDevtools.cjs.map
{"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-right'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.js';
"use client";
// src/ReactQueryDevtools.tsx
import * as React from "react";
import { onlineManager, useQueryClient } from "@tanstack/react-query";
import { TanstackQueryDevtools } from "@tanstack/query-devtools";
import { jsx } from "react/jsx-runtime";
function ReactQueryDevtools(props) {
const queryClient = useQueryClient(props.client);
const ref = React.useRef(null);
const {
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new TanstackQueryDevtools({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
if (buttonPosition) {
devtools.setButtonPosition(buttonPosition);
}
}, [buttonPosition, devtools]);
React.useEffect(() => {
if (position) {
devtools.setPosition(position);
}
}, [position, devtools]);
React.useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false);
}, [initialIsOpen, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx("div", { dir: "ltr", className: "tsqd-parent-container", ref });
}
export {
ReactQueryDevtools
};
//# sourceMappingURL=ReactQueryDevtools.js.map
{"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-right'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
import * as React from 'react';
import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
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?: React.CSSProperties;
/**
* 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;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
declare namespace DevtoolsPanel {
export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
}
export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };
import * as React from 'react';
import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
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?: React.CSSProperties;
/**
* 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;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
declare namespace DevtoolsPanel {
export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
}
export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ReactQueryDevtoolsPanel.tsx
var ReactQueryDevtoolsPanel_exports = {};
__export(ReactQueryDevtoolsPanel_exports, {
ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel
});
module.exports = __toCommonJS(ReactQueryDevtoolsPanel_exports);
var React = __toESM(require("react"), 1);
var import_react_query = require("@tanstack/react-query");
var import_query_devtools = require("@tanstack/query-devtools");
var import_jsx_runtime = require("react/jsx-runtime");
function ReactQueryDevtoolsPanel(props) {
const queryClient = (0, import_react_query.useQueryClient)(props.client);
const ref = React.useRef(null);
const {
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new import_query_devtools.TanstackQueryDevtoolsPanel({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager: import_react_query.onlineManager,
buttonPosition: "bottom-left",
position: "bottom",
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose: props.onClose,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
devtools.setOnClose(props.onClose ?? (() => {
}));
}, [props.onClose, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
style: { height: "500px", ...props.style },
className: "tsqd-parent-container",
ref
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtoolsPanel
});
//# sourceMappingURL=ReactQueryDevtoolsPanel.cjs.map
{"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n\n /**\n * Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n */\n style?: React.CSSProperties\n\n /**\n * Callback function that is called when the devtools panel is closed\n */\n onClose?: () => unknown\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
"use client";
// src/ReactQueryDevtoolsPanel.tsx
import * as React from "react";
import { onlineManager, useQueryClient } from "@tanstack/react-query";
import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
import { jsx } from "react/jsx-runtime";
function ReactQueryDevtoolsPanel(props) {
const queryClient = useQueryClient(props.client);
const ref = React.useRef(null);
const {
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new TanstackQueryDevtoolsPanel({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager,
buttonPosition: "bottom-left",
position: "bottom",
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose: props.onClose,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
devtools.setOnClose(props.onClose ?? (() => {
}));
}, [props.onClose, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx(
"div",
{
style: { height: "500px", ...props.style },
className: "tsqd-parent-container",
ref
}
);
}
export {
ReactQueryDevtoolsPanel
};
//# sourceMappingURL=ReactQueryDevtoolsPanel.js.map
{"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n\n /**\n * Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n */\n style?: React.CSSProperties\n\n /**\n * Callback function that is called when the devtools panel is closed\n */\n onClose?: () => unknown\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
ReactQueryDevtools: () => ReactQueryDevtools2,
ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel2
});
module.exports = __toCommonJS(index_exports);
var Devtools = __toESM(require("./ReactQueryDevtools.cjs"), 1);
var DevtoolsPanel = __toESM(require("./ReactQueryDevtoolsPanel.cjs"), 1);
var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : DevtoolsPanel.ReactQueryDevtoolsPanel;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtools,
ReactQueryDevtoolsPanel
});
//# sourceMappingURL=index.cjs.map
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAEA,eAA0B;AAC1B,oBAA+B;AAExB,IAAMD,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;AAER,IAAMC,2BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACc;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.cjs';
import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'];
declare const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'];
type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
export { type DevtoolsPanelOptions, ReactQueryDevtools, ReactQueryDevtoolsPanel };
import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.js';
import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'];
declare const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'];
type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
export { type DevtoolsPanelOptions, ReactQueryDevtools, ReactQueryDevtoolsPanel };
"use client";
// src/index.ts
import * as Devtools from "./ReactQueryDevtools.js";
import * as DevtoolsPanel from "./ReactQueryDevtoolsPanel.js";
var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = process.env.NODE_ENV !== "development" ? function() {
return null;
} : DevtoolsPanel.ReactQueryDevtoolsPanel;
export {
ReactQueryDevtools2 as ReactQueryDevtools,
ReactQueryDevtoolsPanel2 as ReactQueryDevtoolsPanel
};
//# sourceMappingURL=index.js.map
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;AAEA,YAAY,cAAc;AAC1B,YAAY,mBAAmB;AAExB,IAAMA,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;AAER,IAAMC,2BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACc;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/production.ts
var production_exports = {};
__export(production_exports, {
ReactQueryDevtools: () => ReactQueryDevtools2,
ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel2
});
module.exports = __toCommonJS(production_exports);
var Devtools = __toESM(require("./ReactQueryDevtools.cjs"), 1);
var DevtoolsPanel = __toESM(require("./ReactQueryDevtoolsPanel.cjs"), 1);
var ReactQueryDevtools2 = Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = DevtoolsPanel.ReactQueryDevtoolsPanel;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtools,
ReactQueryDevtoolsPanel
});
//# sourceMappingURL=production.cjs.map
{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools = Devtools.ReactQueryDevtools\nexport const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAEA,eAA0B;AAC1B,oBAA+B;AAExB,IAAMD,sBAA8B;AACpC,IAAMC,2BAAwC;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.cjs';
import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.js';
import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
"use client";
// src/production.ts
import * as Devtools from "./ReactQueryDevtools.js";
import * as DevtoolsPanel from "./ReactQueryDevtoolsPanel.js";
var ReactQueryDevtools2 = Devtools.ReactQueryDevtools;
var ReactQueryDevtoolsPanel2 = DevtoolsPanel.ReactQueryDevtoolsPanel;
export {
ReactQueryDevtools2 as ReactQueryDevtools,
ReactQueryDevtoolsPanel2 as ReactQueryDevtoolsPanel
};
//# sourceMappingURL=production.js.map
{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools = Devtools.ReactQueryDevtools\nexport const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel\n"],"mappings":";;;AAEA,YAAY,cAAc;AAC1B,YAAY,mBAAmB;AAExB,IAAMA,sBAA8B;AACpC,IAAMC,2BAAwC;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}
import * as React from 'react';
import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
interface DevtoolsOptions {
/**
* Set this true if you want the dev tools to default to being open
*/
initialIsOpen?: boolean;
/**
* The position of the React Query logo to open and close the devtools panel.
* 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
* Defaults to 'bottom-right'.
*/
buttonPosition?: DevtoolsButtonPosition;
/**
* The position of the React Query devtools panel.
* 'top' | 'bottom' | 'left' | 'right'
* Defaults to 'bottom'.
*/
position?: DevtoolsPosition;
/**
* 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;
/**
* Set this to true to hide disabled queries from the devtools panel.
*/
hideDisabledQueries?: boolean;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
type Devtools_DevtoolsOptions = DevtoolsOptions;
declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
declare namespace Devtools {
export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
}
export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };
import * as React from 'react';
import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
interface DevtoolsOptions {
/**
* Set this true if you want the dev tools to default to being open
*/
initialIsOpen?: boolean;
/**
* The position of the React Query logo to open and close the devtools panel.
* 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
* Defaults to 'bottom-right'.
*/
buttonPosition?: DevtoolsButtonPosition;
/**
* The position of the React Query devtools panel.
* 'top' | 'bottom' | 'left' | 'right'
* Defaults to 'bottom'.
*/
position?: DevtoolsPosition;
/**
* 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;
/**
* Set this to true to hide disabled queries from the devtools panel.
*/
hideDisabledQueries?: boolean;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
type Devtools_DevtoolsOptions = DevtoolsOptions;
declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
declare namespace Devtools {
export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
}
export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ReactQueryDevtools.tsx
var ReactQueryDevtools_exports = {};
__export(ReactQueryDevtools_exports, {
ReactQueryDevtools: () => ReactQueryDevtools
});
module.exports = __toCommonJS(ReactQueryDevtools_exports);
var React = __toESM(require("react"), 1);
var import_react_query = require("@tanstack/react-query");
var import_query_devtools = require("@tanstack/query-devtools");
var import_jsx_runtime = require("react/jsx-runtime");
function ReactQueryDevtools(props) {
const queryClient = (0, import_react_query.useQueryClient)(props.client);
const ref = React.useRef(null);
const {
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new import_query_devtools.TanstackQueryDevtools({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager: import_react_query.onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
if (buttonPosition) {
devtools.setButtonPosition(buttonPosition);
}
}, [buttonPosition, devtools]);
React.useEffect(() => {
if (position) {
devtools.setPosition(position);
}
}, [position, devtools]);
React.useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false);
}, [initialIsOpen, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dir: "ltr", className: "tsqd-parent-container", ref });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtools
});
//# sourceMappingURL=ReactQueryDevtools.cjs.map
{"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-right'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.js';
"use client";
// src/ReactQueryDevtools.tsx
import * as React from "react";
import { onlineManager, useQueryClient } from "@tanstack/react-query";
import { TanstackQueryDevtools } from "@tanstack/query-devtools";
import { jsx } from "react/jsx-runtime";
function ReactQueryDevtools(props) {
const queryClient = useQueryClient(props.client);
const ref = React.useRef(null);
const {
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new TanstackQueryDevtools({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager,
buttonPosition,
position,
initialIsOpen,
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
if (buttonPosition) {
devtools.setButtonPosition(buttonPosition);
}
}, [buttonPosition, devtools]);
React.useEffect(() => {
if (position) {
devtools.setPosition(position);
}
}, [position, devtools]);
React.useEffect(() => {
devtools.setInitialIsOpen(initialIsOpen || false);
}, [initialIsOpen, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx("div", { dir: "ltr", className: "tsqd-parent-container", ref });
}
export {
ReactQueryDevtools
};
//# sourceMappingURL=ReactQueryDevtools.js.map
{"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /**\n * Set this true if you want the dev tools to default to being open\n */\n initialIsOpen?: boolean\n /**\n * The position of the React Query logo to open and close the devtools panel.\n * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n * Defaults to 'bottom-right'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the React Query devtools panel.\n * 'top' | 'bottom' | 'left' | 'right'\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
import * as React from 'react';
import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
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?: React.CSSProperties;
/**
* 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;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
declare namespace DevtoolsPanel {
export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
}
export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };
import * as React from 'react';
import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
import { QueryClient } from '@tanstack/react-query';
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?: React.CSSProperties;
/**
* 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;
/**
* Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
* Defaults to 'system'.
*/
theme?: Theme;
}
declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
declare namespace DevtoolsPanel {
export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
}
export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };
"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/ReactQueryDevtoolsPanel.tsx
var ReactQueryDevtoolsPanel_exports = {};
__export(ReactQueryDevtoolsPanel_exports, {
ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel
});
module.exports = __toCommonJS(ReactQueryDevtoolsPanel_exports);
var React = __toESM(require("react"), 1);
var import_react_query = require("@tanstack/react-query");
var import_query_devtools = require("@tanstack/query-devtools");
var import_jsx_runtime = require("react/jsx-runtime");
function ReactQueryDevtoolsPanel(props) {
const queryClient = (0, import_react_query.useQueryClient)(props.client);
const ref = React.useRef(null);
const {
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new import_query_devtools.TanstackQueryDevtoolsPanel({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager: import_react_query.onlineManager,
buttonPosition: "bottom-left",
position: "bottom",
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose: props.onClose,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
devtools.setOnClose(props.onClose ?? (() => {
}));
}, [props.onClose, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
style: { height: "500px", ...props.style },
className: "tsqd-parent-container",
ref
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ReactQueryDevtoolsPanel
});
//# sourceMappingURL=ReactQueryDevtoolsPanel.cjs.map
{"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n\n /**\n * Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n */\n style?: React.CSSProperties\n\n /**\n * Callback function that is called when the devtools panel is closed\n */\n onClose?: () => unknown\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
import 'react';
import '@tanstack/query-devtools';
import '@tanstack/react-query';
export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
"use client";
// src/ReactQueryDevtoolsPanel.tsx
import * as React from "react";
import { onlineManager, useQueryClient } from "@tanstack/react-query";
import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
import { jsx } from "react/jsx-runtime";
function ReactQueryDevtoolsPanel(props) {
const queryClient = useQueryClient(props.client);
const ref = React.useRef(null);
const {
errorTypes,
styleNonce,
shadowDOMTarget,
hideDisabledQueries,
theme
} = props;
const [devtools] = React.useState(
new TanstackQueryDevtoolsPanel({
client: queryClient,
queryFlavor: "React Query",
version: "5",
onlineManager,
buttonPosition: "bottom-left",
position: "bottom",
initialIsOpen: true,
errorTypes,
styleNonce,
shadowDOMTarget,
onClose: props.onClose,
hideDisabledQueries,
theme
})
);
React.useEffect(() => {
devtools.setClient(queryClient);
}, [queryClient, devtools]);
React.useEffect(() => {
devtools.setOnClose(props.onClose ?? (() => {
}));
}, [props.onClose, devtools]);
React.useEffect(() => {
devtools.setErrorTypes(errorTypes || []);
}, [errorTypes, devtools]);
React.useEffect(() => {
devtools.setTheme(theme);
}, [theme, devtools]);
React.useEffect(() => {
if (ref.current) {
devtools.mount(ref.current);
}
return () => {
devtools.unmount();
};
}, [devtools]);
return /* @__PURE__ */ jsx(
"div",
{
style: { height: "500px", ...props.style },
className: "tsqd-parent-container",
ref
}
);
}
export {
ReactQueryDevtoolsPanel
};
//# sourceMappingURL=ReactQueryDevtoolsPanel.js.map
{"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /**\n * Custom instance of QueryClient\n */\n client?: QueryClient\n /**\n * Use this so you can define custom errors that can be shown in the devtools.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * 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.\n */\n styleNonce?: string\n /**\n * Use this so you can attach the devtool's styles to specific element in the DOM.\n */\n shadowDOMTarget?: ShadowRoot\n\n /**\n * Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n */\n style?: React.CSSProperties\n\n /**\n * Callback function that is called when the devtools panel is closed\n */\n onClose?: () => unknown\n /**\n * Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}