When using both htmx and Astro View Transitions, I had an event that fired on page load, so I added a astro:after-swap event to handle doing the same thing I did after page load, but after a page transition:

<script>
  const triggerFetchLastUpdated = () => {
    const contentElement = document.getElementById('fetch-last-updated')
    if (contentElement) {
      htmx.trigger(contentElement, 'click', {})
    }
  }

  htmx.onLoad(triggerFetchLastUpdated)

  document.addEventListener('astro:after-swap', () => {
    triggerFetchLastUpdated()
  })
</script>

But, I hit a problem: I noticed my HTMX event didn’t fire after a transition.

Solution: make sure you call htmx.process() after a page swap.

During the astro:after-swap event:

<script>
  const triggerFetchLastUpdated = () => {
    const contentElement = document.getElementById('fetch-last-updated')
    if (contentElement) {
      htmx.trigger(contentElement, 'click', {})
    }
  }

  htmx.onLoad(triggerFetchLastUpdated)

  document.addEventListener('astro:after-swap', () => {
    htmx.process(document.body)
    triggerFetchLastUpdated()
  })
</script>

You could also just have one event astro:page-load and skip handling 2 different events (htmx.onLoad and astro:after-swap):

<script>
 document.addEventListener('astro:page-load', () => {
   const contentElement = document.getElementById('fetch-last-updated')
   if (contentElement) {
      htmx.process(document.body)
      htmx.trigger(contentElement, 'click', {})
    }
  })
</script>

…but that’s slower as fires at the end of page navigation. astro:after-swap instead fires immediately after the new page replaces the old page.

Lessons in this unit:

0:	Introduction
1:	Client-side routing and view transitions
2:	View Transitions and Dark Mode
3:	Adding React Framer Motion animations to an Astro site - react - astro
4:	Use React component in Astro - astro - react
5:	Passing Astro components to React components
6:	▶︎ htmx and Astro View Transitions
7:	htmx forms and Astro View Transitions