Skip to content

Commit e5881ea

Browse files
authored
chore: tweak migration doc diff blocks (#15527)
1 parent f30d75a commit e5881ea

File tree

1 file changed

+12
-11
lines changed

1 file changed

+12
-11
lines changed

documentation/docs/07-misc/07-v5-migration-guide.md

+12-11
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ In Svelte 4, a `let` declaration at the top level of a component was implicitly
1616

1717
```svelte
1818
<script>
19-
let count = +++$state(+++0+++)+++;
19+
let count = +++$state(0)+++;
2020
</script>
2121
```
2222

@@ -31,8 +31,8 @@ In Svelte 4, a `$:` statement at the top level of a component could be used to d
3131

3232
```svelte
3333
<script>
34-
let count = +++$state(+++0+++)+++;
35-
---$:--- +++const+++ double = +++$derived(+++count * 2+++)+++;
34+
let count = $state(0);
35+
---$:--- +++const+++ double = +++$derived(count * 2)+++;
3636
</script>
3737
```
3838

@@ -42,7 +42,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
4242

4343
```svelte
4444
<script>
45-
let count = +++$state(+++0+++)+++;
45+
let count = $state(0);
46+
4647
---$:---+++$effect(() =>+++ {
4748
if (count > 5) {
4849
alert('Count is too high!');
@@ -79,8 +80,8 @@ In Svelte 4, properties of a component were declared using `export let`. Each pr
7980

8081
```svelte
8182
<script>
82-
---export let optional = 'unset';
83-
export let required;---
83+
---export let optional = 'unset';---
84+
---export let required;---
8485
+++let { optional = 'unset', required } = $props();+++
8586
</script>
8687
```
@@ -105,8 +106,8 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
105106

106107
```svelte
107108
<script>
108-
---let klass = '';
109-
export { klass as class};---
109+
---let klass = '';---
110+
---export { klass as class};---
110111
+++let { class: klass, ...rest } = $props();+++
111112
</script>
112113
<button class={klass} {...---$$restProps---+++rest+++}>click me</button>
@@ -192,9 +193,9 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
192193
```svelte
193194
<!--- file: Pump.svelte --->
194195
<script>
195-
---import { createEventDispatcher } from 'svelte';
196-
const dispatch = createEventDispatcher();
197-
---
196+
---import { createEventDispatcher } from 'svelte';---
197+
---const dispatch = createEventDispatcher();---
198+
198199
+++let { inflate, deflate } = $props();+++
199200
let power = $state(5);
200201
</script>

0 commit comments

Comments
 (0)