Svelte är ett enkelt ramverk som är lätt att använda och dess senaste ändringar borde göra det ännu enklare.

I juni 2023 tillkännagav Svelte sin senaste stabila version, version 4. Svelte 4-uppdateringen är i första hand en underhållsversion av Svelte 3, som syftar till att sätta scenen för nästa generation av Svelte att släppas som Svelte 5.

Svelte 4 lägger till olika förbättringar av Sveltes ekosystem, inklusive en omdesign av webbplatsen, inställning av lokala övergångar som standard, förbättrat stöd för webbkomponenter och byte från TypeScript till JSDoc.

1. Svelte Site Redesign

Svelte 4 anlände tillsammans med förbättringar av tjänstemannen Sveltes hemsida. Webbplatsens nya utseende är fantastiskt, med förbättrade TypeScript-dokument, ett mörkt lägesalternativ, och en generellt förbättrad användarupplevelse på alla enheter.

Svelte-sajten har nu en förbättrad REPL som låter dig experimentera med Svelte-kod direkt i webbläsaren.

Alla Svelte tutorial-länkar pekar nu på de nya Svelte-lärarnas upplevelse, medan gamla tutorials är tillgängliga för användare av Safari 16.3 och tidigare.

instagram viewer

2. Lokala övergångar är standard

Föreställ dig den smärtsamma upplevelsen av att behöva nöja dig med CSS-övergångar efter att ha sett din sida laddas längre än förväntat eftersom du använde Svelte-övergångar.

Vanligtvis spelar en övergång när du förstör ett föräldrablock. Du kan åsidosätta detta beteende med |lokal modifierare. Detta gör att övergången endast körs när du förstör blocket som innehåller målkomponenten. I Svelte 4, detta |lokal modifierare är inställd som standard för övergångar.

I utdraget nedan läggs en bildövergång lokalt till div element:

 {Artikel}

3. Förbättrat stöd för webbkomponenter

Svelte har alltid främjat återanvändbarhet och underhållbarhet, därav dess kontinuerliga stöd för webbkomponenter. Webbkomponenter låter dig skapa återanvändbara anpassade HTML-element med injicerade stilar och beteende.

Svelte 4 ändrar sättet på vilket det genererar webbkomponenter, tar bort buggar och inkonsekvenser. Dessa ändringar inkluderar:

  • Exportera skapar en komponentrekvisita, vilket gör den tillgänglig för komponentkonsumenter.
  • Uppdragen är reaktiva. För att ändra en komponents tillstånd och utlösa en omrendering, tilldela den till en lokalt deklarerad variabel.
  • Använd $ symbol i början av ett påstående för att markera det som ett reaktivt påstående. Reaktiva satser körs efter annan skriptkod och innan komponentuppmärkningen renderas, när beroende värden ändras.
  • När du skapar butiksobjekt, prefix butiken med $ för att tillåta reaktiv åtkomst till ett värde.
  • Ställa in en skripttaggs kontextattribut till modul gör att skriptet körs en gång när modulen först utvärderas snarare än för varje komponentinstans.

4. Övergången från TypeScript till JSDoc

JSDoc är ett dokumentationsverktyg som stöder att lägga till typkommentarer och kommentarer till JavaScript-koder.

Med tanke på att JSDoc lurar utvecklare att dokumentera sina koder, syftar denna migrering till att uppmuntra fler Svelte-utvecklare att ta för vana att dokumentera sina koder ordentligt. En adekvat dokumenterad JavaScrpt-kodbas skulle kräva liten eller ingen typkontroll.

Om du är ny på TypeScript bör du göra det utforska TypeScript och upptäck varför utvecklare föredrar det.

Migrerar till Svelte 4

Svelte 4 har förbättrad prestanda och strömlinjeformad utveckling, vilket är utmärkt för att bygga högpresterande webbapplikationer. Denna nya version bör också uppmuntra bättre koddokumentation i och med övergången till JSDoc.

Svelte fortsätter att förbättras, och även om det inte är ett ramverk som alla utvecklare är bekanta med, berömmer de som är det starkt.