htmx.org 2.0.0-beta3 → 2.0.0

package/dist/ext/alpine-morph.js

@@ -1,20 +0,0 @@
-if (htmx.version && !htmx.version.startsWith("1.")) {
-    console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-        ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-}
-htmx.defineExtension('alpine-morph', {
-    isInlineSwap: function (swapStyle) {
-        return swapStyle === 'morph';
-    },
-    handleSwap: function (swapStyle, target, fragment) {
-        if (swapStyle === 'morph') {
-            if (fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-                Alpine.morph(target, fragment.firstElementChild);
-                return [target];
-            } else {
-                Alpine.morph(target, fragment.outerHTML);
-                return [target];
-            }
-        }
-    }
-});

package/dist/ext/class-tools.js

@@ -1,97 +0,0 @@
-(function () {
-
-    if (htmx.version && !htmx.version.startsWith("1.")) {
-        console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-            ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-    }
-
-    function splitOnWhitespace(trigger) {
-        return trigger.split(/\s+/);
-    }
-
-    function parseClassOperation(trimmedValue) {
-        var split = splitOnWhitespace(trimmedValue);
-        if (split.length > 1) {
-            var operation = split[0];
-            var classDef = split[1].trim();
-            var cssClass;
-            var delay;
-            if (classDef.indexOf(":") > 0) {
-                var splitCssClass = classDef.split(':');
-                cssClass = splitCssClass[0];
-                delay = htmx.parseInterval(splitCssClass[1]);
-            } else {
-                cssClass = classDef;
-                delay = 100;
-            }
-            return {
-                operation: operation,
-                cssClass: cssClass,
-                delay: delay
-            }
-        } else {
-            return null;
-        }
-    }
-
-    function performOperation(elt, classOperation, classList, currentRunTime) {
-        setTimeout(function () {
-            elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass);
-        }, currentRunTime)
-    }
-
-    function toggleOperation(elt, classOperation, classList, currentRunTime) {
-        setTimeout(function () {
-            setInterval(function () {
-                elt.classList[classOperation.operation].call(elt.classList, classOperation.cssClass);
-            }, classOperation.delay);
-        }, currentRunTime)
-    }
-
-    function processClassList(elt, classList) {
-        var runs = classList.split("&");
-        for (var i = 0; i < runs.length; i++) {
-            var run = runs[i];
-            var currentRunTime = 0;
-            var classOperations = run.split(",");
-            for (var j = 0; j < classOperations.length; j++) {
-                var value = classOperations[j];
-                var trimmedValue = value.trim();
-                var classOperation = parseClassOperation(trimmedValue);
-                if (classOperation) {
-                    if (classOperation.operation === "toggle") {
-                        toggleOperation(elt, classOperation, classList, currentRunTime);
-                        currentRunTime = currentRunTime + classOperation.delay;
-                    } else {
-                        currentRunTime = currentRunTime + classOperation.delay;
-                        performOperation(elt, classOperation, classList, currentRunTime);
-                    }
-                }
-            }
-        }
-    }
-
-    function maybeProcessClasses(elt) {
-        if (elt.getAttribute) {
-            var classList = elt.getAttribute("classes") || elt.getAttribute("data-classes");
-            if (classList) {
-                processClassList(elt, classList);
-            }
-        }
-    }
-
-    htmx.defineExtension('class-tools', {
-        onEvent: function (name, evt) {
-            if (name === "htmx:afterProcessNode") {
-                var elt = evt.detail.elt;
-                maybeProcessClasses(elt);
-                if (elt.querySelectorAll) {
-                    var children = elt.querySelectorAll("[classes], [data-classes]");
-                    for (var i = 0; i < children.length; i++) {
-                        maybeProcessClasses(children[i]);
-                    }
-                }
-            }
-        }
-    });
-})();

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

