You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
-19Lines changed: 0 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -93,25 +93,6 @@ This can improve performance with large arrays and objects that you weren't plan
93
93
94
94
> Objects and arrays passed to `$state.frozen` will be shallowly frozen using `Object.freeze()`. If you don't want this, pass in a clone of the object or array instead.
95
95
96
-
### Reactive Map, Set and Date
97
-
98
-
Svelte provides reactive `Map`, `Set` and `Date` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts.
99
-
100
-
```svelte
101
-
<script>
102
-
import { Map } from 'svelte/reactivity';
103
-
104
-
const map = new Map();
105
-
map.set('message', 'hello');
106
-
107
-
function update_message() {
108
-
map.set('message', 'goodbye');
109
-
}
110
-
</script>
111
-
112
-
<p>{map.get('message')}</p>
113
-
```
114
-
115
96
## `$state.snapshot`
116
97
117
98
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
Copy file name to clipboardExpand all lines: sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md
+65-24Lines changed: 65 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -1,29 +1,12 @@
1
1
---
2
-
title: Functions
2
+
title: Imports
3
3
---
4
4
5
-
As well as runes, Svelte 5 will introduce a couple of new functions, in addition to existing functions like `getContext`, `setContext` and `tick`. These are introduced as functions rather than runes because they are used directly and the compiler does not need to touch them to make them function as it does with runes. However, these functions may still use Svelte internals.
5
+
As well as runes, Svelte 5 introduces a handful of new things you can import, alongside existing ones like `getContext`, `setContext` and `tick`.
6
6
7
-
## `untrack`
7
+
## `svelte`
8
8
9
-
To prevent something from being treated as an `$effect`/`$derived` dependency, use `untrack`:
10
-
11
-
```svelte
12
-
<script>
13
-
import { untrack } from 'svelte';
14
-
15
-
let { a, b } = $props();
16
-
17
-
$effect(() => {
18
-
// this will run when `a` changes,
19
-
// but not when `b` changes
20
-
console.log(a);
21
-
console.log(untrack(() => b));
22
-
});
23
-
</script>
24
-
```
25
-
26
-
## `mount`
9
+
### `mount`
27
10
28
11
Instantiates a component and mounts it to the given target:
29
12
@@ -38,9 +21,9 @@ const app = mount(App, {
38
21
});
39
22
```
40
23
41
-
## `hydrate`
24
+
###`hydrate`
42
25
43
-
Like `mount`, but will pick up any HTML rendered by Svelte's SSR output (from the `render` function) inside the target and make it interactive:
26
+
Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#svelte-server-render) function) inside the target and make it interactive:
44
27
45
28
```js
46
29
// @errors: 2322
@@ -53,7 +36,65 @@ const app = hydrate(App, {
53
36
});
54
37
```
55
38
56
-
## `render`
39
+
### `unmount`
40
+
41
+
Unmounts a component created with [`mount`](#svelte-mount) or [`hydrate`](#svelte-hydrate):
42
+
43
+
```js
44
+
// @errors: 1109
45
+
import { mount, unmount } from'svelte';
46
+
importAppfrom'./App.svelte';
47
+
48
+
constapp=mount(App, {...});
49
+
50
+
// later
51
+
unmount(app);
52
+
```
53
+
54
+
### `untrack`
55
+
56
+
To prevent something from being treated as an `$effect`/`$derived` dependency, use `untrack`:
57
+
58
+
```svelte
59
+
<script>
60
+
import { untrack } from 'svelte';
61
+
62
+
let { a, b } = $props();
63
+
64
+
$effect(() => {
65
+
// this will run when `a` changes,
66
+
// but not when `b` changes
67
+
console.log(a);
68
+
console.log(untrack(() => b));
69
+
});
70
+
</script>
71
+
```
72
+
73
+
## `svelte/reactivity`
74
+
75
+
Svelte provides reactive `Map`, `Set`, `Date` and `URL` classes. These can be imported from `svelte/reactivity` and used just like their native counterparts. [Demo:](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32QzWrDMBCEX2Wri1uo7bvrBHrvqdBTUogqryuBfhZp5SQYv3slSsmpOc7uN8zsrmI2FpMYDqvw0qEYxCuReBZ8pSrSgpax6BRyVHUyJhUN8f7oj2wchciwwsf7G2wwx-Cg-bX0EaVisxi-Ni-FLbQKPjHkaGEHHs_V9NhoZkpD3-NFOrLYqeB6kqybp-Ia-1uYHx_aFpSW_hsTcADWmLDrOmjbsh-Np8zwZfw0LNJm3K0lqaMYOKhgt_8RHRLX0-8gtdAfUiAdb4XOxlrINElGOOmI8wmkn2AxCmHBmOTdetWw7ct7XZjMbHASA8eM2-f2A-JarmyZAQAA)
76
+
77
+
```svelte
78
+
<script>
79
+
import { URL } from 'svelte/reactivity';
80
+
81
+
const url = new URL('https://example.com/path');
82
+
</script>
83
+
84
+
<!-- changes to these... -->
85
+
<input bind:value={url.protocol} />
86
+
<input bind:value={url.hostname} />
87
+
<input bind:value={url.pathname} />
88
+
89
+
<hr />
90
+
91
+
<!-- will update `href` and vice versa -->
92
+
<input bind:value={url.href} />
93
+
```
94
+
95
+
## `svelte/server`
96
+
97
+
### `render`
57
98
58
99
Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `html` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
0 commit comments