@tanstack/solid-query-devtools 5.94.4 → 5.94.5

package/build/_tsup-dts-rollup.d.cts

@@ -0,0 +1,119 @@
+import type { Component } from 'solid-js';
+import type { ComponentProps } from 'solid-js';
+import type { DevtoolsButtonPosition } from '@tanstack/query-devtools';
+import type { DevtoolsErrorType } from '@tanstack/query-devtools';
+import type { DevtoolsPosition } from '@tanstack/query-devtools';
+import { JSX } from 'solid-js';
+import { Options } from 'tsup';
+import type { QueryClient } from '@tanstack/solid-query';
+import type { Theme } from '@tanstack/query-devtools';
+import { UserConfig } from 'vite';
+
+export declare function default_alias<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;
+
+export declare function default_alias_1(props: DevtoolsOptions): JSX;
+
+export declare function default_alias_2(props: DevtoolsPanelOptions): JSX.Element;
+
+export declare const default_alias_3: any[];
+
+export declare const default_alias_4: any[];
+
+export declare const default_alias_5: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
+
+export declare const default_alias_6: UserConfig;
+
+declare 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 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?: JSX.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;
+}
+export { DevtoolsPanelOptions }
+export { DevtoolsPanelOptions as DevtoolsPanelOptions_alias_1 }
+
+export declare const SolidQueryDevtools: typeof default_alias_1;
+
+export declare const SolidQueryDevtoolsPanel: typeof default_alias_2;
+
+export { }

package/build/_tsup-dts-rollup.d.ts

@@ -0,0 +1,119 @@
+import type { Component } from 'solid-js';
+import type { ComponentProps } from 'solid-js';
+import type { DevtoolsButtonPosition } from '@tanstack/query-devtools';
+import type { DevtoolsErrorType } from '@tanstack/query-devtools';
+import type { DevtoolsPosition } from '@tanstack/query-devtools';
+import { JSX } from 'solid-js';
+import { Options } from 'tsup';
+import type { QueryClient } from '@tanstack/solid-query';
+import type { Theme } from '@tanstack/query-devtools';
+import { UserConfig } from 'vite';
+
+export declare function default_alias<T extends Component<any>>(fn: () => Promise<{
+    default: T;
+}>): (props: ComponentProps<T> & {
+    fallback?: JSX.Element;
+}) => any;
+
+export declare function default_alias_1(props: DevtoolsOptions): JSX;
+
+export declare function default_alias_2(props: DevtoolsPanelOptions): JSX.Element;
+
+export declare const default_alias_3: any[];
+
+export declare const default_alias_4: any[];
+
+export declare const default_alias_5: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
+
+export declare const default_alias_6: UserConfig;
+
+declare 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 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?: JSX.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;
+}
+export { DevtoolsPanelOptions }
+export { DevtoolsPanelOptions as DevtoolsPanelOptions_alias_1 }
+
+export declare const SolidQueryDevtools: typeof default_alias_1;
+
+export declare const SolidQueryDevtoolsPanel: typeof default_alias_2;
+
+export { }

