Auto-Animate ha rilasciato il suo primo adattatore ufficiale per Marko 6, permettendo agli sviluppatori di animare i cambiamenti delle liste con un singolo tag e senza JavaScript aggiuntivo. Questa mossa è importante perché elimina il boilerplate che per lungo tempo ha reso l'animazione nei progetti Marko un compito complesso e specifico.

Il modello di rendering di Marko salta la fase di "hydration" lato client su cui si affidano framework come React o Vue. Dopo che il server invia l'HTML, Marko riprende semplicemente quel markup sul posto, mantenendo i bundle minuscoli — circa 7 KB gzipped per il runtime. Tuttavia, lo stesso accorgimento blocca molte librerie di animazione che attendono un rendering lato client prima di poter applicare gli effetti. Senza un aggancio al DOM già presente, gli sviluppatori hanno tradizionalmente dovuto scrivere codice personalizzato per ogni aggiornamento della lista.

Il nuovo adattatore aggira questo limite agganciandosi al ciclo di vita onMount di Marko. Quando un componente viene montato, l'adattatore crea un MutationObserver che monitora il nodo genitore della lista per rilevare cambiamenti. Man mano che gli elementi vengono aggiunti, filtrati o rimescolati, l'observer attiva il motore di transizione integrato di auto-animate, fornendo automaticamente animazioni fluide di entrata, uscita e riordinamento. Tutto questo avviene tramite un singolo tag <auto-animate>.

Il tag accetta tre attributi:

  • parent – una variabile tag di Marko che punta al contenitore della lista.
  • options – un oggetto per la durata, l'easing e altre impostazioni di temporizzazione.
  • enabled – un booleano reattivo che può attivare o disattivare le animazioni a runtime.

Poiché enabled è reattivo, gli sviluppatori possono collegarlo a qualsiasi valore di stato e attivare o disattivare il movimento senza toccare il DOM o riscrivere gli handler. L'adattatore offre quindi maggiore flessibilità rispetto a una direttiva statica, pur rimanendo invisibile al resto dell'albero dei componenti.

Per i team che utilizzano Vite, il pacchetto può causare un avviso di "unresolved import". Aggiungere quanto segue a vite.config.ts risolve il problema:

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

Questo dice a Vite di lasciare che il plugin di Marko gestisca l'import invece di provare a pre-bundlearlo.

Il vantaggio pratico è immediato. Una tipica lista Marko che in precedenza richiedeva un hook useEffect, toggle manuali di classi e una manciata di righe di codice di animazione, può ora essere scritta come:

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

Nessun JavaScript extra, nessun peso aggiuntivo nel bundle e lo stesso movimento fluido che auto-animate fornisce per altri framework.

Chi vince, chi osserva

I team front-end che hanno già adottato Marko ottengono una soluzione pronta all'uso per un pattern UI frequente: le liste dinamiche. La natura leggera dell'adattatore preserva il tratto distintivo di Marko, ovvero i bundle minuscoli, fondamentale per i siti critici in termini di prestazioni. D'altro canto, l'adattatore si concentra attualmente sulle mutazioni delle liste; gli sviluppatori che necessitano di un controllo della timeline personalizzato o di una coreografia complessa dovranno comunque ricorrere a codice custom o a un'altra libreria.

Cosa aspettarsi in futuro

L'adattatore è open-source e ha già una sandbox demo collegata nelle note di rilascio. Il feedback della community probabilmente darà forma a future estensioni, come il supporto per il reflow delle griglie o l'integrazione con le prossime transizioni a livello di componente di Marko. Se la curva di adozione rispecchierà la rapida diffusione di auto-animate in React e Vue, potremmo assistere a una spinta più ampia verso il movimento "zero-code" in tutto l'ecosistema UI di JavaScript.

In sintesi: L'adattatore Marko 6 di Auto-Animate trasforma un compito storicamente ingombrante — animare liste renderizzate sul server — in un singolo tag dichiarativo, preservando le dimensioni minime del bundle di Marko e offrendo agli sviluppatori uno strato di movimento istantaneo e attivabile.