Cosa c'è di nuovo in Svelte 4?

Nel giugno 2023, Svelte ha annunciato la sua versione stabile più recente, la versione 4. L'aggiornamento di Svelte 4 è principalmente una versione di manutenzione di Svelte 3, volta a preparare il terreno per la prossima generazione di Svelte da rilasciare come Svelte 5.

Svelte 4 aggiunge vari miglioramenti all'ecosistema Svelte, tra cui una riprogettazione del sito Web, l'impostazione delle transizioni locali come predefinite, il miglioramento del supporto dei componenti Web e il passaggio da TypeScript a JSDoc.

1. Riprogettazione del sito snella

Svelte 4 è arrivato insieme a miglioramenti all'ufficiale Sito Svelto. Il nuovo look del sito è fantastico, con documenti TypeScript migliorati, un'opzione di modalità oscurae un'esperienza utente generalmente migliorata su tutti i dispositivi.

Il sito Svelte ha ora un REPL migliorato che ti consente di sperimentare il codice Svelte direttamente nel browser.

Inoltre, tutti i collegamenti ai tutorial Svelte ora puntano alla nuova esperienza degli studenti Svelte, mentre i vecchi tutorial sono disponibili per gli utenti di Safari 16.3 e versioni precedenti.

2. Le transizioni locali sono predefinite

Immagina la dolorosa esperienza di doversi accontentare delle transizioni CSS dopo aver visto la tua pagina caricarsi più a lungo del previsto perché hai utilizzato le transizioni Svelte.

Di solito, viene riprodotta una transizione quando distruggi un blocco genitore. Puoi sovrascrivere questo comportamento con il file |locale modificatore. Ciò fa sì che la transizione venga eseguita solo quando distruggi il blocco contenente il componente di destinazione. In Svelte 4, questo |locale modificatore è impostato come predefinito per le transizioni.

Nello snippet di seguito, una transizione di diapositiva viene aggiunta localmente al file div elemento:

 {articolo}

3. Supporto dei componenti Web migliorato

Svelte ha sempre promosso la riutilizzabilità e la manutenibilità, da qui il suo continuo supporto per i componenti web. I componenti Web consentono di creare elementi HTML personalizzati riutilizzabili con stili e comportamenti inseriti.

Svelte 4 cambia il modo in cui genera componenti web, rimuovendo bug e incoerenze. Queste modifiche includono:

• Esportare crea un componente prop, rendendolo accessibile ai consumatori di componenti.
• Le assegnazioni sono reattive. Per modificare lo stato di un componente e attivare un nuovo rendering, assegnalo a una variabile dichiarata localmente.
• Usa il $ simbolo all'inizio di un'istruzione per contrassegnarla come un'istruzione reattiva. Le istruzioni reattive vengono eseguite dopo un altro codice di script e prima del rendering del markup del componente, ogni volta che i valori dipendenti cambiano.
• Quando crei oggetti negozio, anteponi il negozio con $ per consentire l'accesso reattivo a un valore.
• Impostare l'attributo di contesto di un tag di script su modulo fa in modo che lo script venga eseguito una volta quando il modulo valuta per la prima volta anziché per ogni istanza del componente.

4. Il passaggio da TypeScript a JSDoc

JSDoc è uno strumento di documentazione che supporta l'aggiunta di annotazioni di tipo e commenti ai codici JavaScript.

Considerando che JSDoc induce gli sviluppatori a documentare i propri codici, questa migrazione mira a incoraggiare più sviluppatori Svelte a prendere l'abitudine di documentare correttamente i propri codici. Una base di codice JavaScrpt adeguatamente documentata richiederebbe un controllo del tipo minimo o nullo.

Se sei nuovo in TypeScript, dovresti esplora TypeScript e scopri perché gli sviluppatori lo preferiscono.

Migrazione a Svelte 4

Svelte 4 ha prestazioni migliorate e uno sviluppo semplificato, il che è eccellente per la creazione di applicazioni Web ad alte prestazioni. Questa nuova versione dovrebbe anche incoraggiare una migliore documentazione del codice con il passaggio a JSDoc.

Svelte continua a migliorare e, sebbene non sia un framework familiare a tutti gli sviluppatori, coloro che lo apprezzano fortemente.