@tanstack/react-query-devtools
Advanced tools
+7
-8
| { | ||
| "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":[]} |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
2
-80%11359
-89.36%6
-90.32%239
-83.01%1
Infinity%+ Added
- Removed