DX object to manage htmx attributes

Problem/Motivation

HTMX is designed as an extension of HTML. It is therefore a declarative markup system that uses attributes.

<button hx-get="/contacts/1" hx-target="#contact-ui"> <1>
    Fetch Contact
</button>

Instead, we have declarative attributes much like the
href attribute on anchor tags and the action
attribute on form tags. The hx-get attribute tells htmx:
“When the user clicks this button, issue a GET request to
/contacts/1.” The hx-target attribute tells
htmx: “When the response returns, take the resulting HTML and place it
into the element with the id contact-ui.”

fromHypermedia Systems

HTMX is just as happy with data-hx-get and so we will maintain standard markup in our implementation.

HTMX uses over 30 such attributes.

Proposed resolution

Rather than expecting Drupal developers to learn all the names and data requirements of all those attributes, create a class with methods to abstract the details of these attributes. These methods would both document and collect the necessary data.

Our current HTML Attribute object does not implement an interface. Create a shared interface that can identify Attribute and HtmxAttribute objects and move shared methods to a trait or traits.

Alter \Drupal\Core\Template\AttributeHelper::mergeCollections and Attribute::merge() to operate on the interface.

Support the HTMX architecture that some attribute values are either JSON or a concatenation of a string to JSON. These attributes should use the XSS::filter() method rather than Html::escape to support the double quotes needed for JSON. They also need to implement the single quoted syntax for HTML attributes.

• Create AttributeJson
• Create AttributeHtmxString to encapsulate the filter change.

A developer could use this object and merge it into an Attributes object attached to a render array. The primary use of this object in PHP is to manage this data composed into an Htmx object that will be keyed to a render array property and processed in the rendering pipeline. This Htmx object will be created in a later issue. A developer could also use the provided twig function in a template to create an HtmxAttribute object, configure it with its methods, and place the object in the template to render the resulting attributes.

Remaining tasks

User interface changes

None

Introduced terminology

None

API changes

HtmlAttributeInterface abstracts features of \Drupal\Core\Template\Attribute.

Data model changes

Two new attribute value objects

Release notes snippet