Svelte on lihtne raamistik, mida on lihtne kasutada ja selle viimased muudatused peaksid selle veelgi lihtsamaks muutma.

2023. aasta juunis teatas Svelte oma uusimast stabiilsest versioonist 4. Svelte 4 värskendus on peamiselt Svelte 3 hooldusväljalase, mille eesmärk on luua alus Svelte järgmise põlvkonna Svelte 5 väljalaskmiseks.

Svelte 4 lisab Svelte ökosüsteemi mitmesuguseid täiustusi, sealhulgas veebisaidi ümberkujundamine, kohalike üleminekute määramine vaikimisi, veebikomponentide toe parandamine ja üleminek TypeScriptilt JSDoc-le.

1. Svelte saidi ümberkujundus

Svelte 4 saabus koos ametniku täiustustega Svelte veebisait. Saidi uus välimus on fantastiline, täiustatud TypeScripti dokumentidega, tumeda režiimi valikja üldiselt parem kasutuskogemus kõigis seadmetes.

Svelte saidil on nüüd täiustatud REPL, mis võimaldab katsetada Svelte koodiga otse brauseris.

Samuti osutavad kõik Svelte õpetuse lingid nüüd uuele Svelte õppijate kogemusele, samas kui vanad õpetused on saadaval Safari 16.3 ja varasemate versioonide kasutajatele.

instagram viewer

2. Kohalikud üleminekud on vaikimisi

Kujutage ette valusat kogemust, kui peate leppima CSS-i üleminekutega pärast seda, kui olete oodatust kauem jälginud oma lehe laadimist, kuna kasutasite Svelte üleminekuid.

Tavaliselt mängitakse üleminek, kui hävitate emaploki. Saate selle käitumise tühistada rakendusega |kohalik modifikaator. See käivitab ülemineku ainult siis, kui hävitate sihtkomponenti sisaldava ploki. Svelte 4-s on see |kohalik modifikaator on määratud üleminekute vaikeseadeks.

Alloleval lõigul lisatakse slaidi üleminek lokaalselt div element:

 {item}

3. Täiustatud veebikomponentide tugi

Svelte on alati propageerinud taaskasutatavust ja hooldatavust, sellest tulenevalt ka veebikomponentide pidevat toetamist. Veebikomponendid võimaldavad teil luua korduvkasutatavaid kohandatud HTML-i elemente sisestatud stiilide ja käitumisega.

Svelte 4 muudab veebikomponentide loomise viisi, eemaldades vead ja ebakõlad. Need muudatused hõlmavad järgmist:

  • Ekspordi loob komponendi rekvisiidi, muutes selle komponentide tarbijatele kättesaadavaks.
  • Ülesanded on reaktiivsed. Komponendi oleku muutmiseks ja uuesti renderdamise käivitamiseks määrake see kohalikult deklareeritud muutujale.
  • Kasuta $ sümbol lause alguses, et märkida see reaktiivseks väiteks. Reaktiivsed avaldused käivitatakse pärast muud skriptikoodi ja enne komponendi märgistuse renderdamist, kui sõltuvad väärtused muutuvad.
  • Poeobjektide loomisel lisage poe eesliide $ et võimaldada reaktiivset juurdepääsu väärtusele.
  • Skriptimärgendi kontekstiatribuudi määramine moodul põhjustab skripti ühekordse käivitamise, kui moodul esimest korda hindab, mitte iga komponendi eksemplari puhul.

4. Liikumine TypeScriptilt JSDoc-le

JSDoc on dokumentatsioonitööriist, mis toetab JavaScripti koodidele tüübimärkuste ja kommentaaride lisamist.

Arvestades, et JSDoc meelitab arendajaid oma koode dokumenteerima, on selle migratsiooni eesmärk julgustada rohkem Svelte'i arendajaid kujundama harjumust oma koode õigesti dokumenteerida. Piisavalt dokumenteeritud JavaScrpt koodibaas nõuaks vähe või üldse mitte tüübikontrolli.

Kui olete TypeScripti uus kasutaja, peaksite seda tegema uurige TypeScripti ja avastage, miks arendajad seda eelistavad.

Migreerimine Svelte 4-le

Svelte 4-l on täiustatud jõudlus ja täiustatud arendus, mis sobib suurepäraselt suure jõudlusega veebirakenduste loomiseks. See uus väljalase peaks julgustama ka paremat koodidokumentatsiooni koos JSDoc-ile üleminekuga.

Svelte täiustab jätkuvalt ja kuigi see pole raamistik, mida iga arendaja tunneb, kiidavad need, kes on, seda tugevalt.