htmx.org 1.9.9 → 2.0.0-alpha1

package/dist/ext/head-support.js

@@ -1,141 +0,0 @@
-//==========================================================
-// head-support.js
-//
-// An extension to htmx 1.0 to add head tag merging.
-//==========================================================
-(function(){
-
-    var api = null;
-
-    function log() {
-        //console.log(arguments);
-    }
-
-    function mergeHead(newContent, defaultMergeStrategy) {
-
-        if (newContent && newContent.indexOf('<head') > -1) {
-            const htmlDoc = document.createElement("html");
-            // remove svgs to avoid conflicts
-            var contentWithSvgsRemoved = newContent.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim, '');
-            // extract head tag
-            var headTag = contentWithSvgsRemoved.match(/(<head(\s[^>]*>|>)([\s\S]*?)<\/head>)/im);
-
-            // if the  head tag exists...
-            if (headTag) {
-
-                var added = []
-                var removed = []
-                var preserved = []
-                var nodesToAppend = []
-
-                htmlDoc.innerHTML = headTag;
-                var newHeadTag = htmlDoc.querySelector("head");
-                var currentHead = document.head;
-
-                if (newHeadTag == null) {
-                    return;
-                } else {
-                    // put all new head elements into a Map, by their outerHTML
-                    var srcToNewHeadNodes = new Map();
-                    for (const newHeadChild of newHeadTag.children) {
-                        srcToNewHeadNodes.set(newHeadChild.outerHTML, newHeadChild);
-                    }
-                }
-
-
-
-                // determine merge strategy
-                var mergeStrategy = api.getAttributeValue(newHeadTag, "hx-head") || defaultMergeStrategy;
-
-                // get the current head
-                for (const currentHeadElt of currentHead.children) {
-
-                    // If the current head element is in the map
-                    var inNewContent = srcToNewHeadNodes.has(currentHeadElt.outerHTML);
-                    var isReAppended = currentHeadElt.getAttribute("hx-head") === "re-eval";
-                    var isPreserved = api.getAttributeValue(currentHeadElt, "hx-preserve") === "true";
-                    if (inNewContent || isPreserved) {
-                        if (isReAppended) {
-                            // remove the current version and let the new version replace it and re-execute
-                            removed.push(currentHeadElt);
-                        } else {
-                            // this element already exists and should not be re-appended, so remove it from
-                            // the new content map, preserving it in the DOM
-                            srcToNewHeadNodes.delete(currentHeadElt.outerHTML);
-                            preserved.push(currentHeadElt);
-                        }
-                    } else {
-                        if (mergeStrategy === "append") {
-                            // we are appending and this existing element is not new content
-                            // so if and only if it is marked for re-append do we do anything
-                            if (isReAppended) {
-                                removed.push(currentHeadElt);
-                                nodesToAppend.push(currentHeadElt);
-                            }
-                        } else {
-                            // if this is a merge, we remove this content since it is not in the new head
-                            if (api.triggerEvent(document.body, "htmx:removingHeadElement", {headElement: currentHeadElt}) !== false) {
-                                removed.push(currentHeadElt);
-                            }
-                        }
-                    }
-                }
-
-                // Push the tremaining new head elements in the Map into the
-                // nodes to append to the head tag
-                nodesToAppend.push(...srcToNewHeadNodes.values());
-                log("to append: ", nodesToAppend);
-
-                for (const newNode of nodesToAppend) {
-                    log("adding: ", newNode);
-                    var newElt = document.createRange().createContextualFragment(newNode.outerHTML);
-                    log(newElt);
-                    if (api.triggerEvent(document.body, "htmx:addingHeadElement", {headElement: newElt}) !== false) {
-                        currentHead.appendChild(newElt);
-                        added.push(newElt);
-                    }
-                }
-
-                // remove all removed elements, after we have appended the new elements to avoid
-                // additional network requests for things like style sheets
-                for (const removedElement of removed) {
-                    if (api.triggerEvent(document.body, "htmx:removingHeadElement", {headElement: removedElement}) !== false) {
-                        currentHead.removeChild(removedElement);
-                    }
-                }
-
-                api.triggerEvent(document.body, "htmx:afterHeadMerge", {added: added, kept: preserved, removed: removed});
-            }
-        }
-    }
-
-    htmx.defineExtension("head-support", {
-        init: function(apiRef) {
-            // store a reference to the internal API.
-            api = apiRef;
-
-            htmx.on('htmx:afterSwap', function(evt){
-                var serverResponse = evt.detail.xhr.response;
-                if (api.triggerEvent(document.body, "htmx:beforeHeadMerge", evt.detail)) {
-                    mergeHead(serverResponse, evt.detail.boosted ? "merge" : "append");
-                }
-            })
-
-            htmx.on('htmx:historyRestore', function(evt){
-                if (api.triggerEvent(document.body, "htmx:beforeHeadMerge", evt.detail)) {
-                    if (evt.detail.cacheMiss) {
-                        mergeHead(evt.detail.serverResponse, "merge");
-                    } else {
-                        mergeHead(evt.detail.item.head, "merge");
-                    }
-                }
-            })
-
-            htmx.on('htmx:historyItemCreated', function(evt){
-                var historyItem = evt.detail.item;
-                historyItem.head = document.head.outerHTML;
-            })
-        }
-    });
-
-})()