package/build/dev.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidQuery = require('@tanstack/solid-query');
+var queryDevtools = require('@tanstack/query-devtools');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/devtools.tsx
+var devtools_exports = {};
+__export(devtools_exports, {
+  default: () => SolidQueryDevtools
+});
+function SolidQueryDevtools(props) {
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
+  let ref;
+  const devtools = new queryDevtools.TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager: solidQuery.onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes,
+    styleNonce: props.styleNonce,
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  solidJs.createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  solidJs.createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  solidJs.onMount(() => {
+    devtools.mount(ref);
+    solidJs.onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : ref = _el$;
+    return _el$;
+  })();
+}
+var _tmpl$;
+var init_devtools = __esm({
+  "src/devtools.tsx"() {
+    _tmpl$ = /* @__PURE__ */ web.template(`<div class=tsqd-parent-container>`);
+  }
+});
+
+// src/devtoolsPanel.tsx
+var devtoolsPanel_exports = {};
+__export(devtoolsPanel_exports, {
+  default: () => SolidQueryDevtoolsPanel
+});
+function SolidQueryDevtoolsPanel(props) {
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
+  let ref;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries
+  } = props;
+  const devtools = new queryDevtools.TanstackQueryDevtoolsPanel({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager: solidQuery.onlineManager,
+    buttonPosition: "bottom-left",
+    position: "bottom",
+    initialIsOpen: true,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    onClose: props.onClose,
+    hideDisabledQueries,
+    theme: props.theme
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  solidJs.onMount(() => {
+    devtools.mount(ref);
+    solidJs.onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    var _el$ = _tmpl$2();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : ref = _el$;
+    web.effect((_$p) => web.style(_el$, {
+      ...props.style
+    }, _$p));
+    return _el$;
+  })();
+}
+var _tmpl$2;
+var init_devtoolsPanel = __esm({
+  "src/devtoolsPanel.tsx"() {
+    _tmpl$2 = /* @__PURE__ */ web.template(`<div class=tsqd-parent-container style=height:500px>`);
+  }
+});
+function clientOnly(fn) {
+  if (web.isServer) return (props) => props.fallback;
+  const [comp, setComp] = solidJs.createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = solidJs.splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !solidJs.sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.context);
+    solidJs.onMount(() => setMounted(true));
+    return solidJs.createMemo(() => (Comp = comp(), m = mounted(), solidJs.untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+
+// src/index.tsx
+exports.SolidQueryDevtools = web.isDev ? clientOnly(() => Promise.resolve().then(() => (init_devtools(), devtools_exports))) : function() {
+  return null;
+};
+exports.SolidQueryDevtoolsPanel = web.isDev ? clientOnly(() => Promise.resolve().then(() => (init_devtoolsPanel(), devtoolsPanel_exports))) : function() {
+  return null;
+};

package/build/dev.d.cts

@@ -0,0 +1,3 @@
+export { SolidQueryDevtools } from './_tsup-dts-rollup.cjs';
+export { SolidQueryDevtoolsPanel } from './_tsup-dts-rollup.cjs';
+export { DevtoolsPanelOptions_alias_1 as DevtoolsPanelOptions } from './_tsup-dts-rollup.cjs';

package/build/dev.d.ts

@@ -0,0 +1,3 @@
+export { SolidQueryDevtools } from './_tsup-dts-rollup.js';
+export { SolidQueryDevtoolsPanel } from './_tsup-dts-rollup.js';
+export { DevtoolsPanelOptions_alias_1 as DevtoolsPanelOptions } from './_tsup-dts-rollup.js';

package/build/dev.js

@@ -0,0 +1,28 @@
+import { isDev, isServer } from 'solid-js/web';
+import { createSignal, splitProps, sharedConfig, onMount, createMemo, untrack } from 'solid-js';
+
+// src/index.tsx
+function clientOnly(fn) {
+  if (isServer) return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+
+// src/index.tsx
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/BCD44V6M.js')) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/VOW4J2DZ.js')) : function() {
+  return null;
+};
+
+export { SolidQueryDevtools, SolidQueryDevtoolsPanel };

package/build/dev.jsx

@@ -0,0 +1,42 @@
+// src/index.tsx
+import { isDev } from "solid-js/web";
+
+// src/clientOnly.tsx
+import {
+  createMemo,
+  createSignal,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack
+} from "solid-js";
+import { isServer } from "solid-js/web";
+function clientOnly(fn) {
+  if (isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(
+      () => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback))
+    );
+  };
+}
+
+// src/index.tsx
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/32HRKFKI.jsx")) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/NDFIDQLQ.jsx")) : function() {
+  return null;
+};
+export {
+  SolidQueryDevtools,
+  SolidQueryDevtoolsPanel
+};

package/build/devtools/32HRKFKI.jsx

@@ -0,0 +1,55 @@
+// src/devtools.tsx
+import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
+import { onlineManager, useQueryClient } from "@tanstack/solid-query";
+import { TanstackQueryDevtools } from "@tanstack/query-devtools";
+function SolidQueryDevtools(props) {
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
+  let ref;
+  const devtools = new TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes,
+    styleNonce: props.styleNonce,
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  onMount(() => {
+    devtools.mount(ref);
+    onCleanup(() => devtools.unmount());
+  });
+  return <div class="tsqd-parent-container" ref={ref} />;
+}
+export {
+  SolidQueryDevtools as default
+};

package/build/devtools/BCD44V6M.js

@@ -0,0 +1,62 @@
+import { use, template } from 'solid-js/web';
+import { createMemo, createEffect, onMount, onCleanup } from 'solid-js';
+import { useQueryClient, onlineManager } from '@tanstack/solid-query';
+import { TanstackQueryDevtools } from '@tanstack/query-devtools';
+
+// src/devtools.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container>`);
+function SolidQueryDevtools(props) {
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
+  let ref;
+  const devtools = new TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes,
+    styleNonce: props.styleNonce,
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  onMount(() => {
+    devtools.mount(ref);
+    onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+    return _el$;
+  })();
+}
+
+export { SolidQueryDevtools as default };

