htmx 4.0: запити через fetch і HTML без зайвого JavaScript

Мажор htmx 4.0: fetch замість XHR, успадкування атрибутів лише з :inherited, злиття розмітки з коробки та <hx-partial> для кількох цілей.

Опубліковано: 2 вересня 2026 р.

Теги

Зміст

Коротко

Вийшов htmx 4.0 — великий крок для застосунків, де інтерактивність задається розміткою, а не товстим клієнтським скриптом. Усередині запити йдуть через fetch() замість XMLHttpRequest; атрибути більше не «стікають» на нащадків самі — потрібен суфікс :inherited; вбудовано заміни зі злиттям вузлів (innerMorph / outerMorph); тег <hx-partial> дозволяє однією відповіддю оновити кілька цілей. Для новачків документація як і раніше відкривається робочим прикладом на кількох рядках HTML.

Що сталося

З погляду звичних hx-get / hx-post і цілей заміни бібліотека майже та сама, але три рішення змінюють апгрейд. Головне — успадкування: у 2.x атрибут на батькові часто застосовувався до дітей «як CSS»; у 4.x без :inherited цього немає. Типовий випадок — hx-confirm або заголовки захисту від CSRF на обгортці: без явного суфікса кнопка з hx-delete їх не побачить. Команда дає npx [email protected] upgrade-check по шаблонах і розширення сумісності з 2.x для поступового переходу.

Усередині перехід на fetch() спрощує розширення (потокова передача, завантаження файлів) і прибирає старі події на кшталт htmx:xhr:*. Події зведено до схеми htmx:phase:action (наприклад, htmx:before:request). Історія за замовчуванням більше не кладе знімки DOM у localStorage: «назад» знову запитує сторінку й підміняє вміст — менше сюрпризів від сторонніх скриптів.

Нове для розмітки: заміни зі злиттям підмішують HTML у поточний DOM (фокус, значення полів, стан відео), а <hx-partial hx-target="…"> явно описує кілька оновлень в одній відповіді — зрозуміліше, ніж лише заміни «поза» основною ціллю.

Поруч у тому ж випуску дайджесту побіжно: Firefox 155 із розширеним CSS (attr() ширше, progress(), alpha()) і остаточне видалення розширень на маніфесті другої версії з магазину Chrome (зокрема блокувальник uBlock Origin). Це тло тижня, не тема релізу htmx.

Чому це важливо

htmx обіцяє інтерфейс, яким керує сервер через HTML. Неявне успадкування було потужним і заплутаним: правки батька раптово змінювали поведінку глибоких кнопок. Явний :inherited робить шаблони читабельнішими ціною міграції. Злиття вузлів і <hx-partial> закривають часті болі «багатих» екранів без окремого шару односторінкового застосунку: зберегти локальний стан при оновленні й однією відповіддю торкнути список і лічильник.

Важливо й продуктово: у npm тег latest поки лишається на 2.x до початку 2027, лінія 4 — next, щоб не зламати CDN без версії. Отже, можна планувати апгрейд, а не ловити його «випадково».

На практиці

Перед зміною версії проженіть upgrade-check по HTML/шаблонах: знайде місця без :inherited, старі імена подій і видалені атрибути.
Шукайте батьківські hx-headers, hx-confirm, hx-target над елементами з hx-* запитами — майже напевно потрібен :inherited.
Там, де важливі фокус і поля введення, спробуйте hx-swap="innerMorph" або outerMorph замість повної заміни вузла; стабільні id допомагають алгоритму.
Для кількох цілей в одній відповіді сервера віддавайте перевагу <hx-partial> з явним hx-target — простіше супроводжувати, ніж набір прихованих блоків «поза» основною ціллю.
Якщо потрібен м’який перехід, дивіться розширення сумісності з 2.x; для продакшену фіксуйте версію скрипта, а не «голий» CDN latest.

Підсумок

htmx 4.0 зміцнює модель «поведінка в розмітці»: сучасні запити через fetch(), чесне успадкування атрибутів, злиття вузлів з коробки й явні мульти-оновлення через <hx-partial>. Має сенс мігрувати свідомо — з перевірником і тестами шаблонів — а не чекати, доки latest колись перемкнеться сам.