htmx 4.0.0: підсумок восьми місяців роботи

28 серпня команда htmx випустила версію 4.0.0 — результат восьми місяців роботи, йдеться в анонсі. htmx — це бібліотека, яка дозволяє створювати інтерактивні інтерфейси, розширюючи HTML-атрибути замість написання великих обсягів JavaScript; 4.0 — перший великий випуск нової гілки.

Як починався перепис

За словами автора, ідея htmx 4 виникла під час створення окремої бібліотеки fixi та ближчого знайомства з fetch() API і асинхронним програмуванням у JavaScript. htmx завжди використовував XMLHttpRequest заради зворотної сумісності. Розмова з контриб'ютором Крістіаном про streaming HTML переконала його, що перехід внутрішньої логіки на fetch() спростить бібліотеку; до роботи долучилися Майкл і Алекс, і вона почалася з порту fixi та тестового набору htmx.

Три головні зміни

З погляду користувача htmx 4 дуже близький до htmx 2, але змінюються три речі. По-перше, успадкування атрибутів тепер явне, а не неявне: щоб передати атрибут від батьківського елемента до дочірніх, потрібно додати суфікс :inherited, а знайти потрібні місця допомагає консольний інструмент npx [email protected] upgrade-check.

По-друге, назви подій стандартизовано за схемою htmx:phase:action, тож htmx:beforeRequest стає htmx:before:request. Більшість подій помилок зведено до htmx:error, для HTTP-помилок є htmx:response:error.

По-третє, підтримка історії більше не кешує сторінки в localStorage. Під час повернення назад htmx повторно завантажує сторінку й підставляє її в body або в елемент [hx-history-elt], якщо він є. Це усуває давнє джерело помилок, коли зміни DOM від сторонніх скриптів відновлювалися без відповідної логіки JavaScript. Охочим до локального кешування пропонують розширення hx-history-cache на базі sessionStorage.

Нові можливості та розширення

У версії 4 «з коробки» працюють morph-підстановки на основі алгоритму idiomorph та новий тег , який зрозуміліший за out-of-band підстановки, коли йдеться не лише про заміну одного елемента його новою версією. Перехід на fetch() дозволив переосмислити систему розширень: з'явилися hx-preload, hx-download, hx-alpine-compat і hx-history-cache, оновлено стрімінгові hx-sse, hx-ws та hx-multipart. Також додано hx-live — невелике рішення для фронтенд-скриптингу — і пакет htmax.js, що збирає htmx із найпопулярнішими розширеннями в одному файлі.

Доступність і підтримка

htmx 4.0.0 можна встановити через менеджер пакетів або підключити з CDN. Проєкт свідомо не позначив 4.0 як «latest» в npm, щоб не змушувати до оновлення тих, хто використовує CDN-посилання без версії: 2.x залишається latest, а гілка 4.0 перебуватиме на тегу «next» до початку 2027 року. htmx 2 підтримуватимуть безстроково, а для AI-асистентів із коду команда опублікувала файли навичок: розробка з htmx 4, налагодження, написання розширень і міграція з 2.x.