ИИтог

Htmx 4.0: команда переписала библиотеку на fetch() и добавила morph-обновления

инструментыРедакция ИИтогHacker News🔥66Рейтинг ИИтог66Влияние55Новизна65Релевантность35Неожиданность35Участники45Достоверность90

Команда htmx выпустила версию 4.0.0 своей JavaScript-библиотеки для построения интерактивных веб-интерфейсов без написания собственного JS, релиз стал итогом 8 месяцев разработки. Внутри библиотека полностью перешла с устаревшего XMLHttpRequest на современный fetch(); для большинства пользователей htmx это изменение останется незаметным, но оно упростило код и открыло дорогу новым расширениям.

Важная деталь релиза: в npm версия 4.0.0 НЕ помечена тегом "latest", этим тегом по-прежнему остаётся htmx 2.x, а 4.0 получил тег "next" и останется на нём примерно до начала 2027 года. Причина, часть пользователей подключает htmx через CDN без указания конкретной версии, и команда не хочет принудительно переводить их на новую мажорную версию. При этом сайт проекта уже ссылается на 4.0, а htmx 2 обещают поддерживать бессрочно, так что спешить с переходом не обязательно.

Авторы выделяют три главных изменения по сравнению с htmx 2. Во-первых, наследование атрибутов от родительских элементов к дочерним стало явным, а не неявным: раньше атрибут вроде hx-confirm на родительском элементе автоматически применялся к потомкам, теперь для этого нужно добавить суффикс :inherited (например, hx-confirm:inherited). Это самое трудоёмкое изменение при миграции, поэтому команда выпустила отдельную консольную утилиту (npx htmx.org@4.0.0 upgrade-check), которая сканирует шаблоны проекта и указывает, где нужно расставить :inherited, какие атрибуты переименованы или удалены, а какие события устарели. Во-вторых, названия событий htmx приведены к единому формату htmx:фаза:действие[:подействие], часть событий ошибок объединена в htmx:error, события htmx:xhr:* убраны как ненужные после перехода на fetch(), а события валидации htmx:validation:* удалены в пользу нативной валидации форм браузера. В-третьих, изменена работа истории браузера: раньше htmx 2 кэшировал снимки страниц в localStorage для кнопки "назад", что вызывало проблемы, если сторонние скрипты меняли DOM после снимка. В htmx 4 при переходе назад страница вместо этого перезапрашивается заново и вставляется в <body> (или в отмеченный элемент), а для тех, кому нужно локальное кэширование, есть отдельное расширение hx-history-cache на sessionStorage.

Из новых возможностей в htmx 4 добавлены morph-обновления "из коробки": один из разработчиков команды, Michael West, доработал алгоритм idiomorph (изначально не включённый в htmx 2) и встроил его в библиотеку, это позволяет плавно обновлять DOM вместо полной замены элементов. Вторая крупная новинка, тег <hx-partial>, похожий на "out-of-band"-обновления, но более наглядный, когда нужно вставить контент в несколько мест страницы за один ответ сервера. Переход на fetch() также дал импульс расширениям: появились hx-preload (предзагрузка контента при наведении курсора), hx-download (нативная загрузка файлов через fetch), hx-alpine-compat (совместимость с Alpine.js), а также три расширения для потоковой передачи HTML, hx-sse (через Server-Sent Events), hx-ws (через WebSockets) и hx-multipart. Отдельно команда представила hx-live, собственное скриптовое решение для фронтенда, вдохновлённое Alpine.js, jQuery и hyperscript, с поддержкой реактивности в духе HATEOAS.

Установить htmx 4.0 можно через пакетный менеджер или CDN (https://unpkg.com/htmx.org@4.0.0/dist/htmx.min.js). Команда также выпустила набор файлов-навыков (skills) для LLM, по базовой работе с htmx 4, отладке, написанию расширений и миграции с htmx 2, сопроводив это ремаркой, что оставляет открытым вопрос, хорошая ли это идея, выпускать новую версию библиотеки в эпоху LLM.

Ключевые факты

  • htmx 4.0.0 вышел после 8 месяцев разработки; внутренности библиотеки переведены с XMLHttpRequest на fetch()
  • В npm версия 4.0 помечена тегом "next", а не "latest", этим тегом остаётся htmx 2.x примерно до начала 2027 года, чтобы не задеть пользователей CDN без версии
  • Атрибуты теперь наследуются только явно, через суффикс `:inherited", это главное изменение при миграции; для помощи есть консольная утилита upgrade-check
  • История браузера больше не кэшируется в localStorage: страница перезапрашивается заново; для локального кэша есть отдельное расширение hx-history-cache
  • Добавлены morph-обновления DOM "из коробки" и новый тег для обновления нескольких блоков страницы за один ответ; также вышли расширения для стриминга (SSE, WebSockets, multipart) и собственное скриптовое решение hx-live

Почему это важно

htmx, популярная в HN-сообществе библиотека для построения интерактивных веб-страниц без объёмного JavaScript на фронтенде, и мажорный релиз 4.0 меняет её внутреннее устройство впервые за долгое время: переход с XMLHttpRequest на fetch(), фундаментальное техническое обновление, которое открывает дорогу новым возможностям вроде потоковой передачи HTML и морф-обновлений DOM.

Кому это важно

Веб-разработчикам, которые уже используют htmx 2.x и планируют обновление, а также тем, кто выбирает инструмент для серверно-ориентированной разработки интерфейсов без тяжёлых JS-фреймворков.

Как это применить

Установить htmx 4.0 можно через пакетный менеджер или CDN-ссылку на версию 4.0.0 (npm-тег "latest" пока указывает на 2.x, так что нужно явно указать версию). Перед миграцией с htmx 2 стоит прогнать консольную утилиту npx htmx.org@4.0.0 upgrade-check, которая находит места, где нужно добавить суффикс :inherited, переименованные и удалённые атрибуты и устаревшие названия событий. Команда также выпустила skill-файлы для LLM-агентов по работе с htmx 4 и миграции с htmx 2.

Можно ли доверять

Источник, официальный анонс на сайте проекта, написанный от лица команды разработки; в тексте перечислены конкретные технические изменения, приведены примеры кода и команд, названы участники и их роли. Прямых независимых подтверждений (сторонних обзоров) в материале нет, но это стандартный формат release-анонса от авторов проекта.

Риски и подводные камни

Наследование атрибутов, самое трудоёмкое изменение при переходе с htmx 2 на 4.0: без явного суффикса :inherited поведение, работавшее автоматически, перестаёт применяться к дочерним элементам, что может незаметно сломать существующую разметку. Часть событий htmx переименована или удалена (например, все htmx:xhr:* и htmx:validation:*), поэтому код, слушающий старые названия событий, тоже нужно проверить и обновить.

«Мы не помечаем 4.0 тегом «latest» в npm, потому что не хотим принудительно переводить на новую версию пользователей, которые полагаются на CDN-ссылки без указания версии.»

— команда htmx