@tanstack/solid-query-devtools 6.0.0-beta.3 → 6.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.5",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -44,23 +44,23 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.93.0"
+    "@tanstack/query-devtools": "5.101.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
-    "@solidjs/web": "2.0.0-beta.4",
-    "babel-preset-solid": "2.0.0-beta.4",
+    "@solidjs/web": "2.0.0-beta.15",
+    "babel-preset-solid": "2.0.0-beta.15",
     "npm-run-all2": "^5.0.0",
-    "solid-js": "2.0.0-beta.5",
+    "solid-js": "2.0.0-beta.15",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "3.0.0-next.4",
-    "@tanstack/solid-query": "6.0.0-beta.3"
+    "vite-plugin-solid": "3.0.0-next.5",
+    "@tanstack/solid-query": "6.0.0-beta.5"
   },
   "peerDependencies": {
     "solid-js": ">=2.0.0-beta.0 <3.0.0",
-    "@tanstack/solid-query": "^6.0.0-beta.3"
+    "@tanstack/solid-query": "^6.0.0-beta.5"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/clientOnly.tsx

@@ -7,7 +7,8 @@ import {
   untrack,
 } from 'solid-js'
 import { isServer } from '@solidjs/web'
-import type { Component, ComponentProps, JSX } from 'solid-js'
+import type { Component, ComponentProps } from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 /*
   This function has been taken from solid-start's codebase

package/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup } from 'solid-js'
+import { createEffect, createMemo, onSettled, runWithOwner } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type {
@@ -15,13 +15,13 @@ interface DevtoolsOptions {
    */
   initialIsOpen?: boolean
   /**
-   * The position of the React Query logo to open and close the devtools panel.
-   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+   * The position of the TanStack logo to open and close the devtools panel.
+   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
    * Defaults to 'bottom-right'.
    */
   buttonPosition?: DevtoolsButtonPosition
   /**
-   * The position of the React Query devtools panel.
+   * The position of the Solid Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
    * Defaults to 'bottom'.
    */
@@ -118,19 +118,23 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     },
   )
 
-  let isMounted = false
-  let isDisposed = false
-
-  queueMicrotask(() => {
-    if (isDisposed) return
-    devtools.mount(ref)
-    isMounted = true
-  })
-
-  onCleanup(() => {
-    isDisposed = true
-    if (isMounted) {
-      devtools.unmount()
+  // devtools.mount() calls render() from solid-js/web, which calls flush().
+  // flush() is not reentrant inside onSettled, so defer the mount to a
+  // microtask. runWithOwner(null) escapes the owned scope because
+  // devtools.mount renders a nested Solid app (creating reactive primitives).
+  let mounted = false
+  let disposed = false
+  onSettled(() => {
+    queueMicrotask(() => {
+      if (disposed) return
+      runWithOwner(null, () => devtools.mount(ref))
+      mounted = true
+    })
+    return () => {
+      disposed = true
+      if (mounted) {
+        devtools.unmount()
+      }
     }
   })
 

package/src/devtoolsPanel.tsx

@@ -1,9 +1,9 @@
-import { createEffect, createMemo, onCleanup } from 'solid-js'
+import { createEffect, createMemo, onSettled, runWithOwner } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/solid-query'
-import type { JSX } from 'solid-js'
+import type { JSX } from '@solidjs/web'
 
 export interface DevtoolsPanelOptions {
   /**
@@ -34,7 +34,7 @@ export interface DevtoolsPanelOptions {
   /**
    * Callback function that is called when the devtools panel is closed
    */
-  onClose?: () => unknown
+  onClose?: () => void
   /**
    * Set this to true to hide disabled queries from the devtools panel.
    */
@@ -93,19 +93,23 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     },
   )
 
-  let isMounted = false
-  let isDisposed = false
-
-  queueMicrotask(() => {
-    if (isDisposed) return
-    devtools.mount(ref)
-    isMounted = true
-  })
-
-  onCleanup(() => {
-    isDisposed = true
-    if (isMounted) {
-      devtools.unmount()
+  // devtools.mount() calls render() from solid-js/web, which calls flush().
+  // flush() is not reentrant inside onSettled, so defer the mount to a
+  // microtask. runWithOwner(null) escapes the owned scope because
+  // devtools.mount renders a nested Solid app (creating reactive primitives).
+  let mounted = false
+  let disposed = false
+  onSettled(() => {
+    queueMicrotask(() => {
+      if (disposed) return
+      runWithOwner(null, () => devtools.mount(ref))
+      mounted = true
+    })
+    return () => {
+      disposed = true
+      if (mounted) {
+        devtools.unmount()
+      }
     }
   })