@tanstack/solid-query-devtools 5.91.3 → 6.0.0-alpha.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.
@@ -1,14 +1,13 @@
1
- import { template, use } from 'solid-js/web';
2
- import { createMemo, createEffect, onMount, onCleanup } from 'solid-js';
1
+ import { ref, template } from '../chunk/RDKFYAW3.js';
2
+ import { createMemo, createEffect, onSettled, onCleanup } from 'solid-js';
3
3
  import { useQueryClient, onlineManager } from '@tanstack/solid-query';
4
4
  import { TanstackQueryDevtools } from '@tanstack/query-devtools';
5
5
 
6
- // src/devtools.tsx
7
6
  var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container>`);
8
7
  function SolidQueryDevtools(props) {
9
8
  const queryClient = useQueryClient(props.client);
10
9
  const client = createMemo(() => queryClient);
11
- let ref;
10
+ let ref2;
12
11
  const devtools = new TanstackQueryDevtools({
13
12
  client: client(),
14
13
  queryFlavor: "Solid Query",
@@ -23,38 +22,36 @@ function SolidQueryDevtools(props) {
23
22
  hideDisabledQueries: props.hideDisabledQueries,
24
23
  theme: props.theme
25
24
  });
26
- createEffect(() => {
27
- devtools.setClient(client());
25
+ createEffect(() => client(), (c) => {
26
+ devtools.setClient(c);
28
27
  });
29
- createEffect(() => {
30
- const buttonPos = props.buttonPosition;
28
+ createEffect(() => props.buttonPosition, (buttonPos) => {
31
29
  if (buttonPos) {
32
30
  devtools.setButtonPosition(buttonPos);
33
31
  }
34
32
  });
35
- createEffect(() => {
36
- const pos = props.position;
33
+ createEffect(() => props.position, (pos) => {
37
34
  if (pos) {
38
35
  devtools.setPosition(pos);
39
36
  }
40
37
  });
41
- createEffect(() => {
42
- devtools.setInitialIsOpen(props.initialIsOpen || false);
38
+ createEffect(() => props.initialIsOpen, (initialIsOpen) => {
39
+ devtools.setInitialIsOpen(initialIsOpen || false);
43
40
  });
44
- createEffect(() => {
45
- devtools.setErrorTypes(props.errorTypes || []);
41
+ createEffect(() => props.errorTypes, (errorTypes) => {
42
+ devtools.setErrorTypes(errorTypes || []);
46
43
  });
47
- createEffect(() => {
48
- devtools.setTheme(props.theme || "system");
44
+ createEffect(() => props.theme, (theme) => {
45
+ devtools.setTheme(theme || "system");
49
46
  });
50
- onMount(() => {
51
- devtools.mount(ref);
47
+ onSettled(() => {
48
+ devtools.mount(ref2);
52
49
  onCleanup(() => devtools.unmount());
53
50
  });
54
51
  return (() => {
55
52
  var _el$ = _tmpl$();
56
- var _ref$ = ref;
57
- typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
53
+ var _ref$ = ref2;
54
+ typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => _ref$, _el$) : ref2 = _el$;
58
55
  return _el$;
59
56
  })();
60
57
  }
@@ -1,5 +1,5 @@
1
1
  // src/devtools.tsx
2
- import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
2
+ import { createEffect, createMemo, onCleanup, onSettled } from "solid-js";
3
3
  import { onlineManager, useQueryClient } from "@tanstack/solid-query";
4
4
  import { TanstackQueryDevtools } from "@tanstack/query-devtools";
5
5
  function SolidQueryDevtools(props) {
@@ -20,31 +20,47 @@ function SolidQueryDevtools(props) {
20
20
  hideDisabledQueries: props.hideDisabledQueries,
21
21
  theme: props.theme
22
22
  });
23
- createEffect(() => {
24
- devtools.setClient(client());
25
- });
26
- createEffect(() => {
27
- const buttonPos = props.buttonPosition;
28
- if (buttonPos) {
29
- devtools.setButtonPosition(buttonPos);
23
+ createEffect(
24
+ () => client(),
25
+ (c) => {
26
+ devtools.setClient(c);
30
27
  }
31
- });
32
- createEffect(() => {
33
- const pos = props.position;
34
- if (pos) {
35
- devtools.setPosition(pos);
28
+ );
29
+ createEffect(
30
+ () => props.buttonPosition,
31
+ (buttonPos) => {
32
+ if (buttonPos) {
33
+ devtools.setButtonPosition(buttonPos);
34
+ }
36
35
  }
37
- });
38
- createEffect(() => {
39
- devtools.setInitialIsOpen(props.initialIsOpen || false);
40
- });
41
- createEffect(() => {
42
- devtools.setErrorTypes(props.errorTypes || []);
43
- });
44
- createEffect(() => {
45
- devtools.setTheme(props.theme || "system");
46
- });
47
- onMount(() => {
36
+ );
37
+ createEffect(
38
+ () => props.position,
39
+ (pos) => {
40
+ if (pos) {
41
+ devtools.setPosition(pos);
42
+ }
43
+ }
44
+ );
45
+ createEffect(
46
+ () => props.initialIsOpen,
47
+ (initialIsOpen) => {
48
+ devtools.setInitialIsOpen(initialIsOpen || false);
49
+ }
50
+ );
51
+ createEffect(
52
+ () => props.errorTypes,
53
+ (errorTypes) => {
54
+ devtools.setErrorTypes(errorTypes || []);
55
+ }
56
+ );
57
+ createEffect(
58
+ () => props.theme,
59
+ (theme) => {
60
+ devtools.setTheme(theme || "system");
61
+ }
62
+ );
63
+ onSettled(() => {
48
64
  devtools.mount(ref);
49
65
  onCleanup(() => devtools.unmount());
50
66
  });
@@ -0,0 +1,59 @@
1
+ import { ref, template } from '../chunk/KLS34EMT.js';
2
+ import { createMemo, createEffect, onSettled, onCleanup } from 'solid-js';
3
+ import { useQueryClient, onlineManager } from '@tanstack/solid-query';
4
+ import { TanstackQueryDevtools } from '@tanstack/query-devtools';
5
+
6
+ var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container>`);
7
+ function SolidQueryDevtools(props) {
8
+ const queryClient = useQueryClient(props.client);
9
+ const client = createMemo(() => queryClient);
10
+ let ref2;
11
+ const devtools = new TanstackQueryDevtools({
12
+ client: client(),
13
+ queryFlavor: "Solid Query",
14
+ version: "5",
15
+ onlineManager,
16
+ buttonPosition: props.buttonPosition,
17
+ position: props.position,
18
+ initialIsOpen: props.initialIsOpen,
19
+ errorTypes: props.errorTypes,
20
+ styleNonce: props.styleNonce,
21
+ shadowDOMTarget: props.shadowDOMTarget,
22
+ hideDisabledQueries: props.hideDisabledQueries,
23
+ theme: props.theme
24
+ });
25
+ createEffect(() => client(), (c) => {
26
+ devtools.setClient(c);
27
+ });
28
+ createEffect(() => props.buttonPosition, (buttonPos) => {
29
+ if (buttonPos) {
30
+ devtools.setButtonPosition(buttonPos);
31
+ }
32
+ });
33
+ createEffect(() => props.position, (pos) => {
34
+ if (pos) {
35
+ devtools.setPosition(pos);
36
+ }
37
+ });
38
+ createEffect(() => props.initialIsOpen, (initialIsOpen) => {
39
+ devtools.setInitialIsOpen(initialIsOpen || false);
40
+ });
41
+ createEffect(() => props.errorTypes, (errorTypes) => {
42
+ devtools.setErrorTypes(errorTypes || []);
43
+ });
44
+ createEffect(() => props.theme, (theme) => {
45
+ devtools.setTheme(theme || "system");
46
+ });
47
+ onSettled(() => {
48
+ devtools.mount(ref2);
49
+ onCleanup(() => devtools.unmount());
50
+ });
51
+ return (() => {
52
+ var _el$ = _tmpl$();
53
+ var _ref$ = ref2;
54
+ typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => _ref$, _el$) : ref2 = _el$;
55
+ return _el$;
56
+ })();
57
+ }
58
+
59
+ export { SolidQueryDevtools as default };
@@ -1,14 +1,13 @@
1
- import { template, use, effect, style } from 'solid-js/web';
2
- import { createMemo, createEffect, onMount, onCleanup } from 'solid-js';
1
+ import { ref, effect, style, template } from '../chunk/KLS34EMT.js';
2
+ import { createMemo, createEffect, onSettled, onCleanup } from 'solid-js';
3
3
  import { useQueryClient, onlineManager } from '@tanstack/solid-query';