package/dist/ext/include-vals.js

@@ -1,24 +0,0 @@
-(function(){
-
-    function mergeObjects(obj1, obj2) {
-        for (var key in obj2) {
-            if (obj2.hasOwnProperty(key)) {
-                obj1[key] = obj2[key];
-            }
-        }
-        return obj1;
-    }
-
-    htmx.defineExtension('include-vals', {
-        onEvent: function (name, evt) {
-            if (name === "htmx:configRequest") {
-                var includeValsElt = htmx.closest(evt.detail.elt, "[include-vals],[data-include-vals]");
-                if (includeValsElt) {
-                    var includeVals = includeValsElt.getAttribute("include-vals") || includeValsElt.getAttribute("data-include-vals");
-                    var valuesToInclude = eval("({" + includeVals + "})");
-                    mergeObjects(evt.detail.parameters, valuesToInclude);
-                }
-            }
-        }
-    });
-})();

package/dist/ext/json-enc.js

@@ -1,12 +0,0 @@
-htmx.defineExtension('json-enc', {
-    onEvent: function (name, evt) {
-        if (name === "htmx:configRequest") {
-            evt.detail.headers['Content-Type'] = "application/json";
-        }
-    },
-    
-    encodeParameters : function(xhr, parameters, elt) {
-        xhr.overrideMimeType('text/json');
-        return (JSON.stringify(parameters));
-    }
-});

package/dist/ext/loading-states.js

