chore: tweak migration doc diff blocks (#15527)

pull/15501/head
Rich Harris 6 months ago committed by GitHub
parent f30d75ab7e
commit e5881eade3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -16,7 +16,7 @@ In Svelte 4, a `let` declaration at the top level of a component was implicitly
```svelte ```svelte
<script> <script>
let count = +++$state(+++0+++)+++; let count = +++$state(0)+++;
</script> </script>
``` ```
@ -31,8 +31,8 @@ In Svelte 4, a `$:` statement at the top level of a component could be used to d
```svelte ```svelte
<script> <script>
let count = +++$state(+++0+++)+++; let count = $state(0);
---$:--- +++const+++ double = +++$derived(+++count * 2+++)+++; ---$:--- +++const+++ double = +++$derived(count * 2)+++;
</script> </script>
``` ```
@ -42,7 +42,8 @@ A `$:` statement could also be used to create side effects. In Svelte 5, this is
```svelte ```svelte
<script> <script>
let count = +++$state(+++0+++)+++; let count = $state(0);
---$:---+++$effect(() =>+++ { ---$:---+++$effect(() =>+++ {
if (count > 5) { if (count > 5) {
alert('Count is too high!'); alert('Count is too high!');
@ -79,8 +80,8 @@ In Svelte 4, properties of a component were declared using `export let`. Each pr
```svelte ```svelte
<script> <script>
---export let optional = 'unset'; ---export let optional = 'unset';---
export let required;--- ---export let required;---
+++let { optional = 'unset', required } = $props();+++ +++let { optional = 'unset', required } = $props();+++
</script> </script>
``` ```
@ -105,8 +106,8 @@ In Svelte 5, the `$props` rune makes this straightforward without any additional
```svelte ```svelte
<script> <script>
---let klass = ''; ---let klass = '';---
export { klass as class};--- ---export { klass as class};---
+++let { class: klass, ...rest } = $props();+++ +++let { class: klass, ...rest } = $props();+++
</script> </script>
<button class={klass} {...---$$restProps---+++rest+++}>click me</button> <button class={klass} {...---$$restProps---+++rest+++}>click me</button>
@ -192,9 +193,9 @@ This function is deprecated in Svelte 5. Instead, components should accept _call
```svelte ```svelte
<!--- file: Pump.svelte ---> <!--- file: Pump.svelte --->
<script> <script>
---import { createEventDispatcher } from 'svelte'; ---import { createEventDispatcher } from 'svelte';---
const dispatch = createEventDispatcher(); ---const dispatch = createEventDispatcher();---
---
+++let { inflate, deflate } = $props();+++ +++let { inflate, deflate } = $props();+++
let power = $state(5); let power = $state(5);
</script> </script>

Loading…
Cancel
Save