Improvements

examples/svelte/svelte-melt/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { QueryClient, useIsRestoring } from '@tanstack/svelte-query/dev'
+  import { QueryClient, useIsRestoring } from '@tanstack/svelte-query'
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
   import {
     persistQueryClient,

examples/svelte/svelte-melt/src/routes/+page.svelte

@@ -5,7 +5,7 @@
   import DerivedQuery from './derivedQuery.svelte'
   import Queries from './queries.svelte'
   import CQueries from './CreateQueries.svelte'
-  import { useIsRestoring } from '@tanstack/svelte-query/dev'
+  import { useIsRestoring } from '@tanstack/svelte-query'
   const isRes = useIsRestoring()
 
   $effect(() => {

examples/svelte/svelte-melt/src/routes/CreateQueries.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createQueries } from '@tanstack/svelte-query/dev'
+  import { createQueries } from '@tanstack/svelte-query'
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms))
   }

examples/svelte/svelte-melt/src/routes/cacheUpdate.svelte

@@ -4,7 +4,7 @@
     createQuery,
     hashKey,
     useQueryClient,
-  } from '@tanstack/svelte-query/dev'
+  } from '@tanstack/svelte-query'
   import { bookFilterStore } from './store.svelte'
   let a = { a: 1 }
   let b = ['cache update tester', bookFilterStore]

examples/svelte/svelte-melt/src/routes/derivedQuery.svelte

@@ -4,7 +4,7 @@
     useIsFetching,
     useIsMutating,
     useQueryClient,
-  } from '@tanstack/svelte-query/dev'
+  } from '@tanstack/svelte-query'
   import { bookFilterStore } from './store.svelte'
   import { useQuery } from './external'
   import { useSvelteExtensionQuery } from './external.svelte'

examples/svelte/svelte-melt/src/routes/external.svelte.ts