@@ -1,183 +0,0 @@
-;(function () {
-	let loadingStatesUndoQueue = []
-
-	function loadingStateContainer(target) {
-		return htmx.closest(target, '[data-loading-states]') || document.body
-	}
-
-	function mayProcessUndoCallback(target, callback) {
-		if (document.body.contains(target)) {
-			callback()
-		}
-	}
-
-	function mayProcessLoadingStateByPath(elt, requestPath) {
-		const pathElt = htmx.closest(elt, '[data-loading-path]')
-		if (!pathElt) {
-			return true
-		}
-
-		return pathElt.getAttribute('data-loading-path') === requestPath
-	}
-
-	function queueLoadingState(sourceElt, targetElt, doCallback, undoCallback) {
-		const delayElt = htmx.closest(sourceElt, '[data-loading-delay]')
-		if (delayElt) {
-			const delayInMilliseconds =
-				delayElt.getAttribute('data-loading-delay') || 200
-			const timeout = setTimeout(function () {
-				doCallback()
-
-				loadingStatesUndoQueue.push(function () {
-					mayProcessUndoCallback(targetElt, undoCallback)
-				})
-			}, delayInMilliseconds)
-
-			loadingStatesUndoQueue.push(function () {
-				mayProcessUndoCallback(targetElt, function () { clearTimeout(timeout) })
-			})
-		} else {
-			doCallback()
-			loadingStatesUndoQueue.push(function () {
-				mayProcessUndoCallback(targetElt, undoCallback)
-			})
-		}
-	}
-
-	function getLoadingStateElts(loadingScope, type, path) {
-		return Array.from(htmx.findAll(loadingScope, "[" + type + "]")).filter(
-			function (elt) { return mayProcessLoadingStateByPath(elt, path) }
-		)
-	}
-
-	function getLoadingTarget(elt) {
-		if (elt.getAttribute('data-loading-target')) {
-			return Array.from(
-				htmx.findAll(elt.getAttribute('data-loading-target'))
-			)
-		}
-		return [elt]
-	}
-
-	htmx.defineExtension('loading-states', {
-		onEvent: function (name, evt) {
-			if (name === 'htmx:beforeRequest') {
-				const container = loadingStateContainer(evt.target)
-
-				const loadingStateTypes = [
-					'data-loading',
-					'data-loading-class',
-					'data-loading-class-remove',
-					'data-loading-disable',
-					'data-loading-aria-busy',
-				]
-
-				let loadingStateEltsByType = {}
-
-				loadingStateTypes.forEach(function (type) {
-					loadingStateEltsByType[type] = getLoadingStateElts(
-						container,
-						type,
-						evt.detail.pathInfo.requestPath
-					)
-				})
-
-				loadingStateEltsByType['data-loading'].forEach(function (sourceElt) {
-					getLoadingTarget(sourceElt).forEach(function (targetElt) {
-						queueLoadingState(
-							sourceElt,
-							targetElt,
-							function () {
-								targetElt.style.display =
-									sourceElt.getAttribute('data-loading') ||
-									'inline-block' },
-							function () { targetElt.style.display = 'none' }
-						)
-					})
-				})
-
-				loadingStateEltsByType['data-loading-class'].forEach(
-					function (sourceElt) {
-						const classNames = sourceElt
-							.getAttribute('data-loading-class')
-							.split(' ')
-
-						getLoadingTarget(sourceElt).forEach(function (targetElt) {
-							queueLoadingState(
-								sourceElt,
-								targetElt,
-								function () {
-									classNames.forEach(function (className) {
-                                        targetElt.classList.add(className)
-                                    })
-                                },
-								function() {
-									classNames.forEach(function (className) {
-                                        targetElt.classList.remove(className)
-                                    })
-                                }
-							)
-						})
-					}
-				)
-
-				loadingStateEltsByType['data-loading-class-remove'].forEach(
-					function (sourceElt) {
-						const classNames = sourceElt
-							.getAttribute('data-loading-class-remove')
-							.split(' ')
-
-						getLoadingTarget(sourceElt).forEach(function (targetElt) {
-							queueLoadingState(
-								sourceElt,
-								targetElt,
-								function () {
-									classNames.forEach(function (className) {
-                                        targetElt.classList.remove(className)
-                                    })
-                                },
-								function() {
-									classNames.forEach(function (className) {
-                                        targetElt.classList.add(className)
-                                    })
-                                }
-							)
-						})
-					}
-				)
-
-				loadingStateEltsByType['data-loading-disable'].forEach(
-					function (sourceElt) {
-						getLoadingTarget(sourceElt).forEach(function (targetElt) {
-							queueLoadingState(
-								sourceElt,
-								targetElt,
-								function() { targetElt.disabled = true },
-                                function() { targetElt.disabled = false }
-							)
-						})
-					}
-				)
-
-				loadingStateEltsByType['data-loading-aria-busy'].forEach(
-					function (sourceElt) {
-						getLoadingTarget(sourceElt).forEach(function (targetElt) {
-							queueLoadingState(
-								sourceElt,
-								targetElt,
-								function () { targetElt.setAttribute("aria-busy", "true") },
-								function () { targetElt.removeAttribute("aria-busy") }
-							)
-						})
-					}
-				)
-			}
-
-			if (name === 'htmx:beforeOnLoad') {
-				while (loadingStatesUndoQueue.length > 0) {
-					loadingStatesUndoQueue.shift()()
-				}
-			}
-		},
-	})
-})()

package/dist/ext/method-override.js

