Svelte je jednoduchý rámec, ktorý sa ľahko používa a jeho najnovšie zmeny by ho mali ešte zjednodušiť.

V júni 2023 spoločnosť Svelte oznámila svoje najnovšie stabilné vydanie, verziu 4. Aktualizácia Svelte 4 je predovšetkým údržbové vydanie Svelte 3, ktorého cieľom je pripraviť pôdu pre ďalšiu generáciu Svelte, ktorá bude vydaná ako Svelte 5.

Svelte 4 pridáva do ekosystému Svelte rôzne vylepšenia, vrátane redizajnu webovej stránky, nastavenia lokálnych prechodov ako predvolených, zlepšenia podpory webových komponentov a prechodu z TypeScript na JSDoc.

1. Štýlový redizajn stránky

Svelte 4 prišiel spolu s vylepšeniami oficiálneho Štýlová webová stránka. Nový vzhľad stránky je fantastický, s vylepšenými dokumentmi TypeScript, možnosť tmavého režimua všeobecne vylepšený používateľský zážitok naprieč zariadeniami.

Stránka Svelte má teraz vylepšený REPL, ktorý vám umožňuje experimentovať s kódom Svelte priamo v prehliadači.

Všetky odkazy na výukové programy Svelte teraz poukazujú na nové skúsenosti študentov Svelte, zatiaľ čo staré výukové programy sú k dispozícii pre používateľov Safari 16.3 a starších.

instagram viewer

2. Miestne prechody sú predvolené

Predstavte si tú bolestivú skúsenosť s prechodmi CSS po tom, ako sa vaša stránka načítava dlhšie, než sa očakávalo, pretože ste použili prechody Svelte.

Prechod sa zvyčajne prehrá, keď zničíte rodičovský blok. Toto správanie môžete prepísať pomocou |miestne modifikátor. To spôsobí, že prechod sa spustí len vtedy, keď zničíte blok obsahujúci cieľový komponent. V Svelte 4 toto |miestne modifikátor je nastavený ako predvolený pre prechody.

V úryvku nižšie je lokálne pridaný prechod snímky div element:

 {item}

3. Vylepšená podpora webových komponentov

Spoločnosť Svelte vždy podporovala opätovnú použiteľnosť a udržiavateľnosť, a preto neustále podporuje webové komponenty. Webové komponenty vám umožňujú vytvárať opätovne použiteľné vlastné prvky HTML s vloženými štýlmi a správaním.

Svelte 4 mení spôsob, akým generuje webové komponenty, odstraňuje chyby a nezrovnalosti. Tieto zmeny zahŕňajú:

  • Export vytvára rekvizitu komponentu a sprístupňuje ho spotrebiteľom komponentov.
  • Zadania sú reaktívne. Ak chcete zmeniť stav komponentu a spustiť opätovné vykreslenie, priraďte ho k lokálne deklarovanej premennej.
  • Použi $ symbol na začiatku príkazu, aby sa označil ako reaktívny príkaz. Reaktívne príkazy sa spúšťajú po inom kóde skriptu a pred vykreslením označenia komponentu vždy, keď sa zmenia závislé hodnoty.
  • Pri vytváraní objektov obchodu zadajte predponu store with $ umožniť reaktívny prístup k hodnote.
  • Nastavenie atribútu kontextu značky skriptu na modul spôsobí, že skript sa spustí raz pri prvom vyhodnotení modulu, a nie pre každú inštanciu komponentu.

4. Prechod z TypeScript na JSDoc

JSDoc je dokumentačný nástroj, ktorý podporuje pridávanie typových anotácií a komentárov do kódov JavaScript.

Vzhľadom na to, že JSDoc oklame vývojárov, aby zdokumentovali svoje kódy, cieľom tejto migrácie je povzbudiť viac vývojárov Svelte, aby si vytvorili zvyk správne dokumentovať svoje kódy. Adekvátne zdokumentovaná kódová základňa JavaScrpt by vyžadovala malú alebo žiadnu kontrolu typu.

Ak s TypeScriptom začínate, mali by ste preskúmajte TypeScript a zistite, prečo ho vývojári uprednostňujú.

Prechod na Svelte 4

Svelte 4 má vylepšený výkon a zefektívnený vývoj, čo je vynikajúce na vytváranie vysokovýkonných webových aplikácií. Toto nové vydanie by tiež malo podporiť lepšiu dokumentáciu kódu s prechodom na JSDoc.

Svelte sa neustále zlepšuje, a hoci to nie je rámec, ktorý pozná každý vývojár, tí, ktorí ho poznajú, ho veľmi chvália.