La solution incontournable pour un calendrier a été un widget JavaScript : FullCalendar, Pikaday, flatpickr ou l'un des douze autres. Ces bibliothèques possèdent le DOM. Ils restituent leur propre balisage, gèrent leur propre état et répondent à l'interaction de l'utilisateur en mutant directement le DOM.
Dans un contexte Livewire ou Live Component, il s'agit d'un conflit fondamental.
Lorsque l'utilisateur clique sur « le mois prochain » dans un calendrier JS, la bibliothèque met à jour son état interne et restitue son propre balisage dans le DOM. Le serveur n'en sait rien. Imaginez maintenant que le même composant possède un accessoire côté serveur qui doit également être mis à jour, par exemple une liste d'événements sous le calendrier. Au moment où Livewire restitue le composant, il remplace le sous-arbre DOM géré par la bibliothèque JS. L'état de la bibliothèque a disparu. Le calendrier revient au mois considéré par le serveur. Vous vous battez maintenant pour savoir à qui appartient le DOM, et aucune des deux parties ne gagne clairement.
Vous pouvez contourner ce problème avec des contrôleurs Stimulus et un câblage minutieux des événements, mais chaque solution de contournement ajoute de la complexité. Vous finissez par maintenir un état de date caché côté serveur qui reflète l'état du calendrier JS, en les synchronisant à chaque interaction et en espérant que morphdom ou la réactivité d'Alpine ne fasse pas exploser vos écouteurs d'événements soigneusement câblés dans le processus. J'ai vu des équipes passer des jours là-dessus. Le résultat est toujours fragile.
Le problème principal est architectural : les bibliothèques de calendriers JS ont été conçues pour un monde où le client possède l'État. Ils sont entièrement antérieurs à la renaissance des composants côté serveur.
Ce n’est pas une lacune qui a été négligée : elle n’a tout simplement jamais été nécessaire. Avant Livewire et Live Components, un calendrier rendu sur le serveur était un objet mort. Vous pourriez générer du HTML, mais alors quoi ? L'utilisateur clique sur "le mois prochain" et vous avez besoin d'un rechargement complet de la page ou d'un point de terminaison AJAX personnalisé juste pour avancer d'un mois. Personne ne v...
[Courte citation de 8% de l'article original]