package/build/devtoolsPanel/NDFIDQLQ.jsx

@@ -0,0 +1,50 @@
+// src/devtoolsPanel.tsx
+import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
+import { onlineManager, useQueryClient } from "@tanstack/solid-query";
+import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
+function SolidQueryDevtoolsPanel(props) {
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
+  let ref;
+  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const devtools = new TanstackQueryDevtoolsPanel({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager,
+    buttonPosition: "bottom-left",
+    position: "bottom",
+    initialIsOpen: true,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    onClose: props.onClose,
+    hideDisabledQueries,
+    theme: props.theme
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  onMount(() => {
+    devtools.mount(ref);
+    onCleanup(() => devtools.unmount());
+  });
+  return <div
+    style={{ height: "500px", ...props.style }}
+    class="tsqd-parent-container"
+    ref={ref}
+  />;
+}
+export {
+  SolidQueryDevtoolsPanel as default
+};

package/build/devtoolsPanel/VOW4J2DZ.js

@@ -0,0 +1,61 @@
+import { use, effect, style, template } from 'solid-js/web';
+import { createMemo, createEffect, onMount, onCleanup } from 'solid-js';
+import { useQueryClient, onlineManager } from '@tanstack/solid-query';
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools';
+
+// src/devtoolsPanel.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div class=tsqd-parent-container style=height:500px>`);
+function SolidQueryDevtoolsPanel(props) {
+  const queryClient = useQueryClient(props.client);
+  const client = createMemo(() => queryClient);
+  let ref;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries
+  } = props;
+  const devtools = new TanstackQueryDevtoolsPanel({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager,
+    buttonPosition: "bottom-left",
+    position: "bottom",
+    initialIsOpen: true,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    onClose: props.onClose,
+    hideDisabledQueries,
+    theme: props.theme
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  onMount(() => {
+    devtools.mount(ref);
+    onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+    effect((_$p) => style(_el$, {
+      ...props.style
+    }, _$p));
+    return _el$;
+  })();
+}
+
+export { SolidQueryDevtoolsPanel as default };

package/build/index.cjs

@@ -0,0 +1,167 @@
+'use strict';
+
+var web = require('solid-js/web');
+var solidJs = require('solid-js');
+var solidQuery = require('@tanstack/solid-query');
+var queryDevtools = require('@tanstack/query-devtools');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/devtools.tsx
+var devtools_exports = {};
+__export(devtools_exports, {
+  default: () => SolidQueryDevtools
+});
+function SolidQueryDevtools(props) {
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
+  let ref;
+  const devtools = new queryDevtools.TanstackQueryDevtools({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager: solidQuery.onlineManager,
+    buttonPosition: props.buttonPosition,
+    position: props.position,
+    initialIsOpen: props.initialIsOpen,
+    errorTypes: props.errorTypes,
+    styleNonce: props.styleNonce,
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
+    theme: props.theme
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    const buttonPos = props.buttonPosition;
+    if (buttonPos) {
+      devtools.setButtonPosition(buttonPos);
+    }
+  });
+  solidJs.createEffect(() => {
+    const pos = props.position;
+    if (pos) {
+      devtools.setPosition(pos);
+    }
+  });
+  solidJs.createEffect(() => {
+    devtools.setInitialIsOpen(props.initialIsOpen || false);
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  solidJs.onMount(() => {
+    devtools.mount(ref);
+    solidJs.onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : ref = _el$;
+    return _el$;
+  })();
+}
+var _tmpl$;
+var init_devtools = __esm({
+  "src/devtools.tsx"() {
+    _tmpl$ = /* @__PURE__ */ web.template(`<div class=tsqd-parent-container>`);
+  }
+});
+
+// src/devtoolsPanel.tsx
+var devtoolsPanel_exports = {};
+__export(devtoolsPanel_exports, {
+  default: () => SolidQueryDevtoolsPanel
+});
+function SolidQueryDevtoolsPanel(props) {
+  const queryClient = solidQuery.useQueryClient(props.client);
+  const client = solidJs.createMemo(() => queryClient);
+  let ref;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries
+  } = props;
+  const devtools = new queryDevtools.TanstackQueryDevtoolsPanel({
+    client: client(),
+    queryFlavor: "Solid Query",
+    version: "5",
+    onlineManager: solidQuery.onlineManager,
+    buttonPosition: "bottom-left",
+    position: "bottom",
+    initialIsOpen: true,
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    onClose: props.onClose,
+    hideDisabledQueries,
+    theme: props.theme
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  solidJs.createEffect(() => {
+    devtools.setTheme(props.theme || "system");
+  });
+  solidJs.onMount(() => {
+    devtools.mount(ref);
+    solidJs.onCleanup(() => devtools.unmount());
+  });
+  return (() => {
+    var _el$ = _tmpl$2();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : ref = _el$;
+    web.effect((_$p) => web.style(_el$, {
+      ...props.style
+    }, _$p));
+    return _el$;
+  })();
+}
+var _tmpl$2;
+var init_devtoolsPanel = __esm({
+  "src/devtoolsPanel.tsx"() {
+    _tmpl$2 = /* @__PURE__ */ web.template(`<div class=tsqd-parent-container style=height:500px>`);
+  }
+});
+function clientOnly(fn) {
+  if (web.isServer) return (props) => props.fallback;
+  const [comp, setComp] = solidJs.createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = solidJs.splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !solidJs.sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = solidJs.createSignal(!solidJs.sharedConfig.context);
+    solidJs.onMount(() => setMounted(true));
+    return solidJs.createMemo(() => (Comp = comp(), m = mounted(), solidJs.untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+
+// src/index.tsx
+exports.SolidQueryDevtools = web.isDev ? clientOnly(() => Promise.resolve().then(() => (init_devtools(), devtools_exports))) : function() {
+  return null;
+};
+exports.SolidQueryDevtoolsPanel = web.isDev ? clientOnly(() => Promise.resolve().then(() => (init_devtoolsPanel(), devtoolsPanel_exports))) : function() {
+  return null;
+};

package/build/index.d.cts

@@ -0,0 +1,3 @@
+export { SolidQueryDevtools } from './_tsup-dts-rollup.cjs';
+export { SolidQueryDevtoolsPanel } from './_tsup-dts-rollup.cjs';
+export { DevtoolsPanelOptions_alias_1 as DevtoolsPanelOptions } from './_tsup-dts-rollup.cjs';

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export { SolidQueryDevtools } from './_tsup-dts-rollup.js';
+export { SolidQueryDevtoolsPanel } from './_tsup-dts-rollup.js';
+export { DevtoolsPanelOptions_alias_1 as DevtoolsPanelOptions } from './_tsup-dts-rollup.js';

package/build/index.js

@@ -0,0 +1,28 @@
+import { isDev, isServer } from 'solid-js/web';
+import { createSignal, splitProps, sharedConfig, onMount, createMemo, untrack } from 'solid-js';
+
+// src/index.tsx
+function clientOnly(fn) {
+  if (isServer) return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
+  };
+}
+
+// src/index.tsx
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/BCD44V6M.js')) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/VOW4J2DZ.js')) : function() {
+  return null;
+};
+
+export { SolidQueryDevtools, SolidQueryDevtoolsPanel };

package/build/index.jsx

@@ -0,0 +1,42 @@
+// src/index.tsx
+import { isDev } from "solid-js/web";
+
+// src/clientOnly.tsx
+import {
+  createMemo,
+  createSignal,
+  onMount,
+  sharedConfig,
+  splitProps,
+  untrack
+} from "solid-js";
+import { isServer } from "solid-js/web";
+function clientOnly(fn) {
+  if (isServer)
+    return (props) => props.fallback;
+  const [comp, setComp] = createSignal();
+  fn().then((m) => setComp(() => m.default));
+  return (props) => {
+    let Comp;
+    let m;
+    const [, rest] = splitProps(props, ["fallback"]);
+    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest);
+    const [mounted, setMounted] = createSignal(!sharedConfig.context);
+    onMount(() => setMounted(true));
+    return createMemo(
+      () => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback))
+    );
+  };
+}
+
+// src/index.tsx
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/32HRKFKI.jsx")) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/NDFIDQLQ.jsx")) : function() {
+  return null;
+};
+export {
+  SolidQueryDevtools,
+  SolidQueryDevtoolsPanel
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "5.94.4",
+  "version": "5.94.5",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -44,7 +44,7 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.94.4"
+    "@tanstack/query-devtools": "5.94.5"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",
@@ -52,11 +52,11 @@
     "solid-js": "^1.9.7",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.6",
-    "@tanstack/solid-query": "5.94.4"
+    "@tanstack/solid-query": "5.94.5"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0",
-    "@tanstack/solid-query": "^5.94.4"
+    "@tanstack/solid-query": "^5.94.5"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",