@@ -1,4 +1,4 @@
-import { createQuery } from '@tanstack/svelte-query/dev'
+import { createQuery } from '@tanstack/svelte-query'
 export function useSvelteExtensionQuery(props) {
   const enabled = $derived({
     queryKey: ['sv-externel', props],

examples/svelte/svelte-melt/src/routes/external.ts

@@ -1,4 +1,4 @@
-import { createQuery } from '@tanstack/svelte-query/dev'
+import { createQuery } from '@tanstack/svelte-query'
 
 export function useQuery(props) {
   return createQuery({

examples/svelte/svelte-melt/src/routes/paginate.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createQuery, useQueryClient } from '@tanstack/svelte-query/dev'
+  import { createQuery, useQueryClient } from '@tanstack/svelte-query'
   import { bookFilterStore } from './store.svelte'
   import { useQuery } from './external'
   import { useSvelteExtensionQuery } from './external.svelte'

examples/svelte/svelte-melt/src/routes/queries.svelte

@@ -4,7 +4,7 @@
     createQuery,
     createQueries,
     useQueryClient,
-  } from '@tanstack/svelte-query/dev'
+  } from '@tanstack/svelte-query'
 
   let { children } = $props()
   function isDerivedReactive() {

examples/svelte/svelte-melt/src/routes/test.svelte

@@ -4,7 +4,7 @@
     createQuery,
     createQueries,
     useQueryClient,
-  } from '@tanstack/svelte-query/dev'
+  } from '@tanstack/svelte-query'
 
   let { children } = $props()
   function isDerivedReactive() {

packages/svelte-query-devtools/src/Devtools.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { DEV } from 'esm-env'
+  import { BROWSER, DEV } from 'esm-env'
   import { onlineManager, useQueryClient } from '@tanstack/svelte-query'
-  import { TanstackQueryDevtools } from '@tanstack/query-devtools'
   import type { QueryClient } from '@tanstack/svelte-query'
   import type {
     DevToolsErrorType,
@@ -16,13 +15,13 @@
      */
     initialIsOpen?: boolean
     /**
-     * The position of the React Query logo to open and close the devtools panel.
+     * The position of the TanStack Query logo to open and close the devtools panel.
      * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
      * Defaults to 'bottom-right'.
      */
     buttonPosition?: DevtoolsButtonPosition
     /**
-     * The position of the React Query devtools panel.
+     * The position of the TanStack Query devtools panel.
      * 'top' | 'bottom' | 'left' | 'right'
      * Defaults to 'bottom'.
      */
@@ -39,61 +38,41 @@
      * 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
   }
-  let props: DevtoolsOptions = $props()
-  let ref: HTMLDivElement
-  const queryClient = useQueryClient()
-  const devtools = new TanstackQueryDevtools({
-    client: props.client ?? queryClient,
-    queryFlavor: 'Svelte Query',
-    version: '5',
-    onlineManager,
-    buttonPosition: props.buttonPosition,
-    position: props.position,
-    initialIsOpen: props.initialIsOpen,
-    errorTypes: props.errorTypes,
-    styleNonce: props.styleNonce,
-    // shadowDOMTarget: props.shadowDOMTarget,
-  })
 
-  if (!DEV) {
-    console.log('devtool disabled')
-    throw ''
-  }
-  $effect(() => {
-    devtools.setClient(props.client || queryClient)
-  })
+  let {
+    initialIsOpen = false,
+    buttonPosition = 'bottom-right',
+    position = 'bottom',
+    client = useQueryClient(),
+    errorTypes = [],
+    styleNonce = undefined,
+  }: DevtoolsOptions = $props()
 
-  $effect(() => {
-    const buttonPos = props.buttonPosition
-    if (buttonPos) {
-      devtools.setButtonPosition(buttonPos)
-    }
-  })
-
-  $effect(() => {
-    const pos = props.position
-    if (pos) {
-      devtools.setPosition(pos)
-    }
-  })
+  let ref: HTMLDivElement
 
-  $effect(() => {
-    devtools.setInitialIsOpen(props.initialIsOpen || false)
-  })
+  if (DEV && BROWSER) {
+    onMount(() => {
+      import('@tanstack/query-devtools').then((m) => {
+        const QueryDevtools = m.TanstackQueryDevtools
 
-  $effect(() => {
-    devtools.setErrorTypes(props.errorTypes || [])
-  })
+        const devtools = new QueryDevtools({
+          client,
+          queryFlavor: 'Svelte Query',
+          version: '5',
+          onlineManager,
+          buttonPosition,
+          position,
+          initialIsOpen,
+          errorTypes,
+          styleNonce,
+        })
 
-  onMount(() => {
-    devtools.mount(ref)
-    return () => devtools.unmount()
-  })
+        devtools.mount(ref)
+        return () => devtools.unmount()
+      })
+    })
+  }
 </script>
 
 <div class="tsqd-parent-container" bind:this={ref}></div>

packages/svelte-query/package.json

@@ -24,17 +24,15 @@
     "build": "svelte-package --input ./src --output ./dist"
   },
   "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
-    "./dev": {
-      "svelte": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
-    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,

packages/svelte-query/src/index.ts

@@ -19,6 +19,7 @@ export { createInfiniteQuery } from './createInfiniteQuery'
 export { infiniteQueryOptions } from './infiniteQueryOptions'
 export { createMutation } from './createMutation.svelte'
 export { useMutationState } from './useMutationState.svelte'
+export type { MutationStateOptions } from './useMutationState.svelte'
 export { useQueryClient } from './useQueryClient'
 export { useIsFetching } from './useIsFetching.svelte'
 export { useIsMutating } from './useIsMutating.svelte'

packages/svelte-query/src/types.ts

@@ -5,15 +5,17 @@ import type {
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
   MutateFunction,
+  Mutation,
+  MutationFilters,
   MutationObserverOptions,
   MutationObserverResult,
+  MutationState,
   QueryClient,
   QueryKey,
   QueryObserverOptions,
   QueryObserverResult,
 } from '@tanstack/query-core'
 
-export { type MutationStateOptions } from './useMutationState.svelte'
 export type FnOrVal<T> = (() => T) | T // can be a fn that returns reactive statement or $state or $derived deep states
 
 /** Options for createBaseQuery */
@@ -137,7 +139,18 @@ export type CreateMutationResult<
   TContext = unknown,
 > = CreateBaseMutationResult<TData, TError, TVariables, TContext>
 
-type Override<A, B> = { [K in keyof A]: K extends keyof B ? B[K] : A[K] }
+type Override<TTargetA, TTargetB> = {
+  [AKey in keyof TTargetA]: AKey extends keyof TTargetB
+    ? TTargetB[AKey]
+    : TTargetA[AKey]
+}
+
+export type MutationStateOptions<TResult = MutationState> = {
+  filters?: MutationFilters
+  select?: (
+    mutation: Mutation<unknown, DefaultError, unknown, unknown>,
+  ) => TResult
+}
 
 export type QueryClientProviderProps = {
   client: QueryClient

packages/svelte-query/src/useMutationState.svelte.ts

@@ -1,17 +1,11 @@
 import { replaceEqualDeep } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient'
 import type {
-  Mutation,
   MutationCache,
-  MutationFilters,
   MutationState,
   QueryClient,
 } from '@tanstack/query-core'
-
-export type MutationStateOptions<TResult = MutationState> = {
-  filters?: MutationFilters
-  select?: (mutation: Mutation) => TResult
-}
+import type { MutationStateOptions } from './types'
 
 function getResult<TResult = MutationState>(
   mutationCache: MutationCache,

packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte

@@ -23,10 +23,7 @@
   )
 
   $effect(() => {
-    states.value = [
-      ...untrack(() => states.value),
-      $state.snapshot(query) as unknown as QueryObserverResult,
-    ]
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 

packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte

@@ -23,10 +23,7 @@
   )
 
   $effect(() => {
-    states.value = [
-      ...untrack(() => states.value),
-      $state.snapshot(query) as unknown as QueryObserverResult,
-    ]
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 

packages/svelte-query/tests/createQuery/PlaceholderData.svelte

@@ -26,10 +26,7 @@
   const query = createQuery(options, queryClient)
 
   $effect(() => {
-    states.value = [
-      ...untrack(() => states.value),
-      $state.snapshot(query) as unknown as QueryObserverResult,
-    ]
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 

packages/svelte-query/tests/infiniteQueryOptions/infiniteQueryOptions.test-d.ts

@@ -45,12 +45,12 @@ describe('queryOptions', () => {
   })
 
   test('Should work when passed to fetchInfiniteQuery', async () => {
-    const options = {
+    const options = infiniteQueryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve('string'),
       getNextPageParam: () => 1,
       initialPageParam: 1,
-    }
+    })
 
     const data = await new QueryClient().fetchInfiniteQuery(options)
 

packages/svelte-query/tests/useMutationState/BaseExample.svelte

@@ -6,7 +6,7 @@
   import type {
     CreateMutationOptions,
     MutationStateOptions,
-  } from '../../src/types'
+  } from '../../src/index'
 
   let {
     successMutationOpts,

packages/svelte-query/tests/useMutationState/useMutationState.test.ts

@@ -3,7 +3,7 @@ import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import BaseExample from './BaseExample.svelte'
 
 describe('useMutationState', () => {
-  test('run few mutation functions and check from useMutationState ', async () => {
+  test('Run few mutation functions and check from useMutationState ', async () => {
     const successMutationFn = vi.fn()
 
     const errorMutationFn = vi.fn().mockImplementation(() => {
@@ -41,7 +41,7 @@ describe('useMutationState', () => {
     })
   })
 
-  test('can select specific type of mutation ( i.e: error only )', async () => {
+  test('Can select specific type of mutation ( i.e: error only )', async () => {
     const successMutationFn = vi.fn()
     const errorMutationFn = vi.fn().mockImplementation(() => {
       throw 'error'
@@ -80,7 +80,7 @@ describe('useMutationState', () => {
     })
   })
 
-  test('can select specific mutation using mutation key', async () => {
+  test('Can select specific mutation using mutation key', async () => {
     const successMutationFn = vi.fn()
     const errorMutationFn = vi.fn().mockImplementation(() => {
       throw 'error'