Wat is er nieuw in Svelte 4?

In juni 2023 kondigde Svelte zijn meest recente stabiele release aan, versie 4. De Svelte 4-update is in de eerste plaats een onderhoudsrelease van Svelte 3, bedoeld om de weg vrij te maken voor de volgende generatie van Svelte om uit te brengen als Svelte 5.

Svelte 4 voegt verschillende verbeteringen toe aan het Svelte-ecosysteem, waaronder een herontwerp van de website, het instellen van lokale overgangen als standaard, het verbeteren van de ondersteuning voor webcomponenten en het overschakelen van TypeScript naar JSDoc.

1. Slank herontwerp van de site

Svelte 4 arriveerde samen met verbeteringen aan de ambtenaar Svelte website. De nieuwe look van de site is fantastisch, met verbeterde TypeScript-documenten, een optie voor de donkere modus, en een algemeen verbeterde gebruikerservaring op verschillende apparaten.

De Svelte-site heeft nu een verbeterde REPL waarmee u rechtstreeks in de browser met Svelte-code kunt experimenteren.

Ook verwijzen alle links naar Svelte-tutorials nu naar de nieuwe ervaring van Svelte-leerlingen, terwijl oude tutorials beschikbaar zijn voor gebruikers van Safari 16.3 en eerder.

2. Lokale overgangen zijn standaard

Stel je de pijnlijke ervaring voor dat je genoegen moet nemen met CSS-overgangen nadat je je pagina langer dan verwacht hebt zien laden omdat je Svelte-overgangen hebt gebruikt.

Gewoonlijk wordt er een overgang afgespeeld wanneer u een bovenliggend blok vernietigt. U kunt dit gedrag overschrijven met de |lokaal modificator. Hierdoor wordt de overgang alleen uitgevoerd wanneer u het blok met de doelcomponent vernietigt. In Svelte 4, dit |lokaal modifier is standaard ingesteld voor overgangen.

In het onderstaande fragment is lokaal een dia-overgang toegevoegd aan het div element:

 {item}

3. Verbeterde ondersteuning voor webcomponenten

Svelte heeft altijd hergebruik en onderhoud gepromoot, vandaar de voortdurende ondersteuning voor webcomponenten. Met webcomponenten kunt u herbruikbare aangepaste HTML-elementen maken met geïnjecteerde stijlen en gedragingen.

Svelte 4 verandert de manier waarop het webcomponenten genereert, door bugs en inconsistenties te verwijderen. Deze wijzigingen omvatten:

• Exporteren creëert een componentprop, waardoor deze toegankelijk wordt voor componentconsumenten.
• Opdrachten zijn reactief. Als u de status van een component wilt wijzigen en een nieuwe weergave wilt activeren, wijst u deze toe aan een lokaal gedeclareerde variabele.
• Gebruik de $ symbool aan het begin van een statement om het te markeren als een reactieve statement. Reactieve instructies worden uitgevoerd na andere scriptcode en voordat de componentopmaak wordt weergegeven, wanneer afhankelijke waarden veranderen.
• Bij het maken van winkelobjecten, prefix de winkel met $ om reactieve toegang tot een waarde toe te staan.
• Het contextattribuut van een scripttag instellen op moduul zorgt ervoor dat het script één keer wordt uitgevoerd wanneer de module voor het eerst evalueert in plaats van voor elke componentinstantie.

4. De overstap van TypeScript naar JSDoc

JSDoc is een documentatietool die het toevoegen van type-annotaties en opmerkingen aan JavaScript-codes ondersteunt.

Gezien het feit dat JSDoc ontwikkelaars verleidt om hun codes te documenteren, is deze migratie bedoeld om meer slanke ontwikkelaars aan te moedigen om de gewoonte aan te nemen om hun codes correct te documenteren. Een adequaat gedocumenteerde JavaScrpt-codebase zou weinig of geen typecontrole vereisen.

Als TypeScript nieuw voor je is, zou je dat moeten doen verken TypeScript en ontdek waarom ontwikkelaars er de voorkeur aan geven.

Migreren naar Svelte 4

Svelte 4 heeft verbeterde prestaties en gestroomlijnde ontwikkeling, wat uitstekend geschikt is voor het bouwen van goed presterende webapplicaties. Deze nieuwe release zou ook betere codedocumentatie moeten stimuleren met de overstap naar JSDoc.

Svelte blijft verbeteren, en hoewel het geen raamwerk is waarmee elke ontwikkelaar bekend is, prijzen degenen die het sterk waarderen.