htmx.org 1.9.4 → 1.9.6

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [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
+* A very rare loading state bug was fixed (see https://github.com/bigskysoftware/htmx/commit/93bd81b6d003bb7bc445f10192bdb8089fa3495d)
+* `hx-on` will not evaluate if `allowEval` is set to false
+* You can disable the interpretation of script tags with the new `htmx.config.allowScriptTags` config variable
+* You can now disable htmx-based requests to non-origin hosts via the `htmx.config.selfRequestsOnly` config variable
+* The [Security](https://htmx.org/docs#security) section has been expanded to help developers better understand how to
+  properly secure their htmx-based applications.
+
 ## [1.9.4] - 2023-07-25
 
 * This is a bug-fix release for the most part, w/a heavy dose of @telroshan
@@ -13,7 +38,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.4"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.6"></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
 

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

@@ -13,6 +13,18 @@ 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);
@@ -20,6 +32,13 @@ htmx.defineExtension('client-side-templates', {
             return Handlebars.partials[templateName](data);
         }
 
+        var handlebarsArrayTemplate = htmx.closest(elt, "[handlebars-array-template]");
+        if (handlebarsArrayTemplate) {
+            var data = JSON.parse(text);
+            var templateName = handlebarsArrayTemplate.getAttribute('handlebars-array-template');
+            return Handlebars.partials[templateName]({"data": data});
+        }
+
         var nunjucksTemplate = htmx.closest(elt, "[nunjucks-template]");
         if (nunjucksTemplate) {
             var data = JSON.parse(text);
@@ -30,8 +49,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

@@ -3,43 +3,55 @@
     /** @type {import("../htmx").HtmxInternalApi} */
     var api;
 
-    const targetAttrPrefix = 'hx-target-';
-    const targetAttrMinLen = targetAttrPrefix.length - 1;
+    var attrPrefix = 'hx-target-';
 
     /**
      * @param {HTMLElement} elt
      * @param {number} respCode
      * @returns {HTMLElement | null}
      */
-    function getRespCodeTarget(elt, respCode) {
-        if (!elt || !respCode) return null;
+    function getRespCodeTarget(elt, respCodeNumber) {
+        if (!elt || !respCodeNumber) return null;
 
-        var targetAttr = targetAttrPrefix + respCode;
-        var targetStr  = api.getClosestAttributeValue(elt, targetAttr);
+        var respCode = respCodeNumber.toString();
 
-        if (targetStr) {
-            if (targetStr === "this") {
-                return api.findThisElement(elt, targetAttr);
-            } else {
-                return api.querySelectorExt(elt, targetStr);
-            }
-        } else {
-            for (let l = targetAttr.length - 1; l > targetAttrMinLen; l--) {
-                targetAttr = targetAttr.substring(0, l) + '*';
-                targetStr  = api.getClosestAttributeValue(elt, targetAttr);
-                if (targetStr) break;
-            }
-        }
+        // '*' is the original syntax, as the obvious character for a wildcard.
+        // The 'x' alternative was added for maximum compatibility with HTML
+        // templating engines, due to ambiguity around which characters are
+        // supported in HTML attributes.
+        //
+        // Start with the most specific possible attribute and generalize from
+        // there.
+        var attrPossibilities = [
+            respCode,
+
+            respCode.substr(0, 2) + '*',
+            respCode.substr(0, 2) + 'x',
 
-        if (targetStr) {
-            if (targetStr === "this") {
-                return api.findThisElement(elt, targetAttr);
-            } else {
-                return api.querySelectorExt(elt, targetStr);
+            respCode.substr(0, 1) + '*',
+            respCode.substr(0, 1) + 'x',
+            respCode.substr(0, 1) + '**',
+            respCode.substr(0, 1) + 'xx',
+
+            '*',
+            'x',
+            '***',
+            'xxx',
+        ];
+
+        for (var i = 0; i < attrPossibilities.length; i++) {
+            var attr = attrPrefix + attrPossibilities[i];
+            var attrValue = api.getClosestAttributeValue(elt, attr);
+            if (attrValue) {
+                if (attrValue === "this") {
+                    return api.findThisElement(elt, attr);
+                } else {
+                    return api.querySelectorExt(elt, attrValue);
+                }
             }
-        } else {
-            return null;
         }
+        
+        return null;
     }
 
     /** @param {Event} evt */

package/dist/ext/ws.js

@@ -341,7 +341,7 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
 
 				/** @type {WebSocketWrapper} */
 				var socketWrapper = api.getInternalData(socketElt).webSocket;
-				var headers = api.getHeaders(sendElt, socketElt);
+				var headers = api.getHeaders(sendElt, api.getTarget(sendElt));
 				var results = api.getInputValues(sendElt, 'post');
 				var errors = results.errors;
 				var rawParameters = results.values;

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";
 }