@tanstack/solid-query-devtools 5.91.3 → 6.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "5.91.3",
+  "version": "6.0.0-alpha.0",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -47,30 +47,33 @@
     "@tanstack/query-devtools": "5.93.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.2",
+    "babel-preset-solid": "2.0.0-beta.2",
     "npm-run-all2": "^5.0.0",
-    "solid-js": "^1.9.7",
+    "solid-js": "2.0.0-beta.2",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.6",
-    "@tanstack/solid-query": "5.90.23"
+    "vite-plugin-solid": "3.0.0-next.2",
+    "@tanstack/solid-query": "6.0.0-alpha.0"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.0",
-    "@tanstack/solid-query": "^5.90.23"
+    "solid-js": ">=2.0.0-beta.0 <3.0.0",
+    "@tanstack/solid-query": "^6.0.0-alpha.0"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",
     "compile": "tsc --build",
     "test:eslint": "eslint --concurrency=auto ./src",
     "test:types": "npm run compile && npm-run-all --serial test:types:*",
-    "test:types:ts50": "node ../../node_modules/typescript50/lib/tsc.js --build",
-    "test:types:ts51": "node ../../node_modules/typescript51/lib/tsc.js --build",
-    "test:types:ts52": "node ../../node_modules/typescript52/lib/tsc.js --build",
-    "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js --build",
     "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js --build",
     "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js --build",
     "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --build",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --build",
+    "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --build",
+    "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --build",
+    "test:types:ts60": "node ../../node_modules/typescript60/lib/tsc.js --build",
     "test:build": "publint --strict && attw --pack",
     "test:lib": "vitest --retry=3",
     "test:lib:dev": "pnpm run test:lib --watch",

package/src/clientOnly.tsx

@@ -1,12 +1,12 @@
 import {
   createMemo,
   createSignal,
-  onMount,
+  omit,
+  onSettled,
   sharedConfig,
-  splitProps,
   untrack,
 } from 'solid-js'
-import { isServer } from 'solid-js/web'
+import { isServer } from '@solidjs/web'
 import type { Component, ComponentProps, JSX } from 'solid-js'
 
 /*
@@ -28,10 +28,12 @@ export default function clientOnly<T extends Component<any>>(
   return (props: ComponentProps<T>) => {
     let Comp: T | undefined
     let m: boolean
-    const [, rest] = splitProps(props, ['fallback'])
-    if ((Comp = comp()) && !sharedConfig.context) return Comp(rest)
-    const [mounted, setMounted] = createSignal(!sharedConfig.context)
-    onMount(() => setMounted(true))
+    const rest = omit(props, 'fallback')
+    if ((Comp = comp()) && !sharedConfig.hydrating) return Comp(rest)
+    const [mounted, setMounted] = createSignal(!sharedConfig.hydrating)
+    onSettled(() => {
+      setMounted(true)
+    })
     return createMemo(
       () => (
         (Comp = comp()),

package/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { createEffect, createMemo, onCleanup, onSettled } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type {
@@ -72,37 +72,53 @@ export default function SolidQueryDevtools(props: DevtoolsOptions) {
     theme: props.theme,
   })
 
-  createEffect(() => {
-    devtools.setClient(client())
-  })
+  createEffect(
+    () => client(),
+    (c) => {
+      devtools.setClient(c)
+    },
+  )
 
-  createEffect(() => {
-    const buttonPos = props.buttonPosition
-    if (buttonPos) {
-      devtools.setButtonPosition(buttonPos)
-    }
-  })
+  createEffect(
+    () => props.buttonPosition,
+    (buttonPos) => {
+      if (buttonPos) {
+        devtools.setButtonPosition(buttonPos)
+      }
+    },
+  )
 
-  createEffect(() => {
-    const pos = props.position
-    if (pos) {
-      devtools.setPosition(pos)
-    }
-  })
+  createEffect(
+    () => props.position,
+    (pos) => {
+      if (pos) {
+        devtools.setPosition(pos)
+      }
+    },
+  )
 
-  createEffect(() => {
-    devtools.setInitialIsOpen(props.initialIsOpen || false)
-  })
+  createEffect(
+    () => props.initialIsOpen,
+    (initialIsOpen) => {
+      devtools.setInitialIsOpen(initialIsOpen || false)
+    },
+  )
 
-  createEffect(() => {
-    devtools.setErrorTypes(props.errorTypes || [])
-  })
+  createEffect(
+    () => props.errorTypes,
+    (errorTypes) => {
+      devtools.setErrorTypes(errorTypes || [])
+    },
+  )
 
-  createEffect(() => {
-    devtools.setTheme(props.theme || 'system')
-  })
+  createEffect(
+    () => props.theme,
+    (theme) => {
+      devtools.setTheme(theme || 'system')
+    },
+  )
 
-  onMount(() => {
+  onSettled(() => {
     devtools.mount(ref)
     onCleanup(() => devtools.unmount())
   })

package/src/devtoolsPanel.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { createEffect, createMemo, onCleanup, onSettled } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
@@ -66,22 +66,34 @@ export default function SolidQueryDevtoolsPanel(props: DevtoolsPanelOptions) {
     hideDisabledQueries,
     theme: props.theme,
   })
-  createEffect(() => {
-    devtools.setClient(client())
-  })
-  createEffect(() => {
-    devtools.setOnClose(props.onClose ?? (() => {}))
-  })
+  createEffect(
+    () => client(),
+    (c) => {
+      devtools.setClient(c)
+    },
+  )
+  createEffect(
+    () => props.onClose,
+    (onClose) => {
+      devtools.setOnClose(onClose ?? (() => {}))
+    },
+  )
 
-  createEffect(() => {
-    devtools.setErrorTypes(props.errorTypes || [])
-  })
+  createEffect(
+    () => props.errorTypes,
+    (errorTypes2) => {
+      devtools.setErrorTypes(errorTypes2 || [])
+    },
+  )
 
-  createEffect(() => {
-    devtools.setTheme(props.theme || 'system')
-  })
+  createEffect(
+    () => props.theme,
+    (theme) => {
+      devtools.setTheme(theme || 'system')
+    },
+  )
 
-  onMount(() => {
+  onSettled(() => {
     devtools.mount(ref)
     onCleanup(() => devtools.unmount())
   })

package/src/index.tsx

@@ -1,4 +1,4 @@
-import { isDev } from 'solid-js/web'
+import { isDev } from '@solidjs/web'
 import clientOnly from './clientOnly'
 import type SolidQueryDevtoolsComp from './devtools'
 import type SolidQueryDevtoolsCompPanel from './devtoolsPanel'