Svelte ist ein einfaches Framework, das leicht zu verwenden ist und die neuesten Änderungen sollten es noch einfacher machen.

Im Juni 2023 kündigte Svelte seine neueste stabile Version an, Version 4. Das Svelte 4-Update ist in erster Linie eine Wartungsversion von Svelte 3, die den Grundstein für die Veröffentlichung der nächsten Generation von Svelte als Svelte 5 legen soll.

Svelte 4 fügt dem Svelte-Ökosystem verschiedene Verbesserungen hinzu, darunter eine Neugestaltung der Website, die Festlegung lokaler Übergänge als Standard, eine verbesserte Unterstützung von Webkomponenten und den Wechsel von TypeScript zu JSDoc.

1. Svelte-Site-Neugestaltung

Svelte 4 kam zusammen mit Verbesserungen am offiziellen Svelte-Website. Das neue Erscheinungsbild der Website ist fantastisch, mit verbesserten TypeScript-Dokumenten, eine Dunkelmodus-Optionund eine allgemein verbesserte Benutzererfahrung auf allen Geräten.

Die Svelte-Site verfügt jetzt über eine erweiterte REPL, die es Ihnen ermöglicht, direkt im Browser mit Svelte-Code zu experimentieren.

instagram viewer

Außerdem verweisen alle Svelte-Tutorial-Links jetzt auf die neue Svelte-Lernerfahrung, während alte Tutorials für Benutzer von Safari 16.3 und früher verfügbar sind.

2. Lokale Übergänge sind Standard

Stellen Sie sich die schmerzhafte Erfahrung vor, sich mit CSS-Übergängen zufrieden geben zu müssen, nachdem Ihre Seite länger als erwartet geladen wurde, weil Sie Svelte-Übergänge verwendet haben.

Normalerweise wird ein Übergang abgespielt, wenn Sie einen übergeordneten Block zerstören. Sie können dieses Verhalten mit überschreiben |lokal Modifikator. Dadurch wird der Übergang nur ausgeführt, wenn Sie den Block zerstören, der die Zielkomponente enthält. In Svelte 4, dies |lokal Der Modifikator ist als Standard für Übergänge festgelegt.

Im folgenden Snippet wird lokal ein Folienübergang hinzugefügt div Element:

 {Artikel}

3. Verbesserte Unterstützung für Webkomponenten

Svelte hat schon immer die Wiederverwendbarkeit und Wartbarkeit gefördert und unterstützt daher kontinuierlich Webkomponenten. Mit Webkomponenten können Sie wiederverwendbare benutzerdefinierte HTML-Elemente mit eingefügten Stilen und Verhaltensweisen erstellen.

Svelte 4 ändert die Art und Weise, wie Webkomponenten generiert werden, und beseitigt Fehler und Inkonsistenzen. Zu diesen Änderungen gehören:

  • Export Erstellt eine Komponenten-Requisite und macht sie für Komponentenkonsumenten zugänglich.
  • Zuweisungen sind reaktiv. Um den Status einer Komponente zu ändern und ein erneutes Rendern auszulösen, weisen Sie sie einer lokal deklarierten Variablen zu.
  • Benutzen Sie die $ Symbol am Anfang einer Anweisung, um sie als reaktive Anweisung zu kennzeichnen. Reaktive Anweisungen werden nach anderem Skriptcode und vor dem Rendern des Komponenten-Markups ausgeführt, wenn sich abhängige Werte ändern.
  • Stellen Sie dem Store beim Erstellen von Store-Objekten das Präfix voran $ um einen reaktiven Zugriff auf einen Wert zu ermöglichen.
  • Festlegen des Kontextattributs eines Skript-Tags auf Modul bewirkt, dass das Skript einmal ausgeführt wird, wenn das Modul zum ersten Mal ausgewertet wird, und nicht für jede Komponenteninstanz.

4. Der Wechsel von TypeScript zu JSDoc

JSDoc ist ein Dokumentationstool, das das Hinzufügen von Typanmerkungen und Kommentaren zu JavaScript-Codes unterstützt.

Da JSDoc Entwickler dazu verleitet, ihre Codes zu dokumentieren, zielt diese Migration darauf ab, mehr Svelte-Entwickler dazu zu ermutigen, sich die ordnungsgemäße Dokumentation ihrer Codes zur Gewohnheit zu machen. Eine ausreichend dokumentierte JavaScrpt-Codebasis würde kaum oder gar keine Typprüfung erfordern.

Wenn Sie neu bei TypeScript sind, sollten Sie dies tun Entdecken Sie TypeScript und entdecken Sie, warum Entwickler es bevorzugen.

Migration auf Svelte 4

Svelte 4 verfügt über eine verbesserte Leistung und eine optimierte Entwicklung, was sich hervorragend für die Erstellung leistungsstarker Webanwendungen eignet. Diese neue Version sollte mit der Umstellung auf JSDoc auch eine bessere Codedokumentation fördern.

Svelte verbessert sich ständig, und obwohl es nicht ein Framework ist, mit dem jeder Entwickler vertraut ist, loben es diejenigen, die es sind, sehr.