Apa yang Baru di Svelte 4?
Table of content:
Pada bulan Juni 2023, Svelte mengumumkan rilis stabil terbarunya, versi 4. Pembaruan Svelte 4 pada dasarnya adalah rilis pemeliharaan Svelte 3, yang ditujukan untuk menetapkan tahapan bagi generasi berikutnya dari Svelte untuk dirilis sebagai Svelte 5.
Svelte 4 menambahkan berbagai peningkatan pada ekosistem Svelte, termasuk desain ulang situs web, menyetel transisi lokal sebagai default, meningkatkan dukungan komponen web, dan beralih dari TypeScript ke JSDoc.
Baca Juga:
1. Desain Ulang Situs Langsing
Langsing 4 tiba bersama dengan perbaikan resmi Situs web ramping. Tampilan baru situs ini luar biasa, dengan dokumen TypeScript yang ditingkatkan, opsi mode gelap, dan pengalaman pengguna yang secara umum lebih baik di seluruh perangkat.
Situs Svelte sekarang memiliki REPL yang disempurnakan yang memungkinkan Anda bereksperimen dengan kode Svelte langsung di browser.
Selain itu, semua tautan tutorial Svelte kini mengarah ke pengalaman baru pelajar Svelte, sementara tutorial lama tersedia untuk pengguna Safari 16.3 dan sebelumnya.
2. Transisi Lokal Adalah Default
Bayangkan pengalaman menyakitkan harus puas dengan transisi CSS setelah melihat halaman Anda memuat lebih lama dari yang diharapkan karena Anda menggunakan transisi Svelte.
Biasanya, transisi dimainkan saat Anda menghancurkan blok induk. Anda dapat mengganti perilaku ini dengan | lokal pengubah. Ini menyebabkan transisi hanya berjalan ketika Anda menghancurkan blok yang berisi komponen target. Di Svelte 4, ini | lokal pengubah ditetapkan sebagai default untuk transisi.
Dalam cuplikan di bawah, transisi slide ditambahkan secara lokal ke div elemen:
<div transition:slide|local> {item}</div> 3. Peningkatan Dukungan Komponen Web
Svelte selalu mempromosikan penggunaan kembali dan pemeliharaan, karenanya dukungan berkelanjutan untuk komponen web. Komponen web memungkinkan Anda membuat elemen HTML khusus yang dapat digunakan kembali dengan gaya dan perilaku yang disuntikkan.
Svelte 4 mengubah cara pembuatan komponen web, menghapus bug dan ketidakkonsistenan. Perubahan ini meliputi:
- Ekspor membuat prop komponen, membuatnya dapat diakses oleh konsumen komponen.
- Tugas bersifat reaktif. Untuk mengubah status komponen dan memicu render ulang, tetapkan komponen tersebut ke variabel yang dideklarasikan secara lokal.
- Menggunakan $ simbol di awal pernyataan untuk menandainya sebagai pernyataan reaktif. Pernyataan reaktif dijalankan setelah kode skrip lain dan sebelum markup komponen dirender, setiap kali nilai dependen berubah.
- Saat membuat objek toko, awali toko dengan $ untuk memungkinkan akses reaktif ke suatu nilai.
- Menyetel atribut konteks tag skrip ke modul menyebabkan skrip dijalankan sekali saat modul pertama kali mengevaluasi, bukan untuk setiap instance komponen.
4. Perpindahan Dari TypeScript ke JSDoc
JSDoc adalah alat dokumentasi yang mendukung penambahan anotasi tipe dan komentar ke kode JavaScript.
Mempertimbangkan bahwa JSDoc menipu pengembang untuk mendokumentasikan kode mereka, migrasi ini bertujuan untuk mendorong lebih banyak pengembang Svelte untuk membentuk kebiasaan mendokumentasikan kode mereka dengan benar. Basis kode JavaScrpt yang terdokumentasi secara memadai akan membutuhkan sedikit atau tanpa pemeriksaan tipe.
Jika Anda baru mengenal TypeScript, Anda harus menjelajahi TypeScript dan mencari tahu mengapa pengembang lebih menyukainya.
Bermigrasi ke Langsing 4
Svelte 4 memiliki peningkatan kinerja dan pengembangan yang disederhanakan, yang sangat baik untuk membuat aplikasi web berperforma tinggi. Rilis baru ini juga akan mendorong dokumentasi kode yang lebih baik dengan perpindahan ke JSDoc.
Svelte terus meningkat, dan meskipun ini bukan kerangka kerja yang dikenal oleh setiap pengembang, mereka yang sangat memujinya.
Artikel Terkait
