javascript / expert
Snippet
Polymorphe UI-Komposition via typisierte Snippet-Props
Snippets in Svelte 5 ersetzen das alte Slot-System durch einen leistungsfähigeren, funktionsähnlichen Mechanismus. Durch die Übergabe von Snippets als Props können hochgradig polymorphe Komponenten erstellt werden. Dieses Expertenmuster erlaubt es dem Parent, UI-Blöcke zu definieren, die das Child mit spezifischem Kontext (wie 'item' im Row-Snippet) rendert. Dies verbessert die Typsicherheit und macht die API der Komponente explizit, anstatt sich auf implizite Slot-Platzierungen zu verlassen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script lang="ts">import type { Snippet } from 'svelte';let {data,header,row}: {data: any[],header: Snippet,row: Snippet<[any]>} = $props();</script><table><thead>{@render header()}</thead><tbody>{#each data as item}{@render row(item)}{/each}</tbody></table>
svelte
Erklärung
1
row: Snippet<[any]>
Definiert eine Snippet-Prop, die ein Argument vom Typ 'any' akzeptiert.
2
{@render header()}
Das @render-Tag ruft die Snippet-Funktion auf, um deren HTML-Inhalt auszugeben.
3
{@render row(item)}
Ruft das Snippet auf und übergibt Daten an den vom Parent bereitgestellten Template-Block.