Skip to content

Telroshan/htmx

 
 

Repository files navigation

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
  • 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

  • When a checkbox input doesn't define a value attribute, the checked attribute is used instead when building the request payload, which results in proper boolean values to be parsed by the backend, rather than the default on 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 first hx-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, a hx-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 the hx-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 and hx-indicator attributes

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. Using the "mirror" value will have them act as their standard counterpart
  • htmx.ajax() supports 2 additional properties, errorTarget and errorSwap in the context argument, to override the error target & error swapping behaviour. Those follow the syntax of, respectively, target and swap properties. "mirror" is also supported there.
  • htmx.config.defaultErrorTarget and htmx.config.defaultErrorSwapStyle properties to configure error swapping default behavior. defaultErrorTarget defaults to "mirror" and defaultErrorSwapStyle 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

Removals

  • 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

Performance

  • Added readLayout and writeLayout 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 setting htmx.config.layoutQueuesEnabled to false (defaults to true), in which case the callbacks passed to readLayout and writeLayout are immediately executed
  • Added htmx.config.cleanUpThrottlingEnabled property that, when set to true (defaults to false), will make htmx's clean up process run in chunks of 4 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 than 4 ms computing
  • Added htmx.config.disabledEvents property that can be used to disable certain htmx events (such as the htmx:beforeProcessNode and htmx: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 no htmx:afterRequest event being fired at all

About

</> htmx - high power tools for HTML

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • JavaScript 90.0%
  • HTML 8.6%
  • Other 1.4%