@@ -1,100 +0,0 @@
-if (htmx.version && !htmx.version.startsWith("1.")) {
-    console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-        ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-}
-htmx.defineExtension('client-side-templates', {
-    transformResponse : function(text, xhr, elt) {
-
-        var mustacheTemplate = htmx.closest(elt, "[mustache-template]");
-        if (mustacheTemplate) {
-            var data = JSON.parse(text);
-            var templateId = mustacheTemplate.getAttribute('mustache-template');
-            var template = htmx.find("#" + templateId);
-            if (template) {
-                return Mustache.render(template.innerHTML, data);
-            } else {
-                throw "Unknown mustache template: " + templateId;
-            }
-        }
-
-        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);
-            var templateId = handlebarsTemplate.getAttribute('handlebars-template');
-            var templateElement = htmx.find('#' + templateId).innerHTML;
-            var renderTemplate = Handlebars.compile(templateElement);
-            if (renderTemplate) {
-                return renderTemplate(data);
-            } else {
-                throw "Unknown handlebars template: " + templateId;
-            }
-        }
-
-        var handlebarsArrayTemplate = htmx.closest(elt, "[handlebars-array-template]");
-        if (handlebarsArrayTemplate) {
-            var data = JSON.parse(text);
-            var templateId = handlebarsArrayTemplate.getAttribute('handlebars-array-template');
-            var templateElement = htmx.find('#' + templateId).innerHTML;
-            var renderTemplate = Handlebars.compile(templateElement);
-            if (renderTemplate) {
-                return renderTemplate(data);
-            } else {
-                throw "Unknown handlebars template: " + templateId;
-            }
-        }
-
-        var nunjucksTemplate = htmx.closest(elt, "[nunjucks-template]");
-        if (nunjucksTemplate) {
-            var data = JSON.parse(text);
-            var templateName = nunjucksTemplate.getAttribute('nunjucks-template');
-            var template = htmx.find('#' + templateName);
-            if (template) {
-                return nunjucks.renderString(template.innerHTML, data);
-            } 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/debug.js

@@ -1,15 +0,0 @@
-if (htmx.version && !htmx.version.startsWith("1.")) {
-    console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-        ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-}
-htmx.defineExtension('debug', {
-    onEvent: function (name, evt) {
-        if (console.debug) {
-            console.debug(name, evt);
-        } else if (console) {
-            console.log("DEBUG:", name, evt);
-        } else {
-            throw "NO CONSOLE SUPPORTED"
-        }
-    }
-});

package/dist/ext/disable-element.js

@@ -1,20 +0,0 @@
-if (htmx.version && !htmx.version.startsWith("1.")) {
-    console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-        ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-}
-// Disable Submit Button
-htmx.defineExtension('disable-element', {
-    onEvent: function (name, evt) {
-        let elt = evt.detail.elt;
-        let target = elt.getAttribute("hx-disable-element");
-        let targetElements = (target == "self") ? [ elt ] : document.querySelectorAll(target);
-
-        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/event-header.js

@@ -1,41 +0,0 @@
-(function(){
-    if (htmx.version && !htmx.version.startsWith("1.")) {
-        console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-            ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-    }
-    function stringifyEvent(event) {
-        var obj = {};
-        for (var key in event) {
-            obj[key] = event[key];
-        }
-        return JSON.stringify(obj, function(key, value){
-            if(value instanceof Node){
-                var nodeRep = value.tagName;
-                if (nodeRep) {
-                    nodeRep = nodeRep.toLowerCase();
-                    if(value.id){
-                        nodeRep += "#" + value.id;
-                    }
-                    if(value.classList && value.classList.length){
-                        nodeRep += "." + value.classList.toString().replace(" ", ".")
-                    }
-                    return nodeRep;
-                } else {
-                    return "Node"
-                }
-            }
-            if (value instanceof Window) return 'Window';
-            return value;
-        });
-    }
-
-    htmx.defineExtension('event-header', {
-        onEvent: function (name, evt) {
-            if (name === "htmx:configRequest") {
-                if (evt.detail.triggeringEvent) {
-                    evt.detail.headers['Triggering-Event'] = stringifyEvent(evt.detail.triggeringEvent);
-                }
-            }
-        }
-    });
-})();

package/dist/ext/head-support.js

@@ -1,146 +0,0 @@
-//==========================================================
-// head-support.js
-//
-// An extension to htmx 1.0 to add head tag merging.
-//==========================================================
-(function(){
-
-    if (htmx.version && !htmx.version.startsWith("1.")) {
-        console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-            ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-    }
-
-    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,28 +0,0 @@
-(function(){
-    if (htmx.version && !htmx.version.startsWith("1.")) {
-        console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-            ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-    }
-
-    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,16 +0,0 @@
-if (htmx.version && !htmx.version.startsWith("1.")) {
-    console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-        ".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-}
-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,189 +0,0 @@
-;(function () {
-
-	if (htmx.version && !htmx.version.startsWith("1.")) {
-		console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
-			".  It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
-	}
-
-	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()()
-				}
-			}
-		},
-	})
-})()