htmx.org 2.0.0-alpha2 → 2.0.0-beta1

package/dist/ext/morphdom-swap.js

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,45 @@
+(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

@@ -0,0 +1,60 @@
+(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/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/preload.js

@@ -0,0 +1,147 @@
+// 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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,27 @@
+(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

@@ -0,0 +1,130 @@
+(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

@@ -0,0 +1,15 @@
+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;
+    }
+})