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
docs: replace event handlers with event props on preview site (#9793)
also add event and snippets section to old vs new
---------
Co-authored-by: Rich Harris <[email protected]>
Co-authored-by: Simon H <[email protected]>
Copy file name to clipboardExpand all lines: sites/svelte-5-preview/src/routes/docs/content/02-examples/01-universal-reactivity.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ Suppose we have a component like this:
15
15
}
16
16
</script>
17
17
18
-
<button on:click={increment}>
18
+
<button onclick={increment}>
19
19
clicks: {count}
20
20
</button>
21
21
```
@@ -40,9 +40,9 @@ We can encapsulate this logic in a function, so that it can be used in multiple
40
40
+ const counter = createCounter();
41
41
</script>
42
42
43
-
-<button on:click={increment}>
43
+
-<button onclick={increment}>
44
44
- clicks: {count}
45
-
+<button on:click={counter.increment}>
45
+
+<button onclick={counter.increment}>
46
46
+ clicks: {counter.count}
47
47
</button>
48
48
```
@@ -78,12 +78,12 @@ export function createCounter() {
78
78
const counter = createCounter();
79
79
</script>
80
80
81
-
<button on:click={counter.increment}>
81
+
<button onclick={counter.increment}>
82
82
clicks: {counter.count}
83
83
</button>
84
84
```
85
85
86
-
[See this example in the playground.](/#H4sIAAAAAAAACmVQ0U7DMAz8FStC2iaqDl67dhLiMxgPI3NRRutUiYNAVf6dJG1TBk-W7bvznUfRqg6tqF5GQeceRSWehkEUgr-H2NhP7BhDb7UzMk5qK40a-HiiE6t-0IZhBGnwzPisHTEa8NAa3cOm3MtpUk4y5dVuDoEXmFKTZZjX0NwKbHcBVe_XQ1S_OWZNoKmSnZIfzbgoKwrUHol9cpS2toK8T9VHuUniGLL0-qJahRdRsXHoixz91u76hav9_QH8SqlbR5JVMPXHO4zRSIdzvBDuznIAbB92c_jMzOYXVnxM5Nw38BjB0XksBtkZWjDvi_ZKy5A0P0xDX0w1n0mKYen_P-HV_wBwv1jcCwIAAA==)
86
+
[See this example in the playground.](/#H4sIAAAAAAAAE2VQ0U7DMAz8FStC2iaqDl67dhLiMxgPI3NRRutUiYNAVf6dJG1TBk-W7bvznUfRqg6tqF5GQeceRSWehkEUgr-H2NhP7BhDb7UzMk5qK40a-HiiE6t-0IZhBGnwzPisHTEa8NAa3cOm3MtpUk4y5dVuDoEXmFKTZZjX0NwKbHcBVe_XQ1S_OWZNoEl2Sn404yKsKDB7JPbJUNraCvI-VR_VJoVjiNLri2oVXkTFxqEvcvJbt-sTrvb3A_ArhW4dSVbB0x_rMEYjHc7pQrY7ywGwfdjN2TMzm19Y8S-Rc9_AYwRH57EYZGdowbwv2istQ9L8MA19MdV8JimGpf__hFf_Ay1mGDQKAgAA)
87
87
88
88
## Stores equivalent
89
89
@@ -115,7 +115,7 @@ Back in the component, we retrieve the store value by prefixing its name with `$
This page intends to give a broad overview of how code written using runes looks compared to code not using them. You will see that for most simple tasks that only involve a single component it will actually not look much different. For more complex logic, runes simplify things.
5
+
This page intends to give a broad overview of how code written using the new APIs looks compared to code not using them. You will see that for most simple tasks that only involve a single component it will actually not look much different. For more complex logic, they simplify things.
6
6
7
7
## Counter
8
8
9
-
The `$state`, `$derived` and `$effect` runes replace magic `let` declarations, `$: x = ...` and `$: { ... }`.
9
+
The `$state`, `$derived` and `$effect` runes replace magic `let` declarations, `$: x = ...` and `$: { ... }`. Event handlers can be written as event attributes now, which in practise means just removing the colon.
@@ -183,10 +188,108 @@ With runes, we can use `$effect.pre`, which behaves the same as `$effect` but ru
183
188
{/each}
184
189
</div>
185
190
186
-
<input on:keydown={handleKeydown} />
191
+
- <input on:keydown={handleKeydown} />
192
+
+ <input onkeydown={handleKeydown} />
187
193
188
-
<button on:click={toggle}>
194
+
- <button on:click={toggle}>
195
+
+ <button onclick={toggle}>
189
196
Toggle dark mode
190
197
</button>
191
198
</div>
192
199
```
200
+
201
+
## Forwarding events
202
+
203
+
Because [event handlers](event-handlers) are just regular attributes now, the "forwarding events" concept is replaced with just passing callback props. Before, you would have to mark every event that you want to forward separately. You can still do this with event attributes...
204
+
205
+
```diff
206
+
<script>
207
+
+ let { onclick, onkeydown, ...attributes } = $props();
208
+
</script>
209
+
210
+
<button
211
+
- {...$$props}
212
+
+ {...attributes}
213
+
- on:click
214
+
- on:keydown
215
+
+ {onclick}
216
+
+ {onkeydown}
217
+
>a button</button>
218
+
```
219
+
220
+
...but in practise what you probably _really_ want to do in these situations is forward _all_ events. This wasn't possible before, but it is now:
Previously, you would pass UI content into components using slots. Svelte 5 provides a better mechanism for this, [snippets](snippets). In the simple case of passing something to the default slot, nothing has changed for the consumer:
241
+
242
+
```svelte
243
+
<!-- same with both slots and snippets -->
244
+
<script>
245
+
import Button from './Button.svelte';
246
+
</script>
247
+
248
+
<Button>click me</Button>
249
+
```
250
+
251
+
Inside `Button.svelte`, use `@render` instead of the `<slot>` tag. The default content is passed as the `children` prop:
252
+
253
+
```diff
254
+
<script>
255
+
+ let { children } = $props();
256
+
</script>
257
+
258
+
<button>
259
+
- <slot />
260
+
+ {@render children()}
261
+
</button>
262
+
```
263
+
264
+
When passing props back up to the consumer, snippets make things easier to reason about, removing the need to deal with the confusing semantics of the `let:`-directive:
265
+
266
+
```diff
267
+
<!-- provider -->
268
+
<script>
269
+
+ let { children } = $props();
270
+
</script>
271
+
272
+
<button>
273
+
- <slot prop="some value" />
274
+
+ {@render children("some value")}
275
+
</button>
276
+
```
277
+
278
+
```diff
279
+
<!-- consumer -->
280
+
<script>
281
+
import Button from './Button.svelte';
282
+
</script>
283
+
284
+
- <Button let:prop>click {prop}</Button>
285
+
+ <Button>
286
+
+ {#snippet children(prop)}
287
+
+ click {prop}
288
+
+ {/snippet}
289
+
+ </Button>
290
+
```
291
+
292
+
Combined with event attributes, this reduces the number of concepts to learn — everything related to the component boundary can now be expressed through props.
0 commit comments