Svelte je jednoduchý framework, který se snadno používá a jeho nejnovější změny by to měly ještě usnadnit.

V červnu 2023 Svelte oznámila svou nejnovější stabilní verzi, verzi 4. Aktualizace Svelte 4 je primárně udržovací verze Svelte 3, jejímž cílem je připravit půdu pro další generaci Svelte, která bude vydána jako Svelte 5.

Svelte 4 přidává různá vylepšení do ekosystému Svelte, včetně redesignu webových stránek, nastavení místních přechodů jako výchozích, vylepšení podpory webových komponent a přechodu z TypeScript na JSDoc.

1. Redesign štíhlého webu

Svelte 4 dorazil spolu s vylepšeními oficiálního Webové stránky Svelte. Nový vzhled stránek je fantastický, s vylepšenými dokumenty TypeScript, možnost tmavého režimua obecně lepší uživatelské prostředí napříč zařízeními.

Stránka Svelte má nyní vylepšený REPL, který vám umožňuje experimentovat s kódem Svelte přímo v prohlížeči.

Všechny odkazy na výukové programy Svelte nyní také odkazují na nové zkušenosti studentů Svelte, zatímco staré výukové programy jsou k dispozici pro uživatele Safari 16.3 a starších.

instagram viewer

2. Místní přechody jsou výchozí

Představte si tu bolestnou zkušenost, kdy se musíte spokojit s přechody CSS poté, co jste sledovali, jak se vaše stránka načítá déle, než se očekávalo, protože jste použili přechody Svelte.

Obvykle se přechod přehraje, když zničíte nadřazený blok. Toto chování můžete přepsat pomocí |místní modifikátor. To způsobí, že se přechod spustí pouze tehdy, když zničíte blok obsahující cílovou komponentu. Ve Svelte 4 toto |místní modifikátor je nastaven jako výchozí pro přechody.

Ve úryvku níže je lokálně přidán přechod snímku do div živel:

 {položka}

3. Vylepšená podpora webových komponent

Společnost Svelte vždy podporovala opětovnou použitelnost a udržovatelnost, a proto neustále podporuje webové komponenty. Webové komponenty umožňují vytvářet opakovaně použitelné vlastní HTML prvky s vloženými styly a chováním.

Svelte 4 mění způsob, jakým generuje webové komponenty, odstraňuje chyby a nekonzistence. Mezi tyto změny patří:

  • Vývozní vytváří podpěru komponent a zpřístupňuje je spotřebitelům komponent.
  • Úkoly jsou reaktivní. Chcete-li změnit stav komponenty a spustit opětovné vykreslení, přiřaďte ji k lokálně deklarované proměnné.
  • Použijte $ symbol na začátku příkazu, který jej označí jako reaktivní příkaz. Reaktivní příkazy se spouštějí po jiném kódu skriptu a před vykreslením označení komponenty, kdykoli se změní závislé hodnoty.
  • Při vytváření objektů obchodu zadejte předponu store with $ umožnit reaktivní přístup k hodnotě.
  • Nastavení atributu kontextu značky skriptu na modul způsobí, že se skript spustí jednou při prvním vyhodnocení modulu, nikoli pro každou instanci komponenty.

4. Přechod z TypeScript na JSDoc

JSDoc je dokumentační nástroj, který podporuje přidávání typových anotací a komentářů do kódů JavaScript.

Vzhledem k tomu, že JSDoc lstí vývojáře, aby zdokumentovali své kódy, cílem této migrace je povzbudit více vývojářů Svelte, aby si vytvořili zvyk řádně dokumentovat své kódy. Adekvátně zdokumentovaná kódová základna JavaScrpt by vyžadovala malou nebo žádnou kontrolu typu.

Pokud jste v TypeScriptu nováčkem, měli byste prozkoumejte TypeScript a zjistěte, proč jej vývojáři preferují.

Přechod na Svelte 4

Svelte 4 má zvýšený výkon a zefektivněný vývoj, což je vynikající pro vytváření vysoce výkonných webových aplikací. Tato nová verze by také měla podpořit lepší dokumentaci kódu s přechodem na JSDoc.

Svelte se neustále zlepšuje, a i když to není rámec, který zná každý vývojář, ti, kteří jej znají, ho silně chválí.