@tanstack/solid-query-devtools 5.26.3 → 5.27.0

package/build/chunk/{2LBUD5H3.js → E5RSUBQ2.js}

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

package/build/chunk/{QSAHGWUR.jsx → GRXEEYVR.jsx}

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

package/build/dev.cjs

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

package/build/dev.js

@@ -1,7 +1,7 @@
-import { clientOnly } from './chunk/2LBUD5H3.js';
+import { clientOnly } from './chunk/E5RSUBQ2.js';
 import { isDev } from 'solid-js/web';
 
-var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/BYEFMWJX.js')) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/E6F574RQ.js')) : function() {
   return null;
 };
 

package/build/dev.jsx

@@ -1,10 +1,10 @@
 import {
   clientOnly
-} from "./chunk/QSAHGWUR.jsx";
+} from "./chunk/GRXEEYVR.jsx";
 
 // src/index.tsx
 import { isDev } from "solid-js/web";
-var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/2DJNWFHY.jsx")) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/ROOBA2XS.jsx")) : function() {
   return null;
 };
 export {

package/build/devtools/{BYEFMWJX.js → E6F574RQ.js}

@@ -1 +1 @@
-export { clientOnly, SolidQueryDevtools as default } from '../chunk/2LBUD5H3.js';
+export { clientOnly, SolidQueryDevtools as default } from '../chunk/E5RSUBQ2.js';

package/build/devtools/{2DJNWFHY.jsx → ROOBA2XS.jsx}

@@ -1,7 +1,7 @@
 import {
   SolidQueryDevtools,
   clientOnly
-} from "../chunk/QSAHGWUR.jsx";
+} from "../chunk/GRXEEYVR.jsx";
 export {
   clientOnly,
   SolidQueryDevtools as default

package/build/index.cjs

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

package/build/index.d.cts

@@ -31,6 +31,10 @@ interface DevtoolsOptions {
      * 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;
 }
 declare function SolidQueryDevtools$1(props: DevtoolsOptions): JSX.Element;
 

package/build/index.d.ts

@@ -31,6 +31,10 @@ interface DevtoolsOptions {
      * 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;
 }
 declare function SolidQueryDevtools$1(props: DevtoolsOptions): JSX.Element;
 

package/build/index.js

@@ -1,7 +1,7 @@
-import { clientOnly } from './chunk/2LBUD5H3.js';
+import { clientOnly } from './chunk/E5RSUBQ2.js';
 import { isDev } from 'solid-js/web';
 
-var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/BYEFMWJX.js')) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import('./devtools/E6F574RQ.js')) : function() {
   return null;
 };
 

package/build/index.jsx

@@ -1,10 +1,10 @@
 import {
   clientOnly
-} from "./chunk/QSAHGWUR.jsx";
+} from "./chunk/GRXEEYVR.jsx";
 
 // src/index.tsx
 import { isDev } from "solid-js/web";
-var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/2DJNWFHY.jsx")) : function() {
+var SolidQueryDevtools = isDev ? clientOnly(() => import("./devtools/ROOBA2XS.jsx")) : function() {
   return null;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "5.26.3",
+  "version": "5.27.0",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.24.0"
+    "@tanstack/query-devtools": "5.27.0"
   },
   "peerDependencies": {
     "solid-js": "^1.8.14",

package/src/devtools.tsx

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