htmx.org 2.0.0-alpha1 → 2.0.0-beta1

package/dist/htmx.js

@@ -1,78 +1,308 @@
-const htmx = (function () {
+var htmx = (function() {
   'use strict'
 
   // Public API
-  //* * @type {import("./htmx").HtmxApi} */
-  // TODO: list all methods in public API
   const htmx = {
-    onLoad: onLoadHelper,
-    process: processNode,
-    on: addEventListenerImpl,
-    off: removeEventListenerImpl,
-    trigger: triggerEvent,
-    ajax: ajaxHelper,
-    find,
-    findAll,
-    closest,
-    values: function (elt, type) {
+    // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
+    /* Event processing */
+    /** @type {typeof onLoadHelper} */
+    onLoad: null,
+    /** @type {typeof processNode} */
+    process: null,
+    /** @type {typeof addEventListenerImpl} */
+    on: null,
+    /** @type {typeof removeEventListenerImpl} */
+    off: null,
+    /** @type {typeof triggerEvent} */
+    trigger: null,
+    /** @type {typeof ajaxHelper} */
+    ajax: null,
+    /* DOM querying helpers */
+    /** @type {typeof find} */
+    find: null,
+    /** @type {typeof findAll} */
+    findAll: null,
+    /** @type {typeof closest} */
+    closest: null,
+    /**
+     * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+     *
+     * @see https://htmx.org/api/#values
+     *
+     * @param {Element} elt the element to resolve values on
+     * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+     * @returns {Object}
+     */
+    values: function(elt, type) {
       const inputValues = getInputValues(elt, type || 'post')
       return inputValues.values
     },
-    remove: removeElement,
-    addClass: addClassToElement,
-    removeClass: removeClassFromElement,
-    toggleClass: toggleClassOnElement,
-    takeClass: takeClassForElement,
-    defineExtension,
-    removeExtension,
-    logAll,
-    logNone,
+    /* DOM manipulation helpers */
+    /** @type {typeof removeElement} */
+    remove: null,
+    /** @type {typeof addClassToElement} */
+    addClass: null,
+    /** @type {typeof removeClassFromElement} */
+    removeClass: null,
+    /** @type {typeof toggleClassOnElement} */
+    toggleClass: null,
+    /** @type {typeof takeClassForElement} */
+    takeClass: null,
+    /** @type {typeof swap} */
+    swap: null,
+    /* Extension entrypoints */
+    /** @type {typeof defineExtension} */
+    defineExtension: null,
+    /** @type {typeof removeExtension} */
+    removeExtension: null,
+    /* Debugging */
+    /** @type {typeof logAll} */
+    logAll: null,
+    /** @type {typeof logNone} */
+    logNone: null,
+    /* Debugging */
+    /**
+     * The logger htmx uses to log with
+     *
+     * @see https://htmx.org/api/#logger
+     */
     logger: null,
+    /**
+     * A property holding the configuration htmx uses at runtime.
+     *
+     * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+     *
+     * @see https://htmx.org/api/#config
+     */
     config: {
+      /**
+       * Whether to use history.
+       * @type boolean
+       * @default true
+       */
       historyEnabled: true,
+      /**
+       * The number of pages to keep in **localStorage** for history support.
+       * @type number
+       * @default 10
+       */
       historyCacheSize: 10,
+      /**
+       * @type boolean
+       * @default false
+       */
       refreshOnHistoryMiss: false,
+      /**
+       * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+       * @type HtmxSwapStyle
+       * @default 'innerHTML'
+       */
       defaultSwapStyle: 'innerHTML',
+      /**
+       * The default delay between receiving a response from the server and doing the swap.
+       * @type number
+       * @default 0
+       */
       defaultSwapDelay: 0,
+      /**
+       * The default delay between completing the content swap and settling attributes.
+       * @type number
+       * @default 20
+       */
       defaultSettleDelay: 20,
+      /**
+       * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+       * @type boolean
+       * @default true
+       */
       includeIndicatorStyles: true,
+      /**
+       * The class to place on indicators when a request is in flight.
+       * @type string
+       * @default 'htmx-indicator'
+       */
       indicatorClass: 'htmx-indicator',
+      /**
+       * The class to place on triggering elements when a request is in flight.
+       * @type string
+       * @default 'htmx-request'
+       */
       requestClass: 'htmx-request',
+      /**
+       * The class to temporarily place on elements that htmx has added to the DOM.
+       * @type string
+       * @default 'htmx-added'
+       */
       addedClass: 'htmx-added',
+      /**
+       * The class to place on target elements when htmx is in the settling phase.
+       * @type string
+       * @default 'htmx-settling'
+       */
       settlingClass: 'htmx-settling',
+      /**
+       * The class to place on target elements when htmx is in the swapping phase.
+       * @type string
+       * @default 'htmx-swapping'
+       */
       swappingClass: 'htmx-swapping',
+      /**
+       * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+       * @type boolean
+       * @default true
+       */
       allowEval: true,
+      /**
+       * If set to false, disables the interpretation of script tags.
+       * @type boolean
+       * @default true
+       */
       allowScriptTags: true,
+      /**
+       * If set, the nonce will be added to inline scripts.
+       * @type string
+       * @default ''
+       */
       inlineScriptNonce: '',
+      /**
+       * The attributes to settle during the settling phase.
+       * @type string[]
+       * @default ['class', 'style', 'width', 'height']
+       */
       attributesToSettle: ['class', 'style', 'width', 'height'],
+      /**
+       * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+       * @type boolean
+       * @default false
+       */
       withCredentials: false,
+      /**
+       * @type number
+       * @default 0
+       */
       timeout: 0,
+      /**
+       * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+       * @type {'full-jitter' | ((retryCount:number) => number)}
+       * @default "full-jitter"
+       */
       wsReconnectDelay: 'full-jitter',
+      /**
+       * The type of binary data being received over the WebSocket connection
+       * @type BinaryType
+       * @default 'blob'
+       */
       wsBinaryType: 'blob',
+      /**
+       * @type string
+       * @default '[hx-disable], [data-hx-disable]'
+       */
       disableSelector: '[hx-disable], [data-hx-disable]',
-      useTemplateFragments: false,
+      /**
+       * @type {'auto' | 'instant' | 'smooth'}
+       * @default 'smooth'
+       */
       scrollBehavior: 'instant',
+      /**
+       * If the focused element should be scrolled into view.
+       * @type boolean
+       * @default false
+       */
       defaultFocusScroll: false,
+      /**
+       * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+       * @type boolean
+       * @default false
+       */
       getCacheBusterParam: false,
+      /**
+       * If set to true, htmx will use the View Transition API when swapping in new content.
+       * @type boolean
+       * @default false
+       */
       globalViewTransitions: false,
+      /**
+       * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+       * @type {(HttpVerb)[]}
+       * @default ['get', 'delete']
+       */
       methodsThatUseUrlParams: ['get', 'delete'],
+      /**
+       * If set to true, disables htmx-based requests to non-origin hosts.
+       * @type boolean
+       * @default false
+       */
       selfRequestsOnly: true,
+      /**
+       * If set to true htmx will not update the title of the document when a title tag is found in new content
+       * @type boolean
+       * @default false
+       */
       ignoreTitle: false,
+      /**
+       * Whether the target of a boosted element is scrolled into the viewport.
+       * @type boolean
+       * @default true
+       */
       scrollIntoViewOnBoost: true,
-      triggerSpecsCache: null
+      /**
+       * The cache to store evaluated trigger specifications into.
+       * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+       * @type {Object|null}
+       * @default null
+       */
+      triggerSpecsCache: null,
+      /** @type boolean */
+      disableInheritance: false,
+      /** @type HtmxResponseHandlingConfig[] */
+      responseHandling: [
+        { code: '204', swap: false },
+        { code: '[23]..', swap: true },
+        { code: '[45]..', swap: false, error: true }
+      ],
+      /**
+       * Whether to process OOB swaps on elements that are nested within the main response element.
+       * @type boolean
+       * @default true
+       */
+      allowNestedOobSwaps: true
     },
-    parseInterval,
-    _: internalEval,
-    version: '1.9.10'
-  }
+    /** @type {typeof parseInterval} */
+    parseInterval: null,
+    /** @type {typeof internalEval} */
+    _: null,
+    version: '2.0a'
+  }
+  // Tsc madness part 2
+  htmx.onLoad = onLoadHelper
+  htmx.process = processNode
+  htmx.on = addEventListenerImpl
+  htmx.off = removeEventListenerImpl
+  htmx.trigger = triggerEvent
+  htmx.ajax = ajaxHelper
+  htmx.find = find
+  htmx.findAll = findAll
+  htmx.closest = closest
+  htmx.remove = removeElement
+  htmx.addClass = addClassToElement
+  htmx.removeClass = removeClassFromElement
+  htmx.toggleClass = toggleClassOnElement
+  htmx.takeClass = takeClassForElement
+  htmx.swap = swap
+  htmx.defineExtension = defineExtension
+  htmx.removeExtension = removeExtension
+  htmx.logAll = logAll
+  htmx.logNone = logNone
+  htmx.parseInterval = parseInterval
+  htmx._ = internalEval
 
-  /** @type {import("./htmx").HtmxInternalApi} */
   const internalAPI = {
     addTriggerHandler,
     bodyContains,
     canAccessLocalStorage,
     findThisElement,
     filterValues,
+    swap,
     hasAttribute,
     getAttributeValue,
     getClosestAttributeValue,
@@ -89,7 +319,6 @@ const htmx = (function () {
     makeSettleInfo,
     oobSwap,
     querySelectorExt,
-    selectAndSwap,
     settleImmediately,
     shouldCancel,
     triggerEvent,
@@ -98,13 +327,11 @@ const htmx = (function () {
   }
 
   const VERBS = ['get', 'post', 'put', 'delete', 'patch']
-  const VERB_SELECTOR = VERBS.map(function (verb) {
+  const VERB_SELECTOR = VERBS.map(function(verb) {
     return '[hx-' + verb + '], [data-hx-' + verb + ']'
   }).join(', ')
 
   const HEAD_TAG_REGEX = makeTagRegEx('head')
-  const TITLE_TAG_REGEX = makeTagRegEx('title')
-  const SVG_TAGS_REGEX = makeTagRegEx('svg', true)
 
   //= ===================================================================
   // Utilities
@@ -115,12 +342,22 @@ const htmx = (function () {
    * @param {boolean} global
    * @returns {RegExp}
    */
-  function makeTagRegEx (tag, global = false) {
+  function makeTagRegEx(tag, global = false) {
     return new RegExp(`<${tag}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${tag}>`,
       global ? 'gim' : 'im')
   }
 
-  function parseInterval (str) {
+  /**
+   * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+   *
+   * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+   *
+   * @see https://htmx.org/api/#parseInterval
+   *
+   * @param {string} str timing string
+   * @returns {number|undefined}
+   */
+  function parseInterval(str) {
     if (str == undefined) {
       return undefined
     }
@@ -139,35 +376,40 @@ const htmx = (function () {
   }
 
   /**
-   * @param {HTMLElement} elt
+   * @param {Node} elt
    * @param {string} name
    * @returns {(string | null)}
    */
-  function getRawAttribute (elt, name) {
-    return elt.getAttribute && elt.getAttribute(name)
+  function getRawAttribute(elt, name) {
+    return elt instanceof Element && elt.getAttribute(name)
   }
 
+  /**
+   * @param {Element} elt
+   * @param {string} qualifiedName
+   * @returns {boolean}
+   */
   // resolve with both hx and data-hx prefixes
-  function hasAttribute (elt, qualifiedName) {
-    return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+  function hasAttribute(elt, qualifiedName) {
+    return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
       elt.hasAttribute('data-' + qualifiedName))
   }
 
   /**
    *
-   * @param {HTMLElement} elt
+   * @param {Node} elt
    * @param {string} qualifiedName
    * @returns {(string | null)}
    */
-  function getAttributeValue (elt, qualifiedName) {
+  function getAttributeValue(elt, qualifiedName) {
     return getRawAttribute(elt, qualifiedName) || getRawAttribute(elt, 'data-' + qualifiedName)
   }
 
   /**
-   * @param {HTMLElement} elt
-   * @returns {HTMLElement | ShadowRoot | null}
+   * @param {Node} elt
+   * @returns {Node | null}
    */
-  function parentElt (elt) {
+  function parentElt(elt) {
     const parent = elt.parentElement
     if (!parent && elt.parentNode instanceof ShadowRoot) return elt.parentNode
     return parent
@@ -176,23 +418,25 @@ const htmx = (function () {
   /**
    * @returns {Document}
    */
-  function getDocument () {
+  function getDocument() {
     return document
   }
 
   /**
-   * @returns {Document | ShadowRoot}
+   * @param {Node} elt
+   * @param {boolean} global
+   * @returns {Node|Document}
    */
-  function getRootNode (elt, global) {
+  function getRootNode(elt, global) {
     return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
   }
 
   /**
-   * @param {HTMLElement} elt
-   * @param {(e:HTMLElement) => boolean} condition
-   * @returns {HTMLElement | null}
+   * @param {Node} elt
+   * @param {(e:Node) => boolean} condition
+   * @returns {Node | null}
    */
-  function getClosestMatch (elt, condition) {
+  function getClosestMatch(elt, condition) {
     while (elt && !condition(elt)) {
       elt = parentElt(elt)
     }
@@ -200,25 +444,40 @@ const htmx = (function () {
     return elt || null
   }
 
-  function getAttributeValueWithDisinheritance (initialElement, ancestor, attributeName) {
+  /**
+   * @param {Element} initialElement
+   * @param {Element} ancestor
+   * @param {string} attributeName
+   * @returns {string|null}
+   */
+  function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
     const attributeValue = getAttributeValue(ancestor, attributeName)
     const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
-    if (initialElement !== ancestor && disinherit && (disinherit === '*' || disinherit.split(' ').indexOf(attributeName) >= 0)) {
-      return 'unset'
-    } else {
-      return attributeValue
+    var inherit = getAttributeValue(ancestor, 'hx-inherit')
+    if (initialElement !== ancestor) {
+      if (htmx.config.disableInheritance) {
+        if (inherit && (inherit === '*' || inherit.split(' ').indexOf(attributeName) >= 0)) {
+          return attributeValue
+        } else {
+          return null
+        }
+      }
+      if (disinherit && (disinherit === '*' || disinherit.split(' ').indexOf(attributeName) >= 0)) {
+        return 'unset'
+      }
     }
+    return attributeValue
   }
 
   /**
-   * @param {HTMLElement} elt
+   * @param {Element} elt
    * @param {string} attributeName
    * @returns {string | null}
    */
-  function getClosestAttributeValue (elt, attributeName) {
+  function getClosestAttributeValue(elt, attributeName) {
     let closestAttr = null
-    getClosestMatch(elt, function (e) {
-      return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+    getClosestMatch(elt, function(e) {
+      return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
     })
     if (closestAttr !== 'unset') {
       return closestAttr
@@ -226,22 +485,22 @@ const htmx = (function () {
   }
 
   /**
-   * @param {HTMLElement} elt
+   * @param {Node} elt
    * @param {string} selector
    * @returns {boolean}
    */
-  function matches (elt, selector) {
+  function matches(elt, selector) {
     // @ts-ignore: non-standard properties for browser compatibility
     // noinspection JSUnresolvedVariable
-    const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
-    return matchesFunction && matchesFunction.call(elt, selector)
+    const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+    return !!matchesFunction && matchesFunction.call(elt, selector)
   }
 
   /**
    * @param {string} str
    * @returns {string}
    */
-  function getStartTag (str) {
+  function getStartTag(str) {
     const tagMatcher = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i
     const match = tagMatcher.exec(str)
     if (match) {
@@ -252,77 +511,129 @@ const htmx = (function () {
   }
 
   /**
-   *
    * @param {string} resp
-   * @param {number} depth
-   * @returns {Element}
+   * @returns {Document}
    */
-  function parseHTML (resp, depth) {
+  function parseHTML(resp) {
     const parser = new DOMParser()
-    const responseDoc = parser.parseFromString(resp, 'text/html')
+    return parser.parseFromString(resp, 'text/html')
+  }
 
-    /** @type {Element} */
-    let responseNode = responseDoc.body
-    while (depth > 0) {
-      depth--
-      // @ts-ignore
-      responseNode = responseNode.firstChild
+  /**
+   * @param {DocumentFragment} fragment
+   * @param {Node} elt
+   */
+  function takeChildrenFor(fragment, elt) {
+    while (elt.childNodes.length > 0) {
+      fragment.append(elt.childNodes[0])
     }
-    if (responseNode == null) {
-      // @ts-ignore
-      responseNode = getDocument().createDocumentFragment()
+  }
+
+  /**
+   * @param {HTMLScriptElement} script
+   * @returns {HTMLScriptElement}
+   */
+  function duplicateScript(script) {
+    const newScript = getDocument().createElement('script')
+    forEach(script.attributes, function(attr) {
+      newScript.setAttribute(attr.name, attr.value)
+    })
+    newScript.textContent = script.textContent
+    newScript.async = false
+    if (htmx.config.inlineScriptNonce) {
+      newScript.nonce = htmx.config.inlineScriptNonce
     }
-    return responseNode
+    return newScript
   }
 
-  function aFullPageResponse (resp) {
-    return /<body/.test(resp)
+  /**
+   * @param {HTMLScriptElement} script
+   * @returns {boolean}
+   */
+  function isJavaScriptScriptNode(script) {
+    return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
   }
 
   /**
-   *
-   * @param {string} response
-   * @returns {Element}
+   * we have to make new copies of script tags that we are going to insert because
+   * SOME browsers (not saying who, but it involves an element and an animal) don't
+   * execute scripts created in <template> tags when they are inserted into the DOM
+   * and all the others do lmao
+   * @param {DocumentFragment} fragment
    */
-  function makeFragment (response) {
-    const partialResponse = !aFullPageResponse(response)
-    const startTag = getStartTag(response)
-    let content = response
-    if (startTag === 'head') {
-      content = content.replace(HEAD_TAG_REGEX, '')
-    }
-    if (htmx.config.useTemplateFragments && partialResponse) {
-      const documentFragment = parseHTML('<body><template>' + content + '</template></body>', 0)
-      // @ts-ignore type mismatch between DocumentFragment and Element.
-      // TODO: Are these close enough for htmx to use interchangeably?
-      return documentFragment.querySelector('template').content
-    }
-    switch (startTag) {
-      case 'thead':
-      case 'tbody':
-      case 'tfoot':
-      case 'colgroup':
-      case 'caption':
-        return parseHTML('<table>' + content + '</table>', 1)
-      case 'col':
-        return parseHTML('<table><colgroup>' + content + '</colgroup></table>', 2)
-      case 'tr':
-        return parseHTML('<table><tbody>' + content + '</tbody></table>', 2)
-      case 'td':
-      case 'th':
-        return parseHTML('<table><tbody><tr>' + content + '</tr></tbody></table>', 3)
-      case 'script':
-      case 'style':
-        return parseHTML('<div>' + content + '</div>', 1)
-      default:
-        return parseHTML(content, 0)
+  function normalizeScriptTags(fragment) {
+    Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
+      if (isJavaScriptScriptNode(script)) {
+        const newScript = duplicateScript(script)
+        const parent = script.parentNode
+        try {
+          parent.insertBefore(newScript, script)
+        } catch (e) {
+          logError(e)
+        } finally {
+          script.remove()
+        }
+      }
+    })
+  }
+
+  /**
+   * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+   * @description  a document fragment representing the response HTML, including
+   * a `title` property for any title information found
+   */
+
+  /**
+   * @param {string} response HTML
+   * @returns {DocumentFragmentWithTitle}
+   */
+  function makeFragment(response) {
+    // strip head tag to determine shape of response we are dealing with
+    const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
+    const startTag = getStartTag(responseWithNoHead)
+    /** @type DocumentFragmentWithTitle */
+    let fragment
+    if (startTag === 'html') {
+      // if it is a full document, parse it and return the body
+      fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
+      const doc = parseHTML(response)
+      takeChildrenFor(fragment, doc.body)
+      fragment.title = doc.title
+    } else if (startTag === 'body') {
+      // parse body w/o wrapping in template
+      fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
+      const doc = parseHTML(responseWithNoHead)
+      takeChildrenFor(fragment, doc.body)
+      fragment.title = doc.title
+    } else {
+      // otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
+      const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
+      fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
+      // extract title into fragment for later processing
+      fragment.title = doc.title
+
+      // for legacy reasons we support a title tag at the root level of non-body responses, so we need to handle it
+      var titleElement = fragment.querySelector('title')
+      if (titleElement && titleElement.parentNode === fragment) {
+        titleElement.remove()
+        fragment.title = titleElement.innerText
+      }
+    }
+    if (fragment) {
+      if (htmx.config.allowScriptTags) {
+        normalizeScriptTags(fragment)
+      } else {
+        // remove all script tags if scripts are disabled
+        fragment.querySelectorAll('script').forEach((script) => script.remove())
+      }
     }
+    return fragment
   }
 
   /**
    * @param {Function} func
    */
-  function maybeCall (func) {
+  function maybeCall(func) {
     if (func) {
       func()
     }
@@ -333,7 +644,7 @@ const htmx = (function () {
    * @param {string} type
    * @returns
    */
-  function isType (o, type) {
+  function isType(o, type) {
     return Object.prototype.toString.call(o) === '[object ' + type + ']'
   }
 
@@ -341,24 +652,65 @@ const htmx = (function () {
    * @param {*} o
    * @returns {o is Function}
    */
-  function isFunction (o) {
-    return isType(o, 'Function')
+  function isFunction(o) {
+    return typeof o === 'function'
   }
 
   /**
    * @param {*} o
    * @returns {o is Object}
    */
-  function isRawObject (o) {
+  function isRawObject(o) {
     return isType(o, 'Object')
   }
 
+  /**
+   * @typedef {Object} OnHandler
+   * @property {(keyof HTMLElementEventMap)|string} event
+   * @property {EventListener} listener
+   */
+
+  /**
+   * @typedef {Object} ListenerInfo
+   * @property {string} trigger
+   * @property {EventListener} listener
+   * @property {EventTarget} on
+   */
+
+  /**
+   * @typedef {Object} HtmxNodeInternalData
+   * Element data
+   * @property {number} [initHash]
+   * @property {boolean} [boosted]
+   * @property {OnHandler[]} [onHandlers]
+   * @property {number} [timeout]
+   * @property {ListenerInfo[]} [listenerInfos]
+   * @property {boolean} [cancelled]
+   * @property {boolean} [triggeredOnce]
+   * @property {number} [delayed]
+   * @property {number|null} [throttle]
+   * @property {string} [lastValue]
+   * @property {boolean} [loaded]
+   * @property {string} [path]
+   * @property {string} [verb]
+   * @property {boolean} [polling]
+   * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+   * @property {number} [requestCount]
+   * @property {XMLHttpRequest} [xhr]
+   * @property {(() => void)[]} [queuedRequests]
+   * @property {boolean} [abortable]
+   *
+   * Event data
+   * @property {HtmxTriggerSpecification} [triggerSpec]
+   * @property {EventTarget[]} [handledFor]
+   */
+
   /**
    * getInternalData retrieves "private" data stored by htmx within an element
-   * @param {HTMLElement} elt
-   * @returns {*}
+   * @param {EventTarget|Event} elt
+   * @returns {HtmxNodeInternalData}
    */
-  function getInternalData (elt) {
+  function getInternalData(elt) {
     const dataProp = 'htmx-internal-data'
     let data = elt[dataProp]
     if (!data) {
@@ -369,10 +721,11 @@ const htmx = (function () {
 
   /**
    * toArray converts an ArrayLike object into a real array.
-   * @param {ArrayLike} arr
-   * @returns {any[]}
+   * @template T
+   * @param {ArrayLike<T>} arr
+   * @returns {T[]}
    */
-  function toArray (arr) {
+  function toArray(arr) {
     const returnArr = []
     if (arr) {
       for (let i = 0; i < arr.length; i++) {
@@ -382,7 +735,12 @@ const htmx = (function () {
     return returnArr
   }
 
-  function forEach (arr, func) {
+  /**
+   * @template T
+   * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+   * @param {(T) => void} func
+   */
+  function forEach(arr, func) {
     if (arr) {
       for (let i = 0; i < arr.length; i++) {
         func(arr[i])
@@ -390,43 +748,64 @@ const htmx = (function () {
     }
   }
 
-  function isScrolledIntoView (el) {
+  /**
+   * @param {Element} el
+   * @returns {boolean}
+   */
+  function isScrolledIntoView(el) {
     const rect = el.getBoundingClientRect()
     const elemTop = rect.top
     const elemBottom = rect.bottom
     return elemTop < window.innerHeight && elemBottom >= 0
   }
 
-  function bodyContains (elt) {
+  /**
+   * @param {Node} elt
+   * @returns {boolean}
+   */
+  function bodyContains(elt) {
     // IE Fix
-    if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
-      return getDocument().body.contains(elt.getRootNode().host)
+    const rootNode = elt.getRootNode && elt.getRootNode()
+    if (rootNode && rootNode instanceof window.ShadowRoot) {
+      return getDocument().body.contains(rootNode.host)
     } else {
       return getDocument().body.contains(elt)
     }
   }
 
-  function splitOnWhitespace (trigger) {
+  /**
+   * @param {string} trigger
+   * @returns {string[]}
+   */
+  function splitOnWhitespace(trigger) {
     return trigger.trim().split(/\s+/)
   }
 
   /**
-   * mergeObjects takes all of the keys from
+   * mergeObjects takes all the keys from
    * obj2 and duplicates them into obj1
-   * @param {Object} obj1
-   * @param {Object} obj2
-   * @returns {Object}
+   * @template T1
+   * @template T2
+   * @param {T1} obj1
+   * @param {T2} obj2
+   * @returns {T1 & T2}
    */
-  function mergeObjects (obj1, obj2) {
+  function mergeObjects(obj1, obj2) {
     for (const key in obj2) {
       if (obj2.hasOwnProperty(key)) {
+        // @ts-ignore tsc doesn't seem to properly handle types merging
         obj1[key] = obj2[key]
       }
     }
+    // @ts-ignore tsc doesn't seem to properly handle types merging
     return obj1
   }
 
-  function parseJSON (jString) {
+  /**
+   * @param {string} jString
+   * @returns {any|null}
+   */
+  function parseJSON(jString) {
     try {
       return JSON.parse(jString)
     } catch (error) {
@@ -435,7 +814,10 @@ const htmx = (function () {
     }
   }
 
-  function canAccessLocalStorage () {
+  /**
+   * @returns {boolean}
+   */
+  function canAccessLocalStorage() {
     const test = 'htmx:localStorageTest'
     try {
       localStorage.setItem(test, test)
@@ -446,7 +828,11 @@ const htmx = (function () {
     }
   }
 
-  function normalizePath (path) {
+  /**
+   * @param {string} path
+   * @returns {string}
+   */
+  function normalizePath(path) {
     try {
       const url = new URL(path)
       if (url) {
@@ -467,51 +853,101 @@ const htmx = (function () {
   // public API
   //= =========================================================================================
 
-  function internalEval (str) {
-    return maybeEval(getDocument().body, function () {
+  /**
+   * @param {string} str
+   * @returns {any}
+   */
+  function internalEval(str) {
+    return maybeEval(getDocument().body, function() {
       return eval(str)
     })
   }
 
-  function onLoadHelper (callback) {
-    const value = htmx.on('htmx:load', function (evt) {
+  /**
+   * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+   *
+   * @see https://htmx.org/api/#onLoad
+   *
+   * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+   * @returns {EventListener}
+   */
+  function onLoadHelper(callback) {
+    const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
       callback(evt.detail.elt)
     })
     return value
   }
 
-  function logAll () {
-    htmx.logger = function (elt, event, data) {
+  /**
+   * Log all htmx events, useful for debugging.
+   *
+   * @see https://htmx.org/api/#logAll
+   */
+  function logAll() {
+    htmx.logger = function(elt, event, data) {
       if (console) {
         console.log(event, elt, data)
       }
     }
   }
 
-  function logNone () {
+  function logNone() {
     htmx.logger = null
   }
 
-  function find (eltOrSelector, selector) {
-    if (selector) {
+  /**
+   * Finds an element matching the selector
+   *
+   * @see https://htmx.org/api/#find
+   *
+   * @param {ParentNode|string} eltOrSelector  the root element to find the matching element in, inclusive | the selector to match
+   * @param {string} [selector] the selector to match
+   * @returns {Element|null}
+   */
+  function find(eltOrSelector, selector) {
+    if (typeof eltOrSelector !== 'string') {
       return eltOrSelector.querySelector(selector)
     } else {
       return find(getDocument(), eltOrSelector)
     }
   }
 
-  function findAll (eltOrSelector, selector) {
-    if (selector) {
+  /**
+   * Finds all elements matching the selector
+   *
+   * @see https://htmx.org/api/#findAll
+   *
+   * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+   * @param {string} [selector] the selector to match
+   * @returns {NodeListOf<Element>}
+   */
+  function findAll(eltOrSelector, selector) {
+    if (typeof eltOrSelector !== 'string') {
       return eltOrSelector.querySelectorAll(selector)
     } else {
       return findAll(getDocument(), eltOrSelector)
     }
   }
 
-  function removeElement (elt, delay) {
+  /**
+   * @returns Window
+   */
+  function getWindow() {
+    return window
+  }
+
+  /**
+   * Removes an element from the DOM
+   *
+   * @see https://htmx.org/api/#remove
+   *
+   * @param {Node} elt
+   * @param {number} [delay]
+   */
+  function removeElement(elt, delay) {
     elt = resolveTarget(elt)
     if (delay) {
-      setTimeout(function () {
+      getWindow().setTimeout(function() {
         removeElement(elt)
         elt = null
       }, delay)
@@ -520,10 +956,54 @@ const htmx = (function () {
     }
   }
 
-  function addClassToElement (elt, clazz, delay) {
-    elt = resolveTarget(elt)
+  /**
+   * @param {any} elt
+   * @return {Element|null}
+   */
+  function asElement(elt) {
+    return elt instanceof Element ? elt : null
+  }
+
+  /**
+   * @param {any} elt
+   * @return {HTMLElement|null}
+   */
+  function asHtmlElement(elt) {
+    return elt instanceof HTMLElement ? elt : null
+  }
+
+  /**
+   * @param {any} value
+   * @return {string|null}
+   */
+  function asString(value) {
+    return typeof value === 'string' ? value : null
+  }
+
+  /**
+   * @param {EventTarget} elt
+   * @return {ParentNode|null}
+   */
+  function asParentNode(elt) {
+    return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+  }
+
+  /**
+   * This method adds a class to the given element.
+   *
+   * @see https://htmx.org/api/#addClass
+   *
+   * @param {Element|string} elt the element to add the class to
+   * @param {string} clazz the class to add
+   * @param {number} [delay] the delay (in milliseconds) before class is added
+   */
+  function addClassToElement(elt, clazz, delay) {
+    elt = asElement(resolveTarget(elt))
+    if (!elt) {
+      return
+    }
     if (delay) {
-      setTimeout(function () {
+      getWindow().setTimeout(function() {
         addClassToElement(elt, clazz)
         elt = null
       }, delay)
@@ -532,10 +1012,22 @@ const htmx = (function () {
     }
   }
 
-  function removeClassFromElement (elt, clazz, delay) {
-    elt = resolveTarget(elt)
+  /**
+   * Removes a class from the given element
+   *
+   * @see https://htmx.org/api/#removeClass
+   *
+   * @param {Node|string} node element to remove the class from
+   * @param {string} clazz the class to remove
+   * @param {number} [delay] the delay (in milliseconds before class is removed)
+   */
+  function removeClassFromElement(node, clazz, delay) {
+    let elt = asElement(resolveTarget(node))
+    if (!elt) {
+      return
+    }
     if (delay) {
-      setTimeout(function () {
+      getWindow().setTimeout(function() {
         removeClassFromElement(elt, clazz)
         elt = null
       }, delay)
@@ -550,22 +1042,47 @@ const htmx = (function () {
     }
   }
 
-  function toggleClassOnElement (elt, clazz) {
+  /**
+   * Toggles the given class on an element
+   *
+   * @see https://htmx.org/api/#toggleClass
+   *
+   * @param {Element|string} elt the element to toggle the class on
+   * @param {string} clazz the class to toggle
+   */
+  function toggleClassOnElement(elt, clazz) {
     elt = resolveTarget(elt)
     elt.classList.toggle(clazz)
   }
 
-  function takeClassForElement (elt, clazz) {
+  /**
+   * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+   *
+   * @see https://htmx.org/api/#takeClass
+   *
+   * @param {Node|string} elt the element that will take the class
+   * @param {string} clazz the class to take
+   */
+  function takeClassForElement(elt, clazz) {
     elt = resolveTarget(elt)
-    forEach(elt.parentElement.children, function (child) {
+    forEach(elt.parentElement.children, function(child) {
       removeClassFromElement(child, clazz)
     })
-    addClassToElement(elt, clazz)
+    addClassToElement(asElement(elt), clazz)
   }
 
-  function closest (elt, selector) {
-    elt = resolveTarget(elt)
-    if (elt.closest) {
+  /**
+   * Finds the closest matching element in the given elements parentage, inclusive of the element
+   *
+   * @see https://htmx.org/api/#closest
+   *
+   * @param {Element|string} elt the element to find the selector from
+   * @param {string} selector the selector to find
+   * @returns {Element|null}
+   */
+  function closest(elt, selector) {
+    elt = asElement(resolveTarget(elt))
+    if (elt && elt.closest) {
       return elt.closest(selector)
     } else {
       // TODO remove when IE goes away
@@ -574,20 +1091,34 @@ const htmx = (function () {
           return elt
         }
       }
-      while (elt = elt && parentElt(elt))
+      while (elt = elt && asElement(parentElt(elt)))
       return null
     }
   }
 
-  function startsWith (str, prefix) {
+  /**
+   * @param {string} str
+   * @param {string} prefix
+   * @returns {boolean}
+   */
+  function startsWith(str, prefix) {
     return str.substring(0, prefix.length) === prefix
   }
 
-  function endsWith (str, suffix) {
+  /**
+   * @param {string} str
+   * @param {string} suffix
+   * @returns {boolean}
+   */
+  function endsWith(str, suffix) {
     return str.substring(str.length - suffix.length) === suffix
   }
 
-  function normalizeSelector (selector) {
+  /**
+   * @param {string} selector
+   * @returns {string}
+   */
+  function normalizeSelector(selector) {
     const trimmedSelector = selector.trim()
     if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
       return trimmedSelector.substring(1, trimmedSelector.length - 2)
@@ -596,17 +1127,24 @@ const htmx = (function () {
     }
   }
 
-  function querySelectorAllExt (elt, selector, global) {
+  /**
+   * @param {Node|Element|Document|string} elt
+   * @param {string} selector
+   * @param {boolean=} global
+   * @returns {(Node|Window)[]}
+   */
+  function querySelectorAllExt(elt, selector, global) {
+    elt = resolveTarget(elt)
     if (selector.indexOf('closest ') === 0) {
-      return [closest(elt, normalizeSelector(selector.substr(8)))]
+      return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
     } else if (selector.indexOf('find ') === 0) {
-      return [find(elt, normalizeSelector(selector.substr(5)))]
+      return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
     } else if (selector === 'next') {
-      return [elt.nextElementSibling]
+      return [asElement(elt).nextElementSibling]
     } else if (selector.indexOf('next ') === 0) {
       return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
     } else if (selector === 'previous') {
-      return [elt.previousElementSibling]
+      return [asElement(elt).previousElementSibling]
     } else if (selector.indexOf('previous ') === 0) {
       return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
     } else if (selector === 'document') {
@@ -620,12 +1158,18 @@ const htmx = (function () {
     } else if (selector.indexOf('global ') === 0) {
       return querySelectorAllExt(elt, selector.slice(7), true)
     } else {
-      return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+      return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
     }
   }
 
-  var scanForwardQuery = function (start, match, global) {
-    const results = getRootNode(start, global).querySelectorAll(match)
+  /**
+   * @param {Node} start
+   * @param {string} match
+   * @param {boolean} global
+   * @returns {Element}
+   */
+  var scanForwardQuery = function(start, match, global) {
+    const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
     for (let i = 0; i < results.length; i++) {
       const elt = results[i]
       if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -634,8 +1178,14 @@ const htmx = (function () {
     }
   }
 
-  var scanBackwardsQuery = function (start, match, global) {
-    const results = getRootNode(start, global).querySelectorAll(match)
+  /**
+   * @param {Node} start
+   * @param {string} match
+   * @param {boolean} global
+   * @returns {Element}
+   */
+  var scanBackwardsQuery = function(start, match, global) {
+    const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
     for (let i = results.length - 1; i >= 0; i--) {
       const elt = results[i]
       if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -644,40 +1194,78 @@ const htmx = (function () {
     }
   }
 
-  function querySelectorExt (eltOrSelector, selector) {
-    if (selector) {
+  /**
+   * @param {Node|string} eltOrSelector
+   * @param {string=} selector
+   * @returns {Node|Window}
+   */
+  function querySelectorExt(eltOrSelector, selector) {
+    if (typeof eltOrSelector !== 'string') {
       return querySelectorAllExt(eltOrSelector, selector)[0]
     } else {
       return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
     }
   }
 
-  function resolveTarget (arg2, context) {
-    if (isType(arg2, 'String')) {
-      return find(context || document, arg2)
+  /**
+   * @template {EventTarget} T
+   * @param {T|string} eltOrSelector
+   * @param {T} [context]
+   * @returns {Element|T|null}
+   */
+  function resolveTarget(eltOrSelector, context) {
+    if (typeof eltOrSelector === 'string') {
+      return find(asParentNode(context) || document, eltOrSelector)
     } else {
-      return arg2
+      return eltOrSelector
     }
   }
 
-  function processEventArgs (arg1, arg2, arg3) {
+  /**
+   * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+   */
+
+  /**
+   * @typedef {Object} EventArgs
+   * @property {EventTarget} target
+   * @property {AnyEventName} event
+   * @property {EventListener} listener
+   */
+
+  /**
+   * @param {EventTarget|AnyEventName} arg1
+   * @param {AnyEventName|EventListener} arg2
+   * @param {EventListener} [arg3]
+   * @returns {EventArgs}
+   */
+  function processEventArgs(arg1, arg2, arg3) {
     if (isFunction(arg2)) {
       return {
         target: getDocument().body,
-        event: arg1,
+        event: asString(arg1),
         listener: arg2
       }
     } else {
       return {
         target: resolveTarget(arg1),
-        event: arg2,
+        event: asString(arg2),
         listener: arg3
       }
     }
   }
 
-  function addEventListenerImpl (arg1, arg2, arg3) {
-    ready(function () {
+  /**
+   * Adds an event listener to an element
+   *
+   * @see https://htmx.org/api/#on
+   *
+   * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+   * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+   * @param {EventListener} [arg3] the listener to add
+   * @returns {EventListener}
+   */
+  function addEventListenerImpl(arg1, arg2, arg3) {
+    ready(function() {
       const eventArgs = processEventArgs(arg1, arg2, arg3)
       eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener)
     })
@@ -685,8 +1273,18 @@ const htmx = (function () {
     return b ? arg2 : arg3
   }
 
-  function removeEventListenerImpl (arg1, arg2, arg3) {
-    ready(function () {
+  /**
+   * Removes an event listener from an element
+   *
+   * @see https://htmx.org/api/#off
+   *
+   * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+   * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+   * @param {EventListener} [arg3] the listener to remove
+   * @returns {EventListener}
+   */
+  function removeEventListenerImpl(arg1, arg2, arg3) {
+    ready(function() {
       const eventArgs = processEventArgs(arg1, arg2, arg3)
       eventArgs.target.removeEventListener(eventArgs.event, eventArgs.listener)
     })
@@ -698,7 +1296,12 @@ const htmx = (function () {
   //= ===================================================================
 
   const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
-  function findAttributeTargets (elt, attrName) {
+  /**
+   * @param {Element} elt
+   * @param {string} attrName
+   * @returns {(Node|Window)[]}
+   */
+  function findAttributeTargets(elt, attrName) {
     const attrTarget = getClosestAttributeValue(elt, attrName)
     if (attrTarget) {
       if (attrTarget === 'this') {
@@ -715,13 +1318,22 @@ const htmx = (function () {
     }
   }
 
-  function findThisElement (elt, attribute) {
-    return getClosestMatch(elt, function (elt) {
-      return getAttributeValue(elt, attribute) != null
-    })
+  /**
+   * @param {Element} elt
+   * @param {string} attribute
+   * @returns {Element|null}
+   */
+  function findThisElement(elt, attribute) {
+    return asElement(getClosestMatch(elt, function(elt) {
+      return getAttributeValue(asElement(elt), attribute) != null
+    }))
   }
 
-  function getTarget (elt) {
+  /**
+   * @param {Element} elt
+   * @returns {Node|Window|null}
+   */
+  function getTarget(elt) {
     const targetStr = getClosestAttributeValue(elt, 'hx-target')
     if (targetStr) {
       if (targetStr === 'this') {
@@ -739,7 +1351,11 @@ const htmx = (function () {
     }
   }
 
-  function shouldSettleAttribute (name) {
+  /**
+   * @param {string} name
+   * @returns {boolean}
+   */
+  function shouldSettleAttribute(name) {
     const attributesToSettle = htmx.config.attributesToSettle
     for (let i = 0; i < attributesToSettle.length; i++) {
       if (name === attributesToSettle[i]) {
@@ -749,20 +1365,29 @@ const htmx = (function () {
     return false
   }
 
-  function cloneAttributes (mergeTo, mergeFrom) {
-    forEach(mergeTo.attributes, function (attr) {
+  /**
+   * @param {Element} mergeTo
+   * @param {Element} mergeFrom
+   */
+  function cloneAttributes(mergeTo, mergeFrom) {
+    forEach(mergeTo.attributes, function(attr) {
       if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
         mergeTo.removeAttribute(attr.name)
       }
     })
-    forEach(mergeFrom.attributes, function (attr) {
+    forEach(mergeFrom.attributes, function(attr) {
       if (shouldSettleAttribute(attr.name)) {
         mergeTo.setAttribute(attr.name, attr.value)
       }
     })
   }
 
-  function isInlineSwap (swapStyle, target) {
+  /**
+   * @param {HtmxSwapStyle} swapStyle
+   * @param {Element} target
+   * @returns {boolean}
+   */
+  function isInlineSwap(swapStyle, target) {
     const extensions = getExtensions(target)
     for (let i = 0; i < extensions.length; i++) {
       const extension = extensions[i]
@@ -778,14 +1403,14 @@ const htmx = (function () {
   }
 
   /**
-   *
    * @param {string} oobValue
-   * @param {HTMLElement} oobElement
-   * @param {*} settleInfo
+   * @param {Element} oobElement
+   * @param {HtmxSettleInfo} settleInfo
    * @returns
    */
-  function oobSwap (oobValue, oobElement, settleInfo) {
+  function oobSwap(oobValue, oobElement, settleInfo) {
     let selector = '#' + getRawAttribute(oobElement, 'id')
+    /** @type HtmxSwapStyle */
     let swapStyle = 'outerHTML'
     if (oobValue === 'true') {
       // do nothing
@@ -800,13 +1425,13 @@ const htmx = (function () {
     if (targets) {
       forEach(
         targets,
-        function (target) {
+        function(target) {
           let fragment
           const oobElementClone = oobElement.cloneNode(true)
           fragment = getDocument().createDocumentFragment()
           fragment.appendChild(oobElementClone)
           if (!isInlineSwap(swapStyle, target)) {
-            fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+            fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
           }
 
           const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -814,9 +1439,9 @@ const htmx = (function () {
 
           target = beforeSwapDetails.target // allow re-targeting
           if (beforeSwapDetails.shouldSwap) {
-            swap(swapStyle, target, target, fragment, settleInfo)
+            swapWithStyle(swapStyle, target, target, fragment, settleInfo)
           }
-          forEach(settleInfo.elts, function (elt) {
+          forEach(settleInfo.elts, function(elt) {
             triggerEvent(elt, 'htmx:oobAfterSwap', beforeSwapDetails)
           })
         }
@@ -829,33 +1454,11 @@ const htmx = (function () {
     return oobValue
   }
 
-  function handleOutOfBandSwaps (elt, fragment, settleInfo) {
-    const oobSelects = getClosestAttributeValue(elt, 'hx-select-oob')
-    if (oobSelects) {
-      const oobSelectValues = oobSelects.split(',')
-      for (let i = 0; i < oobSelectValues.length; i++) {
-        const oobSelectValue = oobSelectValues[i].split(':', 2)
-        let id = oobSelectValue[0].trim()
-        if (id.indexOf('#') === 0) {
-          id = id.substring(1)
-        }
-        const oobValue = oobSelectValue[1] || 'true'
-        const oobElement = fragment.querySelector('#' + id)
-        if (oobElement) {
-          oobSwap(oobValue, oobElement, settleInfo)
-        }
-      }
-    }
-    forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function (oobElement) {
-      const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
-      if (oobValue != null) {
-        oobSwap(oobValue, oobElement, settleInfo)
-      }
-    })
-  }
-
-  function handlePreservedElements (fragment) {
-    forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function (preservedElt) {
+  /**
+   * @param {DocumentFragment} fragment
+   */
+  function handlePreservedElements(fragment) {
+    forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
       const id = getAttributeValue(preservedElt, 'id')
       const oldElt = getDocument().getElementById(id)
       if (oldElt != null) {
@@ -864,17 +1467,23 @@ const htmx = (function () {
     })
   }
 
-  function handleAttributes (parentNode, fragment, settleInfo) {
-    forEach(fragment.querySelectorAll('[id]'), function (newNode) {
+  /**
+   * @param {Node} parentNode
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function handleAttributes(parentNode, fragment, settleInfo) {
+    forEach(fragment.querySelectorAll('[id]'), function(newNode) {
       const id = getRawAttribute(newNode, 'id')
       if (id && id.length > 0) {
         const normalizedId = id.replace("'", "\\'")
         const normalizedTag = newNode.tagName.replace(':', '\\:')
-        const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
-        if (oldNode && oldNode !== parentNode) {
+        const parentElt = asParentNode(parentNode)
+        const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+        if (oldNode && oldNode !== parentElt) {
           const newAttributes = newNode.cloneNode()
           cloneAttributes(newNode, oldNode)
-          settleInfo.tasks.push(function () {
+          settleInfo.tasks.push(function() {
             cloneAttributes(newNode, newAttributes)
           })
         }
@@ -882,29 +1491,41 @@ const htmx = (function () {
     })
   }
 
-  function makeAjaxLoadTask (child) {
-    return function () {
+  /**
+   * @param {Node} child
+   * @returns {HtmxSettleTask}
+   */
+  function makeAjaxLoadTask(child) {
+    return function() {
       removeClassFromElement(child, htmx.config.addedClass)
-      processNode(child)
-      processScripts(child)
-      processFocus(child)
+      processNode(asElement(child))
+      processFocus(asParentNode(child))
       triggerEvent(child, 'htmx:load')
     }
   }
 
-  function processFocus (child) {
+  /**
+   * @param {ParentNode} child
+   */
+  function processFocus(child) {
     const autofocus = '[autofocus]'
-    const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+    const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
     if (autoFocusedElt != null) {
       autoFocusedElt.focus()
     }
   }
 
-  function insertNodesBefore (parentNode, insertBefore, fragment, settleInfo) {
+  /**
+   * @param {Node} parentNode
+   * @param {Node} insertBefore
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
     handleAttributes(parentNode, fragment, settleInfo)
     while (fragment.childNodes.length > 0) {
       const child = fragment.firstChild
-      addClassToElement(child, htmx.config.addedClass)
+      addClassToElement(asElement(child), htmx.config.addedClass)
       parentNode.insertBefore(child, insertBefore)
       if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
         settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -912,9 +1533,14 @@ const htmx = (function () {
     }
   }
 
-  // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
-  // derived from Java's string hashcode implementation
-  function stringHash (string, hash) {
+  /**
+   * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+   * derived from Java's string hashcode implementation
+   * @param {string} string
+   * @param {number} hash
+   * @returns {number}
+   */
+  function stringHash(string, hash) {
     let char = 0
     while (char < string.length) {
       hash = (hash << 5) - hash + string.charCodeAt(char++) | 0 // bitwise or ensures we have a 32-bit int
@@ -922,7 +1548,11 @@ const htmx = (function () {
     return hash
   }
 
-  function attributeHash (elt) {
+  /**
+   * @param {Element} elt
+   * @returns {number}
+   */
+  function attributeHash(elt) {
     let hash = 0
     // IE fix
     if (elt.attributes) {
@@ -937,87 +1567,135 @@ const htmx = (function () {
     return hash
   }
 
-  function deInitOnHandlers (elt) {
+  /**
+   * @param {EventTarget} elt
+   */
+  function deInitOnHandlers(elt) {
     const internalData = getInternalData(elt)
     if (internalData.onHandlers) {
       for (let i = 0; i < internalData.onHandlers.length; i++) {
         const handlerInfo = internalData.onHandlers[i]
-        elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+        removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
       }
       delete internalData.onHandlers
     }
   }
 
-  function deInitNode (element) {
+  /**
+   * @param {Node} element
+   */
+  function deInitNode(element) {
     const internalData = getInternalData(element)
     if (internalData.timeout) {
       clearTimeout(internalData.timeout)
     }
     if (internalData.listenerInfos) {
-      forEach(internalData.listenerInfos, function (info) {
+      forEach(internalData.listenerInfos, function(info) {
         if (info.on) {
-          info.on.removeEventListener(info.trigger, info.listener)
+          removeEventListenerImpl(info.on, info.trigger, info.listener)
         }
       })
     }
     deInitOnHandlers(element)
-    forEach(Object.keys(internalData), function (key) { delete internalData[key] })
+    forEach(Object.keys(internalData), function(key) { delete internalData[key] })
   }
 
-  function cleanUpElement (element) {
+  /**
+   * @param {Node} element
+   */
+  function cleanUpElement(element) {
     triggerEvent(element, 'htmx:beforeCleanupElement')
     deInitNode(element)
+    // @ts-ignore IE11 code
+    // noinspection JSUnresolvedReference
     if (element.children) { // IE
-      forEach(element.children, function (child) { cleanUpElement(child) })
+      // @ts-ignore
+      forEach(element.children, function(child) { cleanUpElement(child) })
     }
   }
 
-  function swapOuterHTML (target, fragment, settleInfo) {
-    if (target.tagName === 'BODY') {
-      return swapInnerHTML(target, fragment, settleInfo)
+  /**
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapOuterHTML(target, fragment, settleInfo) {
+    /** @type {Node} */
+    let newElt
+    const eltBeforeNewContent = target.previousSibling
+    insertNodesBefore(parentElt(target), target, fragment, settleInfo)
+    if (eltBeforeNewContent == null) {
+      newElt = parentElt(target).firstChild
     } else {
-      // @type {HTMLElement}
-      let newElt
-      const eltBeforeNewContent = target.previousSibling
-      insertNodesBefore(parentElt(target), target, fragment, settleInfo)
-      if (eltBeforeNewContent == null) {
-        newElt = parentElt(target).firstChild
-      } else {
-        newElt = eltBeforeNewContent.nextSibling
-      }
-      settleInfo.elts = settleInfo.elts.filter(function (e) { return e != target })
-      while (newElt && newElt !== target) {
-        if (newElt.nodeType === Node.ELEMENT_NODE) {
-          settleInfo.elts.push(newElt)
-        }
+      newElt = eltBeforeNewContent.nextSibling
+    }
+    settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
+    while (newElt && newElt !== target) {
+      if (newElt instanceof Element) {
+        settleInfo.elts.push(newElt)
         newElt = newElt.nextElementSibling
+      } else {
+        newElt = null
       }
-      cleanUpElement(target)
-      parentElt(target).removeChild(target)
+    }
+    cleanUpElement(target)
+    if (target instanceof Element) {
+      target.remove()
+    } else {
+      target.parentNode.removeChild(target)
     }
   }
 
-  function swapAfterBegin (target, fragment, settleInfo) {
+  /**
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapAfterBegin(target, fragment, settleInfo) {
     return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
   }
 
-  function swapBeforeBegin (target, fragment, settleInfo) {
+  /**
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapBeforeBegin(target, fragment, settleInfo) {
     return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
   }
 
-  function swapBeforeEnd (target, fragment, settleInfo) {
+  /**
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapBeforeEnd(target, fragment, settleInfo) {
     return insertNodesBefore(target, null, fragment, settleInfo)
   }
 
-  function swapAfterEnd (target, fragment, settleInfo) {
+  /**
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapAfterEnd(target, fragment, settleInfo) {
     return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
   }
-  function swapDelete (target, fragment, settleInfo) {
+
+  /**
+   * @param {Node} target
+   */
+  function swapDelete(target) {
     cleanUpElement(target)
     return parentElt(target).removeChild(target)
   }
 
-  function swapInnerHTML (target, fragment, settleInfo) {
+  /**
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapInnerHTML(target, fragment, settleInfo) {
     const firstChild = target.firstChild
     insertNodesBefore(target, firstChild, fragment, settleInfo)
     if (firstChild) {
@@ -1030,19 +1708,14 @@ const htmx = (function () {
     }
   }
 
-  function maybeSelectFromResponse (elt, fragment, selectOverride) {
-    const selector = selectOverride || getClosestAttributeValue(elt, 'hx-select')
-    if (selector) {
-      const newFragment = getDocument().createDocumentFragment()
-      forEach(fragment.querySelectorAll(selector), function (node) {
-        newFragment.appendChild(node)
-      })
-      fragment = newFragment
-    }
-    return fragment
-  }
-
-  function swap (swapStyle, elt, target, fragment, settleInfo) {
+  /**
+   * @param {HtmxSwapStyle} swapStyle
+   * @param {Element} elt
+   * @param {Node} target
+   * @param {ParentNode} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
     switch (swapStyle) {
       case 'none':
         return
@@ -1062,7 +1735,7 @@ const htmx = (function () {
         swapAfterEnd(target, fragment, settleInfo)
         return
       case 'delete':
-        swapDelete(target, fragment, settleInfo)
+        swapDelete(target)
         return
       default:
         var extensions = getExtensions(elt)
@@ -1089,33 +1762,181 @@ const htmx = (function () {
         if (swapStyle === 'innerHTML') {
           swapInnerHTML(target, fragment, settleInfo)
         } else {
-          swap(htmx.config.defaultSwapStyle, elt, target, fragment, settleInfo)
+          swapWithStyle(htmx.config.defaultSwapStyle, elt, target, fragment, settleInfo)
         }
     }
   }
 
-  function findTitle (content) {
-    if (content.indexOf('<title') > -1) {
-      const contentWithSvgsRemoved = content.replace(SVG_TAGS_REGEX, '')
-      const result = contentWithSvgsRemoved.match(TITLE_TAG_REGEX)
-      if (result) {
-        return result[2]
+  /**
+   * @param {DocumentFragment} fragment
+   * @param {HtmxSettleInfo} settleInfo
+   */
+  function findAndSwapOobElements(fragment, settleInfo) {
+    forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
+      if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+        const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+        if (oobValue != null) {
+          oobSwap(oobValue, oobElement, settleInfo)
+        }
+      } else {
+        oobElement.removeAttribute('hx-swap-oob')
+        oobElement.removeAttribute('data-hx-swap-oob')
+      }
+    })
+  }
+
+  /**
+   * Implements complete swapping pipeline, including: focus and selection preservation,
+   * title updates, scroll, OOB swapping, normal swapping and settling
+   * @param {string|Element} target
+   * @param {string} content
+   * @param {HtmxSwapSpecification} swapSpec
+   * @param {SwapOptions} [swapOptions]
+   */
+  function swap(target, content, swapSpec, swapOptions) {
+    if (!swapOptions) {
+      swapOptions = {}
+    }
+
+    target = resolveTarget(target)
+
+    // preserve focus and selection
+    const activeElt = document.activeElement
+    let selectionInfo = {}
+    try {
+      selectionInfo = {
+        elt: activeElt,
+        // @ts-ignore
+        start: activeElt ? activeElt.selectionStart : null,
+        // @ts-ignore
+        end: activeElt ? activeElt.selectionEnd : null
       }
+    } catch (e) {
+      // safari issue - see https://github.com/microsoft/playwright/issues/5894
     }
-  }
+    const settleInfo = makeSettleInfo(target)
 
-  function selectAndSwap (swapStyle, target, elt, responseText, settleInfo, selectOverride) {
-    settleInfo.title = findTitle(responseText)
-    let fragment = makeFragment(responseText)
-    if (fragment) {
-      handleOutOfBandSwaps(elt, fragment, settleInfo)
-      fragment = maybeSelectFromResponse(elt, fragment, selectOverride)
+    // For text content swaps, don't parse the response as HTML, just insert it
+    if (swapSpec.swapStyle === 'textContent') {
+      target.textContent = content
+    // Otherwise, make the fragment and process it
+    } else {
+      let fragment = makeFragment(content)
+
+      settleInfo.title = fragment.title
+
+      // select-oob swaps
+      if (swapOptions.selectOOB) {
+        const oobSelectValues = swapOptions.selectOOB.split(',')
+        for (let i = 0; i < oobSelectValues.length; i++) {
+          const oobSelectValue = oobSelectValues[i].split(':', 2)
+          let id = oobSelectValue[0].trim()
+          if (id.indexOf('#') === 0) {
+            id = id.substring(1)
+          }
+          const oobValue = oobSelectValue[1] || 'true'
+          const oobElement = fragment.querySelector('#' + id)
+          if (oobElement) {
+            oobSwap(oobValue, oobElement, settleInfo)
+          }
+        }
+      }
+      // 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
+          template.remove()
+        }
+      })
+
+      // normal swap
+      if (swapOptions.select) {
+        const newFragment = getDocument().createDocumentFragment()
+        forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+          newFragment.appendChild(node)
+        })
+        fragment = newFragment
+      }
       handlePreservedElements(fragment)
-      return swap(swapStyle, elt, target, fragment, settleInfo)
+      swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
+    }
+
+    // apply saved focus and selection information to swapped content
+    if (selectionInfo.elt &&
+      !bodyContains(selectionInfo.elt) &&
+      getRawAttribute(selectionInfo.elt, 'id')) {
+      const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
+      const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
+      if (newActiveElt) {
+        // @ts-ignore
+        if (selectionInfo.start && newActiveElt.setSelectionRange) {
+          try {
+            // @ts-ignore
+            newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end)
+          } catch (e) {
+            // the setSelectionRange method is present on fields that don't support it, so just let this fail
+          }
+        }
+        newActiveElt.focus(focusOptions)
+      }
+    }
+
+    target.classList.remove(htmx.config.swappingClass)
+    forEach(settleInfo.elts, function(elt) {
+      if (elt.classList) {
+        elt.classList.add(htmx.config.settlingClass)
+      }
+      triggerEvent(elt, 'htmx:afterSwap', swapOptions.eventInfo)
+    })
+    if (swapOptions.afterSwapCallback) {
+      swapOptions.afterSwapCallback()
+    }
+
+    // merge in new title after swap but before settle
+    if (!swapSpec.ignoreTitle) {
+      handleTitle(settleInfo.title)
+    }
+
+    // settle
+    const doSettle = function() {
+      forEach(settleInfo.tasks, function(task) {
+        task.call()
+      })
+      forEach(settleInfo.elts, function(elt) {
+        if (elt.classList) {
+          elt.classList.remove(htmx.config.settlingClass)
+        }
+        triggerEvent(elt, 'htmx:afterSettle', swapOptions.eventInfo)
+      })
+
+      if (swapOptions.anchor) {
+        const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
+        if (anchorTarget) {
+          anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
+        }
+      }
+
+      updateScrollState(settleInfo.elts, swapSpec)
+      if (swapOptions.afterSettleCallback) {
+        swapOptions.afterSettleCallback()
+      }
+    }
+
+    if (swapSpec.settleDelay > 0) {
+      getWindow().setTimeout(doSettle, swapSpec.settleDelay)
+    } else {
+      doSettle()
     }
   }
 
-  function handleTrigger (xhr, header, elt) {
+  /**
+   * @param {XMLHttpRequest} xhr
+   * @param {string} header
+   * @param {EventTarget} elt
+   */
+  function handleTriggerHeader(xhr, header, elt) {
     const triggerBody = xhr.getResponseHeader(header)
     if (triggerBody.indexOf('{') === 0) {
       const triggers = parseJSON(triggerBody)
@@ -1144,7 +1965,13 @@ const htmx = (function () {
   const NOT_WHITESPACE = /[^\s]/
   const COMBINED_SELECTOR_START = /[{(]/
   const COMBINED_SELECTOR_END = /[})]/
-  function tokenizeString (str) {
+
+  /**
+   * @param {string} str
+   * @returns {string[]}
+   */
+  function tokenizeString(str) {
+    /** @type string[] */
     const tokens = []
     let position = 0
     while (position < str.length) {
@@ -1174,7 +2001,13 @@ const htmx = (function () {
     return tokens
   }
 
-  function isPossibleRelativeReference (token, last, paramName) {
+  /**
+   * @param {string} token
+   * @param {string|null} last
+   * @param {string} paramName
+   * @returns {boolean}
+   */
+  function isPossibleRelativeReference(token, last, paramName) {
     return SYMBOL_START.exec(token.charAt(0)) &&
       token !== 'true' &&
       token !== 'false' &&
@@ -1183,7 +2016,13 @@ const htmx = (function () {
       last !== '.'
   }
 
-  function maybeGenerateConditional (elt, tokens, paramName) {
+  /**
+   * @param {EventTarget|string} elt
+   * @param {string[]} tokens
+   * @param {string} paramName
+   * @returns {ConditionalFunction|null}
+   */
+  function maybeGenerateConditional(elt, tokens, paramName) {
     if (tokens[0] === '[') {
       tokens.shift()
       let bracketCount = 1
@@ -1191,6 +2030,7 @@ const htmx = (function () {
       let last = null
       while (tokens.length > 0) {
         const token = tokens[0]
+        // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
         if (token === ']') {
           bracketCount--
           if (bracketCount === 0) {
@@ -1200,10 +2040,10 @@ const htmx = (function () {
             tokens.shift()
             conditionalSource += ')})'
             try {
-              const conditionFunction = maybeEval(elt, function () {
+              const conditionFunction = maybeEval(elt, function() {
                 return Function(conditionalSource)()
               },
-              function () { return true })
+              function() { return true })
               conditionFunction.source = conditionalSource
               return conditionFunction
             } catch (e) {
@@ -1224,7 +2064,12 @@ const htmx = (function () {
     }
   }
 
-  function consumeUntil (tokens, match) {
+  /**
+   * @param {string[]} tokens
+   * @param {RegExp} match
+   * @returns {string}
+   */
+  function consumeUntil(tokens, match) {
     let result = ''
     while (tokens.length > 0 && !match.test(tokens[0])) {
       result += tokens.shift()
@@ -1232,7 +2077,11 @@ const htmx = (function () {
     return result
   }
 
-  function consumeCSSSelector (tokens) {
+  /**
+   * @param {string[]} tokens
+   * @returns {string}
+   */
+  function consumeCSSSelector(tokens) {
     let result
     if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
       tokens.shift()
@@ -1247,12 +2096,13 @@ const htmx = (function () {
   const INPUT_SELECTOR = 'input, textarea, select'
 
   /**
-   * @param {HTMLElement} elt
+   * @param {Element} elt
    * @param {string} explicitTrigger
-   * @param {cache} cache for trigger specs
-   * @returns {import("./htmx").HtmxTriggerSpecification[]}
+   * @param {Object} cache for trigger specs
+   * @returns {HtmxTriggerSpecification[]}
    */
-  function parseAndCacheTrigger (elt, explicitTrigger, cache) {
+  function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+    /** @type HtmxTriggerSpecification[] */
     const triggerSpecs = []
     const tokens = tokenizeString(explicitTrigger)
     do {
@@ -1261,6 +2111,7 @@ const htmx = (function () {
       const trigger = consumeUntil(tokens, /[,\[\s]/)
       if (trigger !== '') {
         if (trigger === 'every') {
+          /** @type HtmxTriggerSpecification */
           const every = { trigger: 'every' }
           consumeUntil(tokens, NOT_WHITESPACE)
           every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1271,6 +2122,7 @@ const htmx = (function () {
           }
           triggerSpecs.push(every)
         } else {
+          /** @type HtmxTriggerSpecification */
           const triggerSpec = { trigger }
           var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
           if (eventFilter) {
@@ -1338,10 +2190,10 @@ const htmx = (function () {
   }
 
   /**
-   * @param {HTMLElement} elt
-   * @returns {import("./htmx").HtmxTriggerSpecification[]}
+   * @param {Element} elt
+   * @returns {HtmxTriggerSpecification[]}
    */
-  function getTriggerSpecs (elt) {
+  function getTriggerSpecs(elt) {
     const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
     let triggerSpecs = []
     if (explicitTrigger) {
@@ -1362,13 +2214,21 @@ const htmx = (function () {
     }
   }
 
-  function cancelPolling (elt) {
+  /**
+   * @param {Element} elt
+   */
+  function cancelPolling(elt) {
     getInternalData(elt).cancelled = true
   }
 
-  function processPolling (elt, handler, spec) {
+  /**
+   * @param {Element} elt
+   * @param {TriggerHandler} handler
+   * @param {HtmxTriggerSpecification} spec
+   */
+  function processPolling(elt, handler, spec) {
     const nodeData = getInternalData(elt)
-    nodeData.timeout = setTimeout(function () {
+    nodeData.timeout = getWindow().setTimeout(function() {
       if (bodyContains(elt) && nodeData.cancelled !== true) {
         if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
           triggerSpec: spec,
@@ -1381,14 +2241,23 @@ const htmx = (function () {
     }, spec.pollInterval)
   }
 
-  function isLocalLink (elt) {
+  /**
+   * @param {HTMLAnchorElement} elt
+   * @returns {boolean}
+   */
+  function isLocalLink(elt) {
     return location.hostname === elt.hostname &&
       getRawAttribute(elt, 'href') &&
       getRawAttribute(elt, 'href').indexOf('#') !== 0
   }
 
-  function boostElement (elt, nodeData, triggerSpecs) {
-    if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+  /**
+   * @param {Element} elt
+   * @param {HtmxNodeInternalData} nodeData
+   * @param {HtmxTriggerSpecification[]} triggerSpecs
+   */
+  function boostElement(elt, nodeData, triggerSpecs) {
+    if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
       nodeData.boosted = true
       let verb, path
       if (elt.tagName === 'A') {
@@ -1401,8 +2270,9 @@ const htmx = (function () {
         }
         path = getRawAttribute(elt, 'action')
       }
-      triggerSpecs.forEach(function (triggerSpec) {
-        addEventListener(elt, function (elt, evt) {
+      triggerSpecs.forEach(function(triggerSpec) {
+        addEventListener(elt, function(node, evt) {
+          const elt = asElement(node)
           if (closest(elt, htmx.config.disableSelector)) {
             cleanUpElement(elt)
             return
@@ -1414,12 +2284,15 @@ const htmx = (function () {
   }
 
   /**
-   *
    * @param {Event} evt
-   * @param {HTMLElement} elt
-   * @returns
+   * @param {Node} node
+   * @returns {boolean}
    */
-  function shouldCancel (evt, elt) {
+  function shouldCancel(evt, node) {
+    const elt = asElement(node)
+    if (!elt) {
+      return false
+    }
     if (evt.type === 'submit' || evt.type === 'click') {
       if (elt.tagName === 'FORM') {
         return true
@@ -1427,7 +2300,7 @@ const htmx = (function () {
       if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
         return true
       }
-      if (elt.tagName === 'A' && elt.href &&
+      if (elt instanceof HTMLAnchorElement && elt.href &&
         (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
         return true
       }
@@ -1435,25 +2308,47 @@ const htmx = (function () {
     return false
   }
 
-  function ignoreBoostedAnchorCtrlClick (elt, evt) {
-    return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+  /**
+   * @param {Node} elt
+   * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+   * @returns {boolean}
+   */
+  function ignoreBoostedAnchorCtrlClick(elt, evt) {
+    return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+      // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+      (evt.ctrlKey || evt.metaKey)
   }
 
-  function maybeFilterEvent (triggerSpec, elt, evt) {
+  /**
+   * @param {HtmxTriggerSpecification} triggerSpec
+   * @param {Node} elt
+   * @param {Event} evt
+   * @returns {boolean}
+   */
+  function maybeFilterEvent(triggerSpec, elt, evt) {
     const eventFilter = triggerSpec.eventFilter
     if (eventFilter) {
       try {
         return eventFilter.call(elt, evt) !== true
       } catch (e) {
-        triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+        const source = eventFilter.source
+        triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
         return true
       }
     }
     return false
   }
 
-  function addEventListener (elt, handler, nodeData, triggerSpec, explicitCancel) {
+  /**
+   * @param {Node} elt
+   * @param {TriggerHandler} handler
+   * @param {HtmxNodeInternalData} nodeData
+   * @param {HtmxTriggerSpecification} triggerSpec
+   * @param {boolean} [explicitCancel]
+   */
+  function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
     const elementData = getInternalData(elt)
+    /** @type {(Node|Window)[]} */
     let eltsToListenOn
     if (triggerSpec.from) {
       eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1462,13 +2357,15 @@ const htmx = (function () {
     }
     // store the initial values of the elements, so we can tell if they change
     if (triggerSpec.changed) {
-      eltsToListenOn.forEach(function (eltToListenOn) {
+      eltsToListenOn.forEach(function(eltToListenOn) {
         const eltToListenOnData = getInternalData(eltToListenOn)
+        // @ts-ignore value will be undefined for non-input elements, which is fine
         eltToListenOnData.lastValue = eltToListenOn.value
       })
     }
-    forEach(eltsToListenOn, function (eltToListenOn) {
-      const eventListener = function (evt) {
+    forEach(eltsToListenOn, function(eltToListenOn) {
+      /** @type EventListener */
+      const eventListener = function(evt) {
         if (!bodyContains(elt)) {
           eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
           return
@@ -1493,7 +2390,7 @@ const htmx = (function () {
             evt.stopPropagation()
           }
           if (triggerSpec.target && evt.target) {
-            if (!matches(evt.target, triggerSpec.target)) {
+            if (!matches(asElement(evt.target), triggerSpec.target)) {
               return
             }
           }
@@ -1506,10 +2403,12 @@ const htmx = (function () {
           }
           if (triggerSpec.changed) {
             const eltToListenOnData = getInternalData(eltToListenOn)
-            if (eltToListenOnData.lastValue === eltToListenOn.value) {
+            // @ts-ignore value will be undefined for non-input elements, which is fine
+            const value = eltToListenOn.value
+            if (eltToListenOnData.lastValue === value) {
               return
             }
-            eltToListenOnData.lastValue = eltToListenOn.value
+            eltToListenOnData.lastValue = value
           }
           if (elementData.delayed) {
             clearTimeout(elementData.delayed)
@@ -1521,12 +2420,12 @@ const htmx = (function () {
           if (triggerSpec.throttle > 0) {
             if (!elementData.throttle) {
               handler(elt, evt)
-              elementData.throttle = setTimeout(function () {
+              elementData.throttle = getWindow().setTimeout(function() {
                 elementData.throttle = null
               }, triggerSpec.throttle)
             }
           } else if (triggerSpec.delay > 0) {
-            elementData.delayed = setTimeout(function () { handler(elt, evt) }, triggerSpec.delay)
+            elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
           } else {
             triggerEvent(elt, 'htmx:trigger')
             handler(elt, evt)
@@ -1547,16 +2446,16 @@ const htmx = (function () {
 
   let windowIsScrolling = false // used by initScrollHandler
   let scrollHandler = null
-  function initScrollHandler () {
+  function initScrollHandler() {
     if (!scrollHandler) {
-      scrollHandler = function () {
+      scrollHandler = function() {
         windowIsScrolling = true
       }
       window.addEventListener('scroll', scrollHandler)
-      setInterval(function () {
+      setInterval(function() {
         if (windowIsScrolling) {
           windowIsScrolling = false
-          forEach(getDocument().querySelectorAll("[hx-trigger='revealed'],[data-hx-trigger='revealed']"), function (elt) {
+          forEach(getDocument().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"), function(elt) {
             maybeReveal(elt)
           })
         }
@@ -1564,7 +2463,10 @@ const htmx = (function () {
     }
   }
 
-  function maybeReveal (elt) {
+  /**
+   * @param {Element} elt
+   */
+  function maybeReveal(elt) {
     if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
       elt.setAttribute('data-hx-revealed', 'true')
       const nodeData = getInternalData(elt)
@@ -1572,37 +2474,50 @@ const htmx = (function () {
         triggerEvent(elt, 'revealed')
       } else {
         // if the node isn't initialized, wait for it before triggering the request
-        elt.addEventListener('htmx:afterProcessNode', function (evt) { triggerEvent(elt, 'revealed') }, { once: true })
+        elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
       }
     }
   }
 
   //= ===================================================================
 
-  function loadImmediately (elt, handler, nodeData, delay) {
-    const load = function () {
+  /**
+   * @param {Element} elt
+   * @param {TriggerHandler} handler
+   * @param {HtmxNodeInternalData} nodeData
+   * @param {number} delay
+   */
+  function loadImmediately(elt, handler, nodeData, delay) {
+    const load = function() {
       if (!nodeData.loaded) {
         nodeData.loaded = true
         handler(elt)
       }
     }
     if (delay > 0) {
-      setTimeout(load, delay)
+      getWindow().setTimeout(load, delay)
     } else {
       load()
     }
   }
 
-  function processVerbs (elt, nodeData, triggerSpecs) {
+  /**
+   * @param {Element} elt
+   * @param {HtmxNodeInternalData} nodeData
+   * @param {HtmxTriggerSpecification[]} triggerSpecs
+   * @returns {boolean}
+   */
+  function processVerbs(elt, nodeData, triggerSpecs) {
     let explicitAction = false
-    forEach(VERBS, function (verb) {
+    forEach(VERBS, function(verb) {
       if (hasAttribute(elt, 'hx-' + verb)) {
         const path = getAttributeValue(elt, 'hx-' + verb)
         explicitAction = true
         nodeData.path = path
         nodeData.verb = verb
-        triggerSpecs.forEach(function (triggerSpec) {
-          addTriggerHandler(elt, triggerSpec, nodeData, function (elt, evt) {
+        triggerSpecs.forEach(function(triggerSpec) {
+          addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+            const elt = asElement(node)
             if (closest(elt, htmx.config.disableSelector)) {
               cleanUpElement(elt)
               return
@@ -1615,11 +2530,23 @@ const htmx = (function () {
     return explicitAction
   }
 
-  function addTriggerHandler (elt, triggerSpec, nodeData, handler) {
+  /**
+   * @callback TriggerHandler
+   * @param {Node} elt
+   * @param {Event} [evt]
+   */
+
+  /**
+   * @param {Node} elt
+   * @param {HtmxTriggerSpecification} triggerSpec
+   * @param {HtmxNodeInternalData} nodeData
+   * @param {TriggerHandler} handler
+   */
+  function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
     if (triggerSpec.trigger === 'revealed') {
       initScrollHandler()
       addEventListener(elt, handler, nodeData, triggerSpec)
-      maybeReveal(elt)
+      maybeReveal(asElement(elt))
     } else if (triggerSpec.trigger === 'intersect') {
       const observerOptions = {}
       if (triggerSpec.root) {
@@ -1628,7 +2555,7 @@ const htmx = (function () {
       if (triggerSpec.threshold) {
         observerOptions.threshold = parseFloat(triggerSpec.threshold)
       }
-      const observer = new IntersectionObserver(function (entries) {
+      const observer = new IntersectionObserver(function(entries) {
         for (let i = 0; i < entries.length; i++) {
           const entry = entries[i]
           if (entry.isIntersecting) {
@@ -1637,56 +2564,29 @@ const htmx = (function () {
           }
         }
       }, observerOptions)
-      observer.observe(elt)
-      addEventListener(elt, handler, nodeData, triggerSpec)
+      observer.observe(asElement(elt))
+      addEventListener(asElement(elt), handler, nodeData, triggerSpec)
     } else if (triggerSpec.trigger === 'load') {
       if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
-        loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+        loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
       }
     } else if (triggerSpec.pollInterval > 0) {
       nodeData.polling = true
-      processPolling(elt, handler, triggerSpec)
+      processPolling(asElement(elt), handler, triggerSpec)
     } else {
       addEventListener(elt, handler, nodeData, triggerSpec)
     }
   }
 
-  function evalScript (script) {
-    if (htmx.config.allowScriptTags && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')) {
-      const newScript = getDocument().createElement('script')
-      forEach(script.attributes, function (attr) {
-        newScript.setAttribute(attr.name, attr.value)
-      })
-      newScript.textContent = script.textContent
-      newScript.async = false
-      if (htmx.config.inlineScriptNonce) {
-        newScript.nonce = htmx.config.inlineScriptNonce
-      }
-      const parent = script.parentElement
-
-      try {
-        parent.insertBefore(newScript, script)
-      } catch (e) {
-        logError(e)
-      } finally {
-        // remove old script element, but only if it is still in DOM
-        if (script.parentElement) {
-          script.parentElement.removeChild(script)
-        }
-      }
-    }
-  }
-
-  function processScripts (elt) {
-    if (matches(elt, 'script')) {
-      evalScript(elt)
+  /**
+   * @param {Node} node
+   * @returns {boolean}
+   */
+  function shouldProcessHxOn(node) {
+    const elt = asElement(node)
+    if (!elt) {
+      return false
     }
-    forEach(findAll(elt, 'script'), function (script) {
-      evalScript(script)
-    })
-  }
-
-  function shouldProcessHxOn (elt) {
     const attributes = elt.attributes
     for (let j = 0; j < attributes.length; j++) {
       const attrName = attributes[j].name
@@ -1698,23 +2598,32 @@ const htmx = (function () {
     return false
   }
 
-  function findHxOnWildcardElements (elt) {
+  /**
+   * @param {Node} elt
+   * @returns {Element[]}
+   */
+  function findHxOnWildcardElements(elt) {
     let node = null
+    /** @type {Element[]} */
     const elements = []
 
     if (!(elt instanceof ShadowRoot)) {
       if (shouldProcessHxOn(elt)) {
-        elements.push(elt)
+        elements.push(asElement(elt))
       }
 
       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(node)
+      while (node = iter.iterateNext()) elements.push(asElement(node))
     }
     return elements
   }
 
-  function findElementsToProcess (elt) {
+  /**
+   * @param {Element} elt
+   * @returns {NodeListOf<Element>|[]}
+   */
+  function findElementsToProcess(elt) {
     if (elt.querySelectorAll) {
       const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
       const results = elt.querySelectorAll(VERB_SELECTOR + boostedSelector + ", form, [type='submit']," +
@@ -1725,23 +2634,35 @@ const htmx = (function () {
     }
   }
 
-  // Handle submit buttons/inputs that have the form attribute set
-  // see https://developer.mozilla.org/docs/Web/HTML/Element/button
-  function maybeSetLastButtonClicked (evt) {
-    const elt = closest(evt.target, "button, input[type='submit']")
+  /**
+   * Handle submit buttons/inputs that have the form attribute set
+   * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+   * @param {Event} evt
+   */
+  function maybeSetLastButtonClicked(evt) {
+    const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
     const internalData = getRelatedFormData(evt)
     if (internalData) {
       internalData.lastButtonClicked = elt
     }
-  };
-  function maybeUnsetLastButtonClicked (evt) {
+  }
+
+  /**
+   * @param {Event} evt
+   */
+  function maybeUnsetLastButtonClicked(evt) {
     const internalData = getRelatedFormData(evt)
     if (internalData) {
       internalData.lastButtonClicked = null
     }
   }
-  function getRelatedFormData (evt) {
-    const elt = closest(evt.target, "button, input[type='submit']")
+
+  /**
+   * @param {Event} evt
+   * @returns {HtmxNodeInternalData|undefined}
+   */
+  function getRelatedFormData(evt) {
+    const elt = closest(asElement(evt.target), "button, input[type='submit']")
     if (!elt) {
       return
     }
@@ -1751,7 +2672,11 @@ const htmx = (function () {
     }
     return getInternalData(form)
   }
-  function initButtonTracking (elt) {
+
+  /**
+   * @param {EventTarget} elt
+   */
+  function initButtonTracking(elt) {
     // need to handle both click and focus in:
     //   focusin - in case someone tabs in to a button and hits the space bar
     //   click - on OSX buttons do not focus on click see https://bugs.webkit.org/show_bug.cgi?id=13724
@@ -1760,28 +2685,20 @@ const htmx = (function () {
     elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
   }
 
-  function countCurlies (line) {
-    const tokens = tokenizeString(line)
-    let netCurlies = 0
-    for (let i = 0; i < tokens.length; i++) {
-      const token = tokens[i]
-      if (token === '{') {
-        netCurlies++
-      } else if (token === '}') {
-        netCurlies--
-      }
-    }
-    return netCurlies
-  }
-
-  function addHxOnEventHandler (elt, eventName, code) {
+  /**
+   * @param {EventTarget} elt
+   * @param {string} eventName
+   * @param {string} code
+   */
+  function addHxOnEventHandler(elt, eventName, code) {
     const nodeData = getInternalData(elt)
     if (!Array.isArray(nodeData.onHandlers)) {
       nodeData.onHandlers = []
     }
     let func
-    const listener = function (e) {
-      return maybeEval(elt, function () {
+    /** @type EventListener */
+    const listener = function(e) {
+      maybeEval(elt, function() {
         if (!func) {
           func = new Function('event', code)
         }
@@ -1792,7 +2709,10 @@ const htmx = (function () {
     nodeData.onHandlers.push({ event: eventName, listener })
   }
 
-  function processHxOnWildcard (elt) {
+  /**
+   * @param {Element} elt
+   */
+  function processHxOnWildcard(elt) {
     // wipe any previous on handlers so that this function takes precedence
     deInitOnHandlers(elt)
 
@@ -1819,7 +2739,10 @@ const htmx = (function () {
     }
   }
 
-  function initNode (elt) {
+  /**
+   * @param {Element|HTMLInputElement} elt
+   */
+  function initNode(elt) {
     if (closest(elt, htmx.config.disableSelector)) {
       cleanUpElement(elt)
       return
@@ -1833,7 +2756,9 @@ const htmx = (function () {
 
       triggerEvent(elt, 'htmx:beforeProcessNode')
 
+      // @ts-ignore value will be undefined for non-input elements, which is fine
       if (elt.value) {
+        // @ts-ignore
         nodeData.lastValue = elt.value
       }
 
@@ -1844,9 +2769,9 @@ const htmx = (function () {
         if (getClosestAttributeValue(elt, 'hx-boost') === 'true') {
           boostElement(elt, nodeData, triggerSpecs)
         } else if (hasAttribute(elt, 'hx-trigger')) {
-          triggerSpecs.forEach(function (triggerSpec) {
+          triggerSpecs.forEach(function(triggerSpec) {
             // For "naked" triggers, don't do anything at all
-            addTriggerHandler(elt, triggerSpec, nodeData, function () {
+            addTriggerHandler(elt, triggerSpec, nodeData, function() {
             })
           })
         }
@@ -1862,14 +2787,21 @@ const htmx = (function () {
     }
   }
 
-  function processNode (elt) {
+  /**
+   * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+   *
+   * @see https://htmx.org/api/#process
+   *
+   * @param {Element|string} elt element to process
+   */
+  function processNode(elt) {
     elt = resolveTarget(elt)
     if (closest(elt, htmx.config.disableSelector)) {
       cleanUpElement(elt)
       return
     }
     initNode(elt)
-    forEach(findElementsToProcess(elt), function (child) { initNode(child) })
+    forEach(findElementsToProcess(elt), function(child) { initNode(child) })
     forEach(findHxOnWildcardElements(elt), processHxOnWildcard)
   }
 
@@ -1877,11 +2809,20 @@ const htmx = (function () {
   // Event/Log Support
   //= ===================================================================
 
-  function kebabEventName (str) {
+  /**
+   * @param {string} str
+   * @returns {string}
+   */
+  function kebabEventName(str) {
     return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
   }
 
-  function makeEvent (eventName, detail) {
+  /**
+   * @param {string} eventName
+   * @param {any} detail
+   * @returns {CustomEvent}
+   */
+  function makeEvent(eventName, detail) {
     let evt
     if (window.CustomEvent && typeof window.CustomEvent === 'function') {
       // TODO: `composed: true` here is a hack to make global event handlers work with events in shadow DOM
@@ -1894,11 +2835,20 @@ const htmx = (function () {
     return evt
   }
 
-  function triggerErrorEvent (elt, eventName, detail) {
+  /**
+   * @param {EventTarget|string} elt
+   * @param {string} eventName
+   * @param {any=} detail
+   */
+  function triggerErrorEvent(elt, eventName, detail) {
     triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
   }
 
-  function ignoreEventForLogging (eventName) {
+  /**
+   * @param {string} eventName
+   * @returns {boolean}
+   */
+  function ignoreEventForLogging(eventName) {
     return eventName === 'htmx:afterProcessNode'
   }
 
@@ -1907,12 +2857,12 @@ const htmx = (function () {
    * executes the provided function using each of the active extensions.  It should
    * be called internally at every extendable execution point in htmx.
    *
-   * @param {HTMLElement} elt
-   * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+   * @param {Element} elt
+   * @param {(extension:HtmxExtension) => void} toDo
    * @returns void
    */
-  function withExtensions (elt, toDo) {
-    forEach(getExtensions(elt), function (extension) {
+  function withExtensions(elt, toDo) {
+    forEach(getExtensions(elt), function(extension) {
       try {
         toDo(extension)
       } catch (e) {
@@ -1921,7 +2871,7 @@ const htmx = (function () {
     })
   }
 
-  function logError (msg) {
+  function logError(msg) {
     if (console.error) {
       console.error(msg)
     } else if (console.log) {
@@ -1929,7 +2879,17 @@ const htmx = (function () {
     }
   }
 
-  function triggerEvent (elt, eventName, detail) {
+  /**
+   * Triggers a given event on an element
+   *
+   * @see https://htmx.org/api/#trigger
+   *
+   * @param {EventTarget|string} elt the element to trigger the event on
+   * @param {string} eventName the name of the event to trigger
+   * @param {any=} detail details for the event
+   * @returns {boolean}
+   */
+  function triggerEvent(elt, eventName, detail) {
     elt = resolveTarget(elt)
     if (detail == null) {
       detail = {}
@@ -1949,7 +2909,7 @@ const htmx = (function () {
       const kebabedEvent = makeEvent(kebabName, event.detail)
       eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
     }
-    withExtensions(elt, function (extension) {
+    withExtensions(asElement(elt), function(extension) {
       eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
     })
     return eventResult
@@ -1960,16 +2920,28 @@ const htmx = (function () {
   //= ===================================================================
   let currentPathForHistory = location.pathname + location.search
 
-  function getHistoryElement () {
+  /**
+   * @returns {Element}
+   */
+  function getHistoryElement() {
     const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
     return historyElt || getDocument().body
   }
 
-  function saveToHistoryCache (url, content, title, scroll) {
+  /**
+   * @param {string} url
+   * @param {Element} rootElt
+   */
+  function saveToHistoryCache(url, rootElt) {
     if (!canAccessLocalStorage()) {
       return
     }
 
+    // get state to save
+    const innerHTML = cleanInnerHtmlForHistory(rootElt)
+    const title = getDocument().title
+    const scroll = window.scrollY
+
     if (htmx.config.historyCacheSize <= 0) {
       // make sure that an eventually already existing cache is purged
       localStorage.removeItem('htmx-history-cache')
@@ -1985,12 +2957,18 @@ const htmx = (function () {
         break
       }
     }
-    const newHistoryItem = { url, content, title, scroll }
+
+    /** @type HtmxHistoryItem */
+    const newHistoryItem = { url, content: innerHTML, title, scroll }
+
     triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
+
     historyCache.push(newHistoryItem)
     while (historyCache.length > htmx.config.historyCacheSize) {
       historyCache.shift()
     }
+
+    // keep trying to save the cache until it succeeds or is empty
     while (historyCache.length > 0) {
       try {
         localStorage.setItem('htmx-history-cache', JSON.stringify(historyCache))
@@ -2002,7 +2980,19 @@ const htmx = (function () {
     }
   }
 
-  function getCachedHistory (url) {
+  /**
+   * @typedef {Object} HtmxHistoryItem
+   * @property {string} url
+   * @property {string} content
+   * @property {string} title
+   * @property {number} scroll
+   */
+
+  /**
+   * @param {string} url
+   * @returns {HtmxHistoryItem|null}
+   */
+  function getCachedHistory(url) {
     if (!canAccessLocalStorage()) {
       return null
     }
@@ -2018,16 +3008,20 @@ const htmx = (function () {
     return null
   }
 
-  function cleanInnerHtmlForHistory (elt) {
+  /**
+   * @param {Element} elt
+   * @returns {string}
+   */
+  function cleanInnerHtmlForHistory(elt) {
     const className = htmx.config.requestClass
-    const clone = elt.cloneNode(true)
-    forEach(findAll(clone, '.' + className), function (child) {
+    const clone = /** @type Element */ (elt.cloneNode(true))
+    forEach(findAll(clone, '.' + className), function(child) {
       removeClassFromElement(child, className)
     })
     return clone.innerHTML
   }
 
-  function saveCurrentPageToHistory () {
+  function saveCurrentPageToHistory() {
     const elt = getHistoryElement()
     const path = currentPathForHistory || location.pathname + location.search
 
@@ -2045,13 +3039,16 @@ const htmx = (function () {
     }
     if (!disableHistoryCache) {
       triggerEvent(getDocument().body, 'htmx:beforeHistorySave', { path, historyElt: elt })
-      saveToHistoryCache(path, cleanInnerHtmlForHistory(elt), getDocument().title, window.scrollY)
+      saveToHistoryCache(path, elt)
     }
 
     if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
   }
 
-  function pushUrlIntoHistory (path) {
+  /**
+   * @param {string} path
+   */
+  function pushUrlIntoHistory(path) {
   // remove the cache buster parameter, if any
     if (htmx.config.getCacheBusterParam) {
       path = path.replace(/org\.htmx\.cache-buster=[^&]*&?/, '')
@@ -2065,18 +3062,27 @@ const htmx = (function () {
     currentPathForHistory = path
   }
 
-  function replaceUrlInHistory (path) {
+  /**
+   * @param {string} path
+   */
+  function replaceUrlInHistory(path) {
     if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
     currentPathForHistory = path
   }
 
-  function settleImmediately (tasks) {
-    forEach(tasks, function (task) {
-      task.call()
+  /**
+   * @param {HtmxSettleTask[]} tasks
+   */
+  function settleImmediately(tasks) {
+    forEach(tasks, function(task) {
+      task.call(undefined)
     })
   }
 
-  function loadHistoryFromServer (path) {
+  /**
+   * @param {string} path
+   */
+  function loadHistoryFromServer(path) {
     const request = new XMLHttpRequest()
     const details = { path, xhr: request }
     triggerEvent(getDocument().body, 'htmx:historyCacheMiss', details)
@@ -2084,25 +3090,17 @@ const htmx = (function () {
     request.setRequestHeader('HX-Request', 'true')
     request.setRequestHeader('HX-History-Restore-Request', 'true')
     request.setRequestHeader('HX-Current-URL', getDocument().location.href)
-    request.onload = function () {
+    request.onload = function() {
       if (this.status >= 200 && this.status < 400) {
         triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
-        let fragment = makeFragment(this.response)
-        // @ts-ignore
-        fragment = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
+        const fragment = makeFragment(this.response)
+        /** @type ParentNode */
+        const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
         const historyElement = getHistoryElement()
         const settleInfo = makeSettleInfo(historyElement)
-        const title = findTitle(this.response)
-        if (title) {
-          const titleElt = find('title')
-          if (titleElt) {
-            titleElt.innerHTML = title
-          } else {
-            window.document.title = title
-          }
-        }
-        // @ts-ignore
-        swapInnerHTML(historyElement, fragment, settleInfo)
+        handleTitle(fragment.title)
+
+        swapInnerHTML(historyElement, content, settleInfo)
         settleImmediately(settleInfo.tasks)
         currentPathForHistory = path
         triggerEvent(getDocument().body, 'htmx:historyRestore', { path, cacheMiss: true, serverResponse: this.response })
@@ -2113,7 +3111,10 @@ const htmx = (function () {
     request.send()
   }
 
-  function restoreHistory (path) {
+  /**
+   * @param {string} [path]
+   */
+  function restoreHistory(path) {
     saveCurrentPageToHistory()
     path = path || location.pathname + location.search
     const cached = getCachedHistory(path)
@@ -2121,17 +3122,18 @@ const htmx = (function () {
       const fragment = makeFragment(cached.content)
       const historyElement = getHistoryElement()
       const settleInfo = makeSettleInfo(historyElement)
+      handleTitle(fragment.title)
       swapInnerHTML(historyElement, fragment, settleInfo)
       settleImmediately(settleInfo.tasks)
-      document.title = cached.title
-      setTimeout(function () {
+      getWindow().setTimeout(function() {
         window.scrollTo(0, cached.scroll)
       }, 0) // next 'tick', so browser has time to render layout
       currentPathForHistory = path
       triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
     } else {
       if (htmx.config.refreshOnHistoryMiss) {
-      // @ts-ignore: optional parameter in reload() function throws error
+        // @ts-ignore: optional parameter in reload() function throws error
+        // noinspection JSUnresolvedReference
         window.location.reload(true)
       } else {
         loadHistoryFromServer(path)
@@ -2139,12 +3141,16 @@ const htmx = (function () {
     }
   }
 
-  function addRequestIndicatorClasses (elt) {
-    let indicators = findAttributeTargets(elt, 'hx-indicator')
+  /**
+   * @param {Element} elt
+   * @returns {Element[]}
+   */
+  function addRequestIndicatorClasses(elt) {
+    let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
     if (indicators == null) {
       indicators = [elt]
     }
-    forEach(indicators, function (ic) {
+    forEach(indicators, function(ic) {
       const internalData = getInternalData(ic)
       internalData.requestCount = (internalData.requestCount || 0) + 1
       ic.classList.add.call(ic.classList, htmx.config.requestClass)
@@ -2152,12 +3158,16 @@ const htmx = (function () {
     return indicators
   }
 
-  function disableElements (elt) {
-    let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+  /**
+   * @param {Element} elt
+   * @returns {Element[]}
+   */
+  function disableElements(elt) {
+    let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
     if (disabledElts == null) {
       disabledElts = []
     }
-    forEach(disabledElts, function (disabledElement) {
+    forEach(disabledElts, function(disabledElement) {
       const internalData = getInternalData(disabledElement)
       internalData.requestCount = (internalData.requestCount || 0) + 1
       disabledElement.setAttribute('disabled', '')
@@ -2165,15 +3175,19 @@ const htmx = (function () {
     return disabledElts
   }
 
-  function removeRequestIndicators (indicators, disabled) {
-    forEach(indicators, function (ic) {
+  /**
+   * @param {Element[]} indicators
+   * @param {Element[]} disabled
+   */
+  function removeRequestIndicators(indicators, disabled) {
+    forEach(indicators, function(ic) {
       const internalData = getInternalData(ic)
       internalData.requestCount = (internalData.requestCount || 0) - 1
       if (internalData.requestCount === 0) {
         ic.classList.remove.call(ic.classList, htmx.config.requestClass)
       }
     })
-    forEach(disabled, function (disabledElement) {
+    forEach(disabled, function(disabledElement) {
       const internalData = getInternalData(disabledElement)
       internalData.requestCount = (internalData.requestCount || 0) - 1
       if (internalData.requestCount === 0) {
@@ -2186,7 +3200,12 @@ const htmx = (function () {
   // Input Value Processing
   //= ===================================================================
 
-  function haveSeenNode (processed, elt) {
+  /**
+   * @param {Element[]} processed
+   * @param {Element} elt
+   * @returns {boolean}
+   */
+  function haveSeenNode(processed, elt) {
     for (let i = 0; i < processed.length; i++) {
       const node = processed[i]
       if (node.isSameNode(elt)) {
@@ -2196,8 +3215,14 @@ const htmx = (function () {
     return false
   }
 
-  function shouldInclude (elt) {
-    if (elt.name === '' || elt.name == null || elt.disabled) {
+  /**
+   * @param {Element} element
+   * @return {boolean}
+   */
+  function shouldInclude(element) {
+    // Cast to trick tsc, undefined values will work fine here
+    const elt = /** @type {HTMLInputElement} */ (element)
+    if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
       return false
     }
     // ignore "submitter" types (see jQuery src/serialize.js)
@@ -2210,30 +3235,43 @@ const htmx = (function () {
     return true
   }
 
-  function addValueToValues (name, value, values) {
-  // This is a little ugly because both the current value of the named value in the form
-  // and the new value could be arrays, so we have to handle all four cases :/
+  /** @param {string} name
+   * @param {string|Array|FormDataEntryValue} value
+   * @param {FormData} formData */
+  function addValueToFormData(name, value, formData) {
     if (name != null && value != null) {
-      const current = values[name]
-      if (current === undefined) {
-        values[name] = value
-      } else if (Array.isArray(current)) {
-        if (Array.isArray(value)) {
-          values[name] = current.concat(value)
-        } else {
-          current.push(value)
-        }
+      if (Array.isArray(value)) {
+        value.forEach(function(v) { formData.append(name, v) })
       } else {
-        if (Array.isArray(value)) {
-          values[name] = [current].concat(value)
-        } else {
-          values[name] = [current, value]
-        }
+        formData.append(name, value)
+      }
+    }
+  }
+
+  /** @param {string} name
+   * @param {string|Array} value
+   * @param {FormData} formData */
+  function removeValueFromFormData(name, value, formData) {
+    if (name != null && value != null) {
+      let values = formData.getAll(name)
+      if (Array.isArray(value)) {
+        values = values.filter(v => value.indexOf(v) < 0)
+      } else {
+        values = values.filter(v => v !== value)
       }
+      formData.delete(name)
+      forEach(values, v => formData.append(name, v))
     }
   }
 
-  function processInputValue (processed, values, errors, elt, validate) {
+  /**
+   * @param {Element[]} processed
+   * @param {FormData} formData
+   * @param {HtmxElementValidationError[]} errors
+   * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
+   * @param {boolean} validate
+   */
+  function processInputValue(processed, formData, errors, elt, validate) {
     if (elt == null || haveSeenNode(processed, elt)) {
       return
     } else {
@@ -2241,28 +3279,47 @@ const htmx = (function () {
     }
     if (shouldInclude(elt)) {
       const name = getRawAttribute(elt, 'name')
+      // @ts-ignore value will be undefined for non-input elements, which is fine
       let value = elt.value
-      if (elt.multiple && elt.tagName === 'SELECT') {
-        value = toArray(elt.querySelectorAll('option:checked')).map(function (e) { return e.value })
+      if (elt instanceof HTMLSelectElement && elt.multiple) {
+        value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
       }
       // include file inputs
-      if (elt.files) {
+      if (elt instanceof HTMLInputElement && elt.files) {
         value = toArray(elt.files)
       }
-      addValueToValues(name, value, values)
+      addValueToFormData(name, value, formData)
       if (validate) {
         validateElement(elt, errors)
       }
     }
-    if (matches(elt, 'form')) {
-      const inputs = elt.elements
-      forEach(inputs, function (input) {
-        processInputValue(processed, values, errors, input, validate)
+    if (elt instanceof HTMLFormElement) {
+      forEach(elt.elements, function(input) {
+        if (processed.indexOf(input) >= 0) {
+          // The input has already been processed and added to the values, but the FormData that will be
+          //  constructed right after on the form, will include it once again. So remove that input's value
+          //  now to avoid duplicates
+          removeValueFromFormData(input.name, input.value, formData)
+        } else {
+          processed.push(input)
+        }
+        if (validate) {
+          validateElement(input, errors)
+        }
+      })
+      new FormData(elt).forEach(function(value, name) {
+        addValueToFormData(name, value, formData)
       })
     }
   }
 
-  function validateElement (element, errors) {
+  /**
+   *
+   * @param {Element} elt
+   * @param {HtmxElementValidationError[]} errors
+   */
+  function validateElement(elt, errors) {
+    const element = /** @type {HTMLElement & ElementInternals} */ (elt)
     if (element.willValidate) {
       triggerEvent(element, 'htmx:validation:validate')
       if (!element.checkValidity()) {
@@ -2273,13 +3330,32 @@ const htmx = (function () {
   }
 
   /**
- * @param {HTMLElement} elt
- * @param {string} verb
+   * Override values in the one FormData with those from another.
+   * @param {FormData} receiver the formdata that will be mutated
+   * @param {FormData} donor the formdata that will provide the overriding values
+   * @returns {FormData} the {@linkcode receiver}
+   */
+  function overrideFormData(receiver, donor) {
+    for (const key of donor.keys()) {
+      receiver.delete(key)
+      donor.getAll(key).forEach(function(value) {
+        receiver.append(key, value)
+      })
+    }
+    return receiver
+  }
+
+  /**
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
+ * @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
  */
-  function getInputValues (elt, verb) {
+  function getInputValues(elt, verb) {
+    /** @type Element[] */
     const processed = []
-    let values = {}
-    const formValues = {}
+    const formData = new FormData()
+    const priorityFormData = new FormData()
+    /** @type HtmxElementValidationError[] */
     const errors = []
     const internalData = getInternalData(elt)
     if (internalData.lastButtonClicked && !bodyContains(internalData.lastButtonClicked)) {
@@ -2288,46 +3364,52 @@ const htmx = (function () {
 
     // only validate when form is directly submitted and novalidate or formnovalidate are not set
     // or if the element has an explicit hx-validate="true" on it
-    let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+    let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
     if (internalData.lastButtonClicked) {
       validate = validate && internalData.lastButtonClicked.formNoValidate !== true
     }
 
     // for a non-GET include the closest form
     if (verb !== 'get') {
-      processInputValue(processed, formValues, errors, closest(elt, 'form'), validate)
+      processInputValue(processed, priorityFormData, errors, closest(elt, 'form'), validate)
     }
 
     // include the element itself
-    processInputValue(processed, values, errors, elt, validate)
+    processInputValue(processed, formData, errors, elt, validate)
 
     // if a button or submit was clicked last, include its value
     if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
     (elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
-      const button = internalData.lastButtonClicked || elt
+      const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
       const name = getRawAttribute(button, 'name')
-      addValueToValues(name, button.value, formValues)
+      addValueToFormData(name, button.value, priorityFormData)
     }
 
     // include any explicit includes
     const includes = findAttributeTargets(elt, 'hx-include')
-    forEach(includes, function (node) {
-      processInputValue(processed, values, errors, node, validate)
+    forEach(includes, function(node) {
+      processInputValue(processed, formData, errors, asElement(node), validate)
       // if a non-form is included, include any input values within it
       if (!matches(node, 'form')) {
-        forEach(node.querySelectorAll(INPUT_SELECTOR), function (descendant) {
-          processInputValue(processed, values, errors, descendant, validate)
+        forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
+          processInputValue(processed, formData, errors, descendant, validate)
         })
       }
     })
 
-    // form values take precedence, overriding the regular values
-    values = mergeObjects(values, formValues)
+    // values from a <form> take precedence, overriding the regular values
+    overrideFormData(formData, priorityFormData)
 
-    return { errors, values }
+    return { errors, formData, values: formDataProxy(formData) }
   }
 
-  function appendParam (returnStr, name, realValue) {
+  /**
+   * @param {string} returnStr
+   * @param {string} name
+   * @param {any} realValue
+   * @returns {string}
+   */
+  function appendParam(returnStr, name, realValue) {
     if (returnStr !== '') {
       returnStr += '&'
     }
@@ -2339,51 +3421,31 @@ const htmx = (function () {
     return returnStr
   }
 
-  function urlEncode (values) {
+  /**
+   * @param {FormData|Object} values
+   * @returns string
+   */
+  function urlEncode(values) {
+    values = formDataFromObject(values)
     let returnStr = ''
-    for (var name in values) {
-      if (values.hasOwnProperty(name)) {
-        const value = values[name]
-        if (Array.isArray(value)) {
-          forEach(value, function (v) {
-            returnStr = appendParam(returnStr, name, v)
-          })
-        } else {
-          returnStr = appendParam(returnStr, name, value)
-        }
-      }
-    }
+    values.forEach(function(value, key) {
+      returnStr = appendParam(returnStr, key, value)
+    })
     return returnStr
   }
 
-  function makeFormData (values) {
-    const formData = new FormData()
-    for (var name in values) {
-      if (values.hasOwnProperty(name)) {
-        const value = values[name]
-        if (Array.isArray(value)) {
-          forEach(value, function (v) {
-            formData.append(name, v)
-          })
-        } else {
-          formData.append(name, value)
-        }
-      }
-    }
-    return formData
-  }
-
   //= ===================================================================
   // Ajax
   //= ===================================================================
 
   /**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
  * @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
  */
-  function getHeaders (elt, target, prompt) {
+  function getHeaders(elt, target, prompt) {
+    /** @type HtmxHeaderSpecification */
     const headers = {
       'HX-Request': 'true',
       'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2405,28 +3467,30 @@ const htmx = (function () {
  * filterValues takes an object containing form input values
  * and returns a new object that only contains keys that are
  * specified by the closest "hx-params" attribute
- * @param {Object} inputValues
- * @param {HTMLElement} elt
- * @returns {Object}
+ * @param {FormData} inputValues
+ * @param {Element} elt
+ * @returns {FormData}
  */
-  function filterValues (inputValues, elt) {
+  function filterValues(inputValues, elt) {
     const paramsValue = getClosestAttributeValue(elt, 'hx-params')
     if (paramsValue) {
       if (paramsValue === 'none') {
-        return {}
+        return new FormData()
       } else if (paramsValue === '*') {
         return inputValues
       } else if (paramsValue.indexOf('not ') === 0) {
-        forEach(paramsValue.substr(4).split(','), function (name) {
+        forEach(paramsValue.substr(4).split(','), function(name) {
           name = name.trim()
-          delete inputValues[name]
+          inputValues.delete(name)
         })
         return inputValues
       } else {
-        const newValues = {}
-        forEach(paramsValue.split(','), function (name) {
+        const newValues = new FormData()
+        forEach(paramsValue.split(','), function(name) {
           name = name.trim()
-          newValues[name] = inputValues[name]
+          if (inputValues.has(name)) {
+            inputValues.getAll(name).forEach(function(value) { newValues.append(name, value) })
+          }
         })
         return newValues
       }
@@ -2435,18 +3499,22 @@ const htmx = (function () {
     }
   }
 
-  function isAnchorLink (elt) {
-    return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+  /**
+   * @param {Element} elt
+   * @return {boolean}
+   */
+  function isAnchorLink(elt) {
+    return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
   }
 
   /**
- *
- * @param {HTMLElement} elt
- * @param {string} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
  */
-  function getSwapSpecification (elt, swapInfoOverride) {
+  function getSwapSpecification(elt, swapInfoOverride) {
     const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
+    /** @type HtmxSwapSpecification */
     const swapSpec = {
       swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
       swapDelay: htmx.config.defaultSwapDelay,
@@ -2473,6 +3541,7 @@ const htmx = (function () {
             var splitSpec = scrollSpec.split(':')
             const scrollVal = splitSpec.pop()
             var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+            // @ts-ignore
             swapSpec.scroll = scrollVal
             swapSpec.scrollTarget = selectorVal
           } else if (value.indexOf('show:') === 0) {
@@ -2496,14 +3565,24 @@ const htmx = (function () {
     return swapSpec
   }
 
-  function usesFormData (elt) {
+  /**
+   * @param {Element} elt
+   * @return {boolean}
+   */
+  function usesFormData(elt) {
     return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
     (matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
   }
 
-  function encodeParamsForBody (xhr, elt, filteredParameters) {
+  /**
+   * @param {XMLHttpRequest} xhr
+   * @param {Element} elt
+   * @param {FormData} filteredParameters
+   * @returns {*|string|null}
+   */
+  function encodeParamsForBody(xhr, elt, filteredParameters) {
     let encodedParameters = null
-    withExtensions(elt, function (extension) {
+    withExtensions(elt, function(extension) {
       if (encodedParameters == null) {
         encodedParameters = extension.encodeParameters(xhr, filteredParameters, elt)
       }
@@ -2512,7 +3591,7 @@ const htmx = (function () {
       return encodedParameters
     } else {
       if (usesFormData(elt)) {
-        return makeFormData(filteredParameters)
+        return formDataFromObject(filteredParameters)
       } else {
         return urlEncode(filteredParameters)
       }
@@ -2522,19 +3601,23 @@ const htmx = (function () {
   /**
  *
  * @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
  */
-  function makeSettleInfo (target) {
+  function makeSettleInfo(target) {
     return { tasks: [], elts: [target] }
   }
 
-  function updateScrollState (content, swapSpec) {
+  /**
+   * @param {Element[]} content
+   * @param {HtmxSwapSpecification} swapSpec
+   */
+  function updateScrollState(content, swapSpec) {
     const first = content[0]
     const last = content[content.length - 1]
     if (swapSpec.scroll) {
       var target = null
       if (swapSpec.scrollTarget) {
-        target = querySelectorExt(first, swapSpec.scrollTarget)
+        target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
       }
       if (swapSpec.scroll === 'top' && (first || target)) {
         target = target || first
@@ -2552,27 +3635,29 @@ const htmx = (function () {
         if (swapSpec.showTarget === 'window') {
           targetStr = 'body'
         }
-        target = querySelectorExt(first, targetStr)
+        target = asElement(querySelectorExt(first, targetStr))
       }
       if (swapSpec.show === 'top' && (first || target)) {
         target = target || first
+        // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
         target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
       }
       if (swapSpec.show === 'bottom' && (last || target)) {
         target = target || last
+        // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
         target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
       }
     }
   }
 
   /**
- * @param {HTMLElement} elt
+ * @param {Element} elt
  * @param {string} attr
  * @param {boolean=} evalAsDefault
  * @param {Object=} values
  * @returns {Object}
  */
-  function getValuesForElement (elt, attr, evalAsDefault, values) {
+  function getValuesForElement(elt, attr, evalAsDefault, values) {
     if (values == null) {
       values = {}
     }
@@ -2598,7 +3683,7 @@ const htmx = (function () {
       }
       let varsValues
       if (evaluateValue) {
-        varsValues = maybeEval(elt, function () { return Function('return (' + str + ')')() }, {})
+        varsValues = maybeEval(elt, function() { return Function('return (' + str + ')')() }, {})
       } else {
         varsValues = parseJSON(str)
       }
@@ -2610,10 +3695,16 @@ const htmx = (function () {
         }
       }
     }
-    return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+    return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
   }
 
-  function maybeEval (elt, toEval, defaultVal) {
+  /**
+   * @param {EventTarget|string} elt
+   * @param {() => any} toEval
+   * @param {any=} defaultVal
+   * @returns {any}
+   */
+  function maybeEval(elt, toEval, defaultVal) {
     if (htmx.config.allowEval) {
       return toEval()
     } else {
@@ -2623,32 +3714,37 @@ const htmx = (function () {
   }
 
   /**
- * @param {HTMLElement} elt
- * @param {*} expressionVars
+ * @param {Element} elt
+ * @param {*?} expressionVars
  * @returns
  */
-  function getHXVarsForElement (elt, expressionVars) {
+  function getHXVarsForElement(elt, expressionVars) {
     return getValuesForElement(elt, 'hx-vars', true, expressionVars)
   }
 
   /**
- * @param {HTMLElement} elt
- * @param {*} expressionVars
+ * @param {Element} elt
+ * @param {*?} expressionVars
  * @returns
  */
-  function getHXValsForElement (elt, expressionVars) {
+  function getHXValsForElement(elt, expressionVars) {
     return getValuesForElement(elt, 'hx-vals', false, expressionVars)
   }
 
   /**
- * @param {HTMLElement} elt
- * @returns {Object}
+ * @param {Element} elt
+ * @returns {FormData}
  */
-  function getExpressionVars (elt) {
-    return mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt))
+  function getExpressionVars(elt) {
+    return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
   }
 
-  function safelySetHeaderValue (xhr, header, headerValue) {
+  /**
+   * @param {XMLHttpRequest} xhr
+   * @param {string} header
+   * @param {string|null} headerValue
+   */
+  function safelySetHeaderValue(xhr, header, headerValue) {
     if (headerValue !== null) {
       try {
         xhr.setRequestHeader(header, headerValue)
@@ -2660,7 +3756,11 @@ const htmx = (function () {
     }
   }
 
-  function getPathFromResponse (xhr) {
+  /**
+   * @param {XMLHttpRequest} xhr
+   * @return {string}
+   */
+  function getPathFromResponse(xhr) {
   // NB: IE11 does not support this stuff
     if (xhr.responseURL && typeof (URL) !== 'undefined') {
       try {
@@ -2672,14 +3772,29 @@ const htmx = (function () {
     }
   }
 
-  function hasHeader (xhr, regexp) {
+  /**
+   * @param {XMLHttpRequest} xhr
+   * @param {RegExp} regexp
+   * @return {boolean}
+   */
+  function hasHeader(xhr, regexp) {
     return regexp.test(xhr.getAllResponseHeaders())
   }
 
-  function ajaxHelper (verb, path, context) {
-    verb = verb.toLowerCase()
+  /**
+   * Issues an htmx-style AJAX request
+   *
+   * @see https://htmx.org/api/#ajax
+   *
+   * @param {HttpVerb} verb
+   * @param {string} path the URL path to make the AJAX
+   * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+   * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+   */
+  function ajaxHelper(verb, path, context) {
+    verb = (/** @type HttpVerb */(verb.toLowerCase()))
     if (context) {
-      if (context instanceof Element || isType(context, 'String')) {
+      if (context instanceof Element || typeof context === 'string') {
         return issueAjaxRequest(verb, path, null, null, {
           targetOverride: resolveTarget(context),
           returnPromise: true
@@ -2703,7 +3818,11 @@ const htmx = (function () {
     }
   }
 
-  function hierarchyForElt (elt) {
+  /**
+   * @param {Element} elt
+   * @return {Element[]}
+   */
+  function hierarchyForElt(elt) {
     const arr = []
     while (elt) {
       arr.push(elt)
@@ -2712,7 +3831,13 @@ const htmx = (function () {
     return arr
   }
 
-  function verifyPath (elt, path, requestConfig) {
+  /**
+   * @param {Element} elt
+   * @param {string} path
+   * @param {HtmxRequestConfig} requestConfig
+   * @return {boolean}
+   */
+  function verifyPath(elt, path, requestConfig) {
     let sameHost
     let url
     if (typeof URL === 'function') {
@@ -2733,12 +3858,146 @@ const htmx = (function () {
     return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
   }
 
-  function issueAjaxRequest (verb, path, elt, event, etc, confirmed) {
+  /**
+   * @param {Object|FormData} obj
+   * @return {FormData}
+   */
+  function formDataFromObject(obj) {
+    if (obj instanceof FormData) return obj
+    const formData = new FormData()
+    for (const key in obj) {
+      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') {
+          formData.append(key, JSON.stringify(obj[key]))
+        } else {
+          formData.append(key, obj[key])
+        }
+      }
+    }
+    return formData
+  }
+
+  /**
+   * @param {FormData} formData
+   * @param {string} name
+   * @param {Array} array
+   * @returns {Array}
+   */
+  function formDataArrayProxy(formData, name, array) {
+    // mutating the array should mutate the underlying form data
+    return new Proxy(array, {
+      get: function(target, key) {
+        if (typeof key === 'number') return target[key]
+        if (key === 'length') return target.length
+        if (key === 'push') {
+          return function(value) {
+            target.push(value)
+            formData.append(name, value)
+          }
+        }
+        if (typeof target[key] === 'function') {
+          return function() {
+            target[key].apply(target, arguments)
+            formData.delete(name)
+            target.forEach(function(v) { formData.append(name, v) })
+          }
+        }
+
+        if (target[key] && target[key].length === 1) {
+          return target[key][0]
+        } else {
+          return target[key]
+        }
+      },
+      set: function(target, index, value) {
+        target[index] = value
+        formData.delete(name)
+        target.forEach(function(v) { formData.append(name, v) })
+        return true
+      }
+    })
+  }
+
+  /**
+   * @param {FormData} formData
+   * @returns {Object}
+   */
+  function formDataProxy(formData) {
+    return new Proxy(formData, {
+      get: function(target, name) {
+        if (typeof name === 'symbol') {
+          // Forward symbol calls to the FormData itself directly
+          return Reflect.get(target, name)
+        }
+        if (name === 'toJSON') {
+          // Support JSON.stringify call on proxy
+          return () => Object.fromEntries(formData)
+        }
+        if (name in target) {
+          // Wrap in function with apply to correctly bind the FormData context, as a direct call would result in an illegal invocation error
+          if (typeof target[name] === 'function') {
+            return function() {
+              return formData[name].apply(formData, arguments)
+            }
+          } else {
+            return target[name]
+          }
+        }
+        const array = formData.getAll(name)
+        // Those 2 undefined & single value returns are for retro-compatibility as we weren't using FormData before
+        if (array.length === 0) {
+          return undefined
+        } else if (array.length === 1) {
+          return array[0]
+        } else {
+          return formDataArrayProxy(target, name, array)
+        }
+      },
+      set: function(target, name, value) {
+        if (typeof name !== 'string') {
+          return false
+        }
+        target.delete(name)
+        if (typeof value.forEach === 'function') {
+          value.forEach(function(v) { target.append(name, v) })
+        } else {
+          target.append(name, value)
+        }
+        return true
+      },
+      deleteProperty: function(target, name) {
+        if (typeof name === 'string') {
+          target.delete(name)
+        }
+        return true
+      },
+      // Support Object.assign call from proxy
+      ownKeys: function(target) {
+        return Reflect.ownKeys(Object.fromEntries(target))
+      },
+      getOwnPropertyDescriptor: function(target, prop) {
+        return Reflect.getOwnPropertyDescriptor(Object.fromEntries(target), prop)
+      }
+    })
+  }
+
+  /**
+   * @param {HttpVerb} verb
+   * @param {string} path
+   * @param {Element} elt
+   * @param {Event} event
+   * @param {HtmxAjaxEtc} [etc]
+   * @param {boolean} [confirmed]
+   * @return {Promise<void>}
+   */
+  function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
     let resolve = null
     let reject = null
     etc = etc != null ? etc : {}
     if (etc.returnPromise && typeof Promise !== 'undefined') {
-      var promise = new Promise(function (_resolve, _reject) {
+      var promise = new Promise(function(_resolve, _reject) {
         resolve = _resolve
         reject = _reject
       })
@@ -2754,7 +4013,7 @@ const htmx = (function () {
       maybeCall(resolve)
       return promise
     }
-    const target = etc.targetOverride || getTarget(elt)
+    const target = etc.targetOverride || asElement(getTarget(elt))
     if (target == null || target == DUMMY_ELT) {
       triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
       maybeCall(reject)
@@ -2774,7 +4033,7 @@ const htmx = (function () {
       if (buttonVerb != null) {
       // ignore buttons with formmethod="dialog"
         if (buttonVerb.toLowerCase() !== 'dialog') {
-          verb = buttonVerb
+          verb = (/** @type HttpVerb */(buttonVerb))
         }
       }
     }
@@ -2782,7 +4041,7 @@ const htmx = (function () {
     const confirmQuestion = getClosestAttributeValue(elt, 'hx-confirm')
     // allow event-based confirmation w/ a callback
     if (confirmed === undefined) {
-      const issueRequest = function (skipConfirmation) {
+      const issueRequest = function(skipConfirmation) {
         return issueAjaxRequest(verb, path, elt, event, etc, !!skipConfirmation)
       }
       const confirmDetails = { target, elt, path, verb, triggeringEvent: event, etc, issueRequest, question: confirmQuestion }
@@ -2802,7 +4061,7 @@ const htmx = (function () {
       if (selector === 'this') {
         syncElt = findThisElement(elt, 'hx-sync')
       } else {
-        syncElt = querySelectorExt(elt, selector)
+        syncElt = asElement(querySelectorExt(elt, selector))
       }
       // default to the drop strategy
       syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -2844,16 +4103,16 @@ const htmx = (function () {
           eltData.queuedRequests = []
         }
         if (queueStrategy === 'first' && eltData.queuedRequests.length === 0) {
-          eltData.queuedRequests.push(function () {
+          eltData.queuedRequests.push(function() {
             issueAjaxRequest(verb, path, elt, event, etc)
           })
         } else if (queueStrategy === 'all') {
-          eltData.queuedRequests.push(function () {
+          eltData.queuedRequests.push(function() {
             issueAjaxRequest(verb, path, elt, event, etc)
           })
         } else if (queueStrategy === 'last') {
           eltData.queuedRequests = [] // dump existing queue
-          eltData.queuedRequests.push(function () {
+          eltData.queuedRequests.push(function() {
             issueAjaxRequest(verb, path, elt, event, etc)
           })
         }
@@ -2865,7 +4124,7 @@ const htmx = (function () {
     const xhr = new XMLHttpRequest()
     eltData.xhr = xhr
     eltData.abortable = abortable
-    const endRequestLock = function () {
+    const endRequestLock = function() {
       eltData.xhr = null
       eltData.abortable = false
       if (eltData.queuedRequests != null &&
@@ -2905,16 +4164,16 @@ const htmx = (function () {
     }
     const results = getInputValues(elt, verb)
     let errors = results.errors
-    let rawParameters = results.values
+    const rawFormData = results.formData
     if (etc.values) {
-      rawParameters = mergeObjects(rawParameters, etc.values)
+      overrideFormData(rawFormData, formDataFromObject(etc.values))
     }
     const expressionVars = getExpressionVars(elt)
-    const allParameters = mergeObjects(rawParameters, expressionVars)
-    let filteredParameters = filterValues(allParameters, elt)
+    const allFormData = overrideFormData(rawFormData, expressionVars)
+    let filteredFormData = filterValues(allFormData, elt)
 
     if (htmx.config.getCacheBusterParam && verb === 'get') {
-      filteredParameters['org.htmx.cache-buster'] = getRawAttribute(target, 'id') || 'true'
+      filteredFormData.set('org.htmx.cache-buster', getRawAttribute(target, 'id') || 'true')
     }
 
     // behavior of anchors w/ empty href is to use the current URL
@@ -2922,17 +4181,26 @@ const htmx = (function () {
       path = getDocument().location.href
     }
 
+    /**
+     * @type {Object}
+     * @property {boolean} [credentials]
+     * @property {number} [timeout]
+     * @property {boolean} [noHeaders]
+     */
     const requestAttrValues = getValuesForElement(elt, 'hx-request')
 
     const eltIsBoosted = getInternalData(elt).boosted
 
     let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
 
+    /** @type HtmxRequestConfig */
     const requestConfig = {
       boosted: eltIsBoosted,
       useUrlParams,
-      parameters: filteredParameters,
-      unfilteredParameters: allParameters,
+      formData: filteredFormData,
+      parameters: formDataProxy(filteredFormData),
+      unfilteredFormData: allFormData,
+      unfilteredParameters: formDataProxy(allFormData),
       headers,
       target,
       verb,
@@ -2953,7 +4221,7 @@ const htmx = (function () {
     path = requestConfig.path
     verb = requestConfig.verb
     headers = requestConfig.headers
-    filteredParameters = requestConfig.parameters
+    filteredFormData = formDataFromObject(requestConfig.parameters)
     errors = requestConfig.errors
     useUrlParams = requestConfig.useUrlParams
 
@@ -2971,14 +4239,14 @@ const htmx = (function () {
     let finalPath = path
     if (useUrlParams) {
       finalPath = pathNoAnchor
-      const values = Object.keys(filteredParameters).length !== 0
-      if (values) {
+      const hasValues = !filteredFormData.keys().next().done
+      if (hasValues) {
         if (finalPath.indexOf('?') < 0) {
           finalPath += '?'
         } else {
           finalPath += '&'
         }
-        finalPath += urlEncode(filteredParameters)
+        finalPath += urlEncode(filteredFormData)
         if (anchor) {
           finalPath += '#' + anchor
         }
@@ -2989,7 +4257,7 @@ const htmx = (function () {
       triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
       maybeCall(reject)
       return promise
-    };
+    }
 
     xhr.open(verb.toUpperCase(), finalPath, true)
     xhr.overrideMimeType('text/html')
@@ -3008,6 +4276,7 @@ const htmx = (function () {
       }
     }
 
+    /** @type {HtmxResponseInfo} */
     const responseInfo = {
       xhr,
       target,
@@ -3018,11 +4287,12 @@ const htmx = (function () {
       pathInfo: {
         requestPath: path,
         finalRequestPath: finalPath,
+        responsePath: null,
         anchor
       }
     }
 
-    xhr.onload = function () {
+    xhr.onload = function() {
       try {
         const hierarchy = hierarchyForElt(elt)
         responseInfo.pathInfo.responsePath = getPathFromResponse(xhr)
@@ -3052,21 +4322,21 @@ const htmx = (function () {
         throw e
       }
     }
-    xhr.onerror = function () {
+    xhr.onerror = function() {
       removeRequestIndicators(indicators, disableElts)
       triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo)
       triggerErrorEvent(elt, 'htmx:sendError', responseInfo)
       maybeCall(reject)
       endRequestLock()
     }
-    xhr.onabort = function () {
+    xhr.onabort = function() {
       removeRequestIndicators(indicators, disableElts)
       triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo)
       triggerErrorEvent(elt, 'htmx:sendAbort', responseInfo)
       maybeCall(reject)
       endRequestLock()
     }
-    xhr.ontimeout = function () {
+    xhr.ontimeout = function() {
       removeRequestIndicators(indicators, disableElts)
       triggerErrorEvent(elt, 'htmx:afterRequest', responseInfo)
       triggerErrorEvent(elt, 'htmx:timeout', responseInfo)
@@ -3081,9 +4351,9 @@ const htmx = (function () {
     var indicators = addRequestIndicatorClasses(elt)
     var disableElts = disableElements(elt)
 
-    forEach(['loadstart', 'loadend', 'progress', 'abort'], function (eventName) {
-      forEach([xhr, xhr.upload], function (target) {
-        target.addEventListener(eventName, function (event) {
+    forEach(['loadstart', 'loadend', 'progress', 'abort'], function(eventName) {
+      forEach([xhr, xhr.upload], function(target) {
+        target.addEventListener(eventName, function(event) {
           triggerEvent(elt, 'htmx:xhr:' + eventName, {
             lengthComputable: event.lengthComputable,
             loaded: event.loaded,
@@ -3093,12 +4363,23 @@ const htmx = (function () {
       })
     })
     triggerEvent(elt, 'htmx:beforeSend', responseInfo)
-    const params = useUrlParams ? null : encodeParamsForBody(xhr, elt, filteredParameters)
+    const params = useUrlParams ? null : encodeParamsForBody(xhr, elt, filteredFormData)
     xhr.send(params)
     return promise
   }
 
-  function determineHistoryUpdates (elt, responseInfo) {
+  /**
+   * @typedef {Object} HtmxHistoryUpdate
+   * @property {string|null} [type]
+   * @property {string|null} [path]
+   */
+
+  /**
+   * @param {Element} elt
+   * @param {HtmxResponseInfo} responseInfo
+   * @return {HtmxHistoryUpdate}
+   */
+  function determineHistoryUpdates(elt, responseInfo) {
     const xhr = responseInfo.xhr
 
     //= ==========================================
@@ -3165,8 +4446,7 @@ const htmx = (function () {
       }
 
       // restore any anchor associated with the request
-      if (responseInfo.pathInfo.anchor &&
-      path.indexOf('#') === -1) {
+      if (responseInfo.pathInfo.anchor && path.indexOf('#') === -1) {
         path = path + '#' + responseInfo.pathInfo.anchor
       }
 
@@ -3179,30 +4459,76 @@ const htmx = (function () {
     }
   }
 
-  function handleAjaxResponse (elt, responseInfo) {
+  /**
+   * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+   * @param {number} status
+   * @return {boolean}
+   */
+  function codeMatches(responseHandlingConfig, status) {
+    var regExp = new RegExp(responseHandlingConfig.code)
+    return regExp.test(status.toString(10))
+  }
+
+  /**
+   * @param {XMLHttpRequest} xhr
+   * @return {HtmxResponseHandlingConfig}
+   */
+  function resolveResponseHandling(xhr) {
+    for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+      /** @type HtmxResponseHandlingConfig */
+      var responseHandlingElement = htmx.config.responseHandling[i]
+      if (codeMatches(responseHandlingElement, xhr.status)) {
+        return responseHandlingElement
+      }
+    }
+    // no matches, return no swap
+    return {
+      swap: false
+    }
+  }
+
+  /**
+   * @param {string} title
+   */
+  function handleTitle(title) {
+    if (title) {
+      const titleElt = find('title')
+      if (titleElt) {
+        titleElt.innerHTML = title
+      } else {
+        window.document.title = title
+      }
+    }
+  }
+
+  /**
+   * @param {Element} elt
+   * @param {HtmxResponseInfo} responseInfo
+   */
+  function handleAjaxResponse(elt, responseInfo) {
     const xhr = responseInfo.xhr
     let target = responseInfo.target
     const etc = responseInfo.etc
-    const requestConfig = responseInfo.requestConfig
-    const select = responseInfo.select
+    const responseInfoSelect = responseInfo.select
 
     if (!triggerEvent(elt, 'htmx:beforeOnLoad', responseInfo)) return
 
     if (hasHeader(xhr, /HX-Trigger:/i)) {
-      handleTrigger(xhr, 'HX-Trigger', elt)
+      handleTriggerHeader(xhr, 'HX-Trigger', elt)
     }
 
     if (hasHeader(xhr, /HX-Location:/i)) {
       saveCurrentPageToHistory()
       let redirectPath = xhr.getResponseHeader('HX-Location')
-      var swapSpec
+      /** @type {HtmxAjaxHelperContext&{path:string}} */
+      var redirectSwapSpec
       if (redirectPath.indexOf('{') === 0) {
-        swapSpec = parseJSON(redirectPath)
+        redirectSwapSpec = parseJSON(redirectPath)
         // what's the best way to throw an error if the user didn't include this
-        redirectPath = swapSpec.path
-        delete swapSpec.path
+        redirectPath = redirectSwapSpec.path
+        delete redirectSwapSpec.path
       }
-      ajaxHelper('GET', redirectPath, swapSpec).then(function () {
+      ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
         pushUrlIntoHistory(redirectPath)
       })
       return
@@ -3225,27 +4551,56 @@ const htmx = (function () {
       if (xhr.getResponseHeader('HX-Retarget') === 'this') {
         responseInfo.target = elt
       } else {
-        responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+        responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
       }
     }
 
     const historyUpdate = determineHistoryUpdates(elt, responseInfo)
 
-    // by default htmx only swaps on 200 return codes and does not swap
-    // on 204 'No Content'
-    // this can be ovverriden by responding to the htmx:beforeSwap event and
-    // overriding the detail.shouldSwap property
-    const shouldSwap = xhr.status >= 200 && xhr.status < 400 && xhr.status !== 204
-    let serverResponse = xhr.response
-    let isError = xhr.status >= 400
-    let ignoreTitle = htmx.config.ignoreTitle
-    const beforeSwapDetails = mergeObjects({ shouldSwap, serverResponse, isError, ignoreTitle }, responseInfo)
+    const responseHandling = resolveResponseHandling(xhr)
+    const shouldSwap = responseHandling.swap
+    let isError = !!responseHandling.error
+    let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
+    let selectOverride = responseHandling.select
+    if (responseHandling.target) {
+      responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
+    }
+    var swapOverride = etc.swapOverride
+    if (swapOverride == null && responseHandling.swapOverride) {
+      swapOverride = responseHandling.swapOverride
+    }
+
+    // response headers override response handling config
+    if (hasHeader(xhr, /HX-Retarget:/i)) {
+      if (xhr.getResponseHeader('HX-Retarget') === 'this') {
+        responseInfo.target = elt
+      } else {
+        responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
+      }
+    }
+    if (hasHeader(xhr, /HX-Reswap:/i)) {
+      swapOverride = xhr.getResponseHeader('HX-Reswap')
+    }
+
+    var serverResponse = xhr.response
+    /** @type HtmxBeforeSwapDetails */
+    var beforeSwapDetails = mergeObjects({
+      shouldSwap,
+      serverResponse,
+      isError,
+      ignoreTitle,
+      selectOverride
+    }, responseInfo)
+
+    if (responseHandling.event && !triggerEvent(target, responseHandling.event, beforeSwapDetails)) return
+
     if (!triggerEvent(target, 'htmx:beforeSwap', beforeSwapDetails)) return
 
     target = beforeSwapDetails.target // allow re-targeting
     serverResponse = beforeSwapDetails.serverResponse // allow updating content
     isError = beforeSwapDetails.isError // allow updating error
     ignoreTitle = beforeSwapDetails.ignoreTitle // allow updating ignoring title
+    selectOverride = beforeSwapDetails.selectOverride // allow updating select override
 
     responseInfo.target = target // Make updated target available to response events
     responseInfo.failed = isError // Make failed property available to response events
@@ -3256,7 +4611,7 @@ const htmx = (function () {
         cancelPolling(elt)
       }
 
-      withExtensions(elt, function (extension) {
+      withExtensions(elt, function(extension) {
         serverResponse = extension.transformResponse(serverResponse, xhr, elt)
       })
 
@@ -3265,14 +4620,13 @@ const htmx = (function () {
         saveCurrentPageToHistory()
       }
 
-      let swapOverride = etc.swapOverride
       if (hasHeader(xhr, /HX-Reswap:/i)) {
         swapOverride = xhr.getResponseHeader('HX-Reswap')
       }
       var swapSpec = getSwapSpecification(elt, swapOverride)
 
-      if (swapSpec.hasOwnProperty('ignoreTitle')) {
-        ignoreTitle = swapSpec.ignoreTitle
+      if (!swapSpec.hasOwnProperty('ignoreTitle')) {
+        swapSpec.ignoreTitle = ignoreTitle
       }
 
       target.classList.add(htmx.config.swappingClass)
@@ -3281,31 +4635,19 @@ const htmx = (function () {
       let settleResolve = null
       let settleReject = null
 
-      let doSwap = function () {
-        try {
-          const activeElt = document.activeElement
-          let selectionInfo = {}
-          try {
-            selectionInfo = {
-              elt: activeElt,
-              // @ts-ignore
-              start: activeElt ? activeElt.selectionStart : null,
-              // @ts-ignore
-              end: activeElt ? activeElt.selectionEnd : null
-            }
-          } catch (e) {
-          // safari issue - see https://github.com/microsoft/playwright/issues/5894
-          }
+      if (responseInfoSelect) {
+        selectOverride = responseInfoSelect
+      }
 
-          let selectOverride
-          if (select) {
-            selectOverride = select
-          }
+      if (hasHeader(xhr, /HX-Reselect:/i)) {
+        selectOverride = xhr.getResponseHeader('HX-Reselect')
+      }
 
-          if (hasHeader(xhr, /HX-Reselect:/i)) {
-            selectOverride = xhr.getResponseHeader('HX-Reselect')
-          }
+      const selectOOB = getClosestAttributeValue(elt, 'hx-select-oob')
+      const select = getClosestAttributeValue(elt, 'hx-select')
 
+      let doSwap = function() {
+        try {
           // if we need to save history, do so, before swapping so that relative resources have the correct base URL
           if (historyUpdate.type) {
             triggerEvent(getDocument().body, 'htmx:beforeHistoryUpdate', mergeObjects({ history: historyUpdate }, responseInfo))
@@ -3318,88 +4660,32 @@ const htmx = (function () {
             }
           }
 
-          const settleInfo = makeSettleInfo(target)
-          selectAndSwap(swapSpec.swapStyle, target, elt, serverResponse, settleInfo, selectOverride)
-
-          if (selectionInfo.elt &&
-          !bodyContains(selectionInfo.elt) &&
-          getRawAttribute(selectionInfo.elt, 'id')) {
-            const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
-            const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
-            if (newActiveElt) {
-            // @ts-ignore
-              if (selectionInfo.start && newActiveElt.setSelectionRange) {
-              // @ts-ignore
-                try {
-                  newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end)
-                } catch (e) {
-                // the setSelectionRange method is present on fields that don't support it, so just let this fail
+          swap(target, serverResponse, swapSpec, {
+            select: selectOverride || select,
+            selectOOB,
+            eventInfo: responseInfo,
+            anchor: responseInfo.pathInfo.anchor,
+            contextElement: elt,
+            afterSwapCallback: function() {
+              if (hasHeader(xhr, /HX-Trigger-After-Swap:/i)) {
+                let finalElt = elt
+                if (!bodyContains(elt)) {
+                  finalElt = getDocument().body
                 }
+                handleTriggerHeader(xhr, 'HX-Trigger-After-Swap', finalElt)
               }
-              newActiveElt.focus(focusOptions)
-            }
-          }
-
-          target.classList.remove(htmx.config.swappingClass)
-          forEach(settleInfo.elts, function (elt) {
-            if (elt.classList) {
-              elt.classList.add(htmx.config.settlingClass)
-            }
-            triggerEvent(elt, 'htmx:afterSwap', responseInfo)
-          })
-
-          if (hasHeader(xhr, /HX-Trigger-After-Swap:/i)) {
-            let finalElt = elt
-            if (!bodyContains(elt)) {
-              finalElt = getDocument().body
-            }
-            handleTrigger(xhr, 'HX-Trigger-After-Swap', finalElt)
-          }
-
-          const doSettle = function () {
-            forEach(settleInfo.tasks, function (task) {
-              task.call()
-            })
-            forEach(settleInfo.elts, function (elt) {
-              if (elt.classList) {
-                elt.classList.remove(htmx.config.settlingClass)
-              }
-              triggerEvent(elt, 'htmx:afterSettle', responseInfo)
-            })
-
-            if (responseInfo.pathInfo.anchor) {
-              const anchorTarget = getDocument().getElementById(responseInfo.pathInfo.anchor)
-              if (anchorTarget) {
-                anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
-              }
-            }
-
-            if (settleInfo.title && !ignoreTitle) {
-              const titleElt = find('title')
-              if (titleElt) {
-                titleElt.innerHTML = settleInfo.title
-              } else {
-                window.document.title = settleInfo.title
-              }
-            }
-
-            updateScrollState(settleInfo.elts, swapSpec)
-
-            if (hasHeader(xhr, /HX-Trigger-After-Settle:/i)) {
-              let finalElt = elt
-              if (!bodyContains(elt)) {
-                finalElt = getDocument().body
+            },
+            afterSettleCallback: function() {
+              if (hasHeader(xhr, /HX-Trigger-After-Settle:/i)) {
+                let finalElt = elt
+                if (!bodyContains(elt)) {
+                  finalElt = getDocument().body
+                }
+                handleTriggerHeader(xhr, 'HX-Trigger-After-Settle', finalElt)
               }
-              handleTrigger(xhr, 'HX-Trigger-After-Settle', finalElt)
+              maybeCall(settleResolve)
             }
-            maybeCall(settleResolve)
-          }
-
-          if (swapSpec.settleDelay > 0) {
-            setTimeout(doSettle, swapSpec.settleDelay)
-          } else {
-            doSettle()
-          }
+          })
         } catch (e) {
           triggerErrorEvent(elt, 'htmx:swapError', responseInfo)
           maybeCall(settleReject)
@@ -3413,16 +4699,19 @@ const htmx = (function () {
       }
 
       if (shouldTransition &&
-      triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
-      typeof Promise !== 'undefined' && document.startViewTransition) {
-        const settlePromise = new Promise(function (_resolve, _reject) {
+              triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
+              typeof Promise !== 'undefined' &&
+              // @ts-ignore experimental feature atm
+              document.startViewTransition) {
+        const settlePromise = new Promise(function(_resolve, _reject) {
           settleResolve = _resolve
           settleReject = _reject
         })
         // wrap the original doSwap() in a call to startViewTransition()
         const innerDoSwap = doSwap
-        doSwap = function () {
-          document.startViewTransition(function () {
+        doSwap = function() {
+          // @ts-ignore experimental feature atm
+          document.startViewTransition(function() {
             innerDoSwap()
             return settlePromise
           })
@@ -3430,7 +4719,7 @@ const htmx = (function () {
       }
 
       if (swapSpec.swapDelay > 0) {
-        setTimeout(doSwap, swapSpec.swapDelay)
+        getWindow().setTimeout(doSwap, swapSpec.swapDelay)
       } else {
         doSwap()
       }
@@ -3444,31 +4733,33 @@ const htmx = (function () {
   // Extensions API
   //= ===================================================================
 
-  /** @type {Object<string, import("./htmx").HtmxExtension>} */
+  /** @type {Object<string, HtmxExtension>} */
   const extensions = {}
 
   /**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
-  function extensionBase () {
+   * extensionBase defines the default functions for all extensions.
+   * @returns {HtmxExtension}
+   */
+  function extensionBase() {
     return {
-      init: function (api) { return null },
-      onEvent: function (name, evt) { return true },
-      transformResponse: function (text, xhr, elt) { return text },
-      isInlineSwap: function (swapStyle) { return false },
-      handleSwap: function (swapStyle, target, fragment, settleInfo) { return false },
-      encodeParameters: function (xhr, parameters, elt) { return null }
+      init: function(api) { return null },
+      onEvent: function(name, evt) { return true },
+      transformResponse: function(text, xhr, elt) { return text },
+      isInlineSwap: function(swapStyle) { return false },
+      handleSwap: function(swapStyle, target, fragment, settleInfo) { return false },
+      encodeParameters: function(xhr, parameters, elt) { return null }
     }
   }
 
   /**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
-  function defineExtension (name, extension) {
+   * defineExtension initializes the extension and adds it to the htmx registry
+   *
+   * @see https://htmx.org/api/#defineExtension
+   *
+   * @param {string} name the extension name
+   * @param {HtmxExtension} extension the extension definition
+   */
+  function defineExtension(name, extension) {
     if (extension.init) {
       extension.init(internalAPI)
     }
@@ -3476,34 +4767,37 @@ const htmx = (function () {
   }
 
   /**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
-  function removeExtension (name) {
+   * removeExtension removes an extension from the htmx registry
+   *
+   * @see https://htmx.org/api/#removeExtension
+   *
+   * @param {string} name
+   */
+  function removeExtension(name) {
     delete extensions[name]
   }
 
   /**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
-  function getExtensions (elt, extensionsToReturn, extensionsToIgnore) {
-    if (elt == undefined) {
-      return extensionsToReturn
-    }
+   * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+   *
+   * @param {Element} elt
+   * @param {HtmxExtension[]=} extensionsToReturn
+   * @param {string[]=} extensionsToIgnore
+   * @returns {HtmxExtension[]}
+   */
+  function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
     if (extensionsToReturn == undefined) {
       extensionsToReturn = []
     }
+    if (elt == undefined) {
+      return extensionsToReturn
+    }
     if (extensionsToIgnore == undefined) {
       extensionsToIgnore = []
     }
     const extensionsForElement = getAttributeValue(elt, 'hx-ext')
     if (extensionsForElement) {
-      forEach(extensionsForElement.split(','), function (extensionName) {
+      forEach(extensionsForElement.split(','), function(extensionName) {
         extensionName = extensionName.replace(/ /g, '')
         if (extensionName.slice(0, 7) == 'ignore:') {
           extensionsToIgnore.push(extensionName.slice(7))
@@ -3517,43 +4811,35 @@ const htmx = (function () {
         }
       })
     }
-    return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+    return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
   }
 
   //= ===================================================================
   // Initialization
   //= ===================================================================
-  /**
- * We want to initialize the page elements after DOMContentLoaded
- * fires, but there isn't always a good way to tell whether
- * it has already fired when we get here or not.
- */
-  function ready (functionToCall) {
-  // call the function exactly once no matter how many times this is called
-    const callReadyFunction = function () {
-      if (!functionToCall) return
-      functionToCall()
-      functionToCall = null
-    }
+  var isReady = false
+  getDocument().addEventListener('DOMContentLoaded', function() {
+    isReady = true
+  })
 
-    if (getDocument().readyState === 'complete') {
-    // DOMContentLoaded definitely fired, we can initialize the page
-      callReadyFunction()
+  /**
+   * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+   *
+   * This function uses isReady because there is no reliable way to ask the browser whether
+   * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+   * firing and readystate=complete.
+   */
+  function ready(fn) {
+    // Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
+    // some means other than the initial page load.
+    if (isReady || getDocument().readyState === 'complete') {
+      fn()
     } else {
-    /* DOMContentLoaded *maybe* already fired, wait for
-     * the next DOMContentLoaded or readystatechange event
-     */
-      getDocument().addEventListener('DOMContentLoaded', function () {
-        callReadyFunction()
-      })
-      getDocument().addEventListener('readystatechange', function () {
-        if (getDocument().readyState !== 'complete') return
-        callReadyFunction()
-      })
+      getDocument().addEventListener('DOMContentLoaded', fn)
     }
   }
 
-  function insertIndicatorStyles () {
+  function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
       getDocument().head.insertAdjacentHTML('beforeend',
         '<style>\
@@ -3564,17 +4850,17 @@ const htmx = (function () {
     }
   }
 
-  function getMetaConfig () {
+  function getMetaConfig() {
+    /** @type HTMLMetaElement */
     const element = getDocument().querySelector('meta[name="htmx-config"]')
     if (element) {
-    // @ts-ignore
       return parseJSON(element.content)
     } else {
       return null
     }
   }
 
-  function mergeMetaConfig () {
+  function mergeMetaConfig() {
     const metaConfig = getMetaConfig()
     if (metaConfig) {
       htmx.config = mergeObjects(htmx.config, metaConfig)
@@ -3582,7 +4868,7 @@ const htmx = (function () {
   }
 
   // initialize the document
-  ready(function () {
+  ready(function() {
     mergeMetaConfig()
     insertIndicatorStyles()
     let body = getDocument().body
@@ -3590,7 +4876,7 @@ const htmx = (function () {
     const restoredElts = getDocument().querySelectorAll(
       "[hx-trigger='restored'],[data-hx-trigger='restored']"
     )
-    body.addEventListener('htmx:abort', function (evt) {
+    body.addEventListener('htmx:abort', function(evt) {
       const target = evt.target
       const internalData = getInternalData(target)
       if (internalData && internalData.xhr) {
@@ -3600,10 +4886,10 @@ const htmx = (function () {
     /** @type {(ev: PopStateEvent) => any} */
     const originalPopstate = window.onpopstate ? window.onpopstate.bind(window) : null
     /** @type {(ev: PopStateEvent) => any} */
-    window.onpopstate = function (event) {
+    window.onpopstate = function(event) {
       if (event.state && event.state.htmx) {
         restoreHistory()
-        forEach(restoredElts, function (elt) {
+        forEach(restoredElts, function(elt) {
           triggerEvent(elt, 'htmx:restored', {
             document: getDocument(),
             triggerEvent
@@ -3615,12 +4901,184 @@ const htmx = (function () {
         }
       }
     }
-    setTimeout(function () {
+    getWindow().setTimeout(function() {
       triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
       body = null // kill reference for gc
     }, 0)
   })
 
   return htmx
-}
-)()
+})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @typedef HtmxAjaxHelperContext
+ * @property {Element|string} [source]
+ * @property {Event} [event]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {Element|string} target
+ * @property {HtmxSwapStyle} [swap]
+ * @property {Object|FormData} [values]
+ * @property {Record<string,string>} [headers]
+ * @property {string} [select]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @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
+ */