@tanstack/query-devtools - npm Package Compare versions

Comparing version 5.52.3 to 5.54.0

build/dev.js

 import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/GMHTURR6.js';
 
-// src/index.tsx
+// src/TanstackQueryDevtools.tsx
 var TanstackQueryDevtools = class {
@@ -72,3 +72,3 @@ #client;
       } else {
-        Devtools = lazy(() => import('./Devtools/E6UWR6XD.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/AIPVUCAN.js'));
         this.#Component = Devtools;
@@ -120,2 +120,128 @@ }
 
-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/YCAYD3IW.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 };

build/index.d.ts

@@ -27,2 +27,3 @@ import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
     shadowDOMTarget?: ShadowRoot;
+    onClose?: () => unknown;
 }
@@ -46,2 +47,20 @@
 
-export { type DevtoolsButtonPosition, type DevtoolsErrorType, 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 };

build/index.js

 import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/TU4XCPXB.js';
 
-// src/index.tsx
+// src/TanstackQueryDevtools.tsx
 var TanstackQueryDevtools = class {
@@ -72,3 +72,3 @@ #client;
       } else {
-        Devtools = lazy(() => import('./Devtools/2FJCTAHO.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/PTNKQWC6.js'));
         this.#Component = Devtools;
@@ -120,2 +120,128 @@ }
 
-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.json

 {
   "name": "@tanstack/query-devtools",
-  "version": "5.52.3",
+  "version": "5.54.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
@@ -57,5 +57,5 @@ "author": "tannerlinsley",
     "vite-plugin-solid": "^2.10.2",
-    "@tanstack/query-core": "5.52.3"
+    "@tanstack/query-core": "5.53.3"
   },
   "scripts": {}
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

33

increased by22.22%

Worsened metrics

Total package byte prevSize

2441561

decreased by-27.77%

Lines of code

70567

decreased by-29.5%

No dependency changes