htmx.org 2.0.0 → 2.0.2

package/dist/htmx.esm.js

@@ -206,7 +206,7 @@ var htmx = (function() {
       disableSelector: '[hx-disable], [data-hx-disable]',
       /**
        * @type {'auto' | 'instant' | 'smooth'}
-       * @default 'smooth'
+       * @default 'instant'
        */
       scrollBehavior: 'instant',
       /**
@@ -277,7 +277,7 @@ var htmx = (function() {
     parseInterval: null,
     /** @type {typeof internalEval} */
     _: null,
-    version: '2.0.0'
+    version: '2.0.2'
   }
   // Tsc madness part 2
   htmx.onLoad = onLoadHelper
@@ -1626,6 +1626,9 @@ var htmx = (function() {
    * @param {HtmxSettleInfo} settleInfo
    */
   function swapOuterHTML(target, fragment, settleInfo) {
+    if (target instanceof Element && target.tagName === 'BODY') { // special case the body to innerHTML because DocumentFragments can't contain a body elt unfortunately
+      return swapInnerHTML(target, fragment, settleInfo)
+    }
     /** @type {Node} */
     let newElt
     const eltBeforeNewContent = target.previousSibling
@@ -1636,13 +1639,13 @@ var htmx = (function() {
       newElt = eltBeforeNewContent.nextSibling
     }
     settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
+    // scan through all newly added content and add all elements to the settle info so we trigger
+    // events properly on them
     while (newElt && newElt !== target) {
       if (newElt instanceof Element) {
         settleInfo.elts.push(newElt)
-        newElt = newElt.nextElementSibling
-      } else {
-        newElt = null
       }
+      newElt = newElt.nextSibling
     }
     cleanUpElement(target)
     if (target instanceof Element) {
@@ -1750,7 +1753,7 @@ var htmx = (function() {
           try {
             const newElements = ext.handleSwap(swapStyle, target, fragment, settleInfo)
             if (newElements) {
-              if (typeof newElements.length !== 'undefined') {
+              if (Array.isArray(newElements)) {
                 // if handleSwap returns an array (like) of elements, we handle them
                 for (let j = 0; j < newElements.length; j++) {
                   const child = newElements[j]
@@ -1778,7 +1781,8 @@ var htmx = (function() {
    * @param {HtmxSettleInfo} settleInfo
    */
   function findAndSwapOobElements(fragment, settleInfo) {
-    forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
+    var oobElts = findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]')
+    forEach(oobElts, function(oobElement) {
       if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
         const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
         if (oobValue != null) {
@@ -1789,6 +1793,7 @@ var htmx = (function() {
         oobElement.removeAttribute('data-hx-swap-oob')
       }
     })
+    return oobElts.length > 0
   }
 
   /**
@@ -1850,9 +1855,8 @@ var htmx = (function() {
       // oob swaps
       findAndSwapOobElements(fragment, settleInfo)
       forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
-        findAndSwapOobElements(template.content, settleInfo)
-        if (template.content.childElementCount === 0) {
-        // Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
+        if (findAndSwapOobElements(template.content, settleInfo)) {
+          // Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
           template.remove()
         }
       })
@@ -1949,7 +1953,10 @@ var htmx = (function() {
       for (const eventName in triggers) {
         if (triggers.hasOwnProperty(eventName)) {
           let detail = triggers[eventName]
-          if (!isRawObject(detail)) {
+          if (isRawObject(detail)) {
+            // @ts-ignore
+            elt = detail.target !== undefined ? detail.target : elt
+          } else {
             detail = { value: detail }
           }
           triggerEvent(elt, eventName, detail)
@@ -2270,7 +2277,7 @@ var htmx = (function() {
    * @param {HtmxTriggerSpecification[]} triggerSpecs
    */
   function boostElement(elt, nodeData, triggerSpecs) {
-    if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+    if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || (elt.tagName === 'FORM' && String(getRawAttribute(elt, 'method')).toLowerCase() !== 'dialog')) {
       nodeData.boosted = true
       let verb, path
       if (elt.tagName === 'A') {
@@ -2432,13 +2439,17 @@ var htmx = (function() {
 
           if (triggerSpec.throttle > 0) {
             if (!elementData.throttle) {
+              triggerEvent(elt, 'htmx:trigger')
               handler(elt, evt)
               elementData.throttle = getWindow().setTimeout(function() {
                 elementData.throttle = null
               }, triggerSpec.throttle)
             }
           } else if (triggerSpec.delay > 0) {
-            elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+            elementData.delayed = getWindow().setTimeout(function() {
+              triggerEvent(elt, 'htmx:trigger')
+              handler(elt, evt)
+            }, triggerSpec.delay)
           } else {
             triggerEvent(elt, 'htmx:trigger')
             handler(elt, evt)
@@ -3056,6 +3067,10 @@ var htmx = (function() {
     forEach(findAll(clone, '.' + className), function(child) {
       removeClassFromElement(child, className)
     })
+    // remove the disabled attribute for any element disabled due to an htmx request
+    forEach(findAll(clone, '[data-disabled-by-htmx]'), function(child) {
+      child.removeAttribute('disabled')
+    })
     return clone.innerHTML
   }
 
@@ -3209,6 +3224,7 @@ var htmx = (function() {
       const internalData = getInternalData(disabledElement)
       internalData.requestCount = (internalData.requestCount || 0) + 1
       disabledElement.setAttribute('disabled', '')
+      disabledElement.setAttribute('data-disabled-by-htmx', '')
     })
     return disabledElts
   }
@@ -3230,6 +3246,7 @@ var htmx = (function() {
       internalData.requestCount = (internalData.requestCount || 0) - 1
       if (internalData.requestCount === 0) {
         disabledElement.removeAttribute('disabled')
+        disabledElement.removeAttribute('data-disabled-by-htmx')
       }
     })
   }
@@ -3379,10 +3396,10 @@ var htmx = (function() {
   function overrideFormData(receiver, donor) {
     for (const key of donor.keys()) {
       receiver.delete(key)
-      donor.getAll(key).forEach(function(value) {
-        receiver.append(key, value)
-      })
     }
+    donor.forEach(function(value, key) {
+      receiver.append(key, value)
+    })
     return receiver
   }
 
@@ -3912,7 +3929,7 @@ var htmx = (function() {
       if (obj.hasOwnProperty(key)) {
         if (typeof obj[key].forEach === 'function') {
           obj[key].forEach(function(v) { formData.append(key, v) })
-        } else if (typeof obj[key] === 'object') {
+        } else if (typeof obj[key] === 'object' && !(obj[key] instanceof Blob)) {
           formData.append(key, JSON.stringify(obj[key]))
         } else {
           formData.append(key, obj[key])
@@ -4005,6 +4022,8 @@ var htmx = (function() {
         target.delete(name)
         if (typeof value.forEach === 'function') {
           value.forEach(function(v) { target.append(name, v) })
+        } else if (typeof value === 'object' && !(value instanceof Blob)) {
+          target.append(name, JSON.stringify(value))
         } else {
           target.append(name, value)
         }
@@ -4340,7 +4359,9 @@ var htmx = (function() {
         const hierarchy = hierarchyForElt(elt)
         responseInfo.pathInfo.responsePath = getPathFromResponse(xhr)
         responseHandler(elt, responseInfo)
-        removeRequestIndicators(indicators, disableElts)
+        if (responseInfo.keepIndicators !== true) {
+          removeRequestIndicators(indicators, disableElts)
+        }
         triggerEvent(elt, 'htmx:afterRequest', responseInfo)
         triggerEvent(elt, 'htmx:afterOnLoad', responseInfo)
         // if the body no longer contains the element, trigger the event on the closest parent
@@ -4580,12 +4601,14 @@ var htmx = (function() {
     const shouldRefresh = hasHeader(xhr, /HX-Refresh:/i) && xhr.getResponseHeader('HX-Refresh') === 'true'
 
     if (hasHeader(xhr, /HX-Redirect:/i)) {
+      responseInfo.keepIndicators = true
       location.href = xhr.getResponseHeader('HX-Redirect')
       shouldRefresh && location.reload()
       return
     }
 
     if (shouldRefresh) {
+      responseInfo.keepIndicators = true
       location.reload()
       return
     }
@@ -5033,7 +5056,7 @@ var htmx = (function() {
  * @property {Element|string} [source]
  * @property {Event} [event]
  * @property {HtmxAjaxHandler} [handler]
- * @property {Element|string} target
+ * @property {Element|string} [target]
  * @property {HtmxSwapStyle} [swap]
  * @property {Object|FormData} [values]
  * @property {Record<string,string>} [headers]
@@ -5069,6 +5092,7 @@ var htmx = (function() {
  * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
  * @property {boolean} [failed]
  * @property {boolean} [successful]
+ * @property {boolean} [keepIndicators]
  */
 
 /**
@@ -5118,13 +5142,14 @@ var htmx = (function() {
  */
 
 /**
+ * @see https://github.com/bigskysoftware/htmx-extensions/blob/main/README.md
  * @typedef {Object} HtmxExtension
- * @see https://htmx.org/extensions/#defining
  * @property {(api: any) => void} init
  * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
  * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
  * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
- * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
- * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ * @property {(swapStyle: HtmxSwapStyle, target: Node, fragment: Node, settleInfo: HtmxSettleInfo) => boolean|Node[]} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Node) => *|string|null} encodeParameters
+ * @property {() => string[]|null} getSelectors
  */
 export default htmx

package/dist/htmx.js

@@ -206,7 +206,7 @@ var htmx = (function() {
       disableSelector: '[hx-disable], [data-hx-disable]',
       /**
        * @type {'auto' | 'instant' | 'smooth'}
-       * @default 'smooth'
+       * @default 'instant'
        */
       scrollBehavior: 'instant',
       /**
@@ -277,7 +277,7 @@ var htmx = (function() {
     parseInterval: null,
     /** @type {typeof internalEval} */
     _: null,
-    version: '2.0.0'
+    version: '2.0.2'
   }
   // Tsc madness part 2
   htmx.onLoad = onLoadHelper
@@ -1626,6 +1626,9 @@ var htmx = (function() {
    * @param {HtmxSettleInfo} settleInfo
    */
   function swapOuterHTML(target, fragment, settleInfo) {
+    if (target instanceof Element && target.tagName === 'BODY') { // special case the body to innerHTML because DocumentFragments can't contain a body elt unfortunately
+      return swapInnerHTML(target, fragment, settleInfo)
+    }
     /** @type {Node} */
     let newElt
     const eltBeforeNewContent = target.previousSibling
@@ -1636,13 +1639,13 @@ var htmx = (function() {
       newElt = eltBeforeNewContent.nextSibling
     }
     settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
+    // scan through all newly added content and add all elements to the settle info so we trigger
+    // events properly on them
     while (newElt && newElt !== target) {
       if (newElt instanceof Element) {
         settleInfo.elts.push(newElt)
-        newElt = newElt.nextElementSibling
-      } else {
-        newElt = null
       }
+      newElt = newElt.nextSibling
     }
     cleanUpElement(target)
     if (target instanceof Element) {
@@ -1750,7 +1753,7 @@ var htmx = (function() {
           try {
             const newElements = ext.handleSwap(swapStyle, target, fragment, settleInfo)
             if (newElements) {
-              if (typeof newElements.length !== 'undefined') {
+              if (Array.isArray(newElements)) {
                 // if handleSwap returns an array (like) of elements, we handle them
                 for (let j = 0; j < newElements.length; j++) {
                   const child = newElements[j]
@@ -1778,7 +1781,8 @@ var htmx = (function() {
    * @param {HtmxSettleInfo} settleInfo
    */
   function findAndSwapOobElements(fragment, settleInfo) {
-    forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
+    var oobElts = findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]')
+    forEach(oobElts, function(oobElement) {
       if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
         const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
         if (oobValue != null) {
@@ -1789,6 +1793,7 @@ var htmx = (function() {
         oobElement.removeAttribute('data-hx-swap-oob')
       }
     })
+    return oobElts.length > 0
   }
 
   /**
@@ -1850,9 +1855,8 @@ var htmx = (function() {
       // oob swaps
       findAndSwapOobElements(fragment, settleInfo)
       forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
-        findAndSwapOobElements(template.content, settleInfo)
-        if (template.content.childElementCount === 0) {
-        // Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
+        if (findAndSwapOobElements(template.content, settleInfo)) {
+          // Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
           template.remove()
         }
       })
@@ -1949,7 +1953,10 @@ var htmx = (function() {
       for (const eventName in triggers) {
         if (triggers.hasOwnProperty(eventName)) {
           let detail = triggers[eventName]
-          if (!isRawObject(detail)) {
+          if (isRawObject(detail)) {
+            // @ts-ignore
+            elt = detail.target !== undefined ? detail.target : elt
+          } else {
             detail = { value: detail }
           }
           triggerEvent(elt, eventName, detail)
@@ -2270,7 +2277,7 @@ var htmx = (function() {
    * @param {HtmxTriggerSpecification[]} triggerSpecs
    */
   function boostElement(elt, nodeData, triggerSpecs) {
-    if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+    if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || (elt.tagName === 'FORM' && String(getRawAttribute(elt, 'method')).toLowerCase() !== 'dialog')) {
       nodeData.boosted = true
       let verb, path
       if (elt.tagName === 'A') {
@@ -2432,13 +2439,17 @@ var htmx = (function() {
 
           if (triggerSpec.throttle > 0) {
             if (!elementData.throttle) {
+              triggerEvent(elt, 'htmx:trigger')
               handler(elt, evt)
               elementData.throttle = getWindow().setTimeout(function() {
                 elementData.throttle = null
               }, triggerSpec.throttle)
             }
           } else if (triggerSpec.delay > 0) {
-            elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+            elementData.delayed = getWindow().setTimeout(function() {
+              triggerEvent(elt, 'htmx:trigger')
+              handler(elt, evt)
+            }, triggerSpec.delay)
           } else {
             triggerEvent(elt, 'htmx:trigger')
             handler(elt, evt)
@@ -3056,6 +3067,10 @@ var htmx = (function() {
     forEach(findAll(clone, '.' + className), function(child) {
       removeClassFromElement(child, className)
     })
+    // remove the disabled attribute for any element disabled due to an htmx request
+    forEach(findAll(clone, '[data-disabled-by-htmx]'), function(child) {
+      child.removeAttribute('disabled')
+    })
     return clone.innerHTML
   }
 
@@ -3209,6 +3224,7 @@ var htmx = (function() {
       const internalData = getInternalData(disabledElement)
       internalData.requestCount = (internalData.requestCount || 0) + 1
       disabledElement.setAttribute('disabled', '')
+      disabledElement.setAttribute('data-disabled-by-htmx', '')
     })
     return disabledElts
   }
@@ -3230,6 +3246,7 @@ var htmx = (function() {
       internalData.requestCount = (internalData.requestCount || 0) - 1
       if (internalData.requestCount === 0) {
         disabledElement.removeAttribute('disabled')
+        disabledElement.removeAttribute('data-disabled-by-htmx')
       }
     })
   }
@@ -3379,10 +3396,10 @@ var htmx = (function() {
   function overrideFormData(receiver, donor) {
     for (const key of donor.keys()) {
       receiver.delete(key)
-      donor.getAll(key).forEach(function(value) {
-        receiver.append(key, value)
-      })
     }
+    donor.forEach(function(value, key) {
+      receiver.append(key, value)
+    })
     return receiver
   }
 
@@ -3912,7 +3929,7 @@ var htmx = (function() {
       if (obj.hasOwnProperty(key)) {
         if (typeof obj[key].forEach === 'function') {
           obj[key].forEach(function(v) { formData.append(key, v) })
-        } else if (typeof obj[key] === 'object') {
+        } else if (typeof obj[key] === 'object' && !(obj[key] instanceof Blob)) {
           formData.append(key, JSON.stringify(obj[key]))
         } else {
           formData.append(key, obj[key])
@@ -4005,6 +4022,8 @@ var htmx = (function() {
         target.delete(name)
         if (typeof value.forEach === 'function') {
           value.forEach(function(v) { target.append(name, v) })
+        } else if (typeof value === 'object' && !(value instanceof Blob)) {
+          target.append(name, JSON.stringify(value))
         } else {
           target.append(name, value)
         }
@@ -4340,7 +4359,9 @@ var htmx = (function() {
         const hierarchy = hierarchyForElt(elt)
         responseInfo.pathInfo.responsePath = getPathFromResponse(xhr)
         responseHandler(elt, responseInfo)
-        removeRequestIndicators(indicators, disableElts)
+        if (responseInfo.keepIndicators !== true) {
+          removeRequestIndicators(indicators, disableElts)
+        }
         triggerEvent(elt, 'htmx:afterRequest', responseInfo)
         triggerEvent(elt, 'htmx:afterOnLoad', responseInfo)
         // if the body no longer contains the element, trigger the event on the closest parent
@@ -4580,12 +4601,14 @@ var htmx = (function() {
     const shouldRefresh = hasHeader(xhr, /HX-Refresh:/i) && xhr.getResponseHeader('HX-Refresh') === 'true'
 
     if (hasHeader(xhr, /HX-Redirect:/i)) {
+      responseInfo.keepIndicators = true
       location.href = xhr.getResponseHeader('HX-Redirect')
       shouldRefresh && location.reload()
       return
     }
 
     if (shouldRefresh) {
+      responseInfo.keepIndicators = true
       location.reload()
       return
     }
@@ -5033,7 +5056,7 @@ var htmx = (function() {
  * @property {Element|string} [source]
  * @property {Event} [event]
  * @property {HtmxAjaxHandler} [handler]
- * @property {Element|string} target
+ * @property {Element|string} [target]
  * @property {HtmxSwapStyle} [swap]
  * @property {Object|FormData} [values]
  * @property {Record<string,string>} [headers]
@@ -5069,6 +5092,7 @@ var htmx = (function() {
  * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
  * @property {boolean} [failed]
  * @property {boolean} [successful]
+ * @property {boolean} [keepIndicators]
  */
 
 /**
@@ -5118,12 +5142,13 @@ var htmx = (function() {
  */
 
 /**
+ * @see https://github.com/bigskysoftware/htmx-extensions/blob/main/README.md
  * @typedef {Object} HtmxExtension
- * @see https://htmx.org/extensions/#defining
  * @property {(api: any) => void} init
  * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
  * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
  * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
- * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
- * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ * @property {(swapStyle: HtmxSwapStyle, target: Node, fragment: Node, settleInfo: HtmxSettleInfo) => boolean|Node[]} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Node) => *|string|null} encodeParameters
+ * @property {() => string[]|null} getSelectors
  */