@tanstack/preact-query-devtools 0.0.1 → 5.92.0

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.
Files changed (63) hide show
  1. package/LICENSE +21 -0
  2. package/build/legacy/PreactQueryDevtools-BKJv-YAr.d.cts +57 -0
  3. package/build/legacy/PreactQueryDevtools-BKJv-YAr.d.ts +57 -0
  4. package/build/legacy/PreactQueryDevtools.cjs +95 -0
  5. package/build/legacy/PreactQueryDevtools.cjs.map +1 -0
  6. package/build/legacy/PreactQueryDevtools.d.cts +4 -0
  7. package/build/legacy/PreactQueryDevtools.d.ts +4 -0
  8. package/build/legacy/PreactQueryDevtools.js +70 -0
  9. package/build/legacy/PreactQueryDevtools.js.map +1 -0
  10. package/build/legacy/PreactQueryDevtoolsPanel-tSWW-AUr.d.cts +51 -0
  11. package/build/legacy/PreactQueryDevtoolsPanel-tSWW-AUr.d.ts +51 -0
  12. package/build/legacy/PreactQueryDevtoolsPanel.cjs +91 -0
  13. package/build/legacy/PreactQueryDevtoolsPanel.cjs.map +1 -0
  14. package/build/legacy/PreactQueryDevtoolsPanel.d.cts +4 -0
  15. package/build/legacy/PreactQueryDevtoolsPanel.d.ts +4 -0
  16. package/build/legacy/PreactQueryDevtoolsPanel.js +66 -0
  17. package/build/legacy/PreactQueryDevtoolsPanel.js.map +1 -0
  18. package/build/legacy/index.cjs +50 -0
  19. package/build/legacy/index.cjs.map +1 -0
  20. package/build/legacy/index.d.cts +11 -0
  21. package/build/legacy/index.d.ts +11 -0
  22. package/build/legacy/index.js +14 -0
  23. package/build/legacy/index.js.map +1 -0
  24. package/build/legacy/production.cjs +46 -0
  25. package/build/legacy/production.cjs.map +1 -0
  26. package/build/legacy/production.d.cts +10 -0
  27. package/build/legacy/production.d.ts +10 -0
  28. package/build/legacy/production.js +10 -0
  29. package/build/legacy/production.js.map +1 -0
  30. package/build/modern/PreactQueryDevtools-BKJv-YAr.d.cts +57 -0
  31. package/build/modern/PreactQueryDevtools-BKJv-YAr.d.ts +57 -0
  32. package/build/modern/PreactQueryDevtools.cjs +95 -0
  33. package/build/modern/PreactQueryDevtools.cjs.map +1 -0
  34. package/build/modern/PreactQueryDevtools.d.cts +4 -0
  35. package/build/modern/PreactQueryDevtools.d.ts +4 -0
  36. package/build/modern/PreactQueryDevtools.js +70 -0
  37. package/build/modern/PreactQueryDevtools.js.map +1 -0
  38. package/build/modern/PreactQueryDevtoolsPanel-tSWW-AUr.d.cts +51 -0
  39. package/build/modern/PreactQueryDevtoolsPanel-tSWW-AUr.d.ts +51 -0
  40. package/build/modern/PreactQueryDevtoolsPanel.cjs +91 -0
  41. package/build/modern/PreactQueryDevtoolsPanel.cjs.map +1 -0
  42. package/build/modern/PreactQueryDevtoolsPanel.d.cts +4 -0
  43. package/build/modern/PreactQueryDevtoolsPanel.d.ts +4 -0
  44. package/build/modern/PreactQueryDevtoolsPanel.js +66 -0
  45. package/build/modern/PreactQueryDevtoolsPanel.js.map +1 -0
  46. package/build/modern/index.cjs +50 -0
  47. package/build/modern/index.cjs.map +1 -0
  48. package/build/modern/index.d.cts +11 -0
  49. package/build/modern/index.d.ts +11 -0
  50. package/build/modern/index.js +14 -0
  51. package/build/modern/index.js.map +1 -0
  52. package/build/modern/production.cjs +46 -0
  53. package/build/modern/production.cjs.map +1 -0
  54. package/build/modern/production.d.cts +10 -0
  55. package/build/modern/production.d.ts +10 -0
  56. package/build/modern/production.js +10 -0
  57. package/build/modern/production.js.map +1 -0
  58. package/package.json +93 -8
  59. package/src/PreactQueryDevtools.tsx +127 -0
  60. package/src/PreactQueryDevtoolsPanel.tsx +110 -0
  61. package/src/index.ts +18 -0
  62. package/src/production.ts +5 -0
  63. package/README.md +0 -45
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021-present Tanner Linsley
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,57 @@
1
+ import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
2
+ import { QueryClient } from '@tanstack/preact-query';
3
+ import { VNode } from 'preact';
4
+
5
+ interface DevtoolsOptions {
6
+ /**
7
+ * Set this true if you want the dev tools to default to being open
8
+ */
9
+ initialIsOpen?: boolean;
10
+ /**
11
+ * The position of the TanStack logo to open and close the devtools panel.
12
+ * Defaults to 'bottom-right'.
13
+ */
14
+ buttonPosition?: DevtoolsButtonPosition;
15
+ /**
16
+ * The position of the Preact Query devtools panel.
17
+ * Defaults to 'bottom'.
18
+ */
19
+ position?: DevtoolsPosition;
20
+ /**
21
+ * Use this to provide a custom QueryClient. Otherwise, the one from the
22
+ * nearest QueryClientProvider will be used.
23
+ */
24
+ client?: QueryClient;
25
+ /**
26
+ * Use this to provide custom error type handlers for the devtools panel.
27
+ */
28
+ errorTypes?: Array<DevtoolsErrorType>;
29
+ /**
30
+ * Use this to pass a nonce to the style tag that is added to the document
31
+ * head. This is useful if you are using a Content Security Policy (CSP)
32
+ * nonce to allow inline styles.
33
+ */
34
+ styleNonce?: string;
35
+ /**
36
+ * Use this to render the devtools inside a Shadow DOM.
37
+ */
38
+ shadowDOMTarget?: ShadowRoot;
39
+ /**
40
+ * Use this to hide disabled queries from the devtools panel.
41
+ */
42
+ hideDisabledQueries?: boolean;
43
+ /**
44
+ * Use this to set the theme of the devtools panel.
45
+ * Defaults to 'system'.
46
+ */
47
+ theme?: Theme;
48
+ }
49
+ declare function PreactQueryDevtools(props: DevtoolsOptions): VNode | null;
50
+
51
+ type Devtools_DevtoolsOptions = DevtoolsOptions;
52
+ declare const Devtools_PreactQueryDevtools: typeof PreactQueryDevtools;
53
+ declare namespace Devtools {
54
+ export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_PreactQueryDevtools as PreactQueryDevtools };
55
+ }
56
+
57
+ export { Devtools as D, PreactQueryDevtools as P, type DevtoolsOptions as a };
@@ -0,0 +1,57 @@
1
+ import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
2
+ import { QueryClient } from '@tanstack/preact-query';
3
+ import { VNode } from 'preact';
4
+
5
+ interface DevtoolsOptions {
6
+ /**
7
+ * Set this true if you want the dev tools to default to being open
8
+ */
9
+ initialIsOpen?: boolean;
10
+ /**
11
+ * The position of the TanStack logo to open and close the devtools panel.
12
+ * Defaults to 'bottom-right'.
13
+ */
14
+ buttonPosition?: DevtoolsButtonPosition;
15
+ /**
16
+ * The position of the Preact Query devtools panel.
17
+ * Defaults to 'bottom'.
18
+ */
19
+ position?: DevtoolsPosition;
20
+ /**
21
+ * Use this to provide a custom QueryClient. Otherwise, the one from the
22
+ * nearest QueryClientProvider will be used.
23
+ */
24
+ client?: QueryClient;
25
+ /**
26
+ * Use this to provide custom error type handlers for the devtools panel.
27
+ */
28
+ errorTypes?: Array<DevtoolsErrorType>;
29
+ /**
30
+ * Use this to pass a nonce to the style tag that is added to the document
31
+ * head. This is useful if you are using a Content Security Policy (CSP)
32
+ * nonce to allow inline styles.
33
+ */
34
+ styleNonce?: string;
35
+ /**
36
+ * Use this to render the devtools inside a Shadow DOM.
37
+ */
38
+ shadowDOMTarget?: ShadowRoot;
39
+ /**
40
+ * Use this to hide disabled queries from the devtools panel.
41
+ */
42
+ hideDisabledQueries?: boolean;
43
+ /**
44
+ * Use this to set the theme of the devtools panel.
45
+ * Defaults to 'system'.
46
+ */
47
+ theme?: Theme;
48
+ }
49
+ declare function PreactQueryDevtools(props: DevtoolsOptions): VNode | null;
50
+
51
+ type Devtools_DevtoolsOptions = DevtoolsOptions;
52
+ declare const Devtools_PreactQueryDevtools: typeof PreactQueryDevtools;
53
+ declare namespace Devtools {
54
+ export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_PreactQueryDevtools as PreactQueryDevtools };
55
+ }
56
+
57
+ export { Devtools as D, PreactQueryDevtools as P, type DevtoolsOptions as a };
@@ -0,0 +1,95 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/PreactQueryDevtools.tsx
21
+ var PreactQueryDevtools_exports = {};
22
+ __export(PreactQueryDevtools_exports, {
23
+ PreactQueryDevtools: () => PreactQueryDevtools
24
+ });
25
+ module.exports = __toCommonJS(PreactQueryDevtools_exports);
26
+ var import_hooks = require("preact/hooks");
27
+ var import_preact_query = require("@tanstack/preact-query");
28
+ var import_query_devtools = require("@tanstack/query-devtools");
29
+ var import_jsx_runtime = require("preact/jsx-runtime");
30
+ function PreactQueryDevtools(props) {
31
+ const queryClient = (0, import_preact_query.useQueryClient)(props.client);
32
+ const ref = (0, import_hooks.useRef)(null);
33
+ const {
34
+ buttonPosition,
35
+ position,
36
+ initialIsOpen,
37
+ errorTypes,
38
+ styleNonce,
39
+ shadowDOMTarget,
40
+ hideDisabledQueries,
41
+ theme
42
+ } = props;
43
+ const [devtools] = (0, import_hooks.useState)(
44
+ () => new import_query_devtools.TanstackQueryDevtools({
45
+ client: queryClient,
46
+ queryFlavor: "Preact Query",
47
+ version: "5",
48
+ onlineManager: import_preact_query.onlineManager,
49
+ buttonPosition,
50
+ position,
51
+ initialIsOpen,
52
+ errorTypes,
53
+ styleNonce,
54
+ shadowDOMTarget,
55
+ hideDisabledQueries,
56
+ theme
57
+ })
58
+ );
59
+ (0, import_hooks.useEffect)(() => {
60
+ devtools.setClient(queryClient);
61
+ }, [queryClient, devtools]);
62
+ (0, import_hooks.useEffect)(() => {
63
+ if (buttonPosition) {
64
+ devtools.setButtonPosition(buttonPosition);
65
+ }
66
+ }, [buttonPosition, devtools]);
67
+ (0, import_hooks.useEffect)(() => {
68
+ if (position) {
69
+ devtools.setPosition(position);
70
+ }
71
+ }, [position, devtools]);
72
+ (0, import_hooks.useEffect)(() => {
73
+ devtools.setInitialIsOpen(initialIsOpen || false);
74
+ }, [initialIsOpen, devtools]);
75
+ (0, import_hooks.useEffect)(() => {
76
+ devtools.setErrorTypes(errorTypes || []);
77
+ }, [errorTypes, devtools]);
78
+ (0, import_hooks.useEffect)(() => {
79
+ devtools.setTheme(theme);
80
+ }, [theme, devtools]);
81
+ (0, import_hooks.useEffect)(() => {
82
+ if (ref.current) {
83
+ devtools.mount(ref.current);
84
+ }
85
+ return () => {
86
+ devtools.unmount();
87
+ };
88
+ }, [devtools]);
89
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { dir: "ltr", className: "tsqd-parent-container", ref });
90
+ }
91
+ // Annotate the CommonJS export names for ESM import in node:
92
+ 0 && (module.exports = {
93
+ PreactQueryDevtools
94
+ });
95
+ //# sourceMappingURL=PreactQueryDevtools.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/PreactQueryDevtools.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'preact/hooks'\nimport { onlineManager, useQueryClient } from '@tanstack/preact-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/preact-query'\nimport type { VNode } from 'preact'\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 TanStack logo to open and close the devtools panel.\n * Defaults to 'bottom-right'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the Preact Query devtools panel.\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Use this to provide a custom QueryClient. Otherwise, the one from the\n * nearest QueryClientProvider will be used.\n */\n client?: QueryClient\n /**\n * Use this to provide custom error type handlers for the devtools panel.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * Use this to pass a nonce to the style tag that is added to the document\n * head. This is useful if you are using a Content Security Policy (CSP)\n * nonce to allow inline styles.\n */\n styleNonce?: string\n /**\n * Use this to render the devtools inside a Shadow DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Use this to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Use this to set the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function PreactQueryDevtools(props: DevtoolsOptions): VNode | null {\n const queryClient = useQueryClient(props.client)\n const ref = 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] = useState(\n () =>\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'Preact 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 useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, 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 devtools.setTheme(theme)\n }, [theme, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAC5C,0BAA8C;AAC9C,4BAAsC;AA2H7B;AApEF,SAAS,oBAAoB,OAAsC;AACxE,QAAM,kBAAc,oCAAe,MAAM,MAAM;AAC/C,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,QAAI;AAAA,IACjB,MACE,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,EACL;AAEA,8BAAU,MAAM;AACd,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,8BAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,8BAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,8BAAU,MAAM;AACd,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AACA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
@@ -0,0 +1,4 @@
1
+ import '@tanstack/query-devtools';
2
+ import '@tanstack/preact-query';
3
+ import 'preact';
4
+ export { a as DevtoolsOptions, P as PreactQueryDevtools } from './PreactQueryDevtools-BKJv-YAr.cjs';
@@ -0,0 +1,4 @@
1
+ import '@tanstack/query-devtools';
2
+ import '@tanstack/preact-query';
3
+ import 'preact';
4
+ export { a as DevtoolsOptions, P as PreactQueryDevtools } from './PreactQueryDevtools-BKJv-YAr.js';
@@ -0,0 +1,70 @@
1
+ // src/PreactQueryDevtools.tsx
2
+ import { useRef, useState, useEffect } from "preact/hooks";
3
+ import { onlineManager, useQueryClient } from "@tanstack/preact-query";
4
+ import { TanstackQueryDevtools } from "@tanstack/query-devtools";
5
+ import { jsx } from "preact/jsx-runtime";
6
+ function PreactQueryDevtools(props) {
7
+ const queryClient = useQueryClient(props.client);
8
+ const ref = useRef(null);
9
+ const {
10
+ buttonPosition,
11
+ position,
12
+ initialIsOpen,
13
+ errorTypes,
14
+ styleNonce,
15
+ shadowDOMTarget,
16
+ hideDisabledQueries,
17
+ theme
18
+ } = props;
19
+ const [devtools] = useState(
20
+ () => new TanstackQueryDevtools({
21
+ client: queryClient,
22
+ queryFlavor: "Preact Query",
23
+ version: "5",
24
+ onlineManager,
25
+ buttonPosition,
26
+ position,
27
+ initialIsOpen,
28
+ errorTypes,
29
+ styleNonce,
30
+ shadowDOMTarget,
31
+ hideDisabledQueries,
32
+ theme
33
+ })
34
+ );
35
+ useEffect(() => {
36
+ devtools.setClient(queryClient);
37
+ }, [queryClient, devtools]);
38
+ useEffect(() => {
39
+ if (buttonPosition) {
40
+ devtools.setButtonPosition(buttonPosition);
41
+ }
42
+ }, [buttonPosition, devtools]);
43
+ useEffect(() => {
44
+ if (position) {
45
+ devtools.setPosition(position);
46
+ }
47
+ }, [position, devtools]);
48
+ useEffect(() => {
49
+ devtools.setInitialIsOpen(initialIsOpen || false);
50
+ }, [initialIsOpen, devtools]);
51
+ useEffect(() => {
52
+ devtools.setErrorTypes(errorTypes || []);
53
+ }, [errorTypes, devtools]);
54
+ useEffect(() => {
55
+ devtools.setTheme(theme);
56
+ }, [theme, devtools]);
57
+ useEffect(() => {
58
+ if (ref.current) {
59
+ devtools.mount(ref.current);
60
+ }
61
+ return () => {
62
+ devtools.unmount();
63
+ };
64
+ }, [devtools]);
65
+ return /* @__PURE__ */ jsx("div", { dir: "ltr", className: "tsqd-parent-container", ref });
66
+ }
67
+ export {
68
+ PreactQueryDevtools
69
+ };
70
+ //# sourceMappingURL=PreactQueryDevtools.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/PreactQueryDevtools.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'preact/hooks'\nimport { onlineManager, useQueryClient } from '@tanstack/preact-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/preact-query'\nimport type { VNode } from 'preact'\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 TanStack logo to open and close the devtools panel.\n * Defaults to 'bottom-right'.\n */\n buttonPosition?: DevtoolsButtonPosition\n /**\n * The position of the Preact Query devtools panel.\n * Defaults to 'bottom'.\n */\n position?: DevtoolsPosition\n /**\n * Use this to provide a custom QueryClient. Otherwise, the one from the\n * nearest QueryClientProvider will be used.\n */\n client?: QueryClient\n /**\n * Use this to provide custom error type handlers for the devtools panel.\n */\n errorTypes?: Array<DevtoolsErrorType>\n /**\n * Use this to pass a nonce to the style tag that is added to the document\n * head. This is useful if you are using a Content Security Policy (CSP)\n * nonce to allow inline styles.\n */\n styleNonce?: string\n /**\n * Use this to render the devtools inside a Shadow DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Use this to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Use this to set the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function PreactQueryDevtools(props: DevtoolsOptions): VNode | null {\n const queryClient = useQueryClient(props.client)\n const ref = 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] = useState(\n () =>\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'Preact 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 useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, 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 devtools.setTheme(theme)\n }, [theme, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref} />\n}\n"],"mappings":";AAAA,SAAS,QAAQ,UAAU,iBAAiB;AAC5C,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AA2H7B;AApEF,SAAS,oBAAoB,OAAsC;AACxE,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,MACE,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,EACL;AAEA,YAAU,MAAM;AACd,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,YAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,YAAU,MAAM;AACd,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,YAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,YAAU,MAAM;AACd,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AACA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
@@ -0,0 +1,51 @@
1
+ import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
2
+ import { QueryClient } from '@tanstack/preact-query';
3
+ import { JSX, VNode } from 'preact';
4
+
5
+ interface DevtoolsPanelOptions {
6
+ /**
7
+ * Use this to provide a custom QueryClient. Otherwise, the one from the
8
+ * nearest QueryClientProvider will be used.
9
+ */
10
+ client?: QueryClient;
11
+ /**
12
+ * Custom error types to be shown in the devtools.
13
+ */
14
+ errorTypes?: Array<DevtoolsErrorType>;
15
+ /**
16
+ * Use this to pass a nonce to the style tag that is added to the document
17
+ * head. This is useful if you are using a Content Security Policy (CSP)
18
+ * nonce to allow inline styles.
19
+ */
20
+ styleNonce?: string;
21
+ /**
22
+ * Use this to render the devtools inside a Shadow DOM.
23
+ */
24
+ shadowDOMTarget?: ShadowRoot;
25
+ /**
26
+ * Custom styles for the devtools panel container.
27
+ */
28
+ style?: JSX.CSSProperties;
29
+ /**
30
+ * Callback function when the devtools panel is closed.
31
+ */
32
+ onClose?: () => unknown;
33
+ /**
34
+ * Use this to hide disabled queries from the devtools panel.
35
+ */
36
+ hideDisabledQueries?: boolean;
37
+ /**
38
+ * Use this to set the theme of the devtools panel.
39
+ * Defaults to 'system'.
40
+ */
41
+ theme?: Theme;
42
+ }
43
+ declare function PreactQueryDevtoolsPanel(props: DevtoolsPanelOptions): VNode | null;
44
+
45
+ type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
46
+ declare const DevtoolsPanel_PreactQueryDevtoolsPanel: typeof PreactQueryDevtoolsPanel;
47
+ declare namespace DevtoolsPanel {
48
+ export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_PreactQueryDevtoolsPanel as PreactQueryDevtoolsPanel };
49
+ }
50
+
51
+ export { type DevtoolsPanelOptions as D, PreactQueryDevtoolsPanel as P, DevtoolsPanel as a };
@@ -0,0 +1,51 @@
1
+ import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
2
+ import { QueryClient } from '@tanstack/preact-query';
3
+ import { JSX, VNode } from 'preact';
4
+
5
+ interface DevtoolsPanelOptions {
6
+ /**
7
+ * Use this to provide a custom QueryClient. Otherwise, the one from the
8
+ * nearest QueryClientProvider will be used.
9
+ */
10
+ client?: QueryClient;
11
+ /**
12
+ * Custom error types to be shown in the devtools.
13
+ */
14
+ errorTypes?: Array<DevtoolsErrorType>;
15
+ /**
16
+ * Use this to pass a nonce to the style tag that is added to the document
17
+ * head. This is useful if you are using a Content Security Policy (CSP)
18
+ * nonce to allow inline styles.
19
+ */
20
+ styleNonce?: string;
21
+ /**
22
+ * Use this to render the devtools inside a Shadow DOM.
23
+ */
24
+ shadowDOMTarget?: ShadowRoot;
25
+ /**
26
+ * Custom styles for the devtools panel container.
27
+ */
28
+ style?: JSX.CSSProperties;
29
+ /**
30
+ * Callback function when the devtools panel is closed.
31
+ */
32
+ onClose?: () => unknown;
33
+ /**
34
+ * Use this to hide disabled queries from the devtools panel.
35
+ */
36
+ hideDisabledQueries?: boolean;
37
+ /**
38
+ * Use this to set the theme of the devtools panel.
39
+ * Defaults to 'system'.
40
+ */
41
+ theme?: Theme;
42
+ }
43
+ declare function PreactQueryDevtoolsPanel(props: DevtoolsPanelOptions): VNode | null;
44
+
45
+ type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
46
+ declare const DevtoolsPanel_PreactQueryDevtoolsPanel: typeof PreactQueryDevtoolsPanel;
47
+ declare namespace DevtoolsPanel {
48
+ export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_PreactQueryDevtoolsPanel as PreactQueryDevtoolsPanel };
49
+ }
50
+
51
+ export { type DevtoolsPanelOptions as D, PreactQueryDevtoolsPanel as P, DevtoolsPanel as a };
@@ -0,0 +1,91 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/PreactQueryDevtoolsPanel.tsx
21
+ var PreactQueryDevtoolsPanel_exports = {};
22
+ __export(PreactQueryDevtoolsPanel_exports, {
23
+ PreactQueryDevtoolsPanel: () => PreactQueryDevtoolsPanel
24
+ });
25
+ module.exports = __toCommonJS(PreactQueryDevtoolsPanel_exports);
26
+ var import_hooks = require("preact/hooks");
27
+ var import_preact_query = require("@tanstack/preact-query");
28
+ var import_query_devtools = require("@tanstack/query-devtools");
29
+ var import_jsx_runtime = require("preact/jsx-runtime");
30
+ function PreactQueryDevtoolsPanel(props) {
31
+ const queryClient = (0, import_preact_query.useQueryClient)(props.client);
32
+ const ref = (0, import_hooks.useRef)(null);
33
+ const {
34
+ errorTypes,
35
+ styleNonce,
36
+ shadowDOMTarget,
37
+ hideDisabledQueries,
38
+ theme
39
+ } = props;
40
+ const [devtools] = (0, import_hooks.useState)(
41
+ () => new import_query_devtools.TanstackQueryDevtoolsPanel({
42
+ client: queryClient,
43
+ queryFlavor: "Preact Query",
44
+ version: "5",
45
+ onlineManager: import_preact_query.onlineManager,
46
+ buttonPosition: "bottom-left",
47
+ position: "bottom",
48
+ initialIsOpen: true,
49
+ errorTypes,
50
+ styleNonce,
51
+ shadowDOMTarget,
52
+ onClose: props.onClose,
53
+ hideDisabledQueries,
54
+ theme
55
+ })
56
+ );
57
+ (0, import_hooks.useEffect)(() => {
58
+ devtools.setClient(queryClient);
59
+ }, [queryClient, devtools]);
60
+ (0, import_hooks.useEffect)(() => {
61
+ devtools.setOnClose(props.onClose ?? (() => {
62
+ }));
63
+ }, [props.onClose, devtools]);
64
+ (0, import_hooks.useEffect)(() => {
65
+ devtools.setErrorTypes(errorTypes || []);
66
+ }, [errorTypes, devtools]);
67
+ (0, import_hooks.useEffect)(() => {
68
+ devtools.setTheme(theme);
69
+ }, [theme, devtools]);
70
+ (0, import_hooks.useEffect)(() => {
71
+ if (ref.current) {
72
+ devtools.mount(ref.current);
73
+ }
74
+ return () => {
75
+ devtools.unmount();
76
+ };
77
+ }, [devtools]);
78
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
79
+ "div",
80
+ {
81
+ style: { height: "500px", ...props.style },
82
+ className: "tsqd-parent-container",
83
+ ref
84
+ }
85
+ );
86
+ }
87
+ // Annotate the CommonJS export names for ESM import in node:
88
+ 0 && (module.exports = {
89
+ PreactQueryDevtoolsPanel
90
+ });
91
+ //# sourceMappingURL=PreactQueryDevtoolsPanel.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/PreactQueryDevtoolsPanel.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'preact/hooks'\nimport { onlineManager, useQueryClient } from '@tanstack/preact-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/preact-query'\nimport type { JSX, VNode } from 'preact'\n\nexport interface DevtoolsPanelOptions {\n /**\n * Use this to provide a custom QueryClient. Otherwise, the one from the\n * nearest QueryClientProvider will be used.\n */\n client?: QueryClient\n /**\n * Custom error types to 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\n * head. This is useful if you are using a Content Security Policy (CSP)\n * nonce to allow inline styles.\n */\n styleNonce?: string\n /**\n * Use this to render the devtools inside a Shadow DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Custom styles for the devtools panel container.\n */\n style?: JSX.CSSProperties\n /**\n * Callback function when the devtools panel is closed.\n */\n onClose?: () => unknown\n /**\n * Use this to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Use this to set the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function PreactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): VNode | null {\n const queryClient = useQueryClient(props.client)\n const ref = useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = useState(\n () =>\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'Preact 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 useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\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 />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAC5C,0BAA8C;AAC9C,4BAA2C;AAqGvC;AAzDG,SAAS,yBACd,OACc;AACd,QAAM,kBAAc,oCAAe,MAAM,MAAM;AAC/C,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,QAAI;AAAA,IACjB,MACE,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,EACL;AAEA,8BAAU,MAAM;AACd,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,8BAAU,MAAM;AACd,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,8BAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,8BAAU,MAAM;AACd,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,8BAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AACA,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,EACF;AAEJ;","names":[]}
@@ -0,0 +1,4 @@
1
+ import '@tanstack/query-devtools';
2
+ import '@tanstack/preact-query';
3
+ import 'preact';
4
+ export { D as DevtoolsPanelOptions, P as PreactQueryDevtoolsPanel } from './PreactQueryDevtoolsPanel-tSWW-AUr.cjs';
@@ -0,0 +1,4 @@
1
+ import '@tanstack/query-devtools';
2
+ import '@tanstack/preact-query';
3
+ import 'preact';
4
+ export { D as DevtoolsPanelOptions, P as PreactQueryDevtoolsPanel } from './PreactQueryDevtoolsPanel-tSWW-AUr.js';
@@ -0,0 +1,66 @@
1
+ // src/PreactQueryDevtoolsPanel.tsx
2
+ import { useRef, useState, useEffect } from "preact/hooks";
3
+ import { onlineManager, useQueryClient } from "@tanstack/preact-query";
4
+ import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
5
+ import { jsx } from "preact/jsx-runtime";
6
+ function PreactQueryDevtoolsPanel(props) {
7
+ const queryClient = useQueryClient(props.client);
8
+ const ref = useRef(null);
9
+ const {
10
+ errorTypes,
11
+ styleNonce,
12
+ shadowDOMTarget,
13
+ hideDisabledQueries,
14
+ theme
15
+ } = props;
16
+ const [devtools] = useState(
17
+ () => new TanstackQueryDevtoolsPanel({
18
+ client: queryClient,
19
+ queryFlavor: "Preact Query",
20
+ version: "5",
21
+ onlineManager,
22
+ buttonPosition: "bottom-left",
23
+ position: "bottom",
24
+ initialIsOpen: true,
25
+ errorTypes,
26
+ styleNonce,
27
+ shadowDOMTarget,
28
+ onClose: props.onClose,
29
+ hideDisabledQueries,
30
+ theme
31
+ })
32
+ );
33
+ useEffect(() => {
34
+ devtools.setClient(queryClient);
35
+ }, [queryClient, devtools]);
36
+ useEffect(() => {
37
+ devtools.setOnClose(props.onClose ?? (() => {
38
+ }));
39
+ }, [props.onClose, devtools]);
40
+ useEffect(() => {
41
+ devtools.setErrorTypes(errorTypes || []);
42
+ }, [errorTypes, devtools]);
43
+ useEffect(() => {
44
+ devtools.setTheme(theme);
45
+ }, [theme, devtools]);
46
+ useEffect(() => {
47
+ if (ref.current) {
48
+ devtools.mount(ref.current);
49
+ }
50
+ return () => {
51
+ devtools.unmount();
52
+ };
53
+ }, [devtools]);
54
+ return /* @__PURE__ */ jsx(
55
+ "div",
56
+ {
57
+ style: { height: "500px", ...props.style },
58
+ className: "tsqd-parent-container",
59
+ ref
60
+ }
61
+ );
62
+ }
63
+ export {
64
+ PreactQueryDevtoolsPanel
65
+ };
66
+ //# sourceMappingURL=PreactQueryDevtoolsPanel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/PreactQueryDevtoolsPanel.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from 'preact/hooks'\nimport { onlineManager, useQueryClient } from '@tanstack/preact-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/preact-query'\nimport type { JSX, VNode } from 'preact'\n\nexport interface DevtoolsPanelOptions {\n /**\n * Use this to provide a custom QueryClient. Otherwise, the one from the\n * nearest QueryClientProvider will be used.\n */\n client?: QueryClient\n /**\n * Custom error types to 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\n * head. This is useful if you are using a Content Security Policy (CSP)\n * nonce to allow inline styles.\n */\n styleNonce?: string\n /**\n * Use this to render the devtools inside a Shadow DOM.\n */\n shadowDOMTarget?: ShadowRoot\n /**\n * Custom styles for the devtools panel container.\n */\n style?: JSX.CSSProperties\n /**\n * Callback function when the devtools panel is closed.\n */\n onClose?: () => unknown\n /**\n * Use this to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n /**\n * Use this to set the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function PreactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): VNode | null {\n const queryClient = useQueryClient(props.client)\n const ref = useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = useState(\n () =>\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'Preact 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 useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n useEffect(() => {\n devtools.setErrorTypes(errorTypes || [])\n }, [errorTypes, devtools])\n\n useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\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 />\n )\n}\n"],"mappings":";AAAA,SAAS,QAAQ,UAAU,iBAAiB;AAC5C,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;AAqGvC;AAzDG,SAAS,yBACd,OACc;AACd,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,MACE,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,EACL;AAEA,YAAU,MAAM;AACd,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,YAAU,MAAM;AACd,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,YAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,YAAU,MAAM;AACd,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AACA,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,EACF;AAEJ;","names":[]}