Auto-animate ha rilasciato un adattatore ufficiale per Marko 6, consentendo agli sviluppatori di animare i cambiamenti nelle liste con un singolo tag e senza codice personalizzato. Il pacchetto si installa tramite npm, si importa come AutoAnimate e funziona immediatamente per aggiunte, rimozioni e riordinamenti.

Perché Marko ne aveva bisogno

Il modello di rendering di Marko salta la consueta fase di idratazione. Il server trasmette l'HTML, il client "riprende" esattamente dal punto in cui il server si è fermato e nessun secondo rendering ricostruisce l'albero dei componenti. Poiché il framework viene distribuito con pochissimo JavaScript, qualsiasi libreria aggiuntiva che inietti un runtime pesante annullerebbe questo vantaggio.

Il nuovo adattatore si aggancia direttamente ai nodi del DOM reale che Marko fornisce già. Crea un MutationObserver — un'API del browser che monitora le modifiche al DOM — e attiva la logica di transizione di auto-animate ogni volta che i dati sottostanti della lista mutano. In pratica, gli sviluppatori devono solo mutare i propri dati; il DOM si aggiorna e si anima automaticamente.

Per iniziare

  1. Installa il pacchetto core 

    npm install @formkit/auto-animate

  2. Aggiungi l'adattatore specifico per Marko 

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

  3. Avvolgi l'elemento genitore della lista con <AutoAnimate>.

Tutto qui. Niente hook, niente direttive extra, niente gestione manuale del ciclo di vita.

Suggerimento per Vite

I nuovi progetti Vite a volte restituiscono un errore di importazione per l'adattatore. Aggiungere quanto segue a vite.config.ts risolve il problema:

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

L'esclusione permette al plugin di Marko di gestire il pacchetto invece dell'ottimizzatore di Vite.

Cosa guadagnano gli sviluppatori

  • Impronta minima – L'adattatore aggiunge solo il codice necessario per osservare le mutazioni del DOM; non gonfia il bundle di Marko, già molto leggero.
  • Attivazione/disattivazione reattiva – Un semplice attributo reattivo può attivare o disattivare le animazioni a runtime.
  • Zero formalità – Non è necessario scrivere logica di animazione per ogni elemento o gestire gli hook di mount/unmount.
  • Pulizia automatica – Il tag elimina il proprio observer quando il componente viene smontato, prevenendo perdite di memoria.

Una demo live mostra l'intera API, inclusi plugin opzionali per effetti di rimbalzo (bounce) e stile molla (spring). Il link alla sandbox è fornito nell'annuncio originale.

Possibili svantaggi

L'adattatore si concentra sulle animazioni delle liste; coreografie più complesse (ad esempio, l'entrata scalata di elementi non correlati) richiedono ancora codice personalizzato o una libreria diversa. Gli sviluppatori che utilizzano Vite devono ricordarsi la modifica alla configurazione, altrimenti incontreranno un errore di importazione. Infine, poiché il meccanismo si basa su MutationObserver, gli ambienti privi di un DOM completo (come i test di rendering lato server) non vedranno le animazioni, anche se non comprometteranno comunque l'interfaccia utente.

Cosa aspettarsi in futuro

I manutentori di auto-animate hanno accennato ad altri adattatori per altri framework che condividono la filosofia "resume-from-HTML" di Marko. Se il plugin di Marko dovesse riscuotere successo, potremmo vedere apparire nei prossimi mesi estensioni contribuite dalla community, come il supporto al drag-and-drop o l'integrazione con librerie di gestione dello stato.

In sintesi: Unendo il motore di transizione dichiarativo di auto-animate con l'approccio a runtime minimo di Marko, il nuovo adattatore offre animazioni delle liste che non pesano quasi nulla sul bundle e non richiedono codice extra, mantenendo l'esperienza di sviluppo fluida quanto il framework stesso.