htmx.org 1.9.5 → 1.9.7

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [1.9.7] - 2023-11-03
+
+* Fixed a bug where a button associated with a form that is swapped out of the DOM caused errors
+* The `hx-target-error` attribute was added to the `response-targets` extension, allowing you to capture all 400 & 500
+  responses with a single attribute
+* `hx-on` now properly supports multiple listeners
+* The `hx-confirm` prompt is now passed into custom confirmation handlers
+* `next` and `previous` are now valid _extended CSS_ symbols in htmx
+* The `htmx:beforeHistoryUpdate` event was added
+* Properly ignore the `dialog` formmethod on buttons when resolving the HTTP method to use
+* Added a `htmx.config.scrollIntoViewOnBoost` option that may be set to `false` to disable scrolling the top of the
+  body into view for boosted elements
+
+## [1.9.6] - 2023-09-22
+
+* IE support has been restored (thank you @telroshan!)
+* Introduced the `hx-disabled-elt` attribute to allow specifing elements to disable during a request
+* You can now explicitly decide to ignore `title` tags found in new content via the `ignoreTitle` option in `hx-swap` and the `htmx.config.ignoreTitle` configuration variable.
+* `hx-swap` modifiers may be used without explicitly specifying the swap mechanism
+* Arrays are now supported in the `client-side-templates` extension
+* XSLT support in the `client-side-templates` extension
+* Support `preventDefault()` in extension event handling
+* Allow the `HX-Refresh` header to apply even after an `HX-Redirect` has occurred
+* the `formaction` and `formmethod` attributes on buttons are now properly respected
+* `hx-on` can now handle events with dots in their name
+* `htmx.ajax()` now always returns a Promise
+* Handle leading `style` tag parsing more effectively
+
 ## [1.9.5] - 2023-08-25
 
 * Web sockets now properly pass the target id in the HEADERS struct
@@ -23,7 +51,7 @@
 
 ## [1.9.3] - 2023-07-14
 
-* The `hx-on` attribute has been deprecated (sorry) in favor of `hx-on-<event name>` attributes.  See [`hx-on`](/attributes/hx-on) for more information.
+* The `hx-on` attribute has been deprecated (sorry) in favor of `hx-on:<event name>` attributes.  See [`hx-on`](/attributes/hx-on) for more information.
 * We now have functioning CI using GitHub actions!
 * You can now configure if a type of HTTP request uses the body for parameters or not.  In particular, the `DELETE` _should_ use
   query parameters, according to the spec.  htmx has used the body, instead.  To avoid breaking code we are keeping this undefined

package/README.md

