1. Aller plus loin avec Svelte

Nous n'avons qu'effleuré la surface du possible avec Svelte.

Si vous souhaitez aller plus loin, voici une liste non exhaustive de sujets Svelte avancés qui pourraient vous intéresser.

Ces sujets sont listés dans le désordre.

Styles globaux

On a vu que le style des composants est scopé par défaut.

Néanmoins il est possible de rendre vos sélecteurs globaux.

Quelques infos sur le sujet dans cette annexe.

Motion

Une fonctionnalité de Svelte qui peut beaucoup simplifier l'animation d'éléments est svelte/motion, qui contient des utilitaires pour faire évoluer des variables dans le temps selon certains paramètres.

Voir la documentation officielle et les exemples.

bind:this

Dans certains cas très particuliers, il est nécessaire d'avoir un accès direct aux éléments du DOM. Svelte le permet grâce à la directive bind:this

Il est également possible d'obtenir des références aux instances de composants de la même façon.

$bindable

On a vu que l'on pouvait "lier" l'état interne d'un élément du DOM avec un état Svelte.

Il est également possible de faire cela avec n'importe quelle props de composant, en la déclarant comme $bindable. À utiliser avec précaution.

#key

Il y a un bloc logique n'avons pas étudié : #key. Il permet de forcer la recréation d'une instance de composant.

Contexte

Pour partager des données en "sautant" des étapes – c'est-à-dire sans les passer en tant que props sur plusieurs niveaux – on peut utiliser le contexte.

Actions

Svelte possède une fonctionnalité appelée actions permettant d'appliquer des comportements automatisés sur des éléments HTML.

À ne pas confondre avec les actiosn de SvelteKit, qui concernent les formulaires.

Composants spéciaux

Svelte possède un certain nombre de composants spéciaux utiles.

Les <slot> sont l'équivalent des {#snippet} mais pour Svelte 4.