Process attachments (CSS/JS) for HTMX responses and add drupal asset libraries

Created on 25 April 2025, 14 days ago

Problem/Motivation

HTMX is designed to make a request, select some portion of the response, and incorporate that element or subtree of elements into the current page. If the response includes CSS to style this new markup or JavaScript to for the proper UX, those assets need to also be added to the page.

Steps to reproduce

  1. Make an htmx request for a response that includes a Dropbutton and insert the dropbutton into a page that does not contain a dropbutton. The pre-render callback for this element attaches the core/drupal.dropbutton asset library.
  2. Observe that the dropbutton markup is neither styled nor functional as the assets from the attached library are not present.

Proposed resolution

  1. Add the existing drupalSettings.ajaxPageState.libraries property calculated by core to all HTMX requests using the htmx:configRequest event.
  2. Create a response processor that processes HTMX requests and determines any missing asset libraries
  3. Encode the additional asset markup as JSON and add that data to the response so that HTMX will also insert that data into the receiving page.
  4. React to the insertion using the htmx:oobAfterSwap event and move the assets into place.

Remaining tasks

Adjust the POC code based on more recent development in the HTMX contribution module.

User interface changes

None

Introduced terminology

Out of Band Swaps is an HTMX concept that describes triggering additional content changes to the requesting page using HTMX markup added to the response. It is "out of band" because it is not the markup selected and placed by the attributes on the element that triggered the request.

API changes

Data model changes

None

Release notes snippet

πŸ“Œ Task
Status

Active

Version

11.0 πŸ”₯

Component

request processing system

Created by

πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024