Auto-animate merilis adaptor resmi untuk Marko 6, memungkinkan pengembang menganimasi perubahan daftar hanya dengan satu tag dan tanpa kode kustom. Paket ini dapat langsung digunakan via npm, diimpor sebagai AutoAnimate, dan berfungsi secara instan untuk penambahan, penghapusan, dan pengurutan ulang.

Mengapa Marko membutuhkan ini

Model rendering Marko melewati langkah hidrasi yang biasa dilakukan. Server mengirimkan aliran HTML, klien "melanjutkan" tepat dari titik terakhir server berhenti, dan tidak ada render kedua yang membangun ulang pohon komponen. Karena framework ini hadir dengan sangat sedikit JavaScript, library tambahan apa pun yang menyuntikkan runtime berat akan menghilangkan keuntungan tersebut.

Adaptor baru ini terhubung langsung ke node DOM asli yang sudah disediakan oleh Marko. Ia membuat MutationObserver—sebuah API browser yang memantau perubahan pada DOM—dan memicu logika transisi auto-animate setiap kali data dasar daftar berubah. Dalam praktiknya, pengembang hanya perlu mengubah data mereka; DOM akan diperbarui dan dianimasikan secara otomatis.

Memulai

  1. Instal paket inti 

    npm install @formkit/auto-animate

  2. Masukkan adaptor khusus Marko 

    import AutoAnimate from "@formkit/auto-animate/marko"

  3. Bungkus elemen induk daftar dengan <AutoAnimate>.

Selesai. Tanpa hooks, tanpa direktif tambahan, tanpa manajemen siklus hidup manual.

Tips Vite

Proyek Vite baru terkadang memunculkan kesalahan impor untuk adaptor tersebut. Menambahkan hal berikut ke vite.config.ts akan menyelesaikannya:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

Pengecualian ini memungkinkan plugin milik Marko sendiri untuk menangani paket tersebut alih-alih optimizer Vite.

Keuntungan bagi pengembang

  • Jejak yang sangat kecil – Adaptor ini hanya menambahkan kode yang diperlukan untuk memantau mutasi DOM; ia tidak memperbesar ukuran bundle Marko yang sudah ramping.
  • Pengaktifan reaktif – Atribut reaktif sederhana dapat menyalakan atau mematikan animasi saat runtime.
  • Tanpa kerumitan – Tidak perlu menulis logika animasi per item atau mengelola hook mount/unmount.
  • Pembersihan otomatis – Tag tersebut membuang observer-nya saat komponen unmount, mencegah kebocoran memori.

Demo langsung menunjukkan API lengkapnya, termasuk plugin opsional untuk efek pantulan (bounce) dan gaya pegas (spring). Tautan sandbox tersedia dalam pengumuman asli.

Kemungkinan kekurangan

Adaptor ini berfokus pada animasi daftar; koreografi yang lebih kompleks (misalnya, kemunculan bertahap dari elemen yang tidak terkait) masih memerlukan kode kustom atau library yang berbeda. Pengembang yang menggunakan Vite harus mengingat penyesuaian konfigurasi tersebut, atau mereka akan menemui kesalahan impor. Terakhir, karena mekanismenya mengandalkan MutationObserver, lingkungan tanpa DOM lengkap (seperti pengujian rendering sisi server) tidak akan melihat animasi, meskipun hal itu tidak akan merusak UI.

Apa yang perlu diperhatikan selanjutnya

Pemelihara auto-animate telah mengisyaratkan adanya adaptor tambahan untuk framework lain yang berbagi filosofi "melanjutkan dari HTML" milik Marko. Jika plugin Marko terbukti populer, kita mungkin akan melihat ekstensi kontribusi komunitas—seperti dukungan drag-and-drop atau integrasi dengan library manajemen state—muncul dalam beberapa bulan mendatang.

Kesimpulan: Dengan memadukan mesin transisi deklaratif auto-animate dengan pendekatan runtime minimal Marko, adaptor baru ini menghadirkan animasi daftar yang hampir tidak membebani ukuran bundle dan tidak memerlukan kode tambahan, menjaga pengalaman pengembang tetap semulus framework itu sendiri.