@tanstack/react-query-devtools 5.0.0-alpha.56 → 5.0.0-alpha.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/devtools.cjs +5 -1
- package/build/lib/devtools.cjs.map +1 -1
- package/build/lib/devtools.d.ts +3 -1
- package/build/lib/devtools.d.ts.map +1 -1
- package/build/lib/devtools.js +5 -1
- package/build/lib/devtools.js.map +1 -1
- package/build/lib/index.prod.cjs +2 -1
- package/build/lib/index.prod.cjs.map +1 -1
- package/build/lib/index.prod.js +2 -1
- package/build/lib/index.prod.js.map +1 -1
- package/package.json +1 -1
- package/src/devtools.tsx +12 -1
package/build/lib/devtools.cjs
CHANGED
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var reactQuery = require('@tanstack/react-query');
|
|
6
6
|
var queryDevtools = require('@tanstack/query-devtools');
|
|
7
7
|
|
|
8
|
-
function
|
|
8
|
+
function ReactQueryDevtoolsDev(props) {
|
|
9
9
|
const queryClient = reactQuery.useQueryClient();
|
|
10
10
|
const client = props.client || queryClient;
|
|
11
11
|
const ref = React.useRef(null);
|
|
@@ -56,6 +56,10 @@ function ReactQueryDevtools(props) {
|
|
|
56
56
|
ref: ref
|
|
57
57
|
});
|
|
58
58
|
}
|
|
59
|
+
function ReactQueryDevtoolsProd(_props) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? ReactQueryDevtoolsProd : ReactQueryDevtoolsDev;
|
|
59
63
|
|
|
60
64
|
exports.ReactQueryDevtools = ReactQueryDevtools;
|
|
61
65
|
//# sourceMappingURL=devtools.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\
|
|
1
|
+
{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools","ref","ReactQueryDevtools"],"mappings":";;;;;;;AAuCA;AAGE;AACA;AACA;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACEC;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEYC;AAAS;AACvB;AAEA;AAGE;AACF;AAEaC;;"}
|
package/build/lib/devtools.d.ts
CHANGED
|
@@ -27,5 +27,7 @@ export interface DevtoolsOptions {
|
|
|
27
27
|
*/
|
|
28
28
|
errorTypes?: DevToolsErrorType[];
|
|
29
29
|
}
|
|
30
|
-
|
|
30
|
+
declare function ReactQueryDevtoolsDev(props: DevtoolsOptions): React.ReactElement | null;
|
|
31
|
+
export declare const ReactQueryDevtools: typeof ReactQueryDevtoolsDev;
|
|
32
|
+
export {};
|
|
31
33
|
//# sourceMappingURL=devtools.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/devtools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACjC;AAED,
|
|
1
|
+
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/devtools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACjC;AAED,iBAAS,qBAAqB,CAC5B,KAAK,EAAE,eAAe,GACrB,KAAK,CAAC,YAAY,GAAG,IAAI,CAqD3B;AAQD,eAAO,MAAM,kBAAkB,EAAE,OAAO,qBAGb,CAAA"}
|
package/build/lib/devtools.js
CHANGED
|
@@ -3,7 +3,7 @@ import React, { useRef, useState, useEffect } from 'react';
|
|
|
3
3
|
import { useQueryClient, onlineManager } from '@tanstack/react-query';
|
|
4
4
|
import { TanstackQueryDevtools } from '@tanstack/query-devtools';
|
|
5
5
|
|
|
6
|
-
function
|
|
6
|
+
function ReactQueryDevtoolsDev(props) {
|
|
7
7
|
const queryClient = useQueryClient();
|
|
8
8
|
const client = props.client || queryClient;
|
|
9
9
|
const ref = useRef(null);
|
|
@@ -54,6 +54,10 @@ function ReactQueryDevtools(props) {
|
|
|
54
54
|
ref: ref
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
|
+
function ReactQueryDevtoolsProd(_props) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? ReactQueryDevtoolsProd : ReactQueryDevtoolsDev;
|
|
57
61
|
|
|
58
62
|
export { ReactQueryDevtools };
|
|
59
63
|
//# sourceMappingURL=devtools.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\
|
|
1
|
+
{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools","ref","ReactQueryDevtools"],"mappings":";;;;;AAuCA;AAGE;AACA;AACA;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACEC;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEYC;AAAS;AACvB;AAEA;AAGE;AACF;AAEaC;;"}
|
package/build/lib/index.prod.cjs
CHANGED
|
@@ -4,7 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var reactQuery = require('@tanstack/react-query');
|
|
5
5
|
var queryDevtools = require('@tanstack/query-devtools');
|
|
6
6
|
|
|
7
|
-
function
|
|
7
|
+
function ReactQueryDevtoolsDev(props) {
|
|
8
8
|
const queryClient = reactQuery.useQueryClient();
|
|
9
9
|
const client = props.client || queryClient;
|
|
10
10
|
const ref = React.useRef(null);
|
|
@@ -55,6 +55,7 @@ function ReactQueryDevtools$1(props) {
|
|
|
55
55
|
ref: ref
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
|
+
const ReactQueryDevtools$1 = ReactQueryDevtoolsDev;
|
|
58
59
|
|
|
59
60
|
const ReactQueryDevtools = ReactQueryDevtools$1;
|
|
60
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.prod.cjs","sources":["../../src/devtools.tsx","../../src/index.ts"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\
|
|
1
|
+
{"version":3,"file":"index.prod.cjs","sources":["../../src/devtools.tsx","../../src/index.ts"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n","'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n// process.env.NODE_ENV !== 'development'\n// ? (function () {\n// return null\n// } as any)\n// : devtools.ReactQueryDevtoolsPanel\n"],"names":["ReactQueryDevtoolsDev","props","queryClient","useQueryClient","client","ref","useRef","buttonPosition","position","initialIsOpen","errorTypes","devtools","useState","TanstackQueryDevtools","queryFlavor","version","onlineManager","useEffect","setClient","setButtonPosition","setPosition","setInitialIsOpen","setErrorTypes","current","mount","unmount","React","createElement","ReactQueryDevtools"],"mappings":";;;;;;AAuCA,SAASA,qBAAqBA,CAC5BC,KAAsB,EACK;AAC3B,EAAA,MAAMC,WAAW,GAAGC,yBAAc,EAAE,CAAA;AACpC,EAAA,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAIF,WAAW,CAAA;AAC1C,EAAA,MAAMG,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;EACxC,MAAM;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,aAAa;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGT,KAAK,CAAA;EACrE,MAAM,CAACU,QAAQ,CAAC,GAAGC,cAAQ,CACzB,IAAIC,mCAAqB,CAAC;AACxBT,IAAAA,MAAM,EAAEA,MAAM;AACdU,IAAAA,WAAW,EAAE,aAAa;AAC1BC,IAAAA,OAAO,EAAE,GAAG;mBACZC,wBAAa;IACbT,cAAc;IACdC,QAAQ;IACRC,aAAa;AACbC,IAAAA,UAAAA;AACF,GAAC,CACH,CAAC,CAAA;AAEDO,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACO,SAAS,CAACd,MAAM,CAAC,CAAA;AAC5B,GAAC,EAAE,CAACA,MAAM,EAAEO,QAAQ,CAAC,CAAC,CAAA;AAEtBM,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIV,cAAc,EAAE;AAClBI,MAAAA,QAAQ,CAACQ,iBAAiB,CAACZ,cAAc,CAAC,CAAA;AAC5C,KAAA;AACF,GAAC,EAAE,CAACA,cAAc,EAAEI,QAAQ,CAAC,CAAC,CAAA;AAE9BM,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIT,QAAQ,EAAE;AACZG,MAAAA,QAAQ,CAACS,WAAW,CAACZ,QAAQ,CAAC,CAAA;AAChC,KAAA;AACF,GAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,CAAC,CAAC,CAAA;AAExBM,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACU,gBAAgB,CAACZ,aAAa,IAAI,KAAK,CAAC,CAAA;AACnD,GAAC,EAAE,CAACA,aAAa,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAE7BM,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACW,aAAa,CAACZ,UAAU,IAAI,EAAE,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACA,UAAU,EAAEC,QAAQ,CAAC,CAAC,CAAA;AAE1BM,EAAAA,eAAS,CAAC,MAAM;IACd,IAAIZ,GAAG,CAACkB,OAAO,EAAE;AACfZ,MAAAA,QAAQ,CAACa,KAAK,CAACnB,GAAG,CAACkB,OAAO,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,OAAO,MAAM;MACXZ,QAAQ,CAACc,OAAO,EAAE,CAAA;KACnB,CAAA;AACH,GAAC,EAAE,CAACd,QAAQ,CAAC,CAAC,CAAA;EAEd,oBAAOe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAM,CAAC,CAAA;AAC9B,CAAA;AAQO,MAAMuB,oBAAgD,GAGvD5B,qBAAqB;;ACrGpB,MAAM4B,kBAA2D,GAKlEjB,qBAA2B;;AAEjC;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/build/lib/index.prod.js
CHANGED
|
@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
|
|
|
2
2
|
import { useQueryClient, onlineManager } from '@tanstack/react-query';
|
|
3
3
|
import { TanstackQueryDevtools } from '@tanstack/query-devtools';
|
|
4
4
|
|
|
5
|
-
function
|
|
5
|
+
function ReactQueryDevtoolsDev(props) {
|
|
6
6
|
const queryClient = useQueryClient();
|
|
7
7
|
const client = props.client || queryClient;
|
|
8
8
|
const ref = useRef(null);
|
|
@@ -53,6 +53,7 @@ function ReactQueryDevtools$1(props) {
|
|
|
53
53
|
ref: ref
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
|
+
const ReactQueryDevtools$1 = ReactQueryDevtoolsDev;
|
|
56
57
|
|
|
57
58
|
const ReactQueryDevtools = ReactQueryDevtools$1;
|
|
58
59
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.prod.js","sources":["../../src/devtools.tsx","../../src/index.ts"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\
|
|
1
|
+
{"version":3,"file":"index.prod.js","sources":["../../src/devtools.tsx","../../src/index.ts"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsPosition,\n DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\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-left'.\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?: DevToolsErrorType[]\n}\n\nfunction ReactQueryDevtoolsDev(\n props: DevtoolsOptions,\n): React.ReactElement | null {\n const queryClient = useQueryClient()\n const client = props.client || queryClient\n const ref = useRef<HTMLDivElement>(null)\n const { buttonPosition, position, initialIsOpen, errorTypes } = props\n const [devtools] = useState(\n new TanstackQueryDevtools({\n client: client,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n }),\n )\n\n useEffect(() => {\n devtools.setClient(client)\n }, [client, devtools])\n\n useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen || false)\n }, [initialIsOpen, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div ref={ref}></div>\n}\n\nfunction ReactQueryDevtoolsProd(\n _props: DevtoolsOptions,\n): React.ReactElement | null {\n return null\n}\n\nexport const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =\n process.env.NODE_ENV !== 'development'\n ? ReactQueryDevtoolsProd\n : ReactQueryDevtoolsDev\n","'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n process.env.NODE_ENV !== 'development'\n ? function () {\n return null\n }\n : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n// process.env.NODE_ENV !== 'development'\n// ? (function () {\n// return null\n// } as any)\n// : devtools.ReactQueryDevtoolsPanel\n"],"names":["ReactQueryDevtoolsDev","props","queryClient","useQueryClient","client","ref","useRef","buttonPosition","position","initialIsOpen","errorTypes","devtools","useState","TanstackQueryDevtools","queryFlavor","version","onlineManager","useEffect","setClient","setButtonPosition","setPosition","setInitialIsOpen","setErrorTypes","current","mount","unmount","React","createElement","ReactQueryDevtools"],"mappings":";;;;AAuCA,SAASA,qBAAqBA,CAC5BC,KAAsB,EACK;AAC3B,EAAA,MAAMC,WAAW,GAAGC,cAAc,EAAE,CAAA;AACpC,EAAA,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAIF,WAAW,CAAA;AAC1C,EAAA,MAAMG,GAAG,GAAGC,MAAM,CAAiB,IAAI,CAAC,CAAA;EACxC,MAAM;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,aAAa;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGT,KAAK,CAAA;EACrE,MAAM,CAACU,QAAQ,CAAC,GAAGC,QAAQ,CACzB,IAAIC,qBAAqB,CAAC;AACxBT,IAAAA,MAAM,EAAEA,MAAM;AACdU,IAAAA,WAAW,EAAE,aAAa;AAC1BC,IAAAA,OAAO,EAAE,GAAG;IACZC,aAAa;IACbT,cAAc;IACdC,QAAQ;IACRC,aAAa;AACbC,IAAAA,UAAAA;AACF,GAAC,CACH,CAAC,CAAA;AAEDO,EAAAA,SAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACO,SAAS,CAACd,MAAM,CAAC,CAAA;AAC5B,GAAC,EAAE,CAACA,MAAM,EAAEO,QAAQ,CAAC,CAAC,CAAA;AAEtBM,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIV,cAAc,EAAE;AAClBI,MAAAA,QAAQ,CAACQ,iBAAiB,CAACZ,cAAc,CAAC,CAAA;AAC5C,KAAA;AACF,GAAC,EAAE,CAACA,cAAc,EAAEI,QAAQ,CAAC,CAAC,CAAA;AAE9BM,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIT,QAAQ,EAAE;AACZG,MAAAA,QAAQ,CAACS,WAAW,CAACZ,QAAQ,CAAC,CAAA;AAChC,KAAA;AACF,GAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,CAAC,CAAC,CAAA;AAExBM,EAAAA,SAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACU,gBAAgB,CAACZ,aAAa,IAAI,KAAK,CAAC,CAAA;AACnD,GAAC,EAAE,CAACA,aAAa,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAE7BM,EAAAA,SAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACW,aAAa,CAACZ,UAAU,IAAI,EAAE,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACA,UAAU,EAAEC,QAAQ,CAAC,CAAC,CAAA;AAE1BM,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIZ,GAAG,CAACkB,OAAO,EAAE;AACfZ,MAAAA,QAAQ,CAACa,KAAK,CAACnB,GAAG,CAACkB,OAAO,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,OAAO,MAAM;MACXZ,QAAQ,CAACc,OAAO,EAAE,CAAA;KACnB,CAAA;AACH,GAAC,EAAE,CAACd,QAAQ,CAAC,CAAC,CAAA;EAEd,oBAAOe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAM,CAAC,CAAA;AAC9B,CAAA;AAQO,MAAMuB,oBAAgD,GAGvD5B,qBAAqB;;ACrGpB,MAAM4B,kBAA2D,GAKlEjB,qBAA2B;;AAEjC;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/package.json
CHANGED
package/src/devtools.tsx
CHANGED
|
@@ -37,7 +37,7 @@ export interface DevtoolsOptions {
|
|
|
37
37
|
errorTypes?: DevToolsErrorType[]
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
function ReactQueryDevtoolsDev(
|
|
41
41
|
props: DevtoolsOptions,
|
|
42
42
|
): React.ReactElement | null {
|
|
43
43
|
const queryClient = useQueryClient()
|
|
@@ -93,3 +93,14 @@ export function ReactQueryDevtools(
|
|
|
93
93
|
|
|
94
94
|
return <div ref={ref}></div>
|
|
95
95
|
}
|
|
96
|
+
|
|
97
|
+
function ReactQueryDevtoolsProd(
|
|
98
|
+
_props: DevtoolsOptions,
|
|
99
|
+
): React.ReactElement | null {
|
|
100
|
+
return null
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export const ReactQueryDevtools: typeof ReactQueryDevtoolsDev =
|
|
104
|
+
process.env.NODE_ENV !== 'development'
|
|
105
|
+
? ReactQueryDevtoolsProd
|
|
106
|
+
: ReactQueryDevtoolsDev
|