Svelte 3: la puissance

Soyez conscients qu'il ne s'agit pas d'une liste exhaustive. Cliquez sur la flèche de gauche pour replier le contenu.

Permalien pour la section Basiques Basiques

Svelte est un compilateur JavaScript surpuissant pour générer des applications ultra-fluides et réactives.

Réactivité Cela mesure comment le DOM se synchronise avec les changements d'état. La plupart des frameworks comme React vont ajouter une couche intermédiraire, par exemple, le DOM virtuel. Avec Svelte, les optimisations ont lieu lors de la compilation.
Un air de déja vu? Svelte est très proche du dév HTML, CSS, Js pur. Cependant, il ajoute quelques extensions qui font toute la différence et permettent d'obtenir un bundle de js vanilla ultra-optimisé.
fichier .svelte Les composants sont des fichiers .svelte qui sont du HTML avec des fonctionnalités étendues.
Structure typique
projet
│
├── .gitignore
├── node_modules/
├── src/
│   ├── App.svelte
│   └── main.js
│
├── scripts/
│   └── special-script.js (facultatif)
│
├── public/
│   ├── global-styles.css
│   ├── index.html
│   └── favicon.png
│
├── LICENSE
├── README.md
├── rollup.config.js
└── package.json
Pas de DOM virtuel Pour la communauté Svelte, le DOM virtuel est une perte de performance en soi mais je ne pense pas que vous devriez vous baser là-dessus. Au lieu de ça, considérez que vous pouvez obtenir la même modularité et hiérarchie de composant qu'avec React sans les limitations de l'algorithme différentiel.

Source: virtual DOM is pure overhead (en)

Compilation Svelte

Lisez le guide (en)

Permalien pour la section Svelte styles Svelte styles

Styles encapsulés Ne vous y méprenez pas avec la structure typique. Vous pouvez définir des styles globaux mais chaque composant a ses propres styles **automatiquement encaspulés**:
// section.svelte
<style>
  section {
    background-color: limegreen;
    color: black;
  }
</style>

<section>
  <slot/>
</section>
Svelte génère des classes automatiquement, par exemple, svelte-1kxxubc, qui correspondent à un hash des styles du composant.
Classes CSS personnalisées
// paragraph.svelte
<style>
  .para {
    background-color: limegreen;
    color: black;
  }

  .graph {
      letter-spacing: -.1em;
  }
</style>

<p class:para class:graph>
  <slot/>
</p>
Classes CSS dynamiques
<script>
  export let color = "fuschia";
</script>

<style>
  p {
      color: {color}
  }
</style>

<p>I'm a FBI agent</p>
    

Permalien pour la section Variables Variables

Basiques
<script>
    export let a = 'a';
</script>

<p>It's {a}</p>
Destructuration $: (dollar label) est un ajout de Svelte pour rendre des éléments réactifs automatiquement:
<script>
  export let article;

  $: ({ title, excerpt, url } = article);
</script>

<article>
    <h2><a href="{url}">{title}</a></h2> 
    <p>{excerpt}</p>
</article>
Import
<script>
    import z from 'external';
</script>

