Source code for htmx_nav.debugging
"""
Shared debug-swap marker: the inline <script> that flashes a target
element when HTMX_NAV_DEBUG_SWAPS is enabled.
`_build_marker_script` is the single implementation, used both by
Swap.render() internally (target_id-driven auto-wrap) and by the public
`debug_swap_marker` / {% htmx_nav_debug_marker %} (hand-built OOB
fragments that skip Swap's wrapping).
"""
import json
__all__ = ["debug_swap_marker"]
def _build_marker_script(target_id: str) -> str:
"""Unconditionally builds the marker script for `target_id`.
No enabled-check here — callers decide when to call this at all.
Survives wrapper-stripping on innerHTML-style OOB/hx-partial swaps
because it's emitted as a sibling of the fragment's own content,
inside the wrapper. Class is re-applied with a forced reflow so
repeated swaps of the same (non-replaced) element retrigger the
CSS animation each time.
"""
return (
"<script>(function(){"
f"var el=document.getElementById({json.dumps(target_id)});"
"if(!el)return;"
"el.classList.remove('hn-swap');void el.offsetWidth;"
"el.classList.add('hn-swap');"
"})();</script>"
)
[docs]
def debug_swap_marker(target_id: str) -> str:
"""Inline `<script>` that flashes `target_id` when swap debugging is
enabled; empty string otherwise.
Use when hand-building an OOB fragment (writing `hx-swap-oob`
yourself) instead of letting `Swap(target_id=...)` wrap it, and you
still want `HTMX_NAV_DEBUG_SWAPS` highlighting. Must be placed
*inside* the element carrying `target_id`.
"""
from .settings import _debug_swaps_enabled
if not _debug_swaps_enabled():
return ""
return _build_marker_script(target_id)