How to properly extend x-teleport directive (or any directive in future) with additional functionality?

[tabrez96]

Description:

I'm building a web application that combines Alpine.js with HTMX for dynamic interactions. In this setup, Alpine handles the frontend reactivity while HTMX manages server communication and DOM updates.

However, I've encountered an issue when trying to extend Alpine's built-in x-teleport directive to add HTMX processing to teleported elements. The problem is that when elements are teleported to different parts of the DOM (like modals and chat components), they lose their HTMX context and functionality.

Current Problem:

When using x-teleport with HTMX-enabled forms, the teleported forms submit as regular HTML forms instead of HTMX requests. This happens because HTMX doesn't automatically process dynamically moved DOM elements - it only processes elements that were present during initial page load or explicitly processed via htmx.process().

Workaround:

For now, I'm using a workaround with x-init to manually process teleported elements:

  <template x-teleport="body">
      <div x-init="htmx.process($el)" class="...">
          <form hx-post="/chat/send" 
                hx-swap="none"
                hx-trigger="submit">
              <input name="message" type="text">
              <button type="submit">Send</button>
          </form>
      </div>
  </template>

This works but feels like a hack - I have to remember to add x-init="htmx.process($el)" to every teleported element that contains HTMX attributes. It would be much cleaner if this could be handled automatically by the framework.

What's the proper way to extend built-in directives like x-teleport?

[ekwoka]

There is limited way to extend existing directives, generally, I'd recommend simply implementing the directive yourself as a different directive entirely with your added functionality. Some (like x-model, and x-show/x-transition) have ways to modify parts of their behavior, but that is limited in scope.

What you could also do is just make your own directive that does that action just in shorthand.

Alpine.directive('process', (el) => htmx.process(el))

Then you can just do x-process on the elements you want to have that.