Sortie de la version stable de Svelte 4

**Sandra Coret** · 24/06/2023, 15h41

Sortie de la version stable de Svelte 4, avec une mise � jour des performances, de l'exp�rience des d�veloppeurs et du site

Svelte est un framework ou langage de composants frontaux, libre et gratuit, cr�� par Rich Harris et maintenu par les membres de l'�quipe Svelte. Svelte n'est pas une biblioth�que JavaScript monolithique import�e par les applications : au lieu de cela, Svelte compile les mod�les HTML en code sp�cialis� qui manipule directement le DOM, ce qui peut r�duire la taille des fichiers transf�r�s et am�liorer les performances du client.

Le code de l'application est �galement trait� par le compilateur, qui ins�re des appels pour recalculer automatiquement les donn�es et re-rendre les �l�ments de l'interface utilisateur lorsque les donn�es dont ils d�pendent sont modifi�es[8], ce qui permet �galement d'�viter les frais g�n�raux associ�s aux repr�sentations interm�diaires � l'ex�cution, telles que le DOM virtuel, contrairement aux frameworks traditionnels (tels que React et Vue) qui effectuent la majeure partie de leur travail � l'ex�cution, c'est-�-dire dans le navigateur.

Le compilateur lui-m�me est �crit en TypeScript. Son code source est plac� sous licence MIT et h�berg� sur GitHub.

Annonce de Svelte 4

Le temps passe vite - Svelte 3 est sorti il y a plus de quatre ans ! En temps de cadre JavaScript, c'est une �ternit�. La fra�cheur de Svelte a persist� pendant tout ce temps, mais Node.js et les API des navigateurs ont �volu� pendant cette p�riode et aujourd'hui nous mettons � jour Svelte pour profiter de certaines de ces am�liorations. Svelte 4 est principalement une version de maintenance, augmentant les exigences minimales de la version et resserrant la conception dans des domaines sp�cifiques. Elle pr�pare le terrain pour la prochaine g�n�ration de Svelte qui sortira sous le nom de Svelte 5 - nous pensons que vous allez l'adorer.

Si vous n'avez pas encore essay� Svelte, faites un tour dans le tutoriel interactif, sur StackBlitz, ou localement avec npm create svelte@latest. Svelte vous permet de cr�er facilement des interfaces web en exploitant la puissance du HTML, du CSS, du JS et du compilateur Svelte. Regardez Svelte Radio Live pour en savoir plus sur cette version.

Quoi de neuf ?

Performance

Cette version se traduit par un code d'hydratation plus petit et plus rapide. Pour voir l'impact, les utilisateurs de SvelteKit peuvent voir la taille de leur sortie compil�e diminuer en examinant le dossier .svelte-kit/output/client/_app/immutable/nodes. Par exemple, sur kit.svelte.dev, la taille du JS g�n�r� sur l'ensemble du site a �t� r�duite de 12,7 % (126,3 kB � 110,2 kB).

Svelte 4 r�duit la taille des paquets Svelte de pr�s de 75% (de 10,6 Mo � 2,8 Mo), ce qui signifie moins d'attente lors du npm install. Cette am�lioration sera particuli�rement visible pour les utilisateurs qui chargent l'exp�rience d'apprentissage interactive sur learn.svelte.dev pour la premi�re fois, les utilisateurs de la Svelte REPL, et les utilisateurs avec une connectivit� limit�e. La majorit� de la taille restante du paquet est le support eslint, qui n�cessite la distribution d'une version CJS, et une fois que la r��criture eslint sera termin�e, la taille du paquet Svelte pourra encore diminuer de plus de 50%.

Le nombre de d�pendances dans Svelte a �t� consid�rablement r�duit, passant de 61 � 16. Cela signifie des t�l�chargements plus rapides pour nos utilisateurs ainsi qu'une moindre susceptibilit� aux attaques de la cha�ne d'approvisionnement. Le nombre de d�pendances a �galement �t� l�g�rement r�duit dans les derni�res versions de SvelteKit.

Exp�rience des d�veloppeurs

Svelte 4 rend l'exp�rience de cr�ation de Svelte plus intuitive et coh�rente : |local est d�sormais la valeur par d�faut pour les transitions afin d'�viter que les animations ne bloquent les transitions de page, les pr�processeurs sont d�sormais plus faciles � �crire et de nombreuses corrections facilitent la configuration et l'utilisation de CSP.

Pour les utilisateurs de composants web, le changement le plus important est une refonte de la fa�on dont vous utilisez Svelte pour cr�er des �l�ments personnalis�s. En changeant la fa�on dont ils sont g�n�r�s, toute une s�rie de bogues et d'incoh�rences ont �t� �limin�s.

Enfin, plusieurs am�liorations ont �t� apport�es � l'exp�rience de cr�ation de l'IDE : cmd+click dans les modules svelte vous am�ne maintenant � l'impl�mentation plut�t qu'� un fichier .d.ts les imports de svelte/internal sont maintenant cach�s et n'encombreront pas les suggestions de l'autocomplete les auto-imports fonctionnent maintenant de mani�re plus fiable.

Mise � jour du site, de la documentation et du tutoriel

Le site officiel de svelte.dev a �t� remani�. Il est maintenant divis� en plusieurs pages avec une navigation mobile am�lior�e, une documentation typescript remani�e, un mode sombre, et un REPL am�lior�. Le site SvelteKit est �galement mis � jour. Et tous les liens des tutoriels ont �t� mis � jour pour pointer vers la nouvelle exp�rience learn.svelte.dev. L'ancien tutoriel reste disponible pour les utilisateurs de Safari 16.3 et ant�rieurs.

Migration

La plupart des applications et des biblioth�ques compatibles avec Svelte 3 devraient l'�tre avec Svelte 4. Les auteurs de biblioth�ques devront mettre � jour la gamme de versions pour inclure Svelte 4 si svelte est sp�cifi� dans les peerDependencies. Pour les auteurs d'applications, le changement le plus courant consistera � mettre � jour l'outillage pour qu'il r�ponde aux exigences de la nouvelle version minimale, par exemple Node.js 16. De nombreuses autres �tapes de la migration peuvent �tre g�r�es avec npx svelte-migrate@latest svelte-4.

Svelte 5 : la nouvelle g�n�ration de Svelte

Svelte 5 sera une r��criture du compilateur et du runtime Svelte. Svelte 4 �tait principalement destin� � pr�parer le terrain pour ces am�liorations futures en adoptant des outils modernes et en abandonnant le support de certaines versions anciennes de diverses technologies telles que les anciens bundlers. Ces changements seront utiles � plusieurs �gards, par exemple en permettant de comparer plus facilement les bases de code de Svelte 5 et de Svelte 4 et en permettant d'ex�cuter les tests existants avec la nouvelle impl�mentation. Svelte 5 apportera de nouvelles fonctionnalit�s majeures et des am�liorations de performance � Svelte. Les changements sont encore en cours d'�laboration et ne sont pas encore pr�ts � �tre partag�s.

Voir la liste compl�te des Voir la liste compl�te des changements