Merge branch 'alpha' into feature/suspense

# Conflicts:
#	pnpm-lock.yaml

Author: TkDodo

docs/svelte/reactivity.md

@@ -3,47 +3,47 @@ id: reactivity
 title: Reactivity
 ---
 
-Svelte uses a compiler to build your code which optimises rendering. By default, variables will run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/tutorial/writable-stores).
+Svelte uses a compiler to build your code which optimises rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use [stores](https://svelte.dev/docs/svelte-store).
 
-In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is edited by the input field. However, as the query is not told it should react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
+In the below example, the `refetchInterval` option is set from the variable `intervalMs`, which is bound to the input field. However, as the query is not able to react to changes in `intervalMs`, `refetchInterval` will not change when the input value changes.
 
 ```markdown
-<script>
+<script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  let intervalMs = 1000
-
   const endpoint = 'http://localhost:5173/api/data'
 
+  let intervalMs = 1000
+
   const query = createQuery({
     queryKey: ['refetch'],
     queryFn: async () => await fetch(endpoint).then((r) => r.json()),
     refetchInterval: intervalMs,
   })
 </script>
 
-<input bind:value={intervalMs} type="number" />
+<input type="number" bind:value={intervalMs} />
 ```
 
-To solve this, create a store for the options and use it as input for the query. Update the options store when the value changes and the query will react to the change.
+To solve this, we can convert `intervalMs` into a writable store. The query options can then be turned into a derived store, which will be passed into the function with true reactivity.
 
 ```markdown
-<script>
+<script lang="ts">
+  import { derived, writable } from 'svelte/store'
   import { createQuery } from '@tanstack/svelte-query'
 
   const endpoint = 'http://localhost:5173/api/data'
 
-  const queryOptions = writable({
-    queryKey: ['refetch'],
-    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
-    refetchInterval: 1000,
-  })
-  const query = createQuery(queryOptions)
+  const intervalMs = writable(1000)
 
-  function updateRefetchInterval(event) {
-    $queryOptions.refetchInterval = event.target.valueAsNumber
-  }
+  const query = createQuery(
+    derived(intervalMs, ($intervalMs) => ({
+      queryKey: ['refetch'],
+      queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+      refetchInterval: $intervalMs,
+    }))
+  )
 </script>
 
-<input type="number" on:input={updateRefetchInterval} />
+<input type="number" bind:value={$intervalMs} />
 ```

examples/svelte/auto-refetching/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/basic/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/load-more-infinite-scroll/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/optimistic-updates-typescript/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/playground/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/simple/package.json

@@ -13,10 +13,10 @@
     "@tanstack/svelte-query-devtools": "^5.0.0-alpha.39"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@tsconfig/svelte": "^4.0.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/ssr/package.json

@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"

examples/svelte/star-wars/package.json

@@ -17,8 +17,8 @@
     "@sveltejs/kit": "^1.19.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",

package.json

@@ -30,6 +30,7 @@
   },
   "namespace": "@tanstack",
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.4.2",
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
@@ -71,13 +72,14 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "git-log-parser": "^1.2.0",
+    "jsdom": "^22.0.0",
     "jsonfile": "^6.1.0",
     "luxon": "^3.3.0",
-    "nx": "^16.3.1",
+    "nx": "^16.5.0",
     "nx-cloud": "^16.0.5",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
-    "publint": "^0.1.12",
+    "prettier-plugin-svelte": "^2.10.1",
+    "publint": "^0.1.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
@@ -89,7 +91,7 @@
     "semver": "^7.5.1",
     "solid-js": "^1.6.13",
     "stream-to-array": "^2.3.0",
-    "tsup": "^7.0.0",
+    "tsup": "^7.1.0",
     "type-fest": "^3.11.0",
     "typescript": "^5.0.4",
     "vitest": "^0.27.1",

packages/eslint-plugin-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/eslint-plugin-query",
-  "version": "5.0.0-alpha.68",
+  "version": "5.0.0-alpha.74",
   "description": "ESLint plugin for TanStack Query",
   "author": "Eliya Cohen",
   "license": "MIT",
