See htmx base repo

Changes in this fork

Fixes

• Fix outerHTML swap if parent is null (i.e. too fast clicking for example) : an error would be fired trying to access the parent's properties and block further interactions with the element => now ignored when parent is null
• The checked attribute is used instead of the value attribute for checkbox inputs, when building the request payload, which can then correctly be parsed as a boolean by the backend
• Unchecked checkboxes aren't excluded anymore from request payload (I needed this for PATCH requests for example)
• Fix target and source elements sent to selectAndSwap during the SSE swapping process that were inverted in the original code, now allowing to properly use hx-target for example to specify which element to swap with SSE
• SSE swap listeners are now removed from the event sources when the associated element gets removed from the page
• Values passed along a DELETE request are encoded as URL parameters (as for a GET request) instead of being sent as form data
• The Content-Type header is no longer overridden to application/x-www-form-urlencoded when using htmx.ajax() method (htmx would by default override it for any non-GET request on an element that doesn't define the hx-encoding attribute, but one might want to define this header in their AJAX request using the context.headers property)
• htmx.ajax() now correctly handles files passed to it through the context.values property (htmx would by default override the content type to application/x-www-form-urlencoded instead of letting xhr.send deduce the multipart/form-data content type itself + it would only use the values of the hx-encoding and enctype, thus ignore the fact that the payload contains file input values and should be treated as multipart/form-data)

Changes

• The htmx-indicator is not hidden on request's response if the response has a HX-Redirect header set (just a personal visual preference)
• If the target specified to htmx.ajax() (and so the targetOverride passed to issueAjaxRequest()) can't be found, an error is thrown (instead of the htmx default implementation that crawls the hierarchy to find the first hx-target specified on a parent element as a fallback)
• In the default htmx implementation, elements that have an ID have a special treatment during swapping ; if an element with an ID is about to be inserted, and to replace another element with the same ID, for a reason I ignore, htmx clones the old elements "settling attributes" (that are, by default, class, style, width & height) into the new element, then restores the new element initial attributes after the settling. My problem with this ; using a MutationObserver to apply style to newly added nodes (for example a line that should be positionned at current local time with a line of JS in a calendar) results in those modifications being reverted by htmx after the settling. Since this cloning step appears useless to me (maybe am I wrong though ?), I got rid of it here, as well as the attributesToSettle property that was only used for that purpose.
• When an htmx error is logged, the detail context object passed along in the internal functions is now included in the log, for an easier debugging. This way, a hx-targetError for example, will also log the actual target that htmx was trying to retrieve.
• The attribute hx-push-url is no longer inherited by default by children elements. You can specify hx-push-url="inherit" on children elements though, to inherit the value from the closest parent that defines a hx-push-url.
• htmx uses writeLayout and readLayout (more details below) internally to postpone the elements clean up & settling to the next animation frame, so the swap function returns faster (now takes roughly half the time) and the browser can update the DOM (and the page layout display) sooner, providing a better visual experience.
• When using the hx-swap attribute set to "none", it's no longer required to have a value defined for the hx-target attribute (in this case, simply no element will trigger the htmx:beforeSwap event, nor being added/removed the swapping class)

Additions

• hx-error-target and hx-error-swap attributes to allow swapping server's reponse on error (i.e request with a status >= 300). Those attributes behave exactly like, respectively, hx-target and hx-swap
• hx-sse-swap attribute to override hx-swap attribute's value for SSE swapping, ie to allow an element to have different swapping behaviours for requests responses & for SSE. Please note that hx-swap is used as a fallback in case hx-sse-swap is not defined, so this attribute should only be used when necessary, ie to split swapping behaviours apart.
• The HX-Trigger header in server's response supports a comma-and-space-separated event names list, to send multiple events to trigger without data, and without having to use a JSON format. Sending for example the header HX-Trigger: myEvent, myOtherEvent would trigger both the events myEvent and myOtherEvent on the client
• The event sources array (SSE) is now exposed in the htmx API, so client can add eventListeners to the same sources created by htmx with the hx-sse attribute
• htmx.ajax() supports an additional property swap in the context argument, to override the swapping behaviour. This argument must be a string and follows the syntax of the attribute hx-swap
• The htmx:beforeOnLoad, htmx:beforeSwap, htmx:afterSwap, htmx:afterSettle, htmx:swapError, htmx:afterRequest, htmx:afterOnLoad, htmx:onLoadError events are now passed an additional property isError in the event's detail property, which indicates if the request's response has an error status (ie a code >= 400)
• The hx-target, hx-include and hx-indicator attributes accept 2 new values : next-sibling (which targets the next sibling element) and previous-sibling (which targets the previous sibling element)
• The htmx API now provides the methods readLayout and writeLayout, to execute layout read/write operations while avoiding layout thrashing
• The htmx API now provides the method resizeSelect, which takes a select HTML element as parameter, and resizes it so it fits its selected option
• The htmx API now provides the property globalParams, an object in which you can define key-value pairs params to send along every htmx request.