also add event and snippets section to old vs new
---------
Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
@ -15,7 +15,7 @@ Suppose we have a component like this:
}
</script>
<buttonon:click={increment}>
<buttononclick={increment}>
clicks: {count}
</button>
```
@ -40,9 +40,9 @@ We can encapsulate this logic in a function, so that it can be used in multiple
+ const counter = createCounter();
</script>
-<buttonon:click={increment}>
-<buttononclick={increment}>
- clicks: {count}
+<buttonon:click={counter.increment}>
+<buttononclick={counter.increment}>
+ clicks: {counter.count}
</button>
```
@ -78,12 +78,12 @@ export function createCounter() {
const counter = createCounter();
</script>
<buttonon:click={counter.increment}>
<buttononclick={counter.increment}>
clicks: {counter.count}
</button>
```
[See this example in the playground.](/#H4sIAAAAAAAACmVQ0U7DMAz8FStC2iaqDl67dhLiMxgPI3NRRutUiYNAVf6dJG1TBk-W7bvznUfRqg6tqF5GQeceRSWehkEUgr-H2NhP7BhDb7UzMk5qK40a-HiiE6t-0IZhBGnwzPisHTEa8NAa3cOm3MtpUk4y5dVuDoEXmFKTZZjX0NwKbHcBVe_XQ1S_OWZNoKmSnZIfzbgoKwrUHol9cpS2toK8T9VHuUniGLL0-qJahRdRsXHoixz91u76hav9_QH8SqlbR5JVMPXHO4zRSIdzvBDuznIAbB92c_jMzOYXVnxM5Nw38BjB0XksBtkZWjDvi_ZKy5A0P0xDX0w1n0mKYen_P-HV_wBwv1jcCwIAAA==)
[See this example in the playground.](/#H4sIAAAAAAAAE2VQ0U7DMAz8FStC2iaqDl67dhLiMxgPI3NRRutUiYNAVf6dJG1TBk-W7bvznUfRqg6tqF5GQeceRSWehkEUgr-H2NhP7BhDb7UzMk5qK40a-HiiE6t-0IZhBGnwzPisHTEa8NAa3cOm3MtpUk4y5dVuDoEXmFKTZZjX0NwKbHcBVe_XQ1S_OWZNoEl2Sn404yKsKDB7JPbJUNraCvI-VR_VJoVjiNLri2oVXkTFxqEvcvJbt-sTrvb3A_ArhW4dSVbB0x_rMEYjHc7pQrY7ywGwfdjN2TMzm19Y8S-Rc9_AYwRH57EYZGdowbwv2istQ9L8MA19MdV8JimGpf__hFf_Ay1mGDQKAgAA)
## Stores equivalent
@ -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.
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.
## Counter
The `$state`, `$derived` and `$effect` runes replace magic `let` declarations, `$: x = ...` and `$: { ... }`.
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
{/each}
</div>
<inputon:keydown={handleKeydown}/>
- <inputon:keydown={handleKeydown}/>
+ <inputonkeydown={handleKeydown}/>
<buttonon:click={toggle}>
- <buttonon:click={toggle}>
+ <buttononclick={toggle}>
Toggle dark mode
</button>
</div>
```
## Forwarding events
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...
```diff
<script>
+ let { onclick, onkeydown, ...attributes } = $props();
</script>
<button
- {...$$props}
+ {...attributes}
- on:click
- on:keydown
+ {onclick}
+ {onkeydown}
>a button</button>
```
...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:
```svelte
<!-- same with both slots and snippets -->
<script>
import Button from './Button.svelte';
</script>
<Button>click me</Button>
```
Inside `Button.svelte`, use `@render` instead of the `<slot>` tag. The default content is passed as the `children` prop:
```diff
<script>
+ let { children } = $props();
</script>
<button>
- <slot/>
+ {@render children()}
</button>
```
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:
```diff
<!-- provider -->
<script>
+ let { children } = $props();
</script>
<button>
- <slotprop="some value"/>
+ {@render children("some value")}
</button>
```
```diff
<!-- consumer -->
<script>
import Button from './Button.svelte';
</script>
- <Buttonlet:prop>click {prop}</Button>
+ <Button>
+ {#snippet children(prop)}
+ click {prop}
+ {/snippet}
+ </Button>
```
Combined with event attributes, this reduces the number of concepts to learn — everything related to the component boundary can now be expressed through props.
Rich Harris
10 months ago
committed by
GitHub