htmx.org 1.9.9 → 1.9.11

package/LICENSE

@@ -1,25 +1,13 @@
-BSD 2-Clause License
-
-Copyright (c) 2020, Big Sky Software
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Zero-Clause BSD
+=============
+
+Permission to use, copy, modify, and/or distribute this software for
+any purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL
+WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES
+OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE
+FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
+DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
+AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT
+OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

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.9"></script>
+  <script src="https://unpkg.com/htmx.org@1.9.11"></script>
   <!-- have a button POST a click via AJAX -->
   <button hx-post="/clicked" hx-swap="outerHTML">
     Click Me

package/dist/ext/path-params.js

@@ -0,0 +1,11 @@
+htmx.defineExtension('path-params', {
+    onEvent: function(name, evt) {
+        if (name === "htmx:configRequest") {
+            evt.detail.path = evt.detail.path.replace(/{([^}]+)}/g, function (_, param) {
+                var val = evt.detail.parameters[param];
+                delete evt.detail.parameters[param];
+                return val === undefined ? "{" + param + "}" : encodeURIComponent(val);
+          })
+        }
+    }
+});

package/dist/ext/sse.js

@@ -5,7 +5,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 
 */
 
-(function(){
+(function() {
 
 	/** @type {import("../htmx").HtmxInternalApi} */
 	var api;
@@ -37,19 +37,21 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 		 */
 		onEvent: function(name, evt) {
 
+			var parent = evt.target || evt.detail.elt;
 			switch (name) {
 
-			// Try to remove remove an EventSource when elements are removed
-			case "htmx:beforeCleanupElement":
-				var internalData = api.getInternalData(evt.target)
-				if (internalData.sseEventSource) {
-					internalData.sseEventSource.close();
-				}
-				return;
+				case "htmx:beforeCleanupElement":
+					var internalData = api.getInternalData(parent)
+					// Try to remove remove an EventSource when elements are removed
+					if (internalData.sseEventSource) {
+						internalData.sseEventSource.close();
+					}
 
-			// Try to create EventSources when elements are processed
-			case "htmx:afterProcessNode":
-				createEventSourceOnElement(evt.target);
+					return;
+
+				// Try to create EventSources when elements are processed
+				case "htmx:afterProcessNode":
+					ensureEventSourceOnElement(parent);
 			}
 		}
 	});
@@ -66,8 +68,8 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	 * @param {string} url 
 	 * @returns EventSource
 	 */
-	 function createEventSource(url) {
-		return new EventSource(url, {withCredentials:true});
+	function createEventSource(url) {
+		return new EventSource(url, { withCredentials: true });
 	}
 
 	function splitOnWhitespace(trigger) {
@@ -90,7 +92,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	function getLegacySSESwaps(elt) {
 		var legacySSEValue = api.getAttributeValue(elt, "hx-sse");
 		var returnArr = [];
-		if (legacySSEValue) {
+		if (legacySSEValue != null) {
 			var values = splitOnWhitespace(legacySSEValue);
 			for (var i = 0; i < values.length; i++) {
 				var value = values[i].split(/:(.+)/);
@@ -103,65 +105,25 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	}
 
 	/**
-	 * createEventSourceOnElement creates a new EventSource connection on the provided element.
-	 * If a usable EventSource already exists, then it is returned.  If not, then a new EventSource
-	 * is created and stored in the element's internalData.
+	 * registerSSE looks for attributes that can contain sse events, right 
+	 * now hx-trigger and sse-swap and adds listeners based on these attributes too
+	 * the closest event source
+	 *
 	 * @param {HTMLElement} elt
-	 * @param {number} retryCount
-	 * @returns {EventSource | null}
 	 */
-	function createEventSourceOnElement(elt, retryCount) {
-
-		if (elt == null) {
-			return null;
-		}
-
-		var internalData = api.getInternalData(elt);
-
-		// get URL from element's attribute
-		var sseURL = api.getAttributeValue(elt, "sse-connect");
-
-
-		if (sseURL == undefined) {
-			var legacyURL = getLegacySSEURL(elt)
-			if (legacyURL) {
-				sseURL = legacyURL;
-			} else {
-				return null;
-			}
-		}
-
-		// Connect to the EventSource
-		var source = htmx.createEventSource(sseURL);
-		internalData.sseEventSource = source;
-
-		// Create event handlers
-		source.onerror = function (err) {
-
-			// Log an error event
-			api.triggerErrorEvent(elt, "htmx:sseError", {error:err, source:source});
-
-			// If parent no longer exists in the document, then clean up this EventSource
-			if (maybeCloseSSESource(elt)) {
-				return;
+	function registerSSE(elt) {
+		// Add message handlers for every `sse-swap` attribute
+		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function (child) {
+			// Find closest existing event source
+			var sourceElement = api.getClosestMatch(child, hasEventSource);
+			if (sourceElement == null) {
+				// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
+				return null; // no eventsource in parentage, orphaned element
 			}
 
-			// Otherwise, try to reconnect the EventSource
-			if (source.readyState === EventSource.CLOSED) {
-				retryCount = retryCount || 0;
-				var timeout = Math.random() * (2 ^ retryCount) * 500;
-				window.setTimeout(function() {
-					createEventSourceOnElement(elt, Math.min(7, retryCount+1));
-				}, timeout);
-			}			
-		};
-
-		source.onopen = function (evt) {
-			api.triggerEvent(elt, "htmx:sseOpen", {source: source});
-		}
-		
-		// Add message handlers for every `sse-swap` attribute
-		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function(child) {
+			// Set internalData and source
+			var internalData = api.getInternalData(sourceElement);
+			var source = internalData.sseEventSource;
 
 			var sseSwapAttr = api.getAttributeValue(child, "sse-swap");
 			if (sseSwapAttr) {
@@ -170,29 +132,47 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 				var sseEventNames = getLegacySSESwaps(child);
 			}
 
-			for (var i = 0 ; i < sseEventNames.length ; i++) {
+			for (var i = 0; i < sseEventNames.length; i++) {
 				var sseEventName = sseEventNames[i].trim();
 				var listener = function(event) {
 
-					// If the parent is missing then close SSE and remove listener
-					if (maybeCloseSSESource(elt)) {
+					// If the source is missing then close SSE
+					if (maybeCloseSSESource(sourceElement)) {
+						return;
+					}
+
+					// If the body no longer contains the element, remove the listener
+					if (!api.bodyContains(child)) {
 						source.removeEventListener(sseEventName, listener);
 						return;
 					}
 
 					// swap the response into the DOM and trigger a notification
+					if(!api.triggerEvent(elt, "htmx:sseBeforeMessage", event)) {
+						return;
+					}
 					swap(child, event.data);
 					api.triggerEvent(elt, "htmx:sseMessage", event);
 				};
 
 				// Register the new listener
-				api.getInternalData(elt).sseEventListener = listener;
+				api.getInternalData(child).sseEventListener = listener;
 				source.addEventListener(sseEventName, listener);
 			}
 		});
 
 		// Add message handlers for every `hx-trigger="sse:*"` attribute
 		queryAttributeOnThisOrChildren(elt, "hx-trigger").forEach(function(child) {
+			// Find closest existing event source
+			var sourceElement = api.getClosestMatch(child, hasEventSource);
+			if (sourceElement == null) {
+				// api.triggerErrorEvent(elt, "htmx:noSSESourceError")
+				return null; // no eventsource in parentage, orphaned element
+			}
+
+			// Set internalData and source
+			var internalData = api.getInternalData(sourceElement);
+			var source = internalData.sseEventSource;
 
 			var sseEventName = api.getAttributeValue(child, "hx-trigger");
 			if (sseEventName == null) {
@@ -203,24 +183,87 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 			if (sseEventName.slice(0, 4) != "sse:") {
 				return;
 			}
+			
+			// remove the sse: prefix from here on out
+			sseEventName = sseEventName.substr(4);
 
-			var listener = function(event) {
+			var listener = function() {
+				if (maybeCloseSSESource(sourceElement)) {
+					return
+				}
 
-				// If parent is missing, then close SSE and remove listener
-				if (maybeCloseSSESource(elt)) {
+				if (!api.bodyContains(child)) {
 					source.removeEventListener(sseEventName, listener);
-					return;
 				}
+			}
+		});
+	}
+
+	/**
+	 * ensureEventSourceOnElement creates a new EventSource connection on the provided element.
+	 * If a usable EventSource already exists, then it is returned.  If not, then a new EventSource
+	 * is created and stored in the element's internalData.
+	 * @param {HTMLElement} elt
+	 * @param {number} retryCount
+	 * @returns {EventSource | null}
+	 */
+	function ensureEventSourceOnElement(elt, retryCount) {
 
-				// Trigger events to be handled by the rest of htmx
-				htmx.trigger(child, sseEventName, event);
-				htmx.trigger(child, "htmx:sseMessage", event);
+		if (elt == null) {
+			return null;
+		}
+
+		// handle extension source creation attribute
+		queryAttributeOnThisOrChildren(elt, "sse-connect").forEach(function(child) {
+			var sseURL = api.getAttributeValue(child, "sse-connect");
+			if (sseURL == null) {
+				return;
+			}
+
+			ensureEventSource(child, sseURL, retryCount);
+		});
+
+		// handle legacy sse, remove for HTMX2
+		queryAttributeOnThisOrChildren(elt, "hx-sse").forEach(function(child) {
+			var sseURL = getLegacySSEURL(child);
+			if (sseURL == null) {
+				return;
 			}
 
-			// Register the new listener
-			api.getInternalData(elt).sseEventListener = listener;
-			source.addEventListener(sseEventName.slice(4), listener);
+			ensureEventSource(child, sseURL, retryCount);
 		});
+
+		registerSSE(elt);
+	}
+
+	function ensureEventSource(elt, url, retryCount) {
+		var source = htmx.createEventSource(url);
+
+		source.onerror = function(err) {
+
+			// Log an error event
+			api.triggerErrorEvent(elt, "htmx:sseError", { error: err, source: source });
+
+			// If parent no longer exists in the document, then clean up this EventSource
+			if (maybeCloseSSESource(elt)) {
+				return;
+			}
+
+			// Otherwise, try to reconnect the EventSource
+			if (source.readyState === EventSource.CLOSED) {
+				retryCount = retryCount || 0;
+				var timeout = Math.random() * (2 ^ retryCount) * 500;
+				window.setTimeout(function() {
+					ensureEventSourceOnElement(elt, Math.min(7, retryCount + 1));
+				}, timeout);
+			}
+		};
+
+		source.onopen = function(evt) {
+			api.triggerEvent(elt, "htmx:sseOpen", { source: source });
+		}
+
+		api.getInternalData(elt).sseEventSource = source;
 	}
 
 	/**
@@ -253,12 +296,12 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 		var result = [];
 
 		// If the parent element also contains the requested attribute, then add it to the results too.
-		if (api.hasAttribute(elt, attributeName) || api.hasAttribute(elt, "hx-sse")) {
+		if (api.hasAttribute(elt, attributeName)) {
 			result.push(elt);
 		}
 
 		// Search all child nodes that match the requested attribute
-		elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "], [hx-sse], [data-hx-sse]").forEach(function(node) {
+		elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function(node) {
 			result.push(node);
 		});
 
@@ -281,7 +324,7 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 
 		api.selectAndSwap(swapSpec.swapStyle, target, elt, content, settleInfo);
 
-		settleInfo.elts.forEach(function (elt) {
+		settleInfo.elts.forEach(function(elt) {
 			if (elt.classList) {
 				elt.classList.add(htmx.config.settlingClass);
 			}
@@ -306,11 +349,11 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 	function doSettle(settleInfo) {
 
 		return function() {
-			settleInfo.tasks.forEach(function (task) {
+			settleInfo.tasks.forEach(function(task) {
 				task.call();
 			});
 
-			settleInfo.elts.forEach(function (elt) {
+			settleInfo.elts.forEach(function(elt) {
 				if (elt.classList) {
 					elt.classList.remove(htmx.config.settlingClass);
 				}
@@ -319,4 +362,8 @@ This extension adds support for Server Sent Events to htmx.  See /www/extensions
 		}
 	}
 
-})();
+	function hasEventSource(node) {
+		return api.getInternalData(node).sseEventSource != null;
+	}
+
+})();

package/dist/ext/ws.js

@@ -38,13 +38,14 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
 		 * @param {Event} evt
 		 */
 		onEvent: function (name, evt) {
+			var parent = evt.target || evt.detail.elt;
 
 			switch (name) {
 
 				// Try to close the socket when elements are removed
 				case "htmx:beforeCleanupElement":
 
-					var internalData = api.getInternalData(evt.target)
+					var internalData = api.getInternalData(parent)
 
 					if (internalData.webSocket) {
 						internalData.webSocket.close();
@@ -53,8 +54,6 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
 
 				// Try to create websockets when elements are processed
 				case "htmx:beforeProcessNode":
-					var parent = evt.target;
-
 					forEach(queryAttributeOnThisOrChildren(parent, "ws-connect"), function (child) {
 						ensureWebSocket(child)
 					});

package/dist/htmx.d.ts

@@ -21,7 +21,7 @@ export function addClass(elt: Element, clazz: string, delay?: number): void;
  * @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): Promise<void>;
+export function ajax(verb: string, path: string, element?: Element): Promise<void>;
 
 /**
  * Issues an htmx-style AJAX request
@@ -400,13 +400,86 @@ export interface HtmxConfig {
      * @default true
      */
     scrollIntoViewOnBoost?: boolean;
+    /**
+     * If set, the nonce will be added to inline scripts.
+     * @default ''
+     */
+    inlineScriptNonce?: string;
+    /**
+     * The type of binary data being received over the WebSocket connection
+     * @default 'blob'
+     */
+    wsBinaryType?: 'blob' | 'arraybuffer'; 
+    /**
+     * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+     * @default false 
+     */
+    getCacheBusterParam?: boolean;
+    /**
+     * If set to true, htmx will use the View Transition API when swapping in new content.
+     * @default false 
+     */
+    globalViewTransitions?: boolean;
+    /**
+     * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+     * @default ["get"] 
+     */
+    methodsThatUseUrlParams?: ('get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch' )[];
+    /**
+     * If set to true htmx will not update the title of the document when a title tag is found in new content
+     * @default false 
+     */
+    ignoreTitle?: boolean;
 }
 
+export type HtmxEvent = "htmx:abort"
+    | "htmx:afterOnLoad"
+    | "htmx:afterProcessNode"
+    | "htmx:afterRequest"
+    | "htmx:afterSettle"
+    | "htmx:afterSwap"
+    | "htmx:beforeCleanupElement"
+    | "htmx:beforeOnLoad"
+    | "htmx:beforeProcessNode"
+    | "htmx:beforeRequest"
+    | "htmx:beforeSwap"
+    | "htmx:beforeSend"
+    | "htmx:configRequest"
+    | "htmx:confirm"
+    | "htmx:historyCacheError"
+    | "htmx:historyCacheMiss"
+    | "htmx:historyCacheMissError"
+    | "htmx:historyCacheMissLoad"
+    | "htmx:historyRestore"
+    | "htmx:load"
+    | "htmx:noSSESourceError"
+    | "htmx:onLoadError"
+    | "htmx:oobAfterSwap"
+    | "htmx:oobBeforeSwap"
+    | "htmx:oobErrorNoTarget"
+    | "htmx:prompt"
+    | "htmx:pushedIntoHistory"
+    | "htmx:responseError"
+    | "htmx:sendError"
+    | "htmx:sseError"
+    | "htmx:sseOpen"
+    | "htmx:swapError"
+    | "htmx:targetError"
+    | "htmx:timeout"
+    | "htmx:validation:validate"
+    | "htmx:validation:failed"
+    | "htmx:validation:halted"
+    | "htmx:xhr:abort"
+    | "htmx:xhr:loadend"
+    | "htmx:xhr:loadstart"
+    | "htmx:xhr:progress"
+;
+
 /**
  * https://htmx.org/extensions/#defining
  */
 export interface HtmxExtension {
-    onEvent?: (name: string, evt: CustomEvent) => any;
+    onEvent?: (name: HtmxEvent, evt: CustomEvent) => any;
     transformResponse?: (text: any, xhr: XMLHttpRequest, elt: any) => any;
     isInlineSwap?: (swapStyle: any) => any;
     handleSwap?: (swapStyle: any, target: any, fragment: any, settleInfo: any) => any;