@tanstack/query-devtools 5.51.16 → 5.54.0

package/build/index.d.cts

@@ -4,7 +4,7 @@ type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
 type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
-interface DevToolsErrorType {
+interface DevtoolsErrorType {
     /**
      * The name of the error.
      */
@@ -22,8 +22,9 @@ interface QueryDevtoolsProps {
     buttonPosition?: DevtoolsButtonPosition;
     position?: DevtoolsPosition;
     initialIsOpen?: boolean;
-    errorTypes?: Array<DevToolsErrorType>;
+    errorTypes?: Array<DevtoolsErrorType>;
     shadowDOMTarget?: ShadowRoot;
+    onClose?: () => unknown;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
@@ -36,10 +37,28 @@ declare class TanstackQueryDevtools {
     setButtonPosition(position: DevtoolsButtonPosition): void;
     setPosition(position: DevtoolsPosition): void;
     setInitialIsOpen(isOpen: boolean): void;
-    setErrorTypes(errorTypes: Array<DevToolsErrorType>): void;
+    setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
 
-export { type DevToolsErrorType, type DevtoolsButtonPosition, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig };
+interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
+    styleNonce?: string;
+    shadowDOMTarget?: ShadowRoot;
+    onClose?: () => unknown;
+}
+declare class TanstackQueryDevtoolsPanel {
+    #private;
+    constructor(config: TanstackQueryDevtoolsPanelConfig);
+    setButtonPosition(position: DevtoolsButtonPosition): void;
+    setPosition(position: DevtoolsPosition): void;
+    setInitialIsOpen(isOpen: boolean): void;
+    setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
+    setClient(client: QueryClient): void;
+    setOnClose(onClose: () => unknown): void;
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+}
+
+export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig };

package/build/index.d.ts

@@ -4,7 +4,7 @@ type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
 type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
-interface DevToolsErrorType {
+interface DevtoolsErrorType {
     /**
      * The name of the error.
      */
@@ -22,8 +22,9 @@ interface QueryDevtoolsProps {
     buttonPosition?: DevtoolsButtonPosition;
     position?: DevtoolsPosition;
     initialIsOpen?: boolean;
-    errorTypes?: Array<DevToolsErrorType>;
+    errorTypes?: Array<DevtoolsErrorType>;
     shadowDOMTarget?: ShadowRoot;
+    onClose?: () => unknown;
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
@@ -36,10 +37,28 @@ declare class TanstackQueryDevtools {
     setButtonPosition(position: DevtoolsButtonPosition): void;
     setPosition(position: DevtoolsPosition): void;
     setInitialIsOpen(isOpen: boolean): void;
-    setErrorTypes(errorTypes: Array<DevToolsErrorType>): void;
+    setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
     setClient(client: QueryClient): void;
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
 }
 
-export { type DevToolsErrorType, type DevtoolsButtonPosition, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig };
+interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
+    styleNonce?: string;
+    shadowDOMTarget?: ShadowRoot;
+    onClose?: () => unknown;
+}
+declare class TanstackQueryDevtoolsPanel {
+    #private;
+    constructor(config: TanstackQueryDevtoolsPanelConfig);
+    setButtonPosition(position: DevtoolsButtonPosition): void;
+    setPosition(position: DevtoolsPosition): void;
+    setInitialIsOpen(isOpen: boolean): void;
+    setErrorTypes(errorTypes: Array<DevtoolsErrorType>): void;
+    setClient(client: QueryClient): void;
+    setOnClose(onClose: () => unknown): void;
+    mount<T extends HTMLElement>(el: T): void;
+    unmount(): void;
+}
+
+export { type DevtoolsButtonPosition, type DevtoolsErrorType, type DevtoolsPosition, TanstackQueryDevtools, type TanstackQueryDevtoolsConfig, TanstackQueryDevtoolsPanel, type TanstackQueryDevtoolsPanelConfig };

package/build/index.js

@@ -1,6 +1,6 @@
 import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/TU4XCPXB.js';
 
-// src/index.tsx
+// src/TanstackQueryDevtools.tsx
 var TanstackQueryDevtools = class {
   #client;
   #onlineManager;
@@ -69,7 +69,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/2FJCTAHO.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/PTNKQWC6.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -116,4 +116,130 @@ var TanstackQueryDevtools = class {
   }
 };
 
-export { TanstackQueryDevtools };
+// src/TanstackQueryDevtoolsPanel.tsx
+var TanstackQueryDevtoolsPanel = class {
+  #client;
+  #onlineManager;
+  #queryFlavor;
+  #version;
+  #isMounted = false;
+  #styleNonce;
+  #shadowDOMTarget;
+  #buttonPosition;
+  #position;
+  #initialIsOpen;
+  #errorTypes;
+  #onClose;
+  #Component;
+  #dispose;
+  constructor(config) {
+    const {
+      client,
+      queryFlavor,
+      version,
+      onlineManager,
+      buttonPosition,
+      position,
+      initialIsOpen,
+      errorTypes,
+      styleNonce,
+      shadowDOMTarget,
+      onClose
+    } = config;
+    this.#client = createSignal(client);
+    this.#queryFlavor = queryFlavor;
+    this.#version = version;
+    this.#onlineManager = onlineManager;
+    this.#styleNonce = styleNonce;
+    this.#shadowDOMTarget = shadowDOMTarget;
+    this.#buttonPosition = createSignal(buttonPosition);
+    this.#position = createSignal(position);
+    this.#initialIsOpen = createSignal(initialIsOpen);
+    this.#errorTypes = createSignal(errorTypes);
+    this.#onClose = createSignal(onClose);
+  }
+  setButtonPosition(position) {
+    this.#buttonPosition[1](position);
+  }
+  setPosition(position) {
+    this.#position[1](position);
+  }
+  setInitialIsOpen(isOpen) {
+    this.#initialIsOpen[1](isOpen);
+  }
+  setErrorTypes(errorTypes) {
+    this.#errorTypes[1](errorTypes);
+  }
+  setClient(client) {
+    this.#client[1](client);
+  }
+  setOnClose(onClose) {
+    this.#onClose[1](() => onClose);
+  }
+  mount(el) {
+    if (this.#isMounted) {
+      throw new Error("Devtools is already mounted");
+    }
+    const dispose = render(() => {
+      const _self$ = this;
+      const [btnPosition] = this.#buttonPosition;
+      const [pos] = this.#position;
+      const [isOpen] = this.#initialIsOpen;
+      const [errors] = this.#errorTypes;
+      const [queryClient] = this.#client;
+      const [onClose] = this.#onClose;
+      let Devtools;
+      if (this.#Component) {
+        Devtools = this.#Component;
+      } else {
+        Devtools = lazy(() => import('./DevtoolsPanelComponent/SA34RK37.js'));
+        this.#Component = Devtools;
+      }
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
+      return createComponent(Devtools, mergeProps({
+        get queryFlavor() {
+          return _self$.#queryFlavor;
+        },
+        get version() {
+          return _self$.#version;
+        },
+        get onlineManager() {
+          return _self$.#onlineManager;
+        },
+        get shadowDOMTarget() {
+          return _self$.#shadowDOMTarget;
+        }
+      }, {
+        get client() {
+          return queryClient();
+        },
+        get buttonPosition() {
+          return btnPosition();
+        },
+        get position() {
+          return pos();
+        },
+        get initialIsOpen() {
+          return isOpen();
+        },
+        get errorTypes() {
+          return errors();
+        },
+        get onClose() {
+          return onClose();
+        }
+      }));
+    }, el);
+    this.#isMounted = true;
+    this.#dispose = dispose;
+  }
+  unmount() {
+    if (!this.#isMounted) {
+      throw new Error("Devtools is not mounted");
+    }
+    this.#dispose?.();
+    this.#isMounted = false;
+  }
+};
+
+export { TanstackQueryDevtools, TanstackQueryDevtoolsPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.51.16",
+  "version": "5.54.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "superjson": "^2.2.1",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.10.2",
-    "@tanstack/query-core": "5.51.16"
+    "@tanstack/query-core": "5.53.3"
   },
   "scripts": {}
 }