Auto-Animate, Marko 6 için ilk resmi adaptörünü yayınladı; bu sayede geliştiriciler, tek bir etiket kullanarak ve ekstra JavaScript yazmaya gerek duymadan liste değişikliklerini hareketlendirebilecek. Bu hamle önemli, çünkü Marko projelerinde hareket (motion) işlemlerinin uzun süredir özel bir çaba gerektiren bir durum gibi hissettirmesine neden olan gereksiz kod kalabalığını (boilerplate) ortadan kaldırıyor.

Marko'nun işleme (rendering) modeli, React veya Vue gibi çerçevelerin (framework) güvendiği istemci tarafındaki "hydration" adımını atlar. Sunucu HTML'i gönderdikten sonra Marko, bu işaretlemeyi (markup) olduğu yerde sürdürür; bu da paket boyutlarını (bundle) oldukça küçük tutar (çalışma zamanı için sıkıştırılmış haliyle yaklaşık 7 KB). Ancak aynı kestirme yol, efektleri eklemek için istemci tarafındaki işleme işlemini bekleyen birçok animasyon kütüphanesini engeller. Halihazırda mevcut olan DOM'a bir kanca (hook) olmadan, geliştiriciler geleneksel olarak her liste güncellemesi için özel kod yazmak zorunda kalıyordu.

Yeni adaptör, Marko'nun onMount yaşam döngüsüne bağlanarak bu kısıtlamanın etrafından dolanıyor. Bir bileşen bağlandığında (mount), adaptör listenin üst düğümündeki (parent node) değişiklikleri izleyen bir MutationObserver oluşturur. Öğeler eklendiğinde, filtrelendiğinde veya karıştırıldığında, gözlemci (observer) auto-animate'in yerleşik geçiş motorunu tetikleyerek giriş, çıkış ve yeniden sıralama animasyonlarını otomatik olarak pürüzsüz bir şekilde sunar. Tüm bunlar tek bir <auto-animate> etiketiyle gerçekleşir.

Etiket üç öznitelik (attribute) kabul eder:

  • parent – liste kapsayıcısını işaret eden bir Marko etiketi değişkeni.
  • options – süre, yumuşama (easing) ve diğer zamanlama ayarları için bir nesne.
  • enabled – çalışma zamanında animasyonları açıp kapatabilen reaktif bir boolean değer.

enabled reaktif olduğu için geliştiriciler, bunu herhangi bir durum (state) değerine bağlayabilir ve DOM'a dokunmadan veya işleyicileri (handlers) yeniden yazmadan hareketi açıp kapatabilirler. Bu nedenle adaptör, bileşen ağacının geri kalanına görünmez kalırken statik bir direktiften daha fazla esneklik sunar.

Vite kullanan ekipler için paket, bir "unresolved import" uyarısına neden olabilir. Aşağıdakini vite.config.ts dosyasına eklemek sorunu çözer:

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

Bu, Vite'e içe aktarmayı önceden paketlemeye (pre-bundle) çalışmak yerine Marko'nun eklentisinin (plugin) yönetmesine izin vermesini söyler.

Pratik getirisi anında hissedilir. Daha önce bir useEffect kancası, manuel sınıf geçişleri (class toggles) ve birkaç satır animasyon kodu gerektiren tipik bir Marko listesi artık şu şekilde yazılabilir:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

Ekstra JavaScript yok, ekstra paket ağırlığı yok ve auto-animate'in diğer çerçeveler için sağladığı pürüzsüz hareketin aynısı var.

Kim kazanıyor, kim izliyor

Marko'yu halihazırda benimsemiş olan ön uç (front-end) ekipleri, sık karşılaşılan bir kullanıcı arayüzü (UI) deseni olan dinamik listeler için hazır bir çözüm elde ediyor. Adaptörün hafif yapısı, performans açısından kritik siteler için hayati önem taşıyan Marko'nun küçük paket boyutu özelliğini koruyor. Öte yandan, adaptör şu anda yalnızca liste mutasyonlarına odaklanıyor; özel zaman çizelgesi (timeline) kontrolüne veya karmaşık koreografiye ihtiyaç duyan geliştiriciler hala özel kodlara veya başka bir kütüphaneye başvurmak zorunda kalacaklar.

Sırada ne var?

Adaptör açık kaynaklıdır ve sürüm notlarında bağlantısı verilen bir demo sandbox'ı halihazırda mevcuttur. Topluluk geri bildirimleri, muhtemelen ızgara (grid) yeniden akışı desteği veya Marko'nun yaklaşan bileşen düzeyindeki geçişleriyle entegrasyon gibi gelecekteki genişletmeleri şekillendirecektir. Eğer benimsenme eğrisi, auto-animate'in React ve Vue'daki hızlı yükselişini yansıtırsa, JavaScript UI ekosistemi genelinde "sıfır kodlu" (zero-code) hareket için daha geniş bir ivme görebiliriz.

Özet: Auto-Animate'in Marko 6 adaptörü, tarihsel olarak zahmetli bir görev olan sunucu tarafında işlenen listeleri hareketlendirmeyi tek bir deklaratif etikete dönüştürürken, Marko'nun minimum paket boyutunu korur ve geliştiricilere anında açılıp kapatılabilir bir hareket katmanı sunar.