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: documentation/docs/01-introduction/03-reactivity-fundamentals.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ Runes are function-like symbols that provide instructions to the Svelte compiler
12
12
13
13
The following sections introduce the most important runes for declare state, derived state and side effects at a high level. For more details refer to the later sections on [state](state) and [side effects](side-effects).
14
14
15
-
## `$state`
15
+
## $state
16
16
17
17
Reactive state is declared with the `$state` rune:
18
18
@@ -53,7 +53,7 @@ class Todo {
53
53
> </button>
54
54
> ```
55
55
56
-
## `$derived`
56
+
## $derived
57
57
58
58
Derived state is declared with the `$derived` rune:
59
59
@@ -92,7 +92,7 @@ As with `$state`, you can mark class fields as `$derived`.
92
92
>
93
93
> This only worked at the top level of a component.
94
94
95
-
## `$effect`
95
+
## $effect
96
96
97
97
To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
Copy file name to clipboardExpand all lines: documentation/docs/02-template-syntax/08-bindings.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -74,7 +74,7 @@ If you're using `bind:` directives together with `on` event attributes, the bind
74
74
75
75
Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
76
76
77
-
## Binding `<select>` value
77
+
## Binding <select> value
78
78
79
79
A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
@@ -112,7 +112,7 @@ All except `scrollX` and `scrollY` are readonly.
112
112
113
113
> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
114
114
115
-
## `<svelte:document>`
115
+
## <svelte:document>
116
116
117
117
```svelte
118
118
<svelte:document onevent={handler} />
@@ -139,7 +139,7 @@ You can also bind to the following properties:
139
139
140
140
All are readonly.
141
141
142
-
## `<svelte:body>`
142
+
## <svelte:body>
143
143
144
144
```svelte
145
145
<svelte:body onevent={handler} />
@@ -153,7 +153,7 @@ As with `<svelte:window>` and `<svelte:document>`, this element may only appear
Copy file name to clipboardExpand all lines: documentation/docs/03-runes/01-state.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity i
6
6
7
7
Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application.
8
8
9
-
## `$state`
9
+
## $state
10
10
11
11
The `$state` rune is the at the heart of the runes API. It is used to declare reactive state:
12
12
@@ -62,7 +62,7 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
62
62
63
63
> Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
64
64
65
-
## `$state.raw`
65
+
## $state.raw
66
66
67
67
State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
68
68
@@ -84,7 +84,7 @@ person = {
84
84
85
85
This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
86
86
87
-
## `$state.snapshot`
87
+
## $state.snapshot
88
88
89
89
To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
90
90
@@ -101,7 +101,7 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
101
101
102
102
This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
103
103
104
-
## `$derived`
104
+
## $derived
105
105
106
106
Derived state is declared with the `$derived` rune:
107
107
@@ -122,7 +122,7 @@ The expression inside `$derived(...)` should be free of side-effects. Svelte wil
122
122
123
123
As with `$state`, you can mark class fields as `$derived`.
124
124
125
-
## `$derived.by`
125
+
## $derived.by
126
126
127
127
Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use `$derived.by` which accepts a function as its argument.
Copy file name to clipboardExpand all lines: documentation/docs/03-runes/02-side-effects.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,7 @@ title: Side effects
7
7
8
8
Side effects play a crucial role in applications. They are triggered by state changes and can then interact with external systems, like logging something, setting up a server connection or synchronize with a third-party library that has no knowledge of Svelte's reactivity model.
9
9
10
-
## `$effect` fundamentals
10
+
## $effect fundamentals
11
11
12
12
To run _side-effects_ when the component is mounted to the DOM, and when values change, we can use the `$effect` rune ([demo](/#H4sIAAAAAAAAE31T24rbMBD9lUG7kAQ2sbdlX7xOYNk_aB_rQhRpbAsU2UiTW0P-vbrYubSlYGzmzMzROTPymdVKo2PFjzMzfIusYB99z14YnfoQuD1qQh-7bmdFQEonrOppVZmKNBI49QthCc-OOOH0LZ-9jxnR6c7eUpOnuv6KeT5JFdcqbvbcBcgDz1jXKGg6ncFyBedYR6IzLrAZwiN5vtSxaJA-EzadfJEjKw11C6GR22-BLH8B_wxdByWpvUYtqqal2XB6RVkG1CoHB6U1WJzbnYFDiwb3aGEdDa3Bm1oH12sQLTcNPp7r56m_00mHocSG97_zd7ICUXonA5fwKbPbkE2ZtMJGGVkEdctzQi4QzSwr9prnFYNk5hpmqVuqPQjNnfOJoMF22lUsrq_UfIN6lfSVyvQ7grB3X2mjMZYO3XO9w-U5iLx42qg29md3BP_ni5P4gy9ikTBlHxjLzAtPDlyYZmRdjAbGq7HprEQ7p64v4LU_guu0kvAkhBim3nMplWl8FreQD-CW20aZR0wq12t-KqDWeBywhvexKC3memmDwlHAv9q4Vo2ZK8KtK0CgX7u9J8wXbzdKv-nRnfF_2baTqlYoWUF2h5efl9-n0O6koAMAAA==)):
13
13
@@ -63,7 +63,7 @@ You can return a function from `$effect`, which will run immediately before the
`$effect` automatically picks up any reactivy values (`$state`, `$derived`, `$props`) that are _synchronously_ read inside its function body and registers them as dependencies. When those dependencies change, the `$effect` schedules a rerun.
69
69
@@ -139,7 +139,7 @@ $effect(() => {
139
139
});
140
140
```
141
141
142
-
## When not to use `$effect`
142
+
## When not to use $effect
143
143
144
144
In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
145
145
@@ -254,7 +254,7 @@ If you need to use bindings, for whatever reason (for example when you want some
254
254
255
255
If you absolutely have to update `$state` within an effect and run into an infinite loop because you read and write to the same `$state`, use [untrack](svelte#untrack).
256
256
257
-
## `$effect.pre`
257
+
## $effect.pre
258
258
259
259
In rare cases, you may need to run code _before_ the DOM updates. For this we can use the `$effect.pre` rune:
260
260
@@ -291,7 +291,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
291
291
292
292
Apart from the timing, `$effect.pre` works exactly like [`$effect`](#$effect) — refer to its documentation for more info.
293
293
294
-
## `$effect.tracking`
294
+
## $effect.tracking
295
295
296
296
The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/#H4sIAAAAAAAAE3XP0QrCMAwF0F-JRXAD595rLfgdzodRUyl0bVgzQcb-3VYFQfExl5tDMgvrPCYhT7MI_YBCiiOR2Aq-UxnSDT1jnlOcRlMSlczoiHUXOjYxpOhx5-O12rgAJg4UAwaGhDyR3Gxhjdai4V1v2N2wqus9tC3Y3ifMQjbehaqq4aBhLtEv_Or893icCsdLve-Caj8nBkU67zMO5HtGCfM3sKiWNKhV0zwVaBqd3x3ixVmHFyFLuJyXB-moOe8pAQAA)):
297
297
@@ -355,7 +355,7 @@ export default function readable<T>(
355
355
}
356
356
```
357
357
358
-
## `$effect.root`
358
+
## $effect.root
359
359
360
360
The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
361
361
nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.
Copy file name to clipboardExpand all lines: documentation/docs/04-runtime/01-stores.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ Stores are still a good solution when you have complex asynchronous data streams
44
44
45
45
The `svelte/store` module contains a minimal store implementation which fulfil the store contract. It provides methods for creating stores that you can update from the outside, stores you can only update from the inside, and for combining and deriving stores.
46
46
47
-
### `writable`
47
+
### writable
48
48
49
49
Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
50
50
@@ -89,7 +89,7 @@ unsubscribe(); // logs 'no more subscribers'
89
89
90
90
Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
91
91
92
-
### `readable`
92
+
### readable
93
93
94
94
Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
Copy file name to clipboardExpand all lines: documentation/docs/04-runtime/03-lifecycle-hooks.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ title: Lifecycle hooks
9
9
10
10
In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between - when certain state is updated - is not related to the component as a whole, only the parts that need to react to the state change are notified. This is because under the hood the smallest unit of change is actually not a component, it's the (render) effects that the component sets up upon component initialization. Consequently, there's no such thing as a "before update"/"after update" hook.
11
11
12
-
## `onMount`
12
+
## onMount
13
13
14
14
The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module).
15
15
@@ -43,7 +43,7 @@ If a function is returned from `onMount`, it will be called when the component i
43
43
44
44
> This behaviour will only work when the function passed to `onMount`_synchronously_ returns a value. `async` functions always return a `Promise`, and as such cannot _synchronously_ return a function.
45
45
46
-
## `onDestroy`
46
+
## onDestroy
47
47
48
48
> EXPORT_SNIPPET: svelte#onDestroy
49
49
@@ -61,7 +61,7 @@ Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the onl
61
61
</script>
62
62
```
63
63
64
-
## `tick`
64
+
## tick
65
65
66
66
While there's no "after update" hook, you can use `tick` to ensure that the UI is updated before continuing. `tick` returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
67
67
@@ -77,7 +77,7 @@ While there's no "after update" hook, you can use `tick` to ensure that the UI i
77
77
</script>
78
78
```
79
79
80
-
## Deprecated: `beforeUpdate` / `afterUpdate`
80
+
## Deprecated: beforeUpdate/afterUpdate
81
81
82
82
Svelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svelte 5 but not available inside components that use runes.
Copy file name to clipboardExpand all lines: documentation/docs/04-runtime/04-imperative-component-api.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ better title needed?
12
12
13
13
Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.
14
14
15
-
## `mount`
15
+
## mount
16
16
17
17
Instantiates a component and mounts it to the given target:
18
18
@@ -31,7 +31,7 @@ You can mount multiple components per page, and you can also mount from within y
31
31
32
32
Note that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.
33
33
34
-
## `unmount`
34
+
## unmount
35
35
36
36
Unmounts a component created with [`mount`](#mount) or [`hydrate`](#hydrate):
37
37
@@ -46,7 +46,7 @@ const app = mount(App, {...});
46
46
unmount(app);
47
47
```
48
48
49
-
## `render`
49
+
## render
50
50
51
51
Only available on the server and when compiling with the `server` option. Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app:
52
52
@@ -62,7 +62,7 @@ result.body; // HTML for somewhere in this <body> tag
62
62
result.head; // HTML for somewhere in this <head> tag
63
63
```
64
64
65
-
## `hydrate`
65
+
## hydrate
66
66
67
67
Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#server-render) function) inside the target and make it interactive:
Copy file name to clipboardExpand all lines: documentation/docs/05-misc/03-typescript.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ title: TypeScript
10
10
11
11
You can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
12
12
13
-
## `<script lang="ts">`
13
+
## <scriptlang="ts">
14
14
15
15
To use TypeScript inside your Svelte components, add `lang="ts"` to your `script` tags:
16
16
@@ -77,7 +77,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S
77
77
78
78
> If you're starting a new project, we recommend using SvelteKit or Vite instead
79
79
80
-
## Typing `$props`
80
+
## Typing $props
81
81
82
82
Type `$props` just like a regular object with certain properties.
83
83
@@ -107,7 +107,7 @@ Type `$props` just like a regular object with certain properties.
107
107
</button>
108
108
```
109
109
110
-
## Generic `$props`
110
+
## Generic $props
111
111
112
112
Components can declare a generic relationship between their properties. One example is a generic list component that receives a list of items and a callback property that reveives an item from the list. To declare that the `items` property and the `select` callback operate on the same types, add the `generics` attribute to the `script` tag:
113
113
@@ -130,7 +130,7 @@ Components can declare a generic relationship between their properties. One exam
130
130
131
131
The content of `generics` is what you would put between the `<...>` tags of a generic function. In other words, you can use multiple generics, `extends` and fallback types.
132
132
133
-
## Typing `$state`
133
+
## Typing $state
134
134
135
135
You can type `$state` like any other variable.
136
136
@@ -157,7 +157,7 @@ class Counter {
157
157
}
158
158
```
159
159
160
-
## The `Component` type
160
+
## The Component type
161
161
162
162
Svelte components or of type `Component`. You can use it and its related types to express a variety of constraints.
0 commit comments