See htmx base repo
- 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
htmx.ajax()
now correctly handles files passed to it through thecontext.values
property (htmx would by default override the content type toapplication/x-www-form-urlencoded
instead of letting xhr.send deduce the multipart/form-data content type itself + it would only use the values of thehx-encoding
andenctype
, thus ignore the fact that the payload contains file input values and should be treated asmultipart/form-data
)
- When a checkbox input doesn't define a
value
attribute, thechecked
attribute is used instead when building the request payload, which results in proper boolean values to be parsed by the backend, rather than the defaulton
value that seems unusable to me - Unchecked checkboxes that don't define a
value
attribute aren't excluded anymore from request payload (I needed this for some PATCH requests for example, where I require an explicit true/false value for a given parameter to toggle a bool in the database) - 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 override specified to
htmx.ajax()
can't be found, an error is thrown (instead of the htmx default implementation that crawls the hierarchy to find the firsthx-target
specified on a parent element as a fallback) - 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, ahx-targetError
for example, will also log the actual target that htmx was trying to retrieve - When using the
hx-swap
attribute set to"none"
, it's no longer required to have a value defined for thehx-target
attribute (in this case, simply no element will trigger the htmx:beforeSwap event, nor being added/removed the swapping class) - A warning, instead of an error, is fired for selectors that don't match any element in
hx-include
andhx-indicator
attributes
hx-error-target
andhx-error-swap
attributes to allow swapping server's reponse on error (i.e request with astatus >= 300
). Those attributes behave exactly like, respectively, hx-target and hx-swap. Using the"mirror"
value will have them act as their standard counterparthtmx.ajax()
supports 2 additional properties,errorTarget
anderrorSwap
in thecontext
argument, to override the error target & error swapping behaviour. Those follow the syntax of, respectively,target
andswap
properties."mirror"
is also supported there.htmx.config.defaultErrorTarget
andhtmx.config.defaultErrorSwapStyle
properties to configure error swapping default behavior.defaultErrorTarget
defaults to"mirror"
anddefaultErrorSwapStyle
defaults to"none"
htmx.config.httpErrorCodesToSwap
property to whitelist error codes for which to enable error swapping for. Defaults to an empty array, which means all error codes would be swapped, depending on the error swapping strategy
- Removed attributes settling altogether, as it was messing with my MutationObserver callbacks to apply style to newly added nodes (for example a line that should be positioned at current local time with a line of JS in a calendar), and I had no use for it anyway
- Removed the
hx-select
feature as I don't use it at all, and don't like it either. Imho it shouldn't be used as it encourages reusing, by laziness, endpoints that send back a huge HTML, instead of making specific endpoints to generate & return only the parts they need, resulting in wasted resources spent generating unused content, and heavier responses that take longer to fetch. - Removed
hx-on
feature altogether as I don't use it at all, plus it results in additional (and useless in my case) queries against the DOM, and imho encourages bad practices - Removed
hx-boost
as I never use it and don't like anyway
- Added
readLayout
andwriteLayout
API methods, to execute layout read/write operations while avoiding layout thrashing. htmx is also using them internally for its own DOM mutations and accesses. This sytem can be disabled by settinghtmx.config.layoutQueuesEnabled
tofalse
(defaults totrue
), in which case the callbacks passed toreadLayout
andwriteLayout
are immediately executed - Added
htmx.config.cleanUpThrottlingEnabled
property that, when set totrue
(defaults tofalse
), will make htmx's clean up process run in chunks of4 ms
of work instead of cleaning up the entire source element's hierarchy in one go. This comes in handy for large hierarchies where htmx could spend hundreds of ms cleaning elements up recursively, freezing the browser's rendering. Remaining work is now postponed to the next animation frame when spending more than4 ms
computing - Added
htmx.config.disabledEvents
property that can be used to disable certain htmx events (such as thehtmx:beforeProcessNode
andhtmx:afterProcessNode
events that can take hundreds of ms to fire for each element, when swapping very large hierarchies). For ex setting it to{ "htmx:afterRequest": true }
would result in nohtmx:afterRequest
event being fired at all