Расширения

HTMX предоставляет механизм расширений, который позволяет настраивать поведение библиотеки. Расширения создаются на JavaScript и затем подключаются через атрибут hx-ext.

Основные расширения

Htmx включает несколько «базовых» расширений, поддерживаемых разработчиками библиотеки:

head-support — объединение содержимого тега <head> (стилей и др.) при HTMX-запросах
htmx-1-compat — восстанавливает поведение и настройки HTMX 1.x
idiomorph — реализует стратегию замены контента morph через библиотеку Idiomorph
preload — предзагрузка контента для повышения производительности
response-targets — выбор элементов для обновления на основе HTTP-кодов ответа (например, 404)
sse — поддержка событий, отправляемых сервером
ws — работа с WebSocket

Полный список доступных расширений представлен на странице Расширения.

Установка расширений

Самый быстрый способ подключить расширения HTMX, созданные сообществом — загрузить их через CDN. Важно всегда подключать основную библиотеку HTMX перед расширениями и активировать расширение.

Например, для использования расширения response-targets добавьте в <head> следующий код:

<head>
  <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="extension-name">
  ...

Неминифицированная версия также доступна по адресу https://unpkg.com/htmx-ext-имя-расширения/dist/имя-расширения.js (замените имя-расширения на название расширения).

Хотя подход с использованием CDN прост, стоит рассмотреть возможность не использовать CDN в продакшене. Следующий по простоте способ установки расширений htmx — просто скопировать их в ваш проект. Скачайте расширение с https://unpkg.com/htmx-ext-имя-расширения (замените имя-расширения на имя нужного расширения), например, https://unpkg.com/htmx-ext-response-targets. Затем поместите его в соответствующую директорию вашего проекта и подключите там, где это необходимо, с помощью тега <script>.

Для сборок в стиле npm вы можете установить расширения htmx через npm (замените имя-расширения на имя нужного расширения):

npm install htmx-ext-extension-name

После установки вам потребуется использовать соответствующие инструменты для сборки node_modules/htmx-ext-имя-расширения/dist/имя-расширения.js (или .min.js). Например, вы можете собрать расширение вместе с основной библиотекой htmx из node_modules/htmx.org/dist/htmx.js и вашим проектно-специфичным кодом.

Если вы используете сборщик для управления JavaScript-кодом (например, Webpack, Rollup):

Установите htmx.org и htmx-ext-имя-расширения через npm (замените имя-расширения на имя нужного расширения)
Импортируйте оба пакета в ваш index.js:

import `htmx.org`;
import `htmx-ext-имя-расширения`; // замените `имя-расширения` на имя нужного расширения

Активация расширений

Чтобы включить расширение, добавьте атрибут hx-ext="имя-расширения" к тегу <body> или другому HTML-элементу (замените имя-расширения на название нужного расширения). Расширение будет применено ко всем дочерним элементам.

Следующий пример показывает, как активировать расширение response-targets, позволяющее указывать разные целевые элементы для замены в зависимости от HTTP-кода ответа:

<body hx-ext="response-targets">
  ...
  <button hx-post="/register" hx-target="#response-div" hx-target-404="#not-found">
      Зарегистрироваться!
  </button>
  <div id="response-div"></div>
  <div id="not-found"></div>
  ...
</body>

Создание расширений

Если вы хотите создать собственное расширение для HTMX, ознакомьтесь с документацией по разработке расширений.