@tanstack/query-devtools 5.4.2 → 5.8.2

package/build/index.d.cts

@@ -26,6 +26,7 @@ interface QueryDevtoolsProps {
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
+    styleNonce?: string;
 }
 declare class TanstackQueryDevtools {
     #private;

package/build/index.d.ts

@@ -26,6 +26,7 @@ interface QueryDevtoolsProps {
 }
 
 interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
+    styleNonce?: string;
 }
 declare class TanstackQueryDevtools {
     #private;

package/build/index.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, createComponent, mergeProps } from './chunk/Z53XT47W.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/2CFRQNPI.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -7,6 +7,7 @@ var TanstackQueryDevtools = class {
   #queryFlavor;
   #version;
   #isMounted = false;
+  #styleNonce;
   #buttonPosition;
   #position;
   #initialIsOpen;
@@ -22,12 +23,14 @@ var TanstackQueryDevtools = class {
       buttonPosition,
       position,
       initialIsOpen,
-      errorTypes
+      errorTypes,
+      styleNonce
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
     this.#version = version;
     this.#onlineManager = onlineManager;
+    this.#styleNonce = styleNonce;
     this.#buttonPosition = createSignal(buttonPosition);
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
@@ -62,9 +65,10 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/HESZYUBG.js'));
+        Devtools = lazy(() => import('./Devtools/G2MVXYID.js'));
         this.#Component = Devtools;
       }
+      setupStyleSheet(this.#styleNonce);
       const _self$ = this;
       return createComponent(Devtools, mergeProps({
         get queryFlavor() {

package/build/index.jsx

@@ -1,8 +1,9 @@
 import {
   createSignal,
   lazy,
-  render
-} from "./chunk/JRAMSUCV.jsx";
+  render,
+  setupStyleSheet
+} from "./chunk/MJH6GUJH.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -11,6 +12,7 @@ var TanstackQueryDevtools = class {
   #queryFlavor;
   #version;
   #isMounted = false;
+  #styleNonce;
   #buttonPosition;
   #position;
   #initialIsOpen;
@@ -26,12 +28,14 @@ var TanstackQueryDevtools = class {
       buttonPosition,
       position,
       initialIsOpen,
-      errorTypes
+      errorTypes,
+      styleNonce
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
     this.#version = version;
     this.#onlineManager = onlineManager;
+    this.#styleNonce = styleNonce;
     this.#buttonPosition = createSignal(buttonPosition);
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
@@ -66,9 +70,10 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/KWB27UDF.jsx"));
+        Devtools = lazy(() => import("./Devtools/RGHE4TS2.jsx"));
         this.#Component = Devtools;
       }
+      setupStyleSheet(this.#styleNonce);
       return <Devtools
         queryFlavor={this.#queryFlavor}
         version={this.#version}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.4.2",
+  "version": "5.8.2",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -45,12 +45,12 @@
     "@tanstack/match-sorter-utils": "^8.8.4",
     "clsx": "^2.0.0",
     "goober": "^2.1.13",
-    "solid-js": "^1.7.8",
+    "solid-js": "^1.8.1",
     "solid-transition-group": "^0.2.2",
     "superjson": "^1.12.4",
     "tsup-preset-solid": "^2.1.0",
-    "vite-plugin-solid": "^2.7.0",
-    "@tanstack/query-core": "5.0.5"
+    "vite-plugin-solid": "^2.7.2",
+    "@tanstack/query-core": "5.8.2"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/index.tsx

@@ -1,5 +1,6 @@
 import { render } from 'solid-js/web'
 import { createSignal, lazy } from 'solid-js'
+import { setupStyleSheet } from './utils'
 import type {
   QueryClient,
   onlineManager as TonlineManager,
@@ -14,7 +15,9 @@ import type {
 import type { Signal } from 'solid-js'
 
 export type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType }
-export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {}
+export interface TanstackQueryDevtoolsConfig extends QueryDevtoolsProps {
+  styleNonce?: string
+}
 
 class TanstackQueryDevtools {
   #client: Signal<QueryClient>
@@ -22,6 +25,7 @@ class TanstackQueryDevtools {
   #queryFlavor: string
   #version: string
   #isMounted = false
+  #styleNonce?: string
   #buttonPosition: Signal<DevtoolsButtonPosition | undefined>
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
@@ -39,11 +43,13 @@ class TanstackQueryDevtools {
       position,
       initialIsOpen,
       errorTypes,
+      styleNonce,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
     this.#version = version
     this.#onlineManager = onlineManager
+    this.#styleNonce = styleNonce
     this.#buttonPosition = createSignal(buttonPosition)
     this.#position = createSignal(position)
     this.#initialIsOpen = createSignal(initialIsOpen)
@@ -80,7 +86,6 @@ class TanstackQueryDevtools {
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
       const [queryClient] = this.#client
-
       let Devtools: typeof DevtoolsComponent
 
       if (this.#Component) {
@@ -90,6 +95,7 @@ class TanstackQueryDevtools {
         this.#Component = Devtools
       }
 
+      setupStyleSheet(this.#styleNonce)
       return (
         <Devtools
           queryFlavor={this.#queryFlavor}

package/src/utils.tsx

@@ -310,3 +310,17 @@ export const deleteNestedDataByPath = (
 
   return oldData
 }
+
+// Sets up the goober stylesheet
+// Adds a nonce to the style tag if needed
+export const setupStyleSheet = (nonce?: string) => {
+  if (!nonce) return
+  const styleExists = document.querySelector('#_goober')
+  if (styleExists) return
+  const styleTag = document.createElement('style')
+  const textNode = document.createTextNode('')
+  styleTag.appendChild(textNode)
+  styleTag.id = '_goober'
+  styleTag.setAttribute('nonce', nonce)
+  document.head.appendChild(styleTag)
+}