1. Aller plus loin avec Svelte
Nous n'avons fait qu'effleurer 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 sans ordre particulier.
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 re-cré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 actions de SvelteKit, qui concernent les formulaires.
Composants spéciaux
Svelte possède un certain nombre de [composants spéciaux] :