Svelte er en enkel ramme, der er nem at bruge, og dens seneste ændringer burde gøre det endnu nemmere.

I juni 2023 annoncerede Svelte sin seneste stabile udgivelse, version 4. Svelte 4-opdateringen er primært en vedligeholdelsesudgivelse af Svelte 3, der sigter mod at sætte scenen for, at næste generation af Svelte udgives som Svelte 5.

Svelte 4 tilføjer forskellige forbedringer til Svelte-økosystemet, herunder et redesign af webstedet, indstilling af lokale overgange som standard, forbedring af understøttelse af webkomponenter og skift fra TypeScript til JSDoc.

1. Svelte Site Redesign

Svelte 4 ankom sammen med forbedringer til embedsmanden Svelte hjemmeside. Sidens nye udseende er fantastisk med forbedrede TypeScript-dokumenter, mulighed for mørk tilstand, og en generelt forbedret brugeroplevelse på tværs af enheder.

Svelte-siden har nu en forbedret REPL, som giver dig mulighed for at eksperimentere med Svelte-kode direkte i browseren.

Alle Svelte-vejledningslinks peger nu på de nye Svelte-elevers oplevelse, mens gamle tutorials er tilgængelige for brugere af Safari 16.3 og tidligere.

instagram viewer

2. Lokale overgange er standard

Forestil dig den smertefulde oplevelse af at skulle nøjes med CSS-overgange efter at have set din side indlæses længere end forventet, fordi du brugte Svelte-overgange.

Normalt spiller en overgang, når du ødelægger en forældreblok. Du kan tilsidesætte denne adfærd med |lokale modifikator. Dette bevirker, at overgangen kun kører, når du ødelægger blokken, der indeholder målkomponenten. I Svelte 4, denne |lokale modifikator er indstillet som standard for overgange.

I uddraget nedenfor tilføjes en diasovergang lokalt til div element:

 {vare}

3. Forbedret support til webkomponenter

Svelte har altid fremmet genbrugelighed og vedligeholdelse, deraf dens kontinuerlige understøttelse af webkomponenter. Webkomponenter giver dig mulighed for at oprette genanvendelige brugerdefinerede HTML-elementer med injiceret stilarter og adfærd.

Svelte 4 ændrer måden, hvorpå den genererer webkomponenter, fjerner fejl og uoverensstemmelser. Disse ændringer omfatter:

  • Eksport skaber en komponentrekvisit, der gør den tilgængelig for komponentforbrugere.
  • Opgaver er reaktive. For at ændre en komponents tilstand og udløse en gengivelse skal du tildele den til en lokalt erklæret variabel.
  • Brug $ symbol i begyndelsen af ​​et udsagn for at markere det som et reaktivt udsagn. Reaktive sætninger kører efter anden scriptkode og før komponentmarkeringen gengives, når afhængige værdier ændres.
  • Når du opretter butiksobjekter, skal du præfikse butikken med $ for at tillade reaktiv adgang til en værdi.
  • Indstilling af et script-tags kontekstattribut til modul får scriptet til at køre én gang, når modulet først evalueres i stedet for for hver komponentforekomst.

4. Overgangen fra TypeScript til JSDoc

JSDoc er et dokumentationsværktøj, der understøtter tilføjelse af typeanmærkninger og kommentarer til JavaScript-koder.

I betragtning af at JSDoc narrer udviklere til at dokumentere deres koder, sigter denne migrering på at tilskynde flere Svelte-udviklere til at danne en vane med at dokumentere deres koder korrekt. En tilstrækkeligt dokumenteret JavaScrpt-kodebase ville kræve lidt eller ingen typekontrol.

Hvis du er ny til TypeScript, bør du udforsk TypeScript og find ud af, hvorfor udviklere foretrækker det.

Migrerer til Svelte 4

Svelte 4 har forbedret ydeevne og strømlinet udvikling, hvilket er fremragende til at bygge højtydende webapplikationer. Denne nye udgivelse skulle også tilskynde til bedre kodedokumentation med overgangen til JSDoc.

Svelte fortsætter med at forbedre sig, og selvom det ikke er en ramme, som enhver udvikler er bekendt med, roser de, der er, det stærkt.