@@ -16,10 +16,14 @@
   "module": "build/lib/index.js",
   "exports": {
     ".": {
-      "types": "./build/lib/index.d.ts",
-      "import": "./build/lib/index.js",
-      "require": "./build/lib/index.cjs",
-      "default": "./build/lib/index.cjs"
+      "import": {
+        "types": "./build/lib/index.d.ts",
+        "default": "./build/lib/index.js"
+      },
+      "require": {
+        "types": "./build/lib/index.d.cts",
+        "default": "./build/lib/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
@@ -30,19 +34,17 @@
     "test:types": "tsc --noEmit",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
-    "test:build": "publint --strict",
-    "build": "pnpm build:tsup && pnpm build:types",
-    "build:tsup": "tsup",
-    "build:types": "tsc --emitDeclarationOnly"
+    "test:build": "publint --strict && attw --pack",
+    "build": "tsup"
   },
   "files": [
     "build",
     "src"
   ],
+  "dependencies": {
+    "@typescript-eslint/utils": "^5.54.0"
+  },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "@typescript-eslint/utils": "^5.54.0",
     "eslint": "^8.34.0"
   },
   "peerDependencies": {

packages/eslint-plugin-query/tsup.config.js

@@ -7,7 +7,7 @@ export default defineConfig({
   format: ['cjs', 'esm'],
   target: ['es2020', 'node16'],
   outDir: 'build/lib',
-  external: [/eslint/],
+  dts: true,
   sourcemap: true,
   clean: true,
 })

packages/query-devtools/rollup.config.js

@@ -8,10 +8,11 @@ export function createQueryDevtoolsConfig() {
     withSolid({
       input: `./src/index.tsx`,
       targets: ['esm', 'cjs'],
-      external: [],
     })
   )
 
+  solidRollupOptions.external = []
+
   const outputs = !solidRollupOptions.output
     ? []
     : Array.isArray(solidRollupOptions.output)

packages/solid-query/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "5.0.0-alpha.70",
+  "version": "5.0.0-alpha.75",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",

packages/solid-query/rollup.config.js

@@ -8,7 +8,6 @@ export function createSolidQueryConfig() {
     withSolid({
       input: `./src/index.ts`,
       targets: ['esm', 'cjs'],
-      external: ['@tanstack/query-core'],
     })
   )
 

packages/solid-query/src/QueryClientProvider.tsx

@@ -7,11 +7,10 @@ export const QueryClientContext = createContext<QueryClient | undefined>(
 )
 
 export const useQueryClient = (queryClient?: QueryClient) => {
-  const client = useContext(QueryClientContext)
-
   if (queryClient) {
     return queryClient
   }
+  const client = useContext(QueryClientContext)
 
   if (!client) {
     throw new Error('No QueryClient set, use QueryClientProvider to set one')

packages/solid-query/src/__tests__/QueryClientProvider.test.tsx

@@ -161,4 +161,21 @@ describe('QueryClientProvider', () => {
       consoleMock.mockRestore()
     })
   })
+
+  it('should not throw an error if user provides custom query client', () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
+    function Page() {
+      const client = createQueryClient()
+      useQueryClient(client)
+      return null
+    }
+
+    render(() => <Page />)
+    expect(consoleMock).not.toHaveBeenCalled()
+
+    consoleMock.mockRestore()
+  })
 })

packages/svelte-query-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-query-devtools",
-  "version": "5.0.0-alpha.72",
+  "version": "5.0.0-alpha.78",
   "description": "Developer tools to interact with and visualize the TanStack/svelte-query cache",
   "author": "Lachlan Collins",
   "license": "MIT",
@@ -39,18 +39,18 @@
     "esm-env": "^1.0.0"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
+    "@sveltejs/package": "^2.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@tanstack/svelte-query": "workspace:*",
-    "eslint-plugin-svelte": "^2.29.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "eslint-plugin-svelte": "^2.32.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
   },
   "peerDependencies": {
     "@tanstack/svelte-query": "workspace:*",
-    "svelte": "^3.54.0"
+    "svelte": ">=3 <5"
   }
 }

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

@@ -20,21 +20,23 @@
   let devtools: TanstackQueryDevtools | undefined
 
   if (DEV && BROWSER) {
-    onMount(async () => {
-      const QueryDevtools = (await import('@tanstack/query-devtools'))
-        .TanstackQueryDevtools
-      devtools = new QueryDevtools({
-        client,
-        queryFlavor: 'Svelte Query',
-        version: '5',
-        onlineManager,
-        buttonPosition,
-        position,
-        initialIsOpen,
-        errorTypes,
-      })
+    onMount(() => {
+      import('@tanstack/query-devtools').then((m) => {
+        const QueryDevtools = m.TanstackQueryDevtools
+
+        devtools = new QueryDevtools({
+          client,
+          queryFlavor: 'Svelte Query',
+          version: '5',
+          onlineManager,
+          buttonPosition,
+          position,
+          initialIsOpen,
+          errorTypes,
+        })
 
-      devtools.mount(ref)
+        devtools.mount(ref)
+      })
 
       return () => {
         devtools?.unmount()