Svelte on yksinkertainen kehys, jota on helppo käyttää ja sen uusimpien muutosten pitäisi tehdä siitä entistä helpompi.

Kesäkuussa 2023 Svelte julkisti uusimman vakaan julkaisunsa, version 4. Svelte 4 -päivitys on ensisijaisesti Svelte 3:n ylläpitojulkaisu, jonka tarkoituksena on luoda alusta Svelten seuraavan sukupolven julkaisemiselle Svelte 5:nä.

Svelte 4 lisää useita parannuksia Svelte-ekosysteemiin, mukaan lukien verkkosivustojen uudelleensuunnittelu, paikallisten siirtymien asettaminen oletusarvoiksi, verkkokomponenttien tuen parantaminen ja siirtyminen TypeScriptistä JSDociin.

1. Svelte Site Redesign

Svelte 4 saapui virallisten parannusten kanssa Svelte sivusto. Sivuston uusi ulkoasu on upea, ja siinä on parannetut TypeScript-dokumentit, tumman tilan vaihtoehtoja yleisesti parantunut käyttökokemus kaikilla laitteilla.

Svelte-sivustolla on nyt parannettu REPL, jonka avulla voit kokeilla Svelte-koodia suoraan selaimessa.

Lisäksi kaikki Svelte-opetusohjelmalinkit osoittavat nyt uuteen Svelte-oppilaiden kokemukseen, kun taas vanhat opetusohjelmat ovat saatavilla Safari 16.3:n ja sitä vanhempien versioiden käyttäjille.

instagram viewer

2. Paikalliset siirtymät ovat oletusarvoja

Kuvittele tuskallinen kokemus, kun joudut tyytymään CSS-siirtymiin, kun olet katsonut sivusi latautuvan odotettua pidempään, koska käytit Svelte-siirtymiä.

Yleensä siirtymä toistetaan, kun tuhoat päälohkon. Voit ohittaa tämän käytöksen komennolla |paikallinen muuntaja. Tämä saa siirtymän suorittamaan vain, kun tuhoat kohdekomponentin sisältävän lohkon. Svelte 4:ssä tämä |paikallinen muuntaja on asetettu oletusarvoksi siirtymille.

Alla olevassa katkelmassa diasiirtymä on lisätty paikallisesti div elementti:

 {item}

3. Parannettu verkkokomponenttien tuki

Svelte on aina edistänyt uudelleenkäytettävyyttä ja ylläpidettävyyttä, mistä johtuen sen jatkuva tuki verkkokomponenteille. Verkkokomponenttien avulla voit luoda uudelleenkäytettäviä mukautettuja HTML-elementtejä lisätyillä tyyleillä ja käyttäytymisellä.

Svelte 4 muuttaa tapaa, jolla se luo verkkokomponentteja, poistaen virheet ja epäjohdonmukaisuudet. Näitä muutoksia ovat mm.

  • Viedä luo komponenttipotkun, jolloin se on komponenttien kuluttajien saatavilla.
  • Tehtävät ovat reaktiivisia. Muuttaaksesi komponentin tilaa ja käynnistääksesi uudelleen renderöinnin, määritä se paikallisesti ilmoitettuun muuttujaan.
  • Käytä $ -symboli lauseen alussa merkitäksesi sen reaktiiviseksi lauseeksi. Reaktiiviset käskyt suoritetaan muun komentosarjakoodin jälkeen ja ennen komponentin merkinnän hahmontamista aina, kun riippuvat arvot muuttuvat.
  • Kun luot myymäläobjekteja, käytä myymälän etuliitettä $ salliaksesi reaktiivisen pääsyn arvoon.
  • Komentosarjatunnisteen kontekstiattribuutin asettaminen arvoon moduuli saa komentosarjan suoritettua kerran, kun moduuli arvioi ensimmäisen kerran kunkin komponentin esiintymän sijaan.

4. Siirtyminen TypeScriptistä JSDociin

JSDoc on dokumentaatiotyökalu, joka tukee tyyppimerkintöjen ja kommenttien lisäämistä JavaScript-koodeihin.

Ottaen huomioon, että JSDoc huijaa kehittäjät dokumentoimaan koodinsa, tällä siirrolla pyritään rohkaisemaan useampia Svelte-kehittäjiä omaksumaan tapana dokumentoida koodinsa oikein. Asianmukaisesti dokumentoitu JavaScrpt-koodikanta vaatisi vain vähän tai ei ollenkaan tyyppitarkistusta.

Jos olet uusi TypeScriptin käyttäjä, sinun pitäisi tutki TypeScriptiä ja selvitä, miksi kehittäjät pitävät siitä.

Siirtyminen Svelteen 4

Svelte 4:ssä on parannettu suorituskyky ja virtaviivaistettu kehitys, mikä sopii erinomaisesti tehokkaiden verkkosovellusten rakentamiseen. Tämän uuden julkaisun pitäisi myös edistää parempaa koodidokumentaatiota JSDoc-versioon siirtymisen myötä.

Svelte kehittyy jatkuvasti, ja vaikka se ei olekaan kaikille kehittäjille tuttu kehys, ne, jotka ovat sitä mieltä, ylistävät sitä voimakkaasti.