@@ -33,7 +33,7 @@ By removing these arbitrary constraints htmx completes HTML as a
 ## quick start
 
 ```html
-  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.7"></script>
   <!-- have a button POST a click via AJAX -->
   <button hx-post="/clicked" hx-swap="outerHTML">
     Click Me
@@ -62,15 +62,9 @@ Note there is an old broken package called `htmx`.  This is `htmx.org`.
 * <https://htmx.org/docs>
 
 ## contributing
+Want to contribute? Check out our [contribution guidelines](CONTRIBUTING.md)
 
-* All PRs should be made against the `dev` branch, except documentation PRs (`www/` directory) which can be made against `master`
-* Please write code, including tests, in ES5 for [IE 11 compatibility](https://stackoverflow.com/questions/39902809/support-for-es6-in-internet-explorer-11)
-* Please include test cases in [`/test`](https://github.com/bigskysoftware/htmx/tree/dev/test) and docs in [`/www`](https://github.com/bigskysoftware/htmx/tree/dev/www)
-* Search the issues before proposing a feature to see if it is already under discussion
-* If you are adding a feature, consider doing it as an [extension](https://htmx.org/extensions) instead to keep the core htmx code tidy
-* Want to contribute but don't know where to start? Look for issues with the "help wanted" tag
-* Refactors that do not make functional changes will be automatically closed, unless explicitly solicited (documentation typo fixes are fine)
-* No time? Then [become a sponsor](https://github.com/sponsors/bigskysoftware#sponsors)
+No time? Then [become a sponsor](https://github.com/sponsors/bigskysoftware#sponsors)
 
 ### hacking guide
 
@@ -108,6 +102,8 @@ At this point you can modify `/src/htmx.js` to add features, and then add tests
 htmx uses the [mocha](https://mochajs.org/) testing framework, the [chai](https://www.chaijs.com/) assertion framework
 and [sinon](https://sinonjs.org/releases/v9/fake-xhr-and-server/) to mock out AJAX requests.  They are all OK.
 
+You can also run live tests and demo of the WebSockets and Server-Side Events extensions with `npm run ws-tests`
+
 ## haiku
 
 *javascript fatigue:<br/>

package/dist/ext/client-side-templates.js

@@ -13,11 +13,42 @@ htmx.defineExtension('client-side-templates', {
             }
         }
 
+        var mustacheArrayTemplate = htmx.closest(elt, "[mustache-array-template]");
+        if (mustacheArrayTemplate) {
+            var data = JSON.parse(text);
+            var templateId = mustacheArrayTemplate.getAttribute('mustache-array-template');
+            var template = htmx.find("#" + templateId);
+            if (template) {
+                return Mustache.render(template.innerHTML, {"data": data });
+            } else {
+                throw "Unknown mustache template: " + templateId;
+            }
+        }
+
         var handlebarsTemplate = htmx.closest(elt, "[handlebars-template]");
         if (handlebarsTemplate) {
             var data = JSON.parse(text);
-            var templateName = handlebarsTemplate.getAttribute('handlebars-template');
-            return Handlebars.partials[templateName](data);
+            var templateId = handlebarsTemplate.getAttribute('handlebars-template');
+            var templateElement = htmx.find('#' + templateId).innerHTML;
+            var renderTemplate = Handlebars.compile(templateElement);
+            if (renderTemplate) {
+                return renderTemplate(data);
+            } else {
+                throw "Unknown handlebars template: " + templateId;
+            }
+        }
+
+        var handlebarsArrayTemplate = htmx.closest(elt, "[handlebars-array-template]");
+        if (handlebarsArrayTemplate) {
+            var data = JSON.parse(text);
+            var templateId = handlebarsArrayTemplate.getAttribute('handlebars-array-template');
+            var templateElement = htmx.find('#' + templateId).innerHTML;
+            var renderTemplate = Handlebars.compile(templateElement);
+            if (renderTemplate) {
+                return renderTemplate(data);
+            } else {
+                throw "Unknown handlebars template: " + templateId;
+            }
         }
 
         var nunjucksTemplate = htmx.closest(elt, "[nunjucks-template]");
@@ -30,8 +61,36 @@ htmx.defineExtension('client-side-templates', {
             } else {
                 return nunjucks.render(templateName, data);
             }
-          }
+        }
 
+        var xsltTemplate = htmx.closest(elt, "[xslt-template]");
+        if (xsltTemplate) {
+            var templateId = xsltTemplate.getAttribute('xslt-template');
+            var template = htmx.find("#" + templateId);
+            if (template) {
+              var content = template.innerHTML ? new DOMParser().parseFromString(template.innerHTML, 'application/xml')
+                                               : template.contentDocument;
+              var processor = new XSLTProcessor();
+              processor.importStylesheet(content);
+              var data = new DOMParser().parseFromString(text, "application/xml");
+              var frag = processor.transformToFragment(data, document);
+              return new XMLSerializer().serializeToString(frag);
+            } else {
+              throw "Unknown XSLT template: " + templateId;
+            }
+        }
+
+          var nunjucksArrayTemplate = htmx.closest(elt, "[nunjucks-array-template]");
+          if (nunjucksArrayTemplate) {
+              var data = JSON.parse(text);
+              var templateName = nunjucksArrayTemplate.getAttribute('nunjucks-array-template');
+              var template = htmx.find('#' + templateName);
+              if (template) {
+                  return nunjucks.renderString(template.innerHTML, {"data": data});
+              } else {
+                  return nunjucks.render(templateName, {"data": data});
+              }
+            }
         return text;
     }
 });

package/dist/ext/disable-element.js

@@ -5,12 +5,14 @@ htmx.defineExtension('disable-element', {
     onEvent: function (name, evt) {
         let elt = evt.detail.elt;
         let target = elt.getAttribute("hx-disable-element");
-        let targetElement = (target == "self") ? elt : document.querySelector(target);
+        let targetElements = (target == "self") ? [ elt ] : document.querySelectorAll(target);
 
-        if (name === "htmx:beforeRequest" && targetElement) {
-            targetElement.disabled = true;
-        } else if (name == "htmx:afterRequest" && targetElement) {
-            targetElement.disabled = false;
+        for (var i = 0; i < targetElements.length; i++) {
+            if (name === "htmx:beforeRequest" && targetElements[i]) {
+                targetElements[i].disabled = true;
+            } else if (name == "htmx:afterRequest" && targetElements[i]) {
+                targetElements[i].disabled = false;
+            }
         }
     }
 });

package/dist/ext/loading-states.js

@@ -25,28 +25,28 @@
 		if (delayElt) {
 			const delayInMilliseconds =
 				delayElt.getAttribute('data-loading-delay') || 200
-			const timeout = setTimeout(() => {
+			const timeout = setTimeout(function () {
 				doCallback()
 
-				loadingStatesUndoQueue.push(() => {
-					mayProcessUndoCallback(targetElt, () => undoCallback())
+				loadingStatesUndoQueue.push(function () {
+					mayProcessUndoCallback(targetElt, undoCallback)
 				})
 			}, delayInMilliseconds)
 
-			loadingStatesUndoQueue.push(() => {
-				mayProcessUndoCallback(targetElt, () => clearTimeout(timeout))
+			loadingStatesUndoQueue.push(function () {
+				mayProcessUndoCallback(targetElt, function () { clearTimeout(timeout) })
 			})
 		} else {
 			doCallback()
-			loadingStatesUndoQueue.push(() => {
-				mayProcessUndoCallback(targetElt, () => undoCallback())
+			loadingStatesUndoQueue.push(function () {
+				mayProcessUndoCallback(targetElt, undoCallback)
 			})
 		}
 	}
 
 	function getLoadingStateElts(loadingScope, type, path) {
-		return Array.from(htmx.findAll(loadingScope, `[${type}]`)).filter(
-			(elt) => mayProcessLoadingStateByPath(elt, path)
+		return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter(
+			function (elt) { return mayProcessLoadingStateByPath(elt, path) }
 		)
 	}
 
@@ -74,7 +74,7 @@
 
 				let loadingStateEltsByType = {}
 
-				loadingStateTypes.forEach((type) => {
+				loadingStateTypes.forEach(function (type) {
 					loadingStateEltsByType[type] = getLoadingStateElts(
 						container,
 						type,
@@ -82,87 +82,91 @@
 					)
 				})
 
-				loadingStateEltsByType['data-loading'].forEach((sourceElt) => {
-					getLoadingTarget(sourceElt).forEach((targetElt) => {
+				loadingStateEltsByType['data-loading'].forEach(function (sourceElt) {
+					getLoadingTarget(sourceElt).forEach(function (targetElt) {
 						queueLoadingState(
 							sourceElt,
 							targetElt,
-							() =>
-								(targetElt.style.display =
+							function () {
+								targetElt.style.display =
 									sourceElt.getAttribute('data-loading') ||
-									'inline-block'),
-							() => (targetElt.style.display = 'none')
+									'inline-block' },
+							function () { targetElt.style.display = 'none' }
 						)
 					})
 				})
 
 				loadingStateEltsByType['data-loading-class'].forEach(
-					(sourceElt) => {
+					function (sourceElt) {
 						const classNames = sourceElt
 							.getAttribute('data-loading-class')
 							.split(' ')
 
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
 							queueLoadingState(
 								sourceElt,
 								targetElt,
-								() =>
-									classNames.forEach((className) =>
-										targetElt.classList.add(className)
-									),
-								() =>
-									classNames.forEach((className) =>
-										targetElt.classList.remove(className)
-									)
+								function () {
+									classNames.forEach(function (className) {
+                                        targetElt.classList.add(className)
+                                    })
+                                },
+								function() {
+									classNames.forEach(function (className) {
+                                        targetElt.classList.remove(className)
+                                    })
+                                }
 							)
 						})
 					}
 				)
 
 				loadingStateEltsByType['data-loading-class-remove'].forEach(
-					(sourceElt) => {
+					function (sourceElt) {
 						const classNames = sourceElt
 							.getAttribute('data-loading-class-remove')
 							.split(' ')
 
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
 							queueLoadingState(
 								sourceElt,
 								targetElt,
-								() =>
-									classNames.forEach((className) =>
-										targetElt.classList.remove(className)
-									),
-								() =>
-									classNames.forEach((className) =>
-										targetElt.classList.add(className)
-									)
+								function () {
+									classNames.forEach(function (className) {
+                                        targetElt.classList.remove(className)
+                                    })
+                                },
+								function() {
+									classNames.forEach(function (className) {
+                                        targetElt.classList.add(className)
+                                    })
+                                }
 							)
 						})
 					}
 				)
 
 				loadingStateEltsByType['data-loading-disable'].forEach(
-					(sourceElt) => {
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
+					function (sourceElt) {
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
 							queueLoadingState(
 								sourceElt,
 								targetElt,
-								() => (targetElt.disabled = true),
-								() => (targetElt.disabled = false)
+								function() { targetElt.disabled = true },
+                                function() { targetElt.disabled = false }
 							)
 						})
 					}
 				)
 
 				loadingStateEltsByType['data-loading-aria-busy'].forEach(
-					(sourceElt) => {
-						getLoadingTarget(sourceElt).forEach((targetElt) => {
+					function (sourceElt) {
+						getLoadingTarget(sourceElt).forEach(function (targetElt) {
 							queueLoadingState(
 								sourceElt,
 								targetElt,
-								() => (targetElt.setAttribute("aria-busy", "true")),
-								() => (targetElt.removeAttribute("aria-busy"))
+								function () { targetElt.setAttribute("aria-busy", "true") },
+								function () { targetElt.removeAttribute("aria-busy") }
 							)
 						})
 					}

package/dist/ext/morphdom-swap.js

@@ -5,7 +5,8 @@ htmx.defineExtension('morphdom-swap', {
     handleSwap: function (swapStyle, target, fragment) {
         if (swapStyle === 'morphdom') {
             if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-                morphdom(target, fragment.firstElementChild);
+                // IE11 doesn't support DocumentFragment.firstElementChild
+                morphdom(target, fragment.firstElementChild || fragment.firstChild);
                 return [target];
             } else {
                 morphdom(target, fragment.outerHTML);

package/dist/ext/response-targets.js

@@ -5,6 +5,11 @@
 
     var attrPrefix = 'hx-target-';
 
+    // IE11 doesn't support string.startsWith
+    function startsWith(str, prefix) {
+        return str.substring(0, prefix.length) === prefix
+    }
+
     /**
      * @param {HTMLElement} elt
      * @param {number} respCode
@@ -38,6 +43,9 @@
             '***',
             'xxx',
         ];
+        if (startsWith(respCode, '4') || startsWith(respCode, '5')) {
+            attrPossibilities.push('error');
+        }
 
         for (var i = 0; i < attrPossibilities.length; i++) {
             var attr = attrPrefix + attrPossibilities[i];

package/dist/ext/ws.js

@@ -379,7 +379,7 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
 
 				socketWrapper.send(body, elt);
 
-				if (api.shouldCancel(evt, elt)) {
+				if (evt && api.shouldCancel(evt, elt)) {
 					evt.preventDefault();
 				}
 			});

package/dist/htmx.d.ts

@@ -19,8 +19,9 @@ export function addClass(elt: Element, clazz: string, delay?: number): void;
  * @param verb 'GET', 'POST', etc.
  * @param path the URL path to make the AJAX
  * @param element the element to target (defaults to the **body**)
+ * @returns Promise that resolves immediately if no request is sent, or when the request is complete
  */
-export function ajax(verb: string, path: string, element: Element): void;
+export function ajax(verb: string, path: string, element: Element): Promise<void>;
 
 /**
  * Issues an htmx-style AJAX request
@@ -30,8 +31,9 @@ export function ajax(verb: string, path: string, element: Element): void;
  * @param verb 'GET', 'POST', etc.
  * @param path the URL path to make the AJAX
  * @param selector a selector for the target
+ * @returns Promise that resolves immediately if no request is sent, or when the request is complete
  */
-export function ajax(verb: string, path: string, selector: string): void;
+export function ajax(verb: string, path: string, selector: string): Promise<void>;
 
 /**
  * Issues an htmx-style AJAX request
@@ -41,12 +43,13 @@ export function ajax(verb: string, path: string, selector: string): void;
  * @param verb 'GET', 'POST', etc.
  * @param path the URL path to make the AJAX
  * @param context a context object that contains any of the following
+ * @returns Promise that resolves immediately if no request is sent, or when the request is complete
  */
 export function ajax(
     verb: string,
     path: string,
     context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any }>
-): void;
+): Promise<void>;
 
 /**
  * Finds the closest matching element in the given elements parentage, inclusive of the element
@@ -288,44 +291,99 @@ export function values(elt: Element, requestType?: string): any;
 export const version: string;
 
 export interface HtmxConfig {
-    /** array of strings: the attributes to settle during the settling phase */
+    /**
+     * The attributes to settle during the settling phase.
+     * @default ["class", "style", "width", "height"]
+     */
     attributesToSettle?: ["class", "style", "width", "height"] | string[];
-    /** if the focused element should be scrolled into view */
+    /**
+     * If the focused element should be scrolled into view.
+     * @default false
+    */
     defaultFocusScroll?: boolean;
-    /** the default delay between completing the content swap and settling attributes */
+    /**
+     * The default delay between completing the content swap and settling attributes.
+     * @default 20
+     */
     defaultSettleDelay?: number;
-    /** the default delay between receiving a response from the server and doing the swap */
+    /**
+     * The default delay between receiving a response from the server and doing the swap.
+     * @default 0
+     */
     defaultSwapDelay?: number;
-    /** the default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted */
+    /**
+     * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+     * @default "innerHTML"
+     */
     defaultSwapStyle?: "innerHTML" | string;
-    /** the number of pages to keep in **localStorage** for history support */
+    /**
+     * The number of pages to keep in **localStorage** for history support.
+     * @default 10
+     */
     historyCacheSize?: number;
-    /** whether or not to use history */
+    /**
+     * Whether or not to use history.
+     * @default true
+     */
     historyEnabled?: boolean;
-    /** if true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present */
+    /**
+     * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+     * @default true
+     */
     includeIndicatorStyles?: boolean;
-    /** the class to place on indicators when a request is in flight */
+    /**
+     * The class to place on indicators when a request is in flight.
+     * @default "htmx-indicator"
+     */
     indicatorClass?: "htmx-indicator" | string;
-    /** the class to place on triggering elements when a request is in flight */
+    /**
+     * The class to place on triggering elements when a request is in flight.
+     * @default "htmx-request"
+     */
     requestClass?: "htmx-request" | string;
-    /** the class to temporarily place on elements that htmx has added to the DOM */
+    /**
+     * The class to temporarily place on elements that htmx has added to the DOM.
+     * @default "htmx-added" 
+     */
     addedClass?: "htmx-added" | string;
-    /** the class to place on target elements when htmx is in the settling phase */
+    /**
+     * The class to place on target elements when htmx is in the settling phase.
+     * @default "htmx-settling"
+     */
     settlingClass?: "htmx-settling" | string;
-    /** the class to place on target elements when htmx is in the swapping phase */
+    /**
+     * The class to place on target elements when htmx is in the swapping phase.
+     * @default "htmx-swapping"
+     */
     swappingClass?: "htmx-swapping" | string;
-    /** allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility */
+    /**
+     * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+     * @default true
+     */
     allowEval?: boolean;
-    /** use HTML template tags for parsing content from the server. This allows you to use Out of Band content when returning things like table rows, but it is *not* IE11 compatible. */
+    /**
+     * Use HTML template tags for parsing content from the server. This allows you to use Out of Band content when returning things like table rows, but it is *not* IE11 compatible.
+     * @default false
+     */
     useTemplateFragments?: boolean;
-    /** allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates */
+    /**
+     * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+     * @default false
+     */
     withCredentials?: boolean;
-    /** the default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later** */
+    /**
+     * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+     * @default "full-jitter"
+     */
     wsReconnectDelay?: "full-jitter" | string | ((retryCount: number) => number);
     // following don't appear in the docs
+    /** @default false */
     refreshOnHistoryMiss?: boolean;
+    /** @default 0 */
     timeout?: number;
+    /** @default "[hx-disable], [data-hx-disable]" */
     disableSelector?: "[hx-disable], [data-hx-disable]" | string;
+    /** @default "smooth" */
     scrollBehavior?: "smooth" | "auto";
 }