htmx.org 2.0.0-beta2 → 2.0.0-beta4

package/dist/htmx.cjs.js

@@ -164,6 +164,12 @@ var htmx = (function() {
        * @default ''
        */
       inlineScriptNonce: '',
+      /**
+       * If set, the nonce will be added to inline styles.
+       * @type string
+       * @default ''
+       */
+      inlineStyleNonce: '',
       /**
        * The attributes to settle during the settling phase.
        * @type string[]
@@ -271,7 +277,7 @@ var htmx = (function() {
     parseInterval: null,
     /** @type {typeof internalEval} */
     _: null,
-    version: '2.0a'
+    version: '2.0.0-beta4'
   }
   // Tsc madness part 2
   htmx.onLoad = onLoadHelper
@@ -2251,6 +2257,13 @@ var htmx = (function() {
       getRawAttribute(elt, 'href').indexOf('#') !== 0
   }
 
+  /**
+   * @param {Element} elt
+   */
+  function eltIsDisabled(elt) {
+    return closest(elt, htmx.config.disableSelector)
+  }
+
   /**
    * @param {Element} elt
    * @param {HtmxNodeInternalData} nodeData
@@ -2273,7 +2286,7 @@ var htmx = (function() {
       triggerSpecs.forEach(function(triggerSpec) {
         addEventListener(elt, function(node, evt) {
           const elt = asElement(node)
-          if (closest(elt, htmx.config.disableSelector)) {
+          if (eltIsDisabled(elt)) {
             cleanUpElement(elt)
             return
           }
@@ -2602,19 +2615,28 @@ var htmx = (function() {
    * @param {Node} elt
    * @returns {Element[]}
    */
-  function findHxOnWildcardElements(elt) {
+  const HX_ON_QUERY = new XPathEvaluator()
+    .createExpression('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
+      ' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]')
+
+  function processHXOnRoot(elt, elements) {
+    if (shouldProcessHxOn(elt)) {
+      elements.push(asElement(elt))
+    }
+    const iter = HX_ON_QUERY.evaluate(elt)
     let node = null
+    while (node = iter.iterateNext()) elements.push(asElement(node))
+  }
+
+  function findHxOnWildcardElements(elt) {
     /** @type {Element[]} */
     const elements = []
-
-    if (!(elt instanceof ShadowRoot)) {
-      if (shouldProcessHxOn(elt)) {
-        elements.push(asElement(elt))
+    if (elt instanceof DocumentFragment) {
+      for (const child of elt.childNodes) {
+        processHXOnRoot(child, elements)
       }
-
-      const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
-        ' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
-      while (node = iter.iterateNext()) elements.push(asElement(node))
+    } else {
+      processHXOnRoot(elt, elements)
     }
     return elements
   }
@@ -2626,8 +2648,21 @@ var htmx = (function() {
   function findElementsToProcess(elt) {
     if (elt.querySelectorAll) {
       const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
+
+      const extensionSelectors = []
+      for (const e in extensions) {
+        const extension = extensions[e]
+        if (extension.getSelectors) {
+          var selectors = extension.getSelectors()
+          if (selectors) {
+            extensionSelectors.push(selectors)
+          }
+        }
+      }
+
       const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," +
-        ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]')
+        ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]' + extensionSelectors.flat().map(s => ', ' + s).join(''))
+
       return results
     } else {
       return []
@@ -2686,7 +2721,7 @@ var htmx = (function() {
   }
 
   /**
-   * @param {EventTarget} elt
+   * @param {Element} elt
    * @param {string} eventName
    * @param {string} code
    */
@@ -2699,6 +2734,9 @@ var htmx = (function() {
     /** @type EventListener */
     const listener = function(e) {
       maybeEval(elt, function() {
+        if (eltIsDisabled(elt)) {
+          return
+        }
         if (!func) {
           func = new Function('event', code)
         }
@@ -3308,6 +3346,9 @@ var htmx = (function() {
         }
       })
       new FormData(elt).forEach(function(value, name) {
+        if (value instanceof File && value.name === '') {
+          return // ignore no-name files
+        }
         addValueToFormData(name, value, formData)
       })
     }
@@ -3591,7 +3632,9 @@ var htmx = (function() {
       return encodedParameters
     } else {
       if (usesFormData(elt)) {
-        return formDataFromObject(filteredParameters)
+        // Force conversion to an actual FormData object in case filteredParameters is a formDataProxy
+        // See https://github.com/bigskysoftware/htmx/issues/2317
+        return overrideFormData(new FormData(), formDataFromObject(filteredParameters))
       } else {
         return urlEncode(filteredParameters)
       }
@@ -4743,6 +4786,7 @@ var htmx = (function() {
   function extensionBase() {
     return {
       init: function(api) { return null },
+      getSelectors: function() { return null },
       onEvent: function(name, evt) { return true },
       transformResponse: function(text, xhr, elt) { return text },
       isInlineSwap: function(swapStyle) { return false },
@@ -4841,8 +4885,9 @@ var htmx = (function() {
 
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
+      const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : ''
       getDocument().head.insertAdjacentHTML('beforeend',
-        '<style>\
+        '<style' + nonceAttribute + '>\
       .' + htmx.config.indicatorClass + '{opacity:0}\
       .' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
       .' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\

package/dist/htmx.esm.js

@@ -164,6 +164,12 @@ var htmx = (function() {
        * @default ''
        */
       inlineScriptNonce: '',
+      /**
+       * If set, the nonce will be added to inline styles.
+       * @type string
+       * @default ''
+       */
+      inlineStyleNonce: '',
       /**
        * The attributes to settle during the settling phase.
        * @type string[]
@@ -271,7 +277,7 @@ var htmx = (function() {
     parseInterval: null,
     /** @type {typeof internalEval} */
     _: null,
-    version: '2.0a'
+    version: '2.0.0-beta4'
   }
   // Tsc madness part 2
   htmx.onLoad = onLoadHelper
@@ -2251,6 +2257,13 @@ var htmx = (function() {
       getRawAttribute(elt, 'href').indexOf('#') !== 0
   }
 
+  /**
+   * @param {Element} elt
+   */
+  function eltIsDisabled(elt) {
+    return closest(elt, htmx.config.disableSelector)
+  }
+
   /**
    * @param {Element} elt
    * @param {HtmxNodeInternalData} nodeData
@@ -2273,7 +2286,7 @@ var htmx = (function() {
       triggerSpecs.forEach(function(triggerSpec) {
         addEventListener(elt, function(node, evt) {
           const elt = asElement(node)
-          if (closest(elt, htmx.config.disableSelector)) {
+          if (eltIsDisabled(elt)) {
             cleanUpElement(elt)
             return
           }
@@ -2602,19 +2615,28 @@ var htmx = (function() {
    * @param {Node} elt
    * @returns {Element[]}
    */
-  function findHxOnWildcardElements(elt) {
+  const HX_ON_QUERY = new XPathEvaluator()
+    .createExpression('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
+      ' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]')
+
+  function processHXOnRoot(elt, elements) {
+    if (shouldProcessHxOn(elt)) {
+      elements.push(asElement(elt))
+    }
+    const iter = HX_ON_QUERY.evaluate(elt)
     let node = null
+    while (node = iter.iterateNext()) elements.push(asElement(node))
+  }
+
+  function findHxOnWildcardElements(elt) {
     /** @type {Element[]} */
     const elements = []
-
-    if (!(elt instanceof ShadowRoot)) {
-      if (shouldProcessHxOn(elt)) {
-        elements.push(asElement(elt))
+    if (elt instanceof DocumentFragment) {
+      for (const child of elt.childNodes) {
+        processHXOnRoot(child, elements)
       }
-
-      const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
-        ' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
-      while (node = iter.iterateNext()) elements.push(asElement(node))
+    } else {
+      processHXOnRoot(elt, elements)
     }
     return elements
   }
@@ -2626,8 +2648,21 @@ var htmx = (function() {
   function findElementsToProcess(elt) {
     if (elt.querySelectorAll) {
       const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
+
+      const extensionSelectors = []
+      for (const e in extensions) {
+        const extension = extensions[e]
+        if (extension.getSelectors) {
+          var selectors = extension.getSelectors()
+          if (selectors) {
+            extensionSelectors.push(selectors)
+          }
+        }
+      }
+
       const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," +
-        ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]')
+        ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]' + extensionSelectors.flat().map(s => ', ' + s).join(''))
+
       return results
     } else {
       return []
@@ -2686,7 +2721,7 @@ var htmx = (function() {
   }
 
   /**
-   * @param {EventTarget} elt
+   * @param {Element} elt
    * @param {string} eventName
    * @param {string} code
    */
@@ -2699,6 +2734,9 @@ var htmx = (function() {
     /** @type EventListener */
     const listener = function(e) {
       maybeEval(elt, function() {
+        if (eltIsDisabled(elt)) {
+          return
+        }
         if (!func) {
           func = new Function('event', code)
         }
@@ -3308,6 +3346,9 @@ var htmx = (function() {
         }
       })
       new FormData(elt).forEach(function(value, name) {
+        if (value instanceof File && value.name === '') {
+          return // ignore no-name files
+        }
         addValueToFormData(name, value, formData)
       })
     }
@@ -3591,7 +3632,9 @@ var htmx = (function() {
       return encodedParameters
     } else {
       if (usesFormData(elt)) {
-        return formDataFromObject(filteredParameters)
+        // Force conversion to an actual FormData object in case filteredParameters is a formDataProxy
+        // See https://github.com/bigskysoftware/htmx/issues/2317
+        return overrideFormData(new FormData(), formDataFromObject(filteredParameters))
       } else {
         return urlEncode(filteredParameters)
       }
@@ -4743,6 +4786,7 @@ var htmx = (function() {
   function extensionBase() {
     return {
       init: function(api) { return null },
+      getSelectors: function() { return null },
       onEvent: function(name, evt) { return true },
       transformResponse: function(text, xhr, elt) { return text },
       isInlineSwap: function(swapStyle) { return false },
@@ -4841,8 +4885,9 @@ var htmx = (function() {
 
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
+      const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : ''
       getDocument().head.insertAdjacentHTML('beforeend',
-        '<style>\
+        '<style' + nonceAttribute + '>\
       .' + htmx.config.indicatorClass + '{opacity:0}\
       .' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
       .' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
@@ -5082,4 +5127,4 @@ var htmx = (function() {
  * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
  * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
  */
-export { htmx }
+export default htmx

package/dist/htmx.js

@@ -164,6 +164,12 @@ var htmx = (function() {
        * @default ''
        */
       inlineScriptNonce: '',
+      /**
+       * If set, the nonce will be added to inline styles.
+       * @type string
+       * @default ''
+       */
+      inlineStyleNonce: '',
       /**
        * The attributes to settle during the settling phase.
        * @type string[]
@@ -271,7 +277,7 @@ var htmx = (function() {
     parseInterval: null,
     /** @type {typeof internalEval} */
     _: null,
-    version: '2.0a'
+    version: '2.0.0-beta4'
   }
   // Tsc madness part 2
   htmx.onLoad = onLoadHelper
@@ -2251,6 +2257,13 @@ var htmx = (function() {
       getRawAttribute(elt, 'href').indexOf('#') !== 0
   }
 
+  /**
+   * @param {Element} elt
+   */
+  function eltIsDisabled(elt) {
+    return closest(elt, htmx.config.disableSelector)
+  }
+
   /**
    * @param {Element} elt
    * @param {HtmxNodeInternalData} nodeData
@@ -2273,7 +2286,7 @@ var htmx = (function() {
       triggerSpecs.forEach(function(triggerSpec) {
         addEventListener(elt, function(node, evt) {
           const elt = asElement(node)
-          if (closest(elt, htmx.config.disableSelector)) {
+          if (eltIsDisabled(elt)) {
             cleanUpElement(elt)
             return
           }
@@ -2602,19 +2615,28 @@ var htmx = (function() {
    * @param {Node} elt
    * @returns {Element[]}
    */
-  function findHxOnWildcardElements(elt) {
+  const HX_ON_QUERY = new XPathEvaluator()
+    .createExpression('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
+      ' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]')
+
+  function processHXOnRoot(elt, elements) {
+    if (shouldProcessHxOn(elt)) {
+      elements.push(asElement(elt))
+    }
+    const iter = HX_ON_QUERY.evaluate(elt)
     let node = null
+    while (node = iter.iterateNext()) elements.push(asElement(node))
+  }
+
+  function findHxOnWildcardElements(elt) {
     /** @type {Element[]} */
     const elements = []
-
-    if (!(elt instanceof ShadowRoot)) {
-      if (shouldProcessHxOn(elt)) {
-        elements.push(asElement(elt))
+    if (elt instanceof DocumentFragment) {
+      for (const child of elt.childNodes) {
+        processHXOnRoot(child, elements)
       }
-
-      const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
-        ' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
-      while (node = iter.iterateNext()) elements.push(asElement(node))
+    } else {
+      processHXOnRoot(elt, elements)
     }
     return elements
   }
@@ -2626,8 +2648,21 @@ var htmx = (function() {
   function findElementsToProcess(elt) {
     if (elt.querySelectorAll) {
       const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
+
+      const extensionSelectors = []
+      for (const e in extensions) {
+        const extension = extensions[e]
+        if (extension.getSelectors) {
+          var selectors = extension.getSelectors()
+          if (selectors) {
+            extensionSelectors.push(selectors)
+          }
+        }
+      }
+
       const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," +
-        ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]')
+        ' [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]' + extensionSelectors.flat().map(s => ', ' + s).join(''))
+
       return results
     } else {
       return []
@@ -2686,7 +2721,7 @@ var htmx = (function() {
   }
 
   /**
-   * @param {EventTarget} elt
+   * @param {Element} elt
    * @param {string} eventName
    * @param {string} code
    */
@@ -2699,6 +2734,9 @@ var htmx = (function() {
     /** @type EventListener */
     const listener = function(e) {
       maybeEval(elt, function() {
+        if (eltIsDisabled(elt)) {
+          return
+        }
         if (!func) {
           func = new Function('event', code)
         }
@@ -3308,6 +3346,9 @@ var htmx = (function() {
         }
       })
       new FormData(elt).forEach(function(value, name) {
+        if (value instanceof File && value.name === '') {
+          return // ignore no-name files
+        }
         addValueToFormData(name, value, formData)
       })
     }
@@ -3591,7 +3632,9 @@ var htmx = (function() {
       return encodedParameters
     } else {
       if (usesFormData(elt)) {
-        return formDataFromObject(filteredParameters)
+        // Force conversion to an actual FormData object in case filteredParameters is a formDataProxy
+        // See https://github.com/bigskysoftware/htmx/issues/2317
+        return overrideFormData(new FormData(), formDataFromObject(filteredParameters))
       } else {
         return urlEncode(filteredParameters)
       }
@@ -4743,6 +4786,7 @@ var htmx = (function() {
   function extensionBase() {
     return {
       init: function(api) { return null },
+      getSelectors: function() { return null },
       onEvent: function(name, evt) { return true },
       transformResponse: function(text, xhr, elt) { return text },
       isInlineSwap: function(swapStyle) { return false },
@@ -4841,8 +4885,9 @@ var htmx = (function() {
 
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
+      const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : ''
       getDocument().head.insertAdjacentHTML('beforeend',
-        '<style>\
+        '<style' + nonceAttribute + '>\
       .' + htmx.config.indicatorClass + '{opacity:0}\
       .' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
       .' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\