Les snippets vous permettent de réutiliser du contenu au sein d’un composant, sans avoir besoin de l’extraire dans un fichier séparé.

Dans cet exercice, nous créons un tableau de trois singes sages, avec leur séquence d’échappement unicode et leur entité HTML. Nous n’avons pour le moment qu’un seul singe.

Bien sûr, nous pourrions dupliquer le markup. Ou bien nous pourrions créer un tableau d’objets { emoji, description } et le passer à un bloc {#each ...}. Mais une meilleure solution est d’encapsuler le markup dans un block réutilisable.

Commencez par déclarer un snippet :

{#snippet monkey()}
	<tr>
		<td>{emoji}</td>
		<td>{description}</td>
		<td>\u{emoji.charCodeAt(0).toString(16)}\u{emoji.charCodeAt(1).toString(16)}</td>
		<td>&amp#{emoji.codePointAt(0)}</td>
	</tr>
{/snippet}

Le singe n’est plus visible, car nous n’avons pas encore rendu le snippet. Faisons-le maintenant :

<tbody>
	{#snippet monkey()}...{/snippet}

	{@render monkey()}
</tbody>

Avant de pouvoir réutiliser le snippet pour le reste de nos singes, nous devons passer des données au snippet. Les snippets peuvent ne pas avoir d’arguments, ou bien en avoir, sans limite de nombre :

<tbody>
	{#snippet monkey(emoji, description)}...{/snippet}

	{@render monkey('🙈', 'ne pas voir')}
</tbody>

Vous pouvez aussi déstructurer les arguments, si vous préfèrez.

Ajoutez le reste des singes :

• '🙈', 'ne pas voir'
• '🙉', 'ne pas entendre'
• '🙊', 'ne pas parler'

Enfin, supprimez le bloc <script>, car il ne sert plus à rien :

<script>
	let emoji = '🙈';
	let description = 'ne pas voir';
</script>

<script lang="ts">
	let emoji = '🙈';
	let description = 'ne pas voir';
</script>

Les snippets peuvent être déclarés n’importe où dans votre composant, mais, comme les fonctions, ils ne sont accessibles par les balises de rendu que dans le même “scope” ou un scope enfant.