@tanstack/solid-query-devtools 5.83.1 → 5.85.0

package/build/dev.cjs

@@ -34,7 +34,8 @@ function SolidQueryDevtools(props) {
     initialIsOpen: props.initialIsOpen,
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
-    shadowDOMTarget: props.shadowDOMTarget
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries
   });
   solidJs.createEffect(() => {
     devtools.setClient(client());
@@ -74,6 +75,67 @@ var init_devtools = __esm({
     _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();
+  const client = solidJs.createMemo(() => props.client || 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
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  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$, {
+      height: "500px",
+      ...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>`);
+  }
+});
 function clientOnly(fn) {
   if (web.isServer) return (props) => props.fallback;
   const [comp, setComp] = solidJs.createSignal();
@@ -93,3 +155,6 @@ function clientOnly(fn) {
 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.js

@@ -18,8 +18,11 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/LBUQ2A5B.js')) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/DFW22NEL.js')) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/QH7X6ZDM.js')) : function() {
   return null;
 };
 
-export { SolidQueryDevtools };
+export { SolidQueryDevtools, SolidQueryDevtoolsPanel };

package/build/dev.jsx

@@ -30,9 +30,13 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/O4DODHQV.jsx")) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/4LKOWRT2.jsx")) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/YI6MKFAH.jsx")) : function() {
   return null;
 };
 export {
-  SolidQueryDevtools
+  SolidQueryDevtools,
+  SolidQueryDevtoolsPanel
 };

package/build/devtools/{O4DODHQV.jsx → 4LKOWRT2.jsx}

@@ -16,7 +16,8 @@ function SolidQueryDevtools(props) {
     initialIsOpen: props.initialIsOpen,
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
-    shadowDOMTarget: props.shadowDOMTarget
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries
   });
   createEffect(() => {
     devtools.setClient(client());

package/build/devtools/{LBUQ2A5B.js → DFW22NEL.js}

@@ -19,7 +19,8 @@ function SolidQueryDevtools(props) {
     initialIsOpen: props.initialIsOpen,
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
-    shadowDOMTarget: props.shadowDOMTarget
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries
   });
   createEffect(() => {
     devtools.setClient(client());

package/build/devtoolsPanel/QH7X6ZDM.js

@@ -0,0 +1,58 @@
+import { template, use, effect, style } 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>`);
+function SolidQueryDevtoolsPanel(props) {
+  const queryClient = useQueryClient();
+  const client = createMemo(() => props.client || 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
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  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$, {
+      height: "500px",
+      ...props.style
+    }, _$p));
+    return _el$;
+  })();
+}
+
+export { SolidQueryDevtoolsPanel as default };

package/build/devtoolsPanel/YI6MKFAH.jsx

@@ -0,0 +1,46 @@
+// 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();
+  const client = createMemo(() => props.client || 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
+  });
+  createEffect(() => {
+    devtools.setClient(client());
+  });
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  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/index.cjs

@@ -34,7 +34,8 @@ function SolidQueryDevtools(props) {
     initialIsOpen: props.initialIsOpen,
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
-    shadowDOMTarget: props.shadowDOMTarget
+    shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries
   });
   solidJs.createEffect(() => {
     devtools.setClient(client());
@@ -74,6 +75,67 @@ var init_devtools = __esm({
     _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();
+  const client = solidJs.createMemo(() => props.client || 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
+  });
+  solidJs.createEffect(() => {
+    devtools.setClient(client());
+  });
+  solidJs.createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  });
+  solidJs.createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || []);
+  });
+  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$, {
+      height: "500px",
+      ...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>`);
+  }
+});
 function clientOnly(fn) {
   if (web.isServer) return (props) => props.fallback;
   const [comp, setComp] = solidJs.createSignal();
@@ -93,3 +155,6 @@ function clientOnly(fn) {
 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

@@ -35,9 +35,49 @@ interface DevtoolsOptions {
      * 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;
 }
 declare function SolidQueryDevtools$1(props: DevtoolsOptions): solid_js.JSX.Element;
 
+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?: CSSStyleValue;
+    /**
+     * 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;
+}
+declare function SolidQueryDevtoolsPanel$1(props: DevtoolsPanelOptions): solid_js.JSX.Element;
+
 declare const SolidQueryDevtools: typeof SolidQueryDevtools$1;
+declare const SolidQueryDevtoolsPanel: typeof SolidQueryDevtoolsPanel$1;
 
-export { SolidQueryDevtools };
+export { type DevtoolsPanelOptions, SolidQueryDevtools, SolidQueryDevtoolsPanel };

package/build/index.d.ts

@@ -35,9 +35,49 @@ interface DevtoolsOptions {
      * 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;
 }
 declare function SolidQueryDevtools$1(props: DevtoolsOptions): solid_js.JSX.Element;
 
+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?: CSSStyleValue;
+    /**
+     * 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;
+}
+declare function SolidQueryDevtoolsPanel$1(props: DevtoolsPanelOptions): solid_js.JSX.Element;
+
 declare const SolidQueryDevtools: typeof SolidQueryDevtools$1;
+declare const SolidQueryDevtoolsPanel: typeof SolidQueryDevtoolsPanel$1;
 
-export { SolidQueryDevtools };
+export { type DevtoolsPanelOptions, SolidQueryDevtools, SolidQueryDevtoolsPanel };

package/build/index.js

@@ -18,8 +18,11 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/LBUQ2A5B.js')) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/DFW22NEL.js')) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import('./devtoolsPanel/QH7X6ZDM.js')) : function() {
   return null;
 };
 
-export { SolidQueryDevtools };
+export { SolidQueryDevtools, SolidQueryDevtoolsPanel };

package/build/index.jsx

@@ -30,9 +30,13 @@ function clientOnly(fn) {
 }
 
 // src/index.tsx
-var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/O4DODHQV.jsx")) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/4LKOWRT2.jsx")) : function() {
+  return null;
+};
+var SolidQueryDevtoolsPanel = isDev ? clientOnly(() => import("./devtoolsPanel/YI6MKFAH.jsx")) : function() {
   return null;
 };
 export {
-  SolidQueryDevtools
+  SolidQueryDevtools,
+  SolidQueryDevtoolsPanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "5.83.1",
+  "version": "5.85.0",
   "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.83.1"
+    "@tanstack/query-devtools": "5.84.0"
   },
   "devDependencies": {
     "npm-run-all2": "^5.0.0",

package/src/devtools.tsx

@@ -41,6 +41,10 @@ interface DevtoolsOptions {
    * 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
 }
 
 export default function SolidQueryDevtools(props: DevtoolsOptions) {
@@ -58,6 +62,7 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     errorTypes: props.errorTypes,
     styleNonce: props.styleNonce,
     shadowDOMTarget: props.shadowDOMTarget,
+    hideDisabledQueries: props.hideDisabledQueries,
   })
 
   createEffect(() => {

package/src/devtoolsPanel.tsx

@@ -0,0 +1,85 @@
+import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { onlineManager, useQueryClient } from '@tanstack/solid-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/solid-query'
+
+export 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?: CSSStyleValue
+
+  /**
+   * 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
+}
+
+export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
+  const queryClient = useQueryClient()
+  const client = createMemo(() => props.client || queryClient)
+  let ref!: HTMLDivElement
+  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,
+  })
+  createEffect(() => {
+    devtools.setClient(client())
+  })
+  createEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  })
+
+  createEffect(() => {
+    devtools.setErrorTypes(props.errorTypes || [])
+  })
+
+  onMount(() => {
+    devtools.mount(ref)
+    onCleanup(() => devtools.unmount())
+  })
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      class="tsqd-parent-container"
+      ref={ref}
+    />
+  )
+}

package/src/index.tsx

@@ -1,9 +1,18 @@
 import { isDev } from 'solid-js/web'
 import clientOnly from './clientOnly'
 import type SolidQueryDevtoolsComp from './devtools'
+import type SolidQueryDevtoolsCompPanel from './devtoolsPanel'
 
 export const SolidQueryDevtools: typeof SolidQueryDevtoolsComp = isDev
   ? clientOnly(() => import('./devtools'))
   : function () {
       return null
     }
+
+export const SolidQueryDevtoolsPanel: typeof SolidQueryDevtoolsCompPanel = isDev
+  ? clientOnly(() => import('./devtoolsPanel'))
+  : function () {
+      return null
+    }
+
+export type { DevtoolsPanelOptions } from './devtoolsPanel'