Ce este nou în Svelte 4?

În iunie 2023, Svelte și-a anunțat cea mai recentă lansare stabilă, versiunea 4. Actualizarea Svelte 4 este în primul rând o versiune de întreținere a Svelte 3, menită să pregătească scena pentru următoarea generație de Svelte să fie lansată ca Svelte 5.

Svelte 4 adaugă diverse îmbunătățiri ecosistemului Svelte, inclusiv o reproiectare a site-ului web, setarea tranzițiilor locale ca implicite, îmbunătățirea suportului pentru componente web și trecerea de la TypeScript la JSDoc.

1. Svelte Redesign site

Svelte 4 a sosit împreună cu îmbunătățiri ale oficialului Svelte site. Noul aspect al site-ului este fantastic, cu documente TypeScript îmbunătățite, o opțiune de mod întunecat, și o experiență de utilizator îmbunătățită în general pe toate dispozitivele.

Site-ul Svelte are acum un REPL îmbunătățit care vă permite să experimentați cu codul Svelte direct în browser.

De asemenea, toate linkurile pentru tutoriale Svelte indică acum noua experiență a cursanților Svelte, în timp ce tutorialele vechi sunt disponibile pentru utilizatorii Safari 16.3 și versiuni anterioare.

2. Tranzițiile locale sunt implicite

Imaginați-vă experiența dureroasă de a fi nevoit să vă mulțumiți cu tranzițiile CSS după ce vizionați pagina dvs. încărcată mai mult decât vă așteptați, deoarece ați folosit tranziții Svelte.

De obicei, o tranziție are loc atunci când distrugi un bloc părinte. Puteți trece peste acest comportament cu ajutorul |local modificator. Acest lucru face ca tranziția să ruleze numai atunci când distrugeți blocul care conține componenta țintă. În Svelte 4, aceasta |local modificatorul este setat ca implicit pentru tranziții.

În fragmentul de mai jos, o tranziție de diapozitiv este adăugată local la div element:

 {articol}

3. Suport îmbunătățit pentru componente web

Svelte a promovat întotdeauna reutilizarea și mentenabilitatea, de unde și suportul său continuu pentru componentele web. Componentele web vă permit să creați elemente HTML personalizate reutilizabile cu stiluri și comportament injectate.

Svelte 4 schimbă modul în care generează componente web, eliminând bug-urile și inconsecvențele. Aceste modificări includ:

• Export creează un suport pentru componente, făcându-l accesibil consumatorilor componente.
• Misiunile sunt reactive. Pentru a schimba starea unei componente și a declanșa o redare, atribuiți-o unei variabile declarate local.
• Folosește $ simbol la începutul unei declarații pentru a o marca ca o declarație reactivă. Declarațiile reactive rulează după alt cod de script și înainte ca marcajul componentei să fie randat, ori de câte ori se modifică valorile dependente.
• Când creați obiecte magazin, prefixați magazinul cu $ pentru a permite accesul reactiv la o valoare.
• Setarea atributului context al unei etichete de script la modul face ca scriptul să ruleze o dată când modulul evaluează prima dată, mai degrabă decât pentru fiecare instanță de componentă.

4. Mutarea de la TypeScript la JSDoc

JSDoc este un instrument de documentare care acceptă adăugarea de adnotări de tip și comentarii la codurile JavaScript.

Având în vedere că JSDoc îi păcălește pe dezvoltatori să-și documenteze codurile, această migrare își propune să încurajeze mai mulți dezvoltatori Svelte să își formeze obiceiul de a-și documenta codurile în mod corespunzător. O bază de cod JavaScrpt documentată în mod adecvat ar necesita puțină verificare de tip sau deloc.

Dacă sunteți nou la TypeScript, ar trebui explorați TypeScript și descoperiți de ce îl preferă dezvoltatorii.

Migrarea la Svelte 4

Svelte 4 are performanțe îmbunătățite și dezvoltare simplificată, ceea ce este excelent pentru construirea de aplicații web de înaltă performanță. Această nouă versiune ar trebui, de asemenea, să încurajeze o documentare mai bună a codului odată cu trecerea la JSDoc.

Svelte continuă să se îmbunătățească și, deși nu este un cadru cu care fiecare dezvoltator este familiarizat, cei care îl laudă foarte mult.