Comment coder avec Svelte, premier pas

Les composants

Les composants sont dans des fichiers .svelte, et ressemblent à une page HTML, avec des balises <script>, des balises <style> et du code de template HTML :

<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

<style>
 button {
  color: red;
 }
</style>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

(Comme vu plus haut, le script qui apparait dans le fichier compilé n'est pas exactement ce qui a dans les balises script). On peut inclure ses composant dans d'autres composants, en utilisant une notation comme celle du JSX:

<script>
 import OtherComponent from './Component.svelte';
</script>

<OtherComponent />

Le style d'un composant n'impacte pas le style des composants qu'il inclut.

Props, Etat & Changement d'Etat

L'état est défini dans des blocks, en utilisant simplement let :

<script>
 let counter = 0; // ceci déclare un état !
</script>

C'est pareil pour les props, c'est à dire les paramètres d'entrée des composants :

<script>
 export let counter = 0; // ceci déclare un props !
</script>

Attention: Svelte a besoin d'immutabilité pour gérer les changements d'état (ce qui est logique), ou plus exactement, j'ai l'impression qu'il a besoin qu'il y ait l'utilisation de l'opérateur = sur une variable qui a été déclarée avec un let, et que le compilateur sait qu'il doit surveiller. Si on change la valeur d'une des clefs dans un dictionnaire ou un array, le changement n'est pas détecté.

Le templating html

Svelte a une logique de templating dans le html. Il y a comme dans le JSX l'injection de valeurs, (<p>Value is {x}</p>), Mais aussi des blocks, qui commencent avec des {#}, finissent avec des {/} et comportent éventuellement des éléments intermédiaires en {:} Ces blocks permettent d'écrire des conditions des boucles ({#each}) et des conditions {#if ...}), Par exemple :

{#if x > 10}
    <p>{x} is greater than 10</p>
{:else if 5 > x}
    <p>{x} is less than 5</p>
{:else}
    <p>{x} is between 5 and 10</p>
{/if}

Dans les boucles, on a le meme probleme de clef unique que la boucle d'objets de react : il faut spécifier l'id de la clef unique:

{#each items as item (item.id)}

Il y a un troisième type de block, qui consiste à déclarer qu'on attent le retour d'une fonction asynchrone (une Promise, quoi) avec le bloc {#await}.

Evenements & Bindings

Autre particularité, pour gérer les clicks & co, on définit des event listeners sur les elements html avec des “on”: on:click, on:mousemove. On peut modifier ces events listeners avec par ex. |once ou |self (ne trigger qu'une seule fois, ne trigger que sur soi). On peut définir des event listeners pour connecter deux éléments, avec un émetteur et un récepteur. Ca me rappelle la joie de coder en ActionScript / Flash, au bon vieux temps des jeux sur Facebook !

On utilise le même genre de notation pour dire qu'un élément HTML (comme un input par exemple) va impacter une variable, ce qui nous permet de faire une liaison à double sens entre l'affichage et l'état : <input bind:value={name}> (Je crois que Vue a une notation un peu similaire)

En conclusion

Pour être complet il y aurait évidemment tout un tas d'autre choses à mentionner comme les stores (au sens anglais, pas français !) ou les transitions ou le context (qui pour le coup ressemble un peu à celui de React). Pour moi il y a deux questions qui se posent. Est-ce que j'ai envie de continuer à apprendre ce framework ? Et est-ce que j'ai envie de m'en servir sur le plus long terme. Et pour moi, c'est l'originalité de Svelte, avec l'impact de la phase de compilation, qui me donne envie de l'apprendre, de comprendre comment il marche. Je ne sais par contre pas comment mes équipes, si je leur mettais du Svelte entre les mains, réagiraient.