htmx.org 1.9.10 → 2.0.0-alpha2

package/dist/ext/preload.js

@@ -1,147 +0,0 @@
-// This adds the "preload" extension to htmx.  By default, this will 
-// preload the targets of any tags with `href` or `hx-get` attributes 
-// if they also have a `preload` attribute as well.  See documentation
-// for more details
-htmx.defineExtension("preload", {
-
-	onEvent: function(name, event) {
-
-		// Only take actions on "htmx:afterProcessNode"
-		if (name !== "htmx:afterProcessNode") {
-			return;
-		}
-
-		// SOME HELPER FUNCTIONS WE'LL NEED ALONG THE WAY
-
-		// attr gets the closest non-empty value from the attribute.
-		var attr = function(node, property) {
-			if (node == undefined) {return undefined;}
-			return node.getAttribute(property) || node.getAttribute("data-" + property) || attr(node.parentElement, property)
-		}
-		
-		// load handles the actual HTTP fetch, and uses htmx.ajax in cases where we're 
-		// preloading an htmx resource (this sends the same HTTP headers as a regular htmx request)
-		var load = function(node) {
-
-			// Called after a successful AJAX request, to mark the
-			// content as loaded (and prevent additional AJAX calls.)
-			var done = function(html) {
-				if (!node.preloadAlways) {
-					node.preloadState = "DONE"
-				}
-
-				if (attr(node, "preload-images") == "true") {
-					document.createElement("div").innerHTML = html // create and populate a node to load linked resources, too.
-				}
-			}
-
-			return function() {
-
-				// If this value has already been loaded, then do not try again.
-				if (node.preloadState !== "READY") {
-					return;
-				}
-
-				// Special handling for HX-GET - use built-in htmx.ajax function
-				// so that headers match other htmx requests, then set 
-				// node.preloadState = TRUE so that requests are not duplicated
-				// in the future
-				var hxGet = node.getAttribute("hx-get") || node.getAttribute("data-hx-get")
-				if (hxGet) {
-					htmx.ajax("GET", hxGet, {
-						source: node,
-						handler:function(elt, info) {
-							done(info.xhr.responseText);
-						}
-					});
-					return;
-				}
-
-				// Otherwise, perform a standard xhr request, then set 
-				// node.preloadState = TRUE so that requests are not duplicated 
-				// in the future.
-				if (node.getAttribute("href")) {
-					var r = new XMLHttpRequest();
-					r.open("GET", node.getAttribute("href"));
-					r.onload = function() {done(r.responseText);};
-					r.send();
-					return;
-				}
-			}
-		}
-
-		// This function processes a specific node and sets up event handlers.
-		// We'll search for nodes and use it below.
-		var init = function(node) {
-
-			// If this node DOES NOT include a "GET" transaction, then there's nothing to do here.
-			if (node.getAttribute("href") + node.getAttribute("hx-get") + node.getAttribute("data-hx-get") == "") {
-				return;
-			}
-
-			// Guarantee that we only initialize each node once.
-			if (node.preloadState !== undefined) {
-				return;
-			}
-			
-			// Get event name from config.
-			var on = attr(node, "preload") || "mousedown"
-			const always = on.indexOf("always") !== -1
-			if (always) {
-				on = on.replace('always', '').trim()
-			}
-						
-			// FALL THROUGH to here means we need to add an EventListener
-	
-			// Apply the listener to the node
-			node.addEventListener(on, function(evt) {
-				if (node.preloadState === "PAUSE") { // Only add one event listener
-					node.preloadState = "READY"; // Required for the `load` function to trigger
-
-					// Special handling for "mouseover" events.  Wait 100ms before triggering load.
-					if (on === "mouseover") {
-						window.setTimeout(load(node), 100);
-					} else {
-						load(node)() // all other events trigger immediately.
-					}
-				}
-			})
-
-			// Special handling for certain built-in event handlers
-			switch (on) {
-
-				case "mouseover":
-					// Mirror `touchstart` events (fires immediately)
-					node.addEventListener("touchstart", load(node));
-
-					// WHhen the mouse leaves, immediately disable the preload
-					node.addEventListener("mouseout", function(evt) {
-						if ((evt.target === node) && (node.preloadState === "READY")) {
-							node.preloadState = "PAUSE";
-						}
-					})
-					break;
-
-				case "mousedown":
-					 // Mirror `touchstart` events (fires immediately)
-					node.addEventListener("touchstart", load(node));
-					break;
-			}
-
-			// Mark the node as ready to run.
-			node.preloadState = "PAUSE";
-			node.preloadAlways = always;
-			htmx.trigger(node, "preload:init") // This event can be used to load content immediately.
-		}
-
-		// Search for all child nodes that have a "preload" attribute
-		event.target.querySelectorAll("[preload]").forEach(function(node) {
-
-			// Initialize the node with the "preload" attribute
-			init(node)
-
-			// Initialize all child elements that are anchors or have `hx-get` (use with care)
-			node.querySelectorAll("a,[hx-get],[data-hx-get]").forEach(init)
-		})
-	}
-})

package/dist/ext/rails-method.js

@@ -1,10 +0,0 @@
-htmx.defineExtension('rails-method', {
-    onEvent: function (name, evt) {
-        if (name === "configRequest.htmx") {
-            var methodOverride = evt.detail.headers['X-HTTP-Method-Override'];
-            if (methodOverride) {
-                evt.detail.parameters['_method'] = methodOverride;
-            }
-        }
-    }
-});

package/dist/ext/remove-me.js

@@ -1,27 +0,0 @@
-(function(){
-    function maybeRemoveMe(elt) {
-        var timing = elt.getAttribute("remove-me") || elt.getAttribute("data-remove-me");
-        if (timing) {
-            setTimeout(function () {
-                elt.parentElement.removeChild(elt);
-            }, htmx.parseInterval(timing));
-        }
-    }
-
-    htmx.defineExtension('remove-me', {
-        onEvent: function (name, evt) {
-            if (name === "htmx:afterProcessNode") {
-                var elt = evt.detail.elt;
-                if (elt.getAttribute) {
-                    maybeRemoveMe(elt);
-                    if (elt.querySelectorAll) {
-                        var children = elt.querySelectorAll("[remove-me], [data-remove-me]");
-                        for (var i = 0; i < children.length; i++) {
-                            maybeRemoveMe(children[i]);
-                        }
-                    }
-                }
-            }
-        }
-    });
-})();

package/dist/ext/response-targets.js

@@ -1,130 +0,0 @@
-(function(){
-
-    /** @type {import("../htmx").HtmxInternalApi} */
-    var api;
-
-    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
-     * @returns {HTMLElement | null}
-     */
-    function getRespCodeTarget(elt, respCodeNumber) {
-        if (!elt || !respCodeNumber) return null;
-
-        var respCode = respCodeNumber.toString();
-
-        // '*' 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',
-
-            respCode.substr(0, 1) + '*',
-            respCode.substr(0, 1) + 'x',
-            respCode.substr(0, 1) + '**',
-            respCode.substr(0, 1) + 'xx',
-
-            '*',
-            'x',
-            '***',
-            'xxx',
-        ];
-        if (startsWith(respCode, '4') || startsWith(respCode, '5')) {
-            attrPossibilities.push('error');
-        }
-
-        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);
-                }
-            }
-        }
-        
-        return null;
-    }
-
-    /** @param {Event} evt */
-    function handleErrorFlag(evt) {
-        if (evt.detail.isError) {
-            if (htmx.config.responseTargetUnsetsError) {
-                evt.detail.isError = false;
-            }
-        } else if (htmx.config.responseTargetSetsError) {
-            evt.detail.isError = true;
-        }
-    }
-
-    htmx.defineExtension('response-targets', {
-
-        /** @param {import("../htmx").HtmxInternalApi} apiRef */
-        init: function (apiRef) {
-            api = apiRef;
-
-            if (htmx.config.responseTargetUnsetsError === undefined) {
-                htmx.config.responseTargetUnsetsError = true;
-            }
-            if (htmx.config.responseTargetSetsError === undefined) {
-                htmx.config.responseTargetSetsError = false;
-            }
-            if (htmx.config.responseTargetPrefersExisting === undefined) {
-                htmx.config.responseTargetPrefersExisting = false;
-            }
-            if (htmx.config.responseTargetPrefersRetargetHeader === undefined) {
-                htmx.config.responseTargetPrefersRetargetHeader = true;
-            }
-        },
-
-        /**
-         * @param {string} name
-         * @param {Event} evt
-         */
-        onEvent: function (name, evt) {
-            if (name === "htmx:beforeSwap"    &&
-                evt.detail.xhr                &&
-                evt.detail.xhr.status !== 200) {
-                if (evt.detail.target) {
-                    if (htmx.config.responseTargetPrefersExisting) {
-                        evt.detail.shouldSwap = true;
-                        handleErrorFlag(evt);
-                        return true;
-                    }
-                    if (htmx.config.responseTargetPrefersRetargetHeader &&
-                        evt.detail.xhr.getAllResponseHeaders().match(/HX-Retarget:/i)) {
-                        evt.detail.shouldSwap = true;
-                        handleErrorFlag(evt);
-                        return true;
-                    }
-                }
-                if (!evt.detail.requestConfig) {
-                    return true;
-                }
-                var target = getRespCodeTarget(evt.detail.requestConfig.elt, evt.detail.xhr.status);
-                if (target) {
-                    handleErrorFlag(evt);
-                    evt.detail.shouldSwap = true;
-                    evt.detail.target = target;
-                }
-                return true;
-            }
-        }
-    });
-})();

package/dist/ext/restored.js

@@ -1,15 +0,0 @@
-htmx.defineExtension('restored', {
-    onEvent : function(name, evt) {
-        if (name === 'htmx:restored'){
-            var restoredElts = evt.detail.document.querySelectorAll(
-                "[hx-trigger='restored'],[data-hx-trigger='restored']"
-            );
-            // need a better way to do this, would prefer to just trigger from evt.detail.elt
-            var foundElt = Array.from(restoredElts).find(
-                (x) => (x.outerHTML === evt.detail.elt.outerHTML)
-            );
-            var restoredEvent = evt.detail.triggerEvent(foundElt, 'restored');
-        }
-        return;
-    }
-})

package/dist/ext/sse.js

@@ -1,355 +0,0 @@
-/*
-Server Sent Events Extension
-============================
-This extension adds support for Server Sent Events to htmx.  See /www/extensions/sse.md for usage instructions.
-
-*/
-
-(function() {
-
-	/** @type {import("../htmx").HtmxInternalApi} */
-	var api;
-
-	htmx.defineExtension("sse", {
-
-		/**
-		 * Init saves the provided reference to the internal HTMX API.
-		 * 
-		 * @param {import("../htmx").HtmxInternalApi} api 
-		 * @returns void
-		 */
-		init: function(apiRef) {
-			// store a reference to the internal API.
-			api = apiRef;
-
-			// set a function in the public API for creating new EventSource objects
-			if (htmx.createEventSource == undefined) {
-				htmx.createEventSource = createEventSource;
-			}
-		},
-
-		/**
-		 * onEvent handles all events passed to this extension.
-		 * 
-		 * @param {string} name 
-		 * @param {Event} evt 
-		 * @returns void
-		 */
-		onEvent: function(name, evt) {
-
-			switch (name) {
-
-				case "htmx:beforeCleanupElement":
-					var internalData = api.getInternalData(evt.target)
-					// Try to remove remove an EventSource when elements are removed
-					if (internalData.sseEventSource) {
-						internalData.sseEventSource.close();
-					}
-
-					return;
-
-				// Try to create EventSources when elements are processed
-				case "htmx:afterProcessNode":
-					ensureEventSourceOnElement(evt.target);
-					registerSSE(evt.target);
-			}
-		}
-	});
-
-	///////////////////////////////////////////////
-	// HELPER FUNCTIONS
-	///////////////////////////////////////////////
-
-
-	/**
-	 * createEventSource is the default method for creating new EventSource objects.
-	 * it is hoisted into htmx.config.createEventSource to be overridden by the user, if needed.
-	 * 
-	 * @param {string} url 
-	 * @returns EventSource
-	 */
-	function createEventSource(url) {
-		return new EventSource(url, { withCredentials: true });
-	}
-
-	function splitOnWhitespace(trigger) {
-		return trigger.trim().split(/\s+/);
-	}
-
-	function getLegacySSEURL(elt) {
-		var legacySSEValue = api.getAttributeValue(elt, "hx-sse");
-		if (legacySSEValue) {
-			var values = splitOnWhitespace(legacySSEValue);
-			for (var i = 0; i < values.length; i++) {
-				var value = values[i].split(/:(.+)/);
-				if (value[0] === "connect") {
-					return value[1];
-				}
-			}
-		}
-	}
-
-	function getLegacySSESwaps(elt) {
-		var legacySSEValue = api.getAttributeValue(elt, "hx-sse");
-		var returnArr = [];
-		if (legacySSEValue != null) {
-			var values = splitOnWhitespace(legacySSEValue);
-			for (var i = 0; i < values.length; i++) {
-				var value = values[i].split(/:(.+)/);
-				if (value[0] === "swap") {
-					returnArr.push(value[1]);
-				}
-			}
-		}
-		return returnArr;
-	}
-
-	/**
-	 * 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
-	 */
-	function registerSSE(elt) {
-		// Find closest existing event source
-		var sourceElement = api.getClosestMatch(elt, 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;
-
-		// Add message handlers for every `sse-swap` attribute
-		queryAttributeOnThisOrChildren(elt, "sse-swap").forEach(function(child) {
-
-			var sseSwapAttr = api.getAttributeValue(child, "sse-swap");
-			if (sseSwapAttr) {
-				var sseEventNames = sseSwapAttr.split(",");
-			} else {
-				var sseEventNames = getLegacySSESwaps(child);
-			}
-
-			for (var i = 0; i < sseEventNames.length; i++) {
-				var sseEventName = sseEventNames[i].trim();
-				var listener = function(event) {
-
-					// 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);
-					}
-
-					// swap the response into the DOM and trigger a notification
-					swap(child, event.data);
-					api.triggerEvent(elt, "htmx:sseMessage", event);
-				};
-
-				// Register the new 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) {
-
-			var sseEventName = api.getAttributeValue(child, "hx-trigger");
-			if (sseEventName == null) {
-				return;
-			}
-
-			// Only process hx-triggers for events with the "sse:" prefix
-			if (sseEventName.slice(0, 4) != "sse:") {
-				return;
-			}
-			
-			// remove the sse: prefix from here on out
-			sseEventName = sseEventName.substr(4);
-
-			var listener = function() {
-				if (maybeCloseSSESource(sourceElement)) {
-					return
-				}
-
-				if (!api.bodyContains(child)) {
-					source.removeEventListener(sseEventName, listener);
-				}
-			}
-		});
-	}
-
-	/**
-	 * 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) {
-
-		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;
-			}
-
-			ensureEventSource(child, sseURL, retryCount);
-		});
-
-	}
-
-	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;
-	}
-
-	/**
-	 * maybeCloseSSESource confirms that the parent element still exists.
-	 * If not, then any associated SSE source is closed and the function returns true.
-	 * 
-	 * @param {HTMLElement} elt 
-	 * @returns boolean
-	 */
-	function maybeCloseSSESource(elt) {
-		if (!api.bodyContains(elt)) {
-			var source = api.getInternalData(elt).sseEventSource;
-			if (source != undefined) {
-				source.close();
-				// source = null
-				return true;
-			}
-		}
-		return false;
-	}
-
-	/**
-	 * queryAttributeOnThisOrChildren returns all nodes that contain the requested attributeName, INCLUDING THE PROVIDED ROOT ELEMENT.
-	 * 
-	 * @param {HTMLElement} elt 
-	 * @param {string} attributeName 
-	 */
-	function queryAttributeOnThisOrChildren(elt, attributeName) {
-
-		var result = [];
-
-		// If the parent element also contains the requested attribute, then add it to the results too.
-		if (api.hasAttribute(elt, attributeName)) {
-			result.push(elt);
-		}
-
-		// Search all child nodes that match the requested attribute
-		elt.querySelectorAll("[" + attributeName + "], [data-" + attributeName + "]").forEach(function(node) {
-			result.push(node);
-		});
-
-		return result;
-	}
-
-	/**
-	 * @param {HTMLElement} elt
-	 * @param {string} content 
-	 */
-	function swap(elt, content) {
-
-		api.withExtensions(elt, function(extension) {
-			content = extension.transformResponse(content, null, elt);
-		});
-
-		var swapSpec = api.getSwapSpecification(elt);
-		var target = api.getTarget(elt);
-		var settleInfo = api.makeSettleInfo(elt);
-
-		api.selectAndSwap(swapSpec.swapStyle, target, elt, content, settleInfo);
-
-		settleInfo.elts.forEach(function(elt) {
-			if (elt.classList) {
-				elt.classList.add(htmx.config.settlingClass);
-			}
-			api.triggerEvent(elt, 'htmx:beforeSettle');
-		});
-
-		// Handle settle tasks (with delay if requested)
-		if (swapSpec.settleDelay > 0) {
-			setTimeout(doSettle(settleInfo), swapSpec.settleDelay);
-		} else {
-			doSettle(settleInfo)();
-		}
-	}
-
-	/**
-	 * doSettle mirrors much of the functionality in htmx that 
-	 * settles elements after their content has been swapped.
-	 * TODO: this should be published by htmx, and not duplicated here
-	 * @param {import("../htmx").HtmxSettleInfo} settleInfo 
-	 * @returns () => void
-	 */
-	function doSettle(settleInfo) {
-
-		return function() {
-			settleInfo.tasks.forEach(function(task) {
-				task.call();
-			});
-
-			settleInfo.elts.forEach(function(elt) {
-				if (elt.classList) {
-					elt.classList.remove(htmx.config.settlingClass);
-				}
-				api.triggerEvent(elt, 'htmx:afterSettle');
-			});
-		}
-	}
-
-	function hasEventSource(node) {
-		return api.getInternalData(node).sseEventSource != null;
-	}
-
-})();