Svelte

framework JavaScript
Svelte
Description de l'image Svelte Logo.svg.

Informations
Développé par Rich Harris (d)Voir et modifier les données sur Wikidata
Première version [1]Voir et modifier les données sur Wikidata
Dernière version 3.59.2 ()[2]
4.2.11 ()[3]Voir et modifier les données sur Wikidata
Dépôt github.com/sveltejs/svelteVoir et modifier les données sur Wikidata
Écrit en JavaScript et TypeScriptVoir et modifier les données sur Wikidata
Système d'exploitation MultiplateformeVoir et modifier les données sur Wikidata
Type Framework JavaScript (en)
Langage de programmation
Compilateur
Framework web
Bibliothèque JavaScriptVoir et modifier les données sur Wikidata
Licence Licence MITVoir et modifier les données sur Wikidata
Site web svelte.devVoir et modifier les données sur Wikidata

Svelte est un framework JavaScript libre et à code ouvert écrit par Rich Harris (d) Voir avec Reasonator. Le framework est écrit en TypeScript. Son code source utilise la licence MIT et est hébergé sur GitHub[4].

Histoire modifier

Avant de créer Svelte, Rich Harris a créé Ractive.js[5].

La toute première version de Svelte date du 29 novembre 2016. Elle a été écrite en Javascript. Ce n'est qu'à partir de la version 3 que Svelte utilise TypeScript.

SvelteKit, un autre framework basé sur Svelte, est annoncé en octobre 2020 avant d'être publié en bêta en mars 2021. Il sort officiellement en version 1.0 le 14 décembre 2022[6].

Exemple modifier

Les composants Svelte sont définis dans des fichiers .svelte, qui sont des fichiers HTML étendus avec une syntaxe de modèle similaire à JSX.

<script>
    let name = "Henry"
</script>

<h1>Bonjour {name} !</h1>

<style>
	h1 {
		color: blue;
	}
</style>

La balise <script> permet d'écrire du code en Javascript standard, mais avec la particularité que les blocs de code préfixés d'un $: sont interprétés comme des déclarations réactives : la réassignation d'une des variables du bloc entraine la ré-exécution du bloc.

<script>
    let nombreDeClics = 1
    $: double = nombreDeClics * 2
</script>

<p>{nombreDeClics} * 2 = {double}</p>

<button on:click={() => nombreDeClics = nombreDeClics + 1}>nombreDeClics</button>

Notes et références modifier

  1. « https://svelte.dev/blog/frameworks-without-the-framework »
  2. « Release 3.59.2 », (consulté le )
  3. « https://github.com/sveltejs/svelte/releases/tag/svelte%404.2.11 »
  4. (en) « Svelte - Cybernetically enhanced web apps »  , sur github.com (consulté le )
  5. « About the Svelte JavaScript framework », sur ValueLogic | Blog, (consulté le )
  6. (en) Svelte Team, « Announcing SvelteKit 1.0 », sur svelte.dev, (consulté le )

Liens externes modifier