htmx 4.0.0 abandonne XMLHttpRequest au profit de fetch et revoit l'héritage d'attributs

Un passage fondamental à l'API fetch

La bibliothèque htmx, très populaire pour dynamiser des interfaces web directement en HTML sans frameworks lourds, passe un cap symbolique avec sa version 4.0.0. Historiquement dépendante de XMLHttpRequest (l'ancienne interface JavaScript pour envoyer des requêtes HTTP asynchrones depuis le navigateur), la bibliothèque s'appuie désormais nativement sur fetch() (la norme moderne du Web pour exécuter des requêtes réseau asynchrones). Ce changement interne rend la base de code plus lisible et facilite la création d'extensions orientées flux de données (streaming), tout en conservant un fonctionnement quasi identique pour la majorité des développeurs. Sur NPM (le gestionnaire de paquets de l'écosystème Node.js), la branche 2.x reste désignée comme latest jusqu'en 2027 afin d'éviter de casser les applications qui dépendent de liens CDN sans numéro de version explicite.

Un héritage d'attributs désormais explicite

Le changement le plus impactant pour le code existant concerne l'héritage des attributs. Dans htmx 2, les enfants d'un élément HTML héritaient automatiquement des attributs htmx de leurs parents, une mécanique puissante mais parfois déroutante. Dans htmx 4, l'héritage devient strictement explicite : il faut ajouter le suffixe :inherited à l'attribut du parent pour qu'il se propage aux enfants. En conséquence, les attributs de désactivation comme hx-disinherit ont été supprimés. Un outil en ligne de commande est fourni pour analyser et migrer automatiquement le code source.

npx htmx.org@4.0.0 upgrade-check -- ./templates

<!-- htmx 2 -->
<div hx-confirm="Êtes-vous sûr ?">
  <button hx-delete="/item/1">Supprimer</button>
</div>

<!-- htmx 4 -->
<div hx-confirm:inherited="Êtes-vous sûr ?">
  <button hx-delete="/item/1">Supprimer</button>
</div>

Harmonisation des événements et gestion de l'historique

L'écosystème d'événements JavaScript émis par htmx adopte une nomenclature unifiée sous la forme htmx:phase:action[:sub-action]. Par exemple, l'ancien événement htmx:beforeRequest devient htmx:before:request. Les erreurs HTTP déclenchent désormais l'événement htmx:response:error, et la plupart des exceptions génériques sont regroupées sous htmx:error. Par ailleurs, htmx 4 revoit l'historique du navigateur : la mise en cache de l'état du DOM (Document Object Model, l'arbre représentant la structure HTML en mémoire) dans le localStorage est supprimée. Lors d'un retour en arrière, la page est re-demandée au serveur puis réinsérée dans le corps du document (<body>), évitant ainsi les conflits avec des scripts tiers dont les modifications de données étaient corrompues lors des restaurations locales.

Échange de fragments HTML avancés et nouvelles extensions

Cette version intègre directement la fonctionnalité de morphing (algorithme de comparaison et de fusion fine des éléments HTML pour mettre à jour le DOM sans perdre l'état des composants comme le focus sur un champ de saisie). Elle introduit aussi la balise <hx-partial>, qui simplifie la mise à jour simultanée de plusieurs zones distinctes de la page. Enfin, la bascule vers l'API fetch() a permis le développement d'extensions modernes :

• hx-preload : préchargement des ressources (par exemple au survol de la souris).
• hx-download : gestion native du téléchargement de fichiers via fetch.
• hx-sse et hx-ws : support amélioré des flux d'événements serveur (Server-Sent Events) et des WebSockets.
• hx-live : une micro-solution de script côté client intégrable directement dans htmx.

Un utilitaire de mise à niveau et des fichiers de contexte destinés aux assistants de code sont mis à disposition pour accompagner la transition des projets vers htmx 4.