Skip to content

Commit 5bf15c2

Browse files
TkDodoTkDodo
committed
Merge branch 'alpha' into feature/suspense
# Conflicts: # pnpm-lock.yaml
2 parents 9d67d8b + e310db4 commit 5bf15c2

35 files changed

Lines changed: 777 additions & 514 deletions

‎docs/svelte/reactivity.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,47 @@ id: reactivity
33
title: Reactivity
44
---
55

6-
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).
6+
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).
77

8-
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.
8+
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.
99

1010
```markdown
11-
<script>
11+
<script lang="ts">
1212
import { createQuery } from '@tanstack/svelte-query'
1313

14-
let intervalMs = 1000
15-
1614
const endpoint = 'http://localhost:5173/api/data'
1715

16+
let intervalMs = 1000
17+
1818
const query = createQuery({
1919
queryKey: ['refetch'],
2020
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
2121
refetchInterval: intervalMs,
2222
})
2323
</script>
2424

25-
<input bind:value={intervalMs} type="number" />
25+
<input type="number" bind:value={intervalMs} />
2626
```
2727

28-
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.
28+
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.
2929

3030
```markdown
31-
<script>
31+
<script lang="ts">
32+
import { derived, writable } from 'svelte/store'
3233
import { createQuery } from '@tanstack/svelte-query'
3334

3435
const endpoint = 'http://localhost:5173/api/data'
3536

36-
const queryOptions = writable({
37-
queryKey: ['refetch'],
38-
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
39-
refetchInterval: 1000,
40-
})
41-
const query = createQuery(queryOptions)
37+
const intervalMs = writable(1000)
4238

43-
function updateRefetchInterval(event) {
44-
$queryOptions.refetchInterval = event.target.valueAsNumber
45-
}
39+
const query = createQuery(
40+
derived(intervalMs, ($intervalMs) => ({
41+
queryKey: ['refetch'],
42+
queryFn: async () => await fetch(endpoint).then((r) => r.json()),
43+
refetchInterval: $intervalMs,
44+
}))
45+
)
4646
</script>
4747

48-
<input type="number" on:input={updateRefetchInterval} />
48+
<input type="number" bind:value={$intervalMs} />
4949
```

‎examples/svelte/auto-refetching/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^2.1.0",
1717
"@sveltejs/kit": "^1.19.0",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

‎examples/svelte/basic/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^2.1.0",
1717
"@sveltejs/kit": "^1.19.0",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^2.1.0",
1717
"@sveltejs/kit": "^1.19.0",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^2.1.0",
1717
"@sveltejs/kit": "^1.19.0",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

‎examples/svelte/playground/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^2.1.0",
1717
"@sveltejs/kit": "^1.19.0",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

‎examples/svelte/simple/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
"@tanstack/svelte-query-devtools": "^5.0.0-alpha.39"
1414
},
1515
"devDependencies": {
16-
"@sveltejs/vite-plugin-svelte": "^2.4.0",
16+
"@sveltejs/vite-plugin-svelte": "^2.4.2",
1717
"@tsconfig/svelte": "^4.0.1",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

‎examples/svelte/ssr/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"devDependencies": {
1616
"@sveltejs/adapter-auto": "^2.1.0",
1717
"@sveltejs/kit": "^1.19.0",
18-
"svelte": "^3.54.0",
19-
"svelte-check": "^3.4.3",
18+
"svelte": "^4.0.0",
19+
"svelte-check": "^3.4.4",
2020
"tslib": "^2.5.2",
2121
"typescript": "^5.0.4",
2222
"vite": "^4.2.0"

‎examples/svelte/star-wars/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"@sveltejs/kit": "^1.19.0",
1818
"autoprefixer": "^10.4.14",
1919
"postcss": "^8.4.23",
20-
"svelte": "^3.54.0",
21-
"svelte-check": "^3.4.3",
20+
"svelte": "^4.0.0",
21+
"svelte-check": "^3.4.4",
2222
"tailwindcss": "^3.3.2",
2323
"tslib": "^2.5.2",
2424
"typescript": "^5.0.4",

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
},
3131
"namespace": "@tanstack",
3232
"devDependencies": {
33+
"@arethetypeswrong/cli": "^0.4.2",
3334
"@babel/core": "^7.21.8",
3435
"@babel/preset-env": "^7.21.5",
3536
"@babel/preset-react": "^7.18.6",
@@ -71,13 +72,14 @@
7172
"eslint-plugin-react": "^7.32.2",
7273
"eslint-plugin-react-hooks": "^4.6.0",
7374
"git-log-parser": "^1.2.0",
75+
"jsdom": "^22.0.0",
7476
"jsonfile": "^6.1.0",
7577
"luxon": "^3.3.0",
76-
"nx": "^16.3.1",
78+
"nx": "^16.5.0",
7779
"nx-cloud": "^16.0.5",
7880
"prettier": "^2.8.8",
79-
"prettier-plugin-svelte": "^2.10.0",
80-
"publint": "^0.1.12",
81+
"prettier-plugin-svelte": "^2.10.1",
82+
"publint": "^0.1.15",
8183
"react": "^18.2.0",
8284
"react-dom": "^18.2.0",
8385
"rimraf": "^5.0.1",
@@ -89,7 +91,7 @@
8991
"semver": "^7.5.1",
9092
"solid-js": "^1.6.13",
9193
"stream-to-array": "^2.3.0",
92-
"tsup": "^7.0.0",
94+
"tsup": "^7.1.0",
9395
"type-fest": "^3.11.0",
9496
"typescript": "^5.0.4",
9597
"vitest": "^0.27.1",

0 commit comments

Comments
 (0)