<p>It's {z}</p>
Boucle, boucle, boucle...
<script>
export let items = [
    'item1',
    'item2',
    'item3',
];
</script>
<ol>
{#each items as item}
    <li>{item}</li>
{/each}
</ol>
Destructuration dans une boucle
<script>
  export let articles;
</script>

{#each articles as {title, url, excerpt }}
<article>
    <h2><a href="{url}">{title}</a></h2> 
    <p>{excerpt}</p>
</article>
{/each}

Permalien pour la section Conditions Conditions

If/else if/else
{#if CONDITION1}
    <p>case 1</p>
{:else if CONDITION2}
    <p>case 2</p>
{:else}
    <p>everything else</p>
{/if}

Permalien pour la section Évènements Évènements

Vous pouvez utiliser on:EVENT, par exemple, on:click ou on:mouseup.

Compteur de clics
<script>
    let count = 1;
    const increment = () => {
        count += 1
    }
</script>

<p>counter: {count}</p>
<button on:click={increment}>Incrémenter</button>
Cycle de vie onmount Après le premier rendu:
<script>
    import { onMount } from 'svelte';

    let data = [];

    onMount(async () => {
       const res = await fetch(`https://myapi.com/endpoint`);
       data = await res.json();
    });
</script>
Dispatcher Le dispatcher permet de cibler des évènement personnalisés (pas les évènements DOM classiques). Svelte fournit createEventDispatcher pour cela:
// Button.svelte
<button on:click={fireStarter}>
  Custom click event
</button>

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  export let fireStarter = () => dispatch("fireStarter");
</script>
 
<script>
  import Button from './Button.svelte';
</script>
<Button on:fireStarter={() => console.log('fire starter')} />

Permalien pour la section Passer des propriétés Passer des propriétés

Pour passer des props aux composants enfants:

Simple
// ChildComponent.svelte
<script>
  export let text = "no one" // default value
</script>
<h1>Cotton-eyed {text}</h1>
// App.svelte
<script>
  import ChildComponent from './ChildComponent.svelte'
</script>

<ChildComponent text='joe' /> // <h1>Cotton-eyed joe</h1>
Opérateur Spread
// ChildComponent.svelte
<script>
  export let title = "default title"
  export let excerpt = "default excerpt"
  export let url = "https://google.it"
</script>
<article>
    <h1>{title}</h1>
    <p>{excerpt}</p>
    <a href="{url}">Read more</a>
</article>
// App.svelte
<script>
  import ChildComponent from './ChildComponent.svelte'
  const post = {
    title: "My Svelte 3 Cheat Sheet",
    excerpt: "Svelte for the win.",
    url: "https://blog.julien-maury.dev/en/cheat-sheets/svelte3/"
  };
</script>

<ChildComponent  {...post} />

Permalien pour la section Bindings Bindings

Svelte permet d’attacher des gestionnaires d’évènement aux éléments avec une syntaxe pratique et lisible.

bind:value
<script>
let guy = "cotton-eyed joe"
</script>
<input bind:value={myvar}>
<p>Where did you come from? Where did you go? {guy}</p>
bind:checked
<script>
  let show = false;
</script>

<label>
  <input type="checkbox" bind:checked="{show}" />
  Show
</label>  
{#if show}
Jour
{:else}
Nuit
{/if}
bind:group une utilisation pratique avec les inputs radio
bind:this
<script>
    import { onMount } from 'svelte';

    let canvasElement;

    onMount(() => {
	    const ctx = canvasElement.getContext('2d');
	    drawStuff(ctx);
    });
</script>

Permalien pour la section Stores Stores

Les stores permettent de passer des données entre les composants lorsque vous n’avez pas que des relations parents-enfants dans votre hiérarchie.

Permalien pour la section Transitions Transitions

Svelte gère transitions nativement. Vous pouvez même passer des paramètres.

Permalien pour la section Slots Slots

Les éléments <slot> permettent d’imbriquer un ou plusieurs composants dans un autre. Vous pouvez aussi passer des données du composant enfant vers le composant parent.

<script>
import Article from "./Article.svelte";
</script>

<Article>
    <span slot="title">Title1</span>
    <span slot="excerpt">excerpt1</span>
</Article>
// Article.svelte
<article>
  <h2>
    <slot name="title">
      <span class="error">No title</span>
    </slot>
  </h2>
  <p>
    <slot name="excerpt">
      <span class="error">No excerpt</span>
    </slot>
  </p>
</article>

Permalien pour la section Débug Débug

Pour inspecter les valeurs, la bonne pratique est de passer par {@debug VAR}:

{@debug post}

<h1>{post.title}</h1>

Cela inspecte la variable et stoppe l’exécution globale.

Permalien pour la section Frameworks Svelte Frameworks Svelte

Il y a des ressources utiles pour vous faciliter la vie:

Sveltekit
npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open
Source: kit.svelte.dev
Plenti Plenti