4
4
  import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools';
5
5
 
6
- // src/devtoolsPanel.tsx
7
- var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container>`);
6
+ var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container style=height:500px>`);
8
7
  function SolidQueryDevtoolsPanel(props) {
9
8
  const queryClient = useQueryClient(props.client);
10
9
  const client = createMemo(() => queryClient);
11
- let ref;
10
+ let ref2;
12
11
  const {
13
12
  errorTypes,
14
13
  styleNonce,
@@ -30,31 +29,32 @@ function SolidQueryDevtoolsPanel(props) {
30
29
  hideDisabledQueries,
31
30
  theme: props.theme
32
31
  });
33
- createEffect(() => {
34
- devtools.setClient(client());
32
+ createEffect(() => client(), (c) => {
33
+ devtools.setClient(c);
35
34
  });
36
- createEffect(() => {
37
- devtools.setOnClose(props.onClose ?? (() => {
35
+ createEffect(() => props.onClose, (onClose) => {
36
+ devtools.setOnClose(onClose ?? (() => {
38
37
  }));
39
38
  });
40
- createEffect(() => {
41
- devtools.setErrorTypes(props.errorTypes || []);
39
+ createEffect(() => props.errorTypes, (errorTypes2) => {
40
+ devtools.setErrorTypes(errorTypes2 || []);
42
41
  });
43
- createEffect(() => {
44
- devtools.setTheme(props.theme || "system");
42
+ createEffect(() => props.theme, (theme) => {
43
+ devtools.setTheme(theme || "system");
45
44
  });
46
- onMount(() => {
47
- devtools.mount(ref);
45
+ onSettled(() => {
46
+ devtools.mount(ref2);
48
47
  onCleanup(() => devtools.unmount());
49
48
  });
50
49
  return (() => {
51
50
  var _el$ = _tmpl$();
52
- var _ref$ = ref;
53
- typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
54
- effect((_$p) => style(_el$, {
55
- height: "500px",
51
+ var _ref$ = ref2;
52
+ typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => _ref$, _el$) : ref2 = _el$;
53
+ effect(() => ({
56
54
  ...props.style
57
- }, _$p));
55
+ }), (_v$, _$p) => {
56
+ style(_el$, _v$, _$p);
57
+ });
58
58
  return _el$;
59
59
  })();
60
60
  }
@@ -0,0 +1,62 @@
1
+ import { ref, effect, style, template } from '../chunk/RDKFYAW3.js';
2
+ import { createMemo, createEffect, onSettled, onCleanup } from 'solid-js';
3
+ import { useQueryClient, onlineManager } from '@tanstack/solid-query';
4
+ import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools';
5
+
6
+ var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container style=height:500px>`);
7
+ function SolidQueryDevtoolsPanel(props) {
8
+ const queryClient = useQueryClient(props.client);
9
+ const client = createMemo(() => queryClient);
10
+ let ref2;
11
+ const {
12
+ errorTypes,
13
+ styleNonce,
14
+ shadowDOMTarget,
15
+ hideDisabledQueries
16
+ } = props;
17
+ const devtools = new TanstackQueryDevtoolsPanel({
18
+ client: client(),
19
+ queryFlavor: "Solid 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: props.theme
31
+ });
32
+ createEffect(() => client(), (c) => {
33
+ devtools.setClient(c);
34
+ });
35
+ createEffect(() => props.onClose, (onClose) => {
36
+ devtools.setOnClose(onClose ?? (() => {
37
+ }));
38
+ });
39
+ createEffect(() => props.errorTypes, (errorTypes2) => {
40
+ devtools.setErrorTypes(errorTypes2 || []);
41
+ });
42
+ createEffect(() => props.theme, (theme) => {
43
+ devtools.setTheme(theme || "system");
44
+ });
45
+ onSettled(() => {
46
+ devtools.mount(ref2);
47
+ onCleanup(() => devtools.unmount());
48
+ });
49
+ return (() => {
50
+ var _el$ = _tmpl$();
51
+ var _ref$ = ref2;
52
+ typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => _ref$, _el$) : ref2 = _el$;
53
+ effect(() => ({
54
+ ...props.style
55
+ }), (_v$, _$p) => {
56
+ style(_el$, _v$, _$p);
57
+ });
58
+ return _el$;
59
+ })();
60
+ }
61
+
62
+ export { SolidQueryDevtoolsPanel as default };
@@ -1,5 +1,5 @@
1
1
  // src/devtoolsPanel.tsx
2
- import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
2
+ import { createEffect, createMemo, onCleanup, onSettled } from "solid-js";
3
3
  import { onlineManager, useQueryClient } from "@tanstack/solid-query";
4
4
  import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
5
5
  function SolidQueryDevtoolsPanel(props) {
@@ -22,20 +22,32 @@ function SolidQueryDevtoolsPanel(props) {
22
22
  hideDisabledQueries,
23
23
  theme: props.theme
24
24
  });
25
- createEffect(() => {
26
- devtools.setClient(client());
27
- });
28
- createEffect(() => {
29
- devtools.setOnClose(props.onClose ?? (() => {
30
- }));
31
- });
32
- createEffect(() => {
33
- devtools.setErrorTypes(props.errorTypes || []);
34
- });
35
- createEffect(() => {
36
- devtools.setTheme(props.theme || "system");
37
- });
38
- onMount(() => {
25
+ createEffect(
26
+ () => client(),
27
+ (c) => {
28
+ devtools.setClient(c);
29
+ }
30
+ );
31
+ createEffect(
32
+ () => props.onClose,
33
+ (onClose) => {
34
+ devtools.setOnClose(onClose ?? (() => {
35
+ }));
36
+ }
37
+ );
38
+ createEffect(
39
+ () => props.errorTypes,
40
+ (errorTypes2) => {
41
+ devtools.setErrorTypes(errorTypes2 || []);
42
+ }
43
+ );
44
+ createEffect(
45
+ () => props.theme,
46
+ (theme) => {
47
+ devtools.setTheme(theme || "system");
48
+ }
49
+ );
50
+ onSettled(() => {
39
51
  devtools.mount(ref);
40
52
  onCleanup(() => devtools.unmount());
41
53
  });