@@ -1,11 +0,0 @@
-htmx.defineExtension('method-override', {
-    onEvent: function (name, evt) {
-        if (name === "htmx:configRequest") {
-            var method = evt.detail.verb;
-            if (method !== "get" || method !== "post") {
-                evt.detail.headers['X-HTTP-Method-Override'] = method.toUpperCase();
-                evt.detail.verb = "post";
-            }
-        }
-    }
-});

package/dist/ext/morphdom-swap.js

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

package/dist/ext/multi-swap.js

@@ -1,45 +0,0 @@
-(function () {
-
-    /** @type {import("../htmx").HtmxInternalApi} */
-    var api;
-
-    htmx.defineExtension('multi-swap', {
-        init: function (apiRef) {
-            api = apiRef;
-        },
-        isInlineSwap: function (swapStyle) {
-            return swapStyle.indexOf('multi:') === 0;
-        },
-        handleSwap: function (swapStyle, target, fragment, settleInfo) {
-            if (swapStyle.indexOf('multi:') === 0) {
-                var selectorToSwapStyle = {};
-                var elements = swapStyle.replace(/^multi\s*:\s*/, '').split(/\s*,\s*/);
-
-                elements.map(function (element) {
-                    var split = element.split(/\s*:\s*/);
-                    var elementSelector = split[0];
-                    var elementSwapStyle = typeof (split[1]) !== "undefined" ? split[1] : "innerHTML";
-
-                    if (elementSelector.charAt(0) !== '#') {
-                        console.error("HTMX multi-swap: unsupported selector '" + elementSelector + "'. Only ID selectors starting with '#' are supported.");
-                        return;
-                    }
-
-                    selectorToSwapStyle[elementSelector] = elementSwapStyle;
-                });
-
-                for (var selector in selectorToSwapStyle) {
-                    var swapStyle = selectorToSwapStyle[selector];
-                    var elementToSwap = fragment.querySelector(selector);
-                    if (elementToSwap) {
-                        api.oobSwap(swapStyle, elementToSwap, settleInfo);
-                    } else {
-                        console.warn("HTMX multi-swap: selector '" + selector + "' not found in source content.");
-                    }
-                }
-
-                return true;
-            }
-        }
-    });
-})();

package/dist/ext/path-deps.js

@@ -1,60 +0,0 @@
-(function(undefined){
-    'use strict';
-
-    // Save a reference to the global object (window in the browser)
-    var _root = this;
-  
-    function dependsOn(pathSpec, url) {
-        if (pathSpec === "ignore") {
-            return false;
-        }
-        var dependencyPath = pathSpec.split("/");
-        var urlPath = url.split("/");
-        for (var i = 0; i < urlPath.length; i++) {
-            var dependencyElement = dependencyPath.shift();
-            var pathElement = urlPath[i];
-            if (dependencyElement !== pathElement && dependencyElement !== "*") {
-                return false;
-            }
-            if (dependencyPath.length === 0 || (dependencyPath.length === 1 && dependencyPath[0] === "")) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    function refreshPath(path) {
-        var eltsWithDeps = htmx.findAll("[path-deps]");
-        for (var i = 0; i < eltsWithDeps.length; i++) {
-            var elt = eltsWithDeps[i];
-            if (dependsOn(elt.getAttribute('path-deps'), path)) {
-                htmx.trigger(elt, "path-deps");
-            }
-        }      
-    }    
-
-    htmx.defineExtension('path-deps', {
-        onEvent: function (name, evt) {
-            if (name === "htmx:beforeOnLoad") {
-                var config = evt.detail.requestConfig;
-                // mutating call
-                if (config.verb !== "get" && evt.target.getAttribute('path-deps') !== 'ignore') {
-                    refreshPath(config.path);
-                }
-            } 
-        }
-    });
-
-    /**
-     *  ********************
-     *  Expose functionality
-     *  ********************
-     */    
-
-    _root.PathDeps = {
-        refresh: function(path) {
-            refreshPath(path);
-        }
-    };
-            
-}).call(this);

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]);
-                        }
-                    }
-                }
-            }
-        }
-    });
-})();