hx-alpine-compat

Установка

<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/ext/hx-alpine-compat.js"></script>
<script defer src="/path/to/alpine.js"></script>

Alpine должен загружаться после скрипта расширения. Это обеспечивает атрибут defer.

Что делает расширение

Инициализация Alpine при замене содержимого

Фаза settle в htmx предусматривает короткую паузу после замены содержимого, чтобы могли выполняться CSS-переходы. В этот промежуток срабатывает наблюдатель за изменениями Alpine и видит промежуточное состояние DOM, из-за чего компоненты инициализируются на неполном или изменяющемся содержимом. Расширение приостанавливает наблюдатель Alpine перед заменой и возобновляет его только после завершения фазы settle, поэтому Alpine всегда инициализируется на окончательном, стабильном DOM.

Сохранение состояния с учётом морфинга

При использовании стилей замены innerMorph или outerMorph htmx согласует существующий DOM с новым содержимым, а не заменяет его. Расширение использует htmx:before:morph:node, чтобы перенести реактивный стек данных Alpine со старого узла на новый перед морфингом и тем самым предотвратить потерю состояния Alpine при согласовании. Это избавляет от необходимости использовать встроенное расширение морфинга Alpine.

Совместимость с привязкой ID в Alpine

Alpine может привязывать реактивные значения к атрибуту id элемента с помощью :id или x-bind:id. Из-за этого алгоритм морфинга обнаруживает несовпадающие ID и считает совпадающие элементы разными узлами. Расширение переопределяет проверку мягкого совпадения, чтобы игнорировать несовпадение ID, если оба узла имеют реактивные привязки ID Alpine, сохраняя стабильность морфинга.

Совместное использование с history-cache

При совместном использовании с расширением hx-history-cache расширение alpine-compat также сохраняет и восстанавливает состояние компонентов Alpine при навигации по истории.

Как это работает

Перед сохранением страницы в кэше истории расширение сериализует реактивные данные каждого компонента Alpine в атрибут data-alpine-state, а затем удаляет дерево Alpine, чтобы снимок представлял собой чистый HTML. При восстановлении после повторной инициализации Alpine восстановленного содержимого сохранённые значения снова применяются к активному стеку данных Alpine.