@tanstack/solid-query-devtools 5.94.5 → 6.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query-devtools",
-  "version": "5.94.5",
+  "version": "6.0.0-alpha.1",
   "description": "Developer tools to interact with and visualize the TanStack/solid-query Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -44,19 +44,23 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.94.5"
+    "@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.4",
+    "babel-preset-solid": "2.0.0-beta.4",
     "npm-run-all2": "^5.0.0",
-    "solid-js": "^1.9.7",
+    "solid-js": "2.0.0-beta.4",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.11.6",
-    "@tanstack/solid-query": "5.94.5"
+    "vite-plugin-solid": "3.0.0-next.2",
+    "@tanstack/solid-query": "6.0.0-alpha.1"
   },
   "peerDependencies": {
-    "solid-js": "^1.6.0",
-    "@tanstack/solid-query": "^5.94.5"
+    "solid-js": ">=2.0.0-beta.0 <3.0.0",
+    "@tanstack/solid-query": "^6.0.0-alpha.1"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

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 } from 'solid-js'
 import { onlineManager, useQueryClient } from '@tanstack/solid-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
 import type {
@@ -72,39 +72,66 @@ 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')
+    },
+  )
+
+  let isMounted = false
+  let isDisposed = false
 
-  onMount(() => {
+  queueMicrotask(() => {
+    if (isDisposed) return
     devtools.mount(ref)
-    onCleanup(() => devtools.unmount())
+    isMounted = true
+  })
+
+  onCleanup(() => {
+    isDisposed = true
+    if (isMounted) {
+      devtools.unmount()
+    }
   })
 
   return <div class="tsqd-parent-container" ref={ref}></div>

package/src/devtoolsPanel.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, onCleanup, onMount } from 'solid-js'
+import { createEffect, createMemo, onCleanup } 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,24 +66,47 @@ 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')
+    },
+  )
+
+  let isMounted = false
+  let isDisposed = false
 
-  onMount(() => {
+  queueMicrotask(() => {
+    if (isDisposed) return
     devtools.mount(ref)
-    onCleanup(() => devtools.unmount())
+    isMounted = true
+  })
+
+  onCleanup(() => {
+    isDisposed = true
+    if (isMounted) {
+      devtools.unmount()
+    }
   })
 
   return (

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'

package/build/devtools/32HRKFKI.jsx

@@ -1,55 +0,0 @@
-// src/devtools.tsx
-import { createEffect, createMemo, onCleanup, onMount } from "solid-js";
-import { onlineManager, useQueryClient } from "@tanstack/solid-query";
-import { TanstackQueryDevtools } from "@tanstack/query-devtools";
-function SolidQueryDevtools(props) {
-  const queryClient = useQueryClient(props.client);
-  const client = createMemo(() => queryClient);
-  let ref;
-  const devtools = new TanstackQueryDevtools({
-    client: client(),
-    queryFlavor: "Solid Query",
-    version: "5",
-    onlineManager,
-    buttonPosition: props.buttonPosition,
-    position: props.position,
-    initialIsOpen: props.initialIsOpen,
-    errorTypes: props.errorTypes,
-    styleNonce: props.styleNonce,
-    shadowDOMTarget: props.shadowDOMTarget,
-    hideDisabledQueries: props.hideDisabledQueries,
-    theme: props.theme
-  });
-  createEffect(() => {
-    devtools.setClient(client());
-  });
-  createEffect(() => {
-    const buttonPos = props.buttonPosition;
-    if (buttonPos) {
-      devtools.setButtonPosition(buttonPos);
-    }
-  });
-  createEffect(() => {
-    const pos = props.position;
-    if (pos) {
-      devtools.setPosition(pos);
-    }
-  });
-  createEffect(() => {
-    devtools.setInitialIsOpen(props.initialIsOpen || false);
-  });
-  createEffect(() => {
-    devtools.setErrorTypes(props.errorTypes || []);
-  });
-  createEffect(() => {
-    devtools.setTheme(props.theme || "system");
-  });
-  onMount(() => {
-    devtools.mount(ref);
-    onCleanup(() => devtools.unmount());
-  });
-  return <div class="tsqd-parent-container" ref={ref} />;
-}
-export {
-  SolidQueryDevtools as default
-};