@@ -16,7 +16,7 @@ In Svelte 4, a `let` declaration at the top level of a component was implicitly
16
16
17
17
``` svelte
18
18
<script>
19
- let count = +++$state(+++0+++ )+++;
19
+ let count = +++$state(0 )+++;
20
20
</script>
21
21
```
22
22
@@ -31,8 +31,8 @@ In Svelte 4, a `$:` statement at the top level of a component could be used to d
31
31
32
32
``` svelte
33
33
<script>
34
- let count = +++ $state(+++0+++)+++ ;
35
- ---$:--- +++const+++ double = +++$derived(+++ count * 2+++ )+++;
34
+ let count = $state(0) ;
35
+ ---$:--- +++const+++ double = +++$derived(count * 2)+++;
36
36
</script>
37
37
```
38
38
@@ -42,7 +42,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
42
42
43
43
``` svelte
44
44
<script>
45
- let count = +++$state(+++0+++)+++;
45
+ let count = $state(0);
46
+
46
47
---$:---+++$effect(() =>+++ {
47
48
if (count > 5) {
48
49
alert('Count is too high!');
@@ -79,8 +80,8 @@ In Svelte 4, properties of a component were declared using `export let`. Each pr
79
80
80
81
``` svelte
81
82
<script>
82
- ---export let optional = 'unset';
83
- export let required;---
83
+ ---export let optional = 'unset';---
84
+ --- export let required;---
84
85
+++let { optional = 'unset', required } = $props();+++
85
86
</script>
86
87
```
@@ -105,8 +106,8 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
105
106
106
107
``` svelte
107
108
<script>
108
- ---let klass = '';
109
- export { klass as class};---
109
+ ---let klass = '';---
110
+ --- export { klass as class};---
110
111
+++let { class: klass, ...rest } = $props();+++
111
112
</script>
112
113
<button class={klass} {...---$$restProps---+++rest+++}>click me</button>
@@ -192,9 +193,9 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
192
193
``` svelte
193
194
<!--- file: Pump.svelte --->
194
195
<script>
195
- ---import { createEventDispatcher } from 'svelte';
196
- const dispatch = createEventDispatcher();
197
- ---
196
+ ---import { createEventDispatcher } from 'svelte';---
197
+ --- const dispatch = createEventDispatcher();---
198
+
198
199
+++let { inflate, deflate } = $props();+++
199
200
let power = $state(5);
200
201
</script>
0 commit comments