@tanstack/query-devtools 5.0.0-rc.9 → 5.0.0

package/build/index.d.cts

@@ -1,5 +1,4 @@
 import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
-import { Component, Signal } from 'solid-js';
 
 type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
@@ -26,22 +25,10 @@ interface QueryDevtoolsProps {
     errorTypes?: Array<DevToolsErrorType>;
 }
 
-declare const DevtoolsComponent: Component<QueryDevtoolsProps>;
-
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
 }
 declare class TanstackQueryDevtools {
-    client: Signal<QueryClient>;
-    onlineManager: typeof onlineManager;
-    queryFlavor: string;
-    version: string;
-    isMounted: boolean;
-    buttonPosition: Signal<DevtoolsButtonPosition | undefined>;
-    position: Signal<DevtoolsPosition | undefined>;
-    initialIsOpen: Signal<boolean | undefined>;
-    errorTypes: Signal<Array<DevToolsErrorType> | undefined>;
-    Component: typeof DevtoolsComponent | undefined;
-    dispose?: () => void;
+    #private;
     constructor(config: TanstackQueryDevtoolsConfig);
     setButtonPosition(position: DevtoolsButtonPosition): void;
     setPosition(position: DevtoolsPosition): void;

package/build/index.d.ts

@@ -1,5 +1,4 @@
 import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
-import { Component, Signal } from 'solid-js';
 
 type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
@@ -26,22 +25,10 @@ interface QueryDevtoolsProps {
     errorTypes?: Array<DevToolsErrorType>;
 }
 
-declare const DevtoolsComponent: Component<QueryDevtoolsProps>;
-
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
 }
 declare class TanstackQueryDevtools {
-    client: Signal<QueryClient>;
-    onlineManager: typeof onlineManager;
-    queryFlavor: string;
-    version: string;
-    isMounted: boolean;
-    buttonPosition: Signal<DevtoolsButtonPosition | undefined>;
-    position: Signal<DevtoolsPosition | undefined>;
-    initialIsOpen: Signal<boolean | undefined>;
-    errorTypes: Signal<Array<DevToolsErrorType> | undefined>;
-    Component: typeof DevtoolsComponent | undefined;
-    dispose?: () => void;
+    #private;
     constructor(config: TanstackQueryDevtoolsConfig);
     setButtonPosition(position: DevtoolsButtonPosition): void;
     setPosition(position: DevtoolsPosition): void;

package/build/index.js

@@ -2,7 +2,17 @@ import { createSignal, render, lazy, createComponent, mergeProps } from './chunk
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
-  isMounted = false;
+  #client;
+  #onlineManager;
+  #queryFlavor;
+  #version;
+  #isMounted = false;
+  #buttonPosition;
+  #position;
+  #initialIsOpen;
+  #errorTypes;
+  #Component;
+  #dispose;
   constructor(config) {
     const {
       client,
@@ -14,57 +24,57 @@ var TanstackQueryDevtools = class {
       initialIsOpen,
       errorTypes
     } = config;
-    this.client = createSignal(client);
-    this.queryFlavor = queryFlavor;
-    this.version = version;
-    this.onlineManager = onlineManager;
-    this.buttonPosition = createSignal(buttonPosition);
-    this.position = createSignal(position);
-    this.initialIsOpen = createSignal(initialIsOpen);
-    this.errorTypes = createSignal(errorTypes);
+    this.#client = createSignal(client);
+    this.#queryFlavor = queryFlavor;
+    this.#version = version;
+    this.#onlineManager = onlineManager;
+    this.#buttonPosition = createSignal(buttonPosition);
+    this.#position = createSignal(position);
+    this.#initialIsOpen = createSignal(initialIsOpen);
+    this.#errorTypes = createSignal(errorTypes);
   }
   setButtonPosition(position) {
-    this.buttonPosition[1](position);
+    this.#buttonPosition[1](position);
   }
   setPosition(position) {
-    this.position[1](position);
+    this.#position[1](position);
   }
   setInitialIsOpen(isOpen) {
-    this.initialIsOpen[1](isOpen);
+    this.#initialIsOpen[1](isOpen);
   }
   setErrorTypes(errorTypes) {
-    this.errorTypes[1](errorTypes);
+    this.#errorTypes[1](errorTypes);
   }
   setClient(client) {
-    this.client[1](client);
+    this.#client[1](client);
   }
   mount(el) {
-    if (this.isMounted) {
+    if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
     }
     const dispose = render(() => {
-      const [btnPosition] = this.buttonPosition;
-      const [pos] = this.position;
-      const [isOpen] = this.initialIsOpen;
-      const [errors] = this.errorTypes;
-      const [queryClient] = this.client;
+      const [btnPosition] = this.#buttonPosition;
+      const [pos] = this.#position;
+      const [isOpen] = this.#initialIsOpen;
+      const [errors] = this.#errorTypes;
+      const [queryClient] = this.#client;
       let Devtools;
-      if (this.Component) {
-        Devtools = this.Component;
+      if (this.#Component) {
+        Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/CIR3WCBJ.js'));
-        this.Component = Devtools;
+        Devtools = lazy(() => import('./Devtools/4TNE5QTO.js'));
+        this.#Component = Devtools;
       }
       const _self$ = this;
       return createComponent(Devtools, mergeProps({
         get queryFlavor() {
-          return _self$.queryFlavor;
+          return _self$.#queryFlavor;
         },
         get version() {
-          return _self$.version;
+          return _self$.#version;
         },
         get onlineManager() {
-          return _self$.onlineManager;
+          return _self$.#onlineManager;
         }
       }, {
         get client() {
@@ -84,15 +94,15 @@ var TanstackQueryDevtools = class {
         }
       }));
     }, el);
-    this.isMounted = true;
-    this.dispose = dispose;
+    this.#isMounted = true;
+    this.#dispose = dispose;
   }
   unmount() {
-    if (!this.isMounted) {
+    if (!this.#isMounted) {
       throw new Error("Devtools is not mounted");
     }
-    this.dispose?.();
-    this.isMounted = false;
+    this.#dispose?.();
+    this.#isMounted = false;
   }
 };
 

package/build/index.jsx

@@ -6,8 +6,18 @@ import {
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
+  #client;
+  #onlineManager;
+  #queryFlavor;
+  #version;
+  #isMounted = false;
+  #buttonPosition;
+  #position;
+  #initialIsOpen;
+  #errorTypes;
+  #Component;
+  #dispose;
   constructor(config) {
-    this.isMounted = false;
     const {
       client,
       queryFlavor,
@@ -18,51 +28,51 @@ var TanstackQueryDevtools = class {
       initialIsOpen,
       errorTypes
     } = config;
-    this.client = createSignal(client);
-    this.queryFlavor = queryFlavor;
-    this.version = version;
-    this.onlineManager = onlineManager;
-    this.buttonPosition = createSignal(buttonPosition);
-    this.position = createSignal(position);
-    this.initialIsOpen = createSignal(initialIsOpen);
-    this.errorTypes = createSignal(errorTypes);
+    this.#client = createSignal(client);
+    this.#queryFlavor = queryFlavor;
+    this.#version = version;
+    this.#onlineManager = onlineManager;
+    this.#buttonPosition = createSignal(buttonPosition);
+    this.#position = createSignal(position);
+    this.#initialIsOpen = createSignal(initialIsOpen);
+    this.#errorTypes = createSignal(errorTypes);
   }
   setButtonPosition(position) {
-    this.buttonPosition[1](position);
+    this.#buttonPosition[1](position);
   }
   setPosition(position) {
-    this.position[1](position);
+    this.#position[1](position);
   }
   setInitialIsOpen(isOpen) {
-    this.initialIsOpen[1](isOpen);
+    this.#initialIsOpen[1](isOpen);
   }
   setErrorTypes(errorTypes) {
-    this.errorTypes[1](errorTypes);
+    this.#errorTypes[1](errorTypes);
   }
   setClient(client) {
-    this.client[1](client);
+    this.#client[1](client);
   }
   mount(el) {
-    if (this.isMounted) {
+    if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
     }
     const dispose = render(() => {
-      const [btnPosition] = this.buttonPosition;
-      const [pos] = this.position;
-      const [isOpen] = this.initialIsOpen;
-      const [errors] = this.errorTypes;
-      const [queryClient] = this.client;
+      const [btnPosition] = this.#buttonPosition;
+      const [pos] = this.#position;
+      const [isOpen] = this.#initialIsOpen;
+      const [errors] = this.#errorTypes;
+      const [queryClient] = this.#client;
       let Devtools;
-      if (this.Component) {
-        Devtools = this.Component;
+      if (this.#Component) {
+        Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/5OOWR6BQ.jsx"));
-        this.Component = Devtools;
+        Devtools = lazy(() => import("./Devtools/3BAJISSX.jsx"));
+        this.#Component = Devtools;
       }
       return <Devtools
-        queryFlavor={this.queryFlavor}
-        version={this.version}
-        onlineManager={this.onlineManager}
+        queryFlavor={this.#queryFlavor}
+        version={this.#version}
+        onlineManager={this.#onlineManager}
         {...{
           get client() {
             return queryClient();
@@ -82,15 +92,15 @@ var TanstackQueryDevtools = class {
         }}
       />;
     }, el);
-    this.isMounted = true;
-    this.dispose = dispose;
+    this.#isMounted = true;
+    this.#dispose = dispose;
   }
   unmount() {
-    if (!this.isMounted) {
+    if (!this.#isMounted) {
       throw new Error("Devtools is not mounted");
     }
-    this.dispose?.();
-    this.isMounted = false;
+    this.#dispose?.();
+    this.#isMounted = false;
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.0.0-rc.9",
+  "version": "5.0.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.12.4",
     "tsup-preset-solid": "^2.0.1",
     "vite-plugin-solid": "^2.7.0",
-    "@tanstack/query-core": "5.0.0-rc.6"
+    "@tanstack/query-core": "5.0.0"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Context.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'solid-js'
+import type { Accessor } from 'solid-js'
 import type { Query, QueryClient, onlineManager } from '@tanstack/query-core'
 
 type XPosition = 'left' | 'right'
@@ -39,3 +40,11 @@ export const QueryDevtoolsContext = createContext<QueryDevtoolsProps>({
 export function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext)
 }
+
+export const ThemeContext = createContext<Accessor<'light' | 'dark'>>(
+  () => 'dark' as const,
+)
+
+export function useTheme() {
+  return useContext(ThemeContext)
+}