Skip to content

Commit 6781486

Browse files
committed
docs: rename /docs/functions to /docs/imports, include svelte/reactivity, tweak various things
1 parent 1809747 commit 6781486

File tree

2 files changed

+65
-43
lines changed

2 files changed

+65
-43
lines changed

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -93,25 +93,6 @@ This can improve performance with large arrays and objects that you weren't plan
9393

9494
> 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.
9595
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-
11596
## `$state.snapshot`
11697

11798
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:

sites/svelte-5-preview/src/routes/docs/content/01-api/05-functions.md

Lines changed: 65 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,12 @@
11
---
2-
title: Functions
2+
title: Imports
33
---
44

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`.
66

7-
## `untrack`
7+
## `svelte`
88

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`
2710

2811
Instantiates a component and mounts it to the given target:
2912

@@ -38,9 +21,9 @@ const app = mount(App, {
3821
});
3922
```
4023

41-
## `hydrate`
24+
### `hydrate`
4225

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:
4427

4528
```js
4629
// @errors: 2322
@@ -53,7 +36,65 @@ const app = hydrate(App, {
5336
});
5437
```
5538

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+
import App from './App.svelte';
47+
48+
const app = 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`
5798

5899
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:
59100

0 commit comments

Comments
 (0)