Deps

public/js/htmx.preload.js

@@ -1,64 +1,69 @@
-(function() {
+(function () {
   /**
-   * This adds the "preload" extension to htmx. The extension will 
-    * preload the targets of elements with "preload" attribute if:
-    * - they also have `href`, `hx-get` or `data-hx-get` attributes
-    * - they are radio buttons, checkboxes, select elements and submit
-    *   buttons of forms with `method="get"` or `hx-get` attributes
-    * The extension relies on browser cache and for it to work
-    * server response must include `Cache-Control` header
-    * e.g. `Cache-Control: private, max-age=60`.
-    * For more details @see https://htmx.org/extensions/preload/
-  */
+   * This adds the "preload" extension to htmx. The extension will
+   * preload the targets of elements with "preload" attribute if:
+   * - they also have `href`, `hx-get` or `data-hx-get` attributes
+   * - they are radio buttons, checkboxes, select elements and submit
+   *   buttons of forms with `method="get"` or `hx-get` attributes
+   * The extension relies on browser cache and for it to work
+   * server response must include `Cache-Control` header
+   * e.g. `Cache-Control: private, max-age=60`.
+   * For more details @see https://htmx.org/extensions/preload/
+   */
 
-  htmx.defineExtension('preload', {
-    onEvent: function(name, event) {
+  htmx.defineExtension("preload", {
+    onEvent: function (name, event) {
       // Process preload attributes on `htmx:afterProcessNode`
-      if (name === 'htmx:afterProcessNode') {
+      if (name === "htmx:afterProcessNode") {
         // Initialize all nodes with `preload` attribute
         const parent = event.target || event.detail.elt;
         const preloadNodes = [
-          ...parent.hasAttribute("preload") ? [parent] : [],
-          ...parent.querySelectorAll("[preload]")]
-        preloadNodes.forEach(function(node) {
+          ...(parent.hasAttribute("preload") ? [parent] : []),
+          ...parent.querySelectorAll("[preload]"),
+        ];
+        preloadNodes.forEach(function (node) {
           // Initialize the node with the `preload` attribute
-          init(node)
+          init(node);
 
           // Initialize all child elements which has
           // `href`, `hx-get` or `data-hx-get` attributes
-          node.querySelectorAll('[href],[hx-get],[data-hx-get]').forEach(init)
-        })
-        return
+          node.querySelectorAll("[href],[hx-get],[data-hx-get]").forEach(init);
+        });
+        return;
       }
 
       // Intercept HTMX preload requests on `htmx:beforeRequest` and
       // send them as XHR requests instead to avoid side-effects,
-      // such as showing loading indicators while preloading data. 
-      if (name === 'htmx:beforeRequest') {
-        const requestHeaders = event.detail.requestConfig.headers
-        if (!("HX-Preloaded" in requestHeaders
-              && requestHeaders["HX-Preloaded"] === "true")) {
-          return
+      // such as showing loading indicators while preloading data.
+      if (name === "htmx:beforeRequest") {
+        const requestHeaders = event.detail.requestConfig.headers;
+        if (
+          !(
+            "HX-Preloaded" in requestHeaders &&
+            requestHeaders["HX-Preloaded"] === "true"
+          )
+        ) {
+          return;
         }
 
-        event.preventDefault()
+        event.preventDefault();
         // Reuse XHR created by HTMX with replaced callbacks
-        const xhr = event.detail.xhr
-        xhr.onload = function() {
-          processResponse(event.detail.elt, xhr.responseText)
-        }
-        xhr.onerror = null
-        xhr.onabort = null
-        xhr.ontimeout = null
-        xhr.send()
+        const xhr = event.detail.xhr;
+        xhr.onload = function () {
+          processResponse(event.detail.elt, xhr.responseText);
+        };
+        xhr.onerror = null;
+        xhr.onabort = null;
+        xhr.ontimeout = null;
+        xhr.send();
       }
-    }
-  })
+    },
+  });
 
   /**
    * Initialize `node`, set up event handlers based on own or inherited
    * `preload` attributes and set `node.preloadState` to `READY`.
-   * 
+   *
    * `node.preloadState` can have these values:
    * - `READY` - event handlers have been set up and node is ready to preload
    * - `TIMEOUT` - a triggering event has been fired, but `node` is not
@@ -72,175 +77,192 @@
   function init(node) {
     // Guarantee that each node is initialized only once
     if (node.preloadState !== undefined) {
-      return
+      return;
     }
 
     if (!isValidNodeForPreloading(node)) {
-      return
+      return;
     }
 
     // Initialize form element preloading
     if (node instanceof HTMLFormElement) {
-      const form = node
+      const form = node;
       // Only initialize forms with `method="get"` or `hx-get` attributes
-      if (!((form.hasAttribute('method') && form.method === 'get')
-        || form.hasAttribute('hx-get') || form.hasAttribute('hx-data-get'))) {
-        return
+      if (
+        !(
+          (form.hasAttribute("method") && form.method === "get") ||
+          form.hasAttribute("hx-get") ||
+          form.hasAttribute("hx-data-get")
+        )
+      ) {
+        return;
       }
       for (let i = 0; i < form.elements.length; i++) {
         const element = form.elements.item(i);
         init(element);
         element.labels.forEach(init);
       }
-      return
+      return;
     }
-    
+
     // Process node configuration from preload attribute
-    let preloadAttr = getClosestAttribute(node, 'preload');
-    node.preloadAlways = preloadAttr && preloadAttr.includes('always');
+    let preloadAttr = getClosestAttribute(node, "preload");
+    node.preloadAlways = preloadAttr && preloadAttr.includes("always");
     if (node.preloadAlways) {
-      preloadAttr = preloadAttr.replace('always', '').trim();
+      preloadAttr = preloadAttr.replace("always", "").trim();
     }
-    let triggerEventName = preloadAttr || 'mousedown';
+    let triggerEventName = preloadAttr || "mousedown";
 
     // Set up event handlers listening for triggering events
-    const needsTimeout = triggerEventName === 'mouseover'
-    node.addEventListener(triggerEventName, getEventHandler(node, needsTimeout))
+    const needsTimeout = triggerEventName === "mouseover";
+    node.addEventListener(
+      triggerEventName,
+      getEventHandler(node, needsTimeout),
+    );
 
     // Add `touchstart` listener for touchscreen support
     // if `mousedown` or `mouseover` is used
-    if (triggerEventName === 'mousedown' || triggerEventName === 'mouseover') {
-      node.addEventListener('touchstart', getEventHandler(node))
+    if (triggerEventName === "mousedown" || triggerEventName === "mouseover") {
+      node.addEventListener("touchstart", getEventHandler(node));
     }
 
     // If `mouseover` is used, set up `mouseout` listener,
     // which will abort preloading if user moves mouse outside
     // the element in less than 100ms after hovering over it
-    if (triggerEventName === 'mouseover') {
-      node.addEventListener('mouseout', function(evt) {
-        if ((evt.target === node) && (node.preloadState === 'TIMEOUT')) {
-          node.preloadState = 'READY'
+    if (triggerEventName === "mouseover") {
+      node.addEventListener("mouseout", function (evt) {
+        if (evt.target === node && node.preloadState === "TIMEOUT") {
+          node.preloadState = "READY";
         }
-      })
+      });
     }
 
     // Mark the node as ready to be preloaded
-    node.preloadState = 'READY'
+    node.preloadState = "READY";
 
     // This event can be used to load content immediately
-    htmx.trigger(node, 'preload:init')
+    htmx.trigger(node, "preload:init");
   }
 
   /**
    * Return event handler which can be called by event listener to start
    * the preloading process of `node` with or without a timeout
-   * @param {Node} node 
-   * @param {boolean=} needsTimeout 
+   * @param {Node} node
+   * @param {boolean=} needsTimeout
    * @returns {function(): void}
    */
   function getEventHandler(node, needsTimeout = false) {
-    return function() {
+    return function () {
       // Do not preload uninitialized nodes, nodes which are in process
       // of being preloaded or have been preloaded and don't need repeat
-      if (node.preloadState !== 'READY') {
-        return
+      if (node.preloadState !== "READY") {
+        return;
       }
 
       if (needsTimeout) {
-        node.preloadState = 'TIMEOUT'
-        const timeoutMs = 100
-        window.setTimeout(function() {
-          if (node.preloadState === 'TIMEOUT') {
-            node.preloadState = 'READY'
-            load(node)
+        node.preloadState = "TIMEOUT";
+        const timeoutMs = 100;
+        window.setTimeout(function () {
+          if (node.preloadState === "TIMEOUT") {
+            node.preloadState = "READY";
+            load(node);
           }
-        }, timeoutMs)
-        return
+        }, timeoutMs);
+        return;
       }
 
-      load(node)
-    }
+      load(node);
+    };
   }
 
   /**
    * Preload the target of node, which can be:
    *  - hx-get or data-hx-get attribute
    *  - href or form action attribute
-   * @param {Node} node 
+   * @param {Node} node
    */
   function load(node) {
     // Do not preload uninitialized nodes, nodes which are in process
     // of being preloaded or have been preloaded and don't need repeat
-    if (node.preloadState !== 'READY') {
-      return
+    if (node.preloadState !== "READY") {
+      return;
     }
-    node.preloadState = 'LOADING'
+    node.preloadState = "LOADING";
 
     // Load nodes with `hx-get` or `data-hx-get` attribute
     // Forms don't reach this because only their elements are initialized
-    const hxGet = node.getAttribute('hx-get') || node.getAttribute('data-hx-get')
+    const hxGet =
+      node.getAttribute("hx-get") || node.getAttribute("data-hx-get");
     if (hxGet) {
       sendHxGetRequest(hxGet, node);
-      return
+      return;
     }
 
     // Load nodes with `href` attribute
-    const hxBoost = getClosestAttribute(node, "hx-boost") === "true"
-    if (node.hasAttribute('href')) {
-      const url = node.getAttribute('href');
+    const hxBoost = getClosestAttribute(node, "hx-boost") === "true";
+    if (node.hasAttribute("href")) {
+      const url = node.getAttribute("href");
       if (hxBoost) {
         sendHxGetRequest(url, node);
       } else {
         sendXmlGetRequest(url, node);
       }
-      return
+      return;
     }
 
     // Load form elements
     if (isPreloadableFormElement(node)) {
-      const url = node.form.getAttribute('action')
-                  || node.form.getAttribute('hx-get')
-                  || node.form.getAttribute('data-hx-get');
+      const url =
+        node.form.getAttribute("action") ||
+        node.form.getAttribute("hx-get") ||
+        node.form.getAttribute("data-hx-get");
       const formData = htmx.values(node.form);
-      const isStandardForm = !(node.form.getAttribute('hx-get')
-                              || node.form.getAttribute('data-hx-get')
-                              || hxBoost);
-      const sendGetRequest = isStandardForm ? sendXmlGetRequest : sendHxGetRequest
+      const isStandardForm = !(
+        node.form.getAttribute("hx-get") ||
+        node.form.getAttribute("data-hx-get") ||
+        hxBoost
+      );
+      const sendGetRequest = isStandardForm
+        ? sendXmlGetRequest
+        : sendHxGetRequest;
 
       // submit button
-      if (node.type === 'submit') {
-        sendGetRequest(url, node.form, formData)
-        return
+      if (node.type === "submit") {
+        sendGetRequest(url, node.form, formData);
+        return;
       }
-      
+
       // select
       const inputName = node.name || node.control.name;
-      if (node.tagName === 'SELECT') {
-        Array.from(node.options).forEach(option => {
+      if (node.tagName === "SELECT") {
+        Array.from(node.options).forEach((option) => {
           if (option.selected) return;
           formData.set(inputName, option.value);
           const formDataOrdered = forceFormDataInOrder(node.form, formData);
-          sendGetRequest(url, node.form, formDataOrdered)
+          sendGetRequest(url, node.form, formDataOrdered);
         });
-        return
+        return;
       }
 
       // radio and checkbox
-      const inputType = node.getAttribute("type") || node.control.getAttribute("type");
+      const inputType =
+        node.getAttribute("type") || node.control.getAttribute("type");
       const nodeValue = node.value || node.control?.value;
-      if (inputType === 'radio') {
+      if (inputType === "radio") {
         formData.set(inputName, nodeValue);
-      } else if (inputType === 'checkbox'){
+      } else if (inputType === "checkbox") {
         const inputValues = formData.getAll(inputName);
         if (inputValues.includes(nodeValue)) {
-          formData[inputName] = inputValues.filter(value => value !== nodeValue);
+          formData[inputName] = inputValues.filter(
+            (value) => value !== nodeValue,
+          );
         } else {
           formData.append(inputName, nodeValue);
         }
       }
       const formDataOrdered = forceFormDataInOrder(node.form, formData);
-      sendGetRequest(url, node.form, formDataOrdered)
-      return
+      sendGetRequest(url, node.form, formDataOrdered);
+      return;
     }
   }
 
@@ -250,22 +272,23 @@
    * and before passing them to a HTTP request because cache is
    * sensitive to GET parameter order e.g., cached `/link?a=1&b=2`
    * will not be used for `/link?b=2&a=1`.
-   * @param {HTMLFormElement} form 
-   * @param {FormData} formData 
+   * @param {HTMLFormElement} form
+   * @param {FormData} formData
    * @returns {FormData}
    */
   function forceFormDataInOrder(form, formData) {
     const formElements = form.elements;
     const orderedFormData = new FormData();
-    for(let i = 0; i < formElements.length; i++) {
+    for (let i = 0; i < formElements.length; i++) {
       const element = formElements.item(i);
-      if (formData.has(element.name) && element.tagName === 'SELECT') {
-        orderedFormData.append(
-          element.name, formData.get(element.name));
+      if (formData.has(element.name) && element.tagName === "SELECT") {
+        orderedFormData.append(element.name, formData.get(element.name));
         continue;
       }
-      if (formData.has(element.name) && formData.getAll(element.name)
-        .includes(element.value)) {
+      if (
+        formData.has(element.name) &&
+        formData.getAll(element.name).includes(element.value)
+      ) {
         orderedFormData.append(element.name, element.value);
       }
     }
@@ -275,20 +298,20 @@
   /**
    * Send GET request with `hx-request` headers as if `sourceNode`
    * target was loaded. Send alternated values if `formData` is set.
-   * 
+   *
    * Note that this request is intercepted and sent as XMLHttpRequest.
    * It is necessary to use `htmx.ajax` to acquire correct headers which
    * HTMX and extensions add based on `sourceNode`. But it cannot be used
-   * to perform the request due to side-effects e.g. loading indicators. 
-   * @param {string} url 
-   * @param {Node} sourceNode 
+   * to perform the request due to side-effects e.g. loading indicators.
+   * @param {string} url
+   * @param {Node} sourceNode
    * @param {FormData=} formData
    */
   function sendHxGetRequest(url, sourceNode, formData = undefined) {
-    htmx.ajax('GET', url, {
+    htmx.ajax("GET", url, {
       source: sourceNode,
       values: formData,
-      headers: {"HX-Preloaded": "true"}
+      headers: { "HX-Preloaded": "true" },
     });
   }
 
@@ -299,90 +322,97 @@
    * @param {FormData=} formData
    */
   function sendXmlGetRequest(url, sourceNode, formData = undefined) {
-    const xhr = new XMLHttpRequest()
+    const xhr = new XMLHttpRequest();
     if (formData) {
-      url += '?' + new URLSearchParams(formData.entries()).toString()
+      url += "?" + new URLSearchParams(formData.entries()).toString();
     }
-    xhr.open('GET', url);
-    xhr.setRequestHeader("HX-Preloaded", "true")
-    xhr.onload = function() { processResponse(sourceNode, xhr.responseText) }
-    xhr.send()
+    xhr.open("GET", url);
+    xhr.setRequestHeader("HX-Preloaded", "true");
+    xhr.onload = function () {
+      processResponse(sourceNode, xhr.responseText);
+    };
+    xhr.send();
   }
 
   /**
    * Process request response by marking node `DONE` to prevent repeated
    * requests, except if preload attribute contains `always`,
-   * and load linked resources (e.g. images) returned in the response 
+   * and load linked resources (e.g. images) returned in the response
    * if `preload-images` attribute is `true`
-   * @param {Node} node 
-   * @param {string} responseText 
+   * @param {Node} node
+   * @param {string} responseText
    */
   function processResponse(node, responseText) {
-    node.preloadState = node.preloadAlways ? 'READY' : 'DONE'
+    node.preloadState = node.preloadAlways ? "READY" : "DONE";
 
-    if (getClosestAttribute(node, 'preload-images') === 'true') {
+    if (getClosestAttribute(node, "preload-images") === "true") {
       // Load linked resources
-      document.createElement('div').innerHTML = responseText
+      document.createElement("div").innerHTML = responseText;
     }
   }
 
   /**
    * Gets attribute value from node or one of its parents
-   * @param {Node} node 
-   * @param {string} attribute 
+   * @param {Node} node
+   * @param {string} attribute
    * @returns { string | undefined }
    */
   function getClosestAttribute(node, attribute) {
-    if (node == undefined) { return undefined }
-    return node.getAttribute(attribute)
-      || node.getAttribute('data-' + attribute)
-      || getClosestAttribute(node.parentElement, attribute)
+    if (node == undefined) {
+      return undefined;
+    }
+    return (
+      node.getAttribute(attribute) ||
+      node.getAttribute("data-" + attribute) ||
+      getClosestAttribute(node.parentElement, attribute)
+    );
   }
 
   /**
    * Determines if node is valid for preloading and should be
    * initialized by setting up event listeners and handlers
-   * @param {Node} node 
+   * @param {Node} node
    * @returns {boolean}
    */
   function isValidNodeForPreloading(node) {
     // Add listeners only to nodes which include "GET" transactions
     // or preloadable "GET" form elements
-    const getReqAttrs = ['href', 'hx-get', 'data-hx-get'];
-    const includesGetRequest = node => getReqAttrs.some(a => node.hasAttribute(a))
-                                        || node.method === 'get';
-    const isPreloadableGetFormElement = node.form instanceof HTMLFormElement
-                                        && includesGetRequest(node.form)
-                                        && isPreloadableFormElement(node)
+    const getReqAttrs = ["href", "hx-get", "data-hx-get"];
+    const includesGetRequest = (node) =>
+      getReqAttrs.some((a) => node.hasAttribute(a)) || node.method === "get";
+    const isPreloadableGetFormElement =
+      node.form instanceof HTMLFormElement &&
+      includesGetRequest(node.form) &&
+      isPreloadableFormElement(node);
     if (!includesGetRequest(node) && !isPreloadableGetFormElement) {
-      return false
+      return false;
     }
 
     // Don't preload <input> elements contained in <label>
     // to prevent sending two requests. Interaction on <input> in a
     // <label><input></input></label> situation activates <label> too.
-    if (node instanceof HTMLInputElement && node.closest('label')) {
-      return false
+    if (node instanceof HTMLInputElement && node.closest("label")) {
+      return false;
     }
 
-    return true
+    return true;
   }
 
   /**
    * Determine if node is a form element which can be preloaded,
    * i.e., `radio`, `checkbox`, `select` or `submit` button
    * or a `label` of a form element which can be preloaded.
-   * @param {Node} node 
+   * @param {Node} node
    * @returns {boolean}
    */
   function isPreloadableFormElement(node) {
     if (node instanceof HTMLInputElement || node instanceof HTMLButtonElement) {
-      const type = node.getAttribute('type');
-      return ['checkbox', 'radio', 'submit'].includes(type);
+      const type = node.getAttribute("type");
+      return ["checkbox", "radio", "submit"].includes(type);
     }
     if (node instanceof HTMLLabelElement) {
       return node.control && isPreloadableFormElement(node.control);
     }
     return node instanceof HTMLSelectElement;
   }
-})()
+})();

public/js/htmx.ws.js

@@ -4,28 +4,27 @@ WebSockets Extension
 This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md for usage instructions.
 */
 
-(function() {
+(function () {
   /** @type {import("../htmx").HtmxInternalApi} */
-  var api
-
-  htmx.defineExtension('ws', {
+  var api;
 
+  htmx.defineExtension("ws", {
     /**
      * init is called once, when this extension is first registered.
      * @param {import("../htmx").HtmxInternalApi} apiRef
      */
-    init: function(apiRef) {
+    init: function (apiRef) {
       // Store reference to internal API
-      api = apiRef
+      api = apiRef;
 
       // Default function for creating new EventSource objects
       if (!htmx.createWebSocket) {
-        htmx.createWebSocket = createWebSocket
+        htmx.createWebSocket = createWebSocket;
       }
 
       // Default setting for reconnect delay
       if (!htmx.config.wsReconnectDelay) {
-        htmx.config.wsReconnectDelay = 'full-jitter'
+        htmx.config.wsReconnectDelay = "full-jitter";
       }
     },
 
@@ -35,44 +34,48 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
      * @param {string} name
      * @param {Event} evt
      */
-    onEvent: function(name, evt) {
-      var parent = evt.target || evt.detail.elt
+    onEvent: function (name, evt) {
+      var parent = evt.target || evt.detail.elt;
       switch (name) {
         // Try to close the socket when elements are removed
-        case 'htmx:beforeCleanupElement':
-
-          var internalData = api.getInternalData(parent)
+        case "htmx:beforeCleanupElement":
+          var internalData = api.getInternalData(parent);
 
           if (internalData.webSocket) {
-            internalData.webSocket.close()
+            internalData.webSocket.close();
           }
-          return
+          return;
 
-          // Try to create websockets when elements are processed
-        case 'htmx:beforeProcessNode':
-
-          forEach(queryAttributeOnThisOrChildren(parent, 'ws-connect'), function(child) {
-            ensureWebSocket(child)
-          })
-          forEach(queryAttributeOnThisOrChildren(parent, 'ws-send'), function(child) {
-            ensureWebSocketSend(child)
-          })
+        // Try to create websockets when elements are processed
+        case "htmx:beforeProcessNode":
+          forEach(
+            queryAttributeOnThisOrChildren(parent, "ws-connect"),
+            function (child) {
+              ensureWebSocket(child);
+            },
+          );
+          forEach(
+            queryAttributeOnThisOrChildren(parent, "ws-send"),
+            function (child) {
+              ensureWebSocketSend(child);
+            },
+          );
       }
-    }
-  })
+    },
+  });
 
   function splitOnWhitespace(trigger) {
-    return trigger.trim().split(/\s+/)
+    return trigger.trim().split(/\s+/);
   }
 
   function getLegacyWebsocketURL(elt) {
-    var legacySSEValue = api.getAttributeValue(elt, 'hx-ws')
+    var legacySSEValue = api.getAttributeValue(elt, "hx-ws");
     if (legacySSEValue) {
-      var values = splitOnWhitespace(legacySSEValue)
+      var values = splitOnWhitespace(legacySSEValue);
       for (var i = 0; i < values.length; i++) {
-        var value = values[i].split(/:(.+)/)
-        if (value[0] === 'connect') {
-          return value[1]
+        var value = values[i].split(/:(.+)/);
+        if (value[0] === "connect") {
+          return value[1];
         }
       }
     }
@@ -88,68 +91,78 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
     // If the element containing the WebSocket connection no longer exists, then
     // do not connect/reconnect the WebSocket.
     if (!api.bodyContains(socketElt)) {
-      return
+      return;
     }
 
     // Get the source straight from the element's value
-    var wssSource = api.getAttributeValue(socketElt, 'ws-connect')
+    var wssSource = api.getAttributeValue(socketElt, "ws-connect");
 
-    if (wssSource == null || wssSource === '') {
-      var legacySource = getLegacyWebsocketURL(socketElt)
+    if (wssSource == null || wssSource === "") {
+      var legacySource = getLegacyWebsocketURL(socketElt);
       if (legacySource == null) {
-        return
+        return;
       } else {
-        wssSource = legacySource
+        wssSource = legacySource;
       }
     }
 
     // Guarantee that the wssSource value is a fully qualified URL
-    if (wssSource.indexOf('/') === 0) {
-      var base_part = location.hostname + (location.port ? ':' + location.port : '')
-      if (location.protocol === 'https:') {
-        wssSource = 'wss://' + base_part + wssSource
-      } else if (location.protocol === 'http:') {
-        wssSource = 'ws://' + base_part + wssSource
+    if (wssSource.indexOf("/") === 0) {
+      var base_part =
+        location.hostname + (location.port ? ":" + location.port : "");
+      if (location.protocol === "https:") {
+        wssSource = "wss://" + base_part + wssSource;
+      } else if (location.protocol === "http:") {
+        wssSource = "ws://" + base_part + wssSource;
       }
     }
 
-    var socketWrapper = createWebsocketWrapper(socketElt, function() {
-      return htmx.createWebSocket(wssSource)
-    })
+    var socketWrapper = createWebsocketWrapper(socketElt, function () {
+      return htmx.createWebSocket(wssSource);
+    });
 
-    socketWrapper.addEventListener('message', function(event) {
+    socketWrapper.addEventListener("message", function (event) {
       if (maybeCloseWebSocketSource(socketElt)) {
-        return
+        return;
       }
 
-      var response = event.data
-      if (!api.triggerEvent(socketElt, 'htmx:wsBeforeMessage', {
-        message: response,
-        socketWrapper: socketWrapper.publicInterface
-      })) {
-        return
+      var response = event.data;
+      if (
+        !api.triggerEvent(socketElt, "htmx:wsBeforeMessage", {
+          message: response,
+          socketWrapper: socketWrapper.publicInterface,
+        })
+      ) {
+        return;
       }
 
-      api.withExtensions(socketElt, function(extension) {
-        response = extension.transformResponse(response, null, socketElt)
-      })
+      api.withExtensions(socketElt, function (extension) {
+        response = extension.transformResponse(response, null, socketElt);
+      });
 
-      var settleInfo = api.makeSettleInfo(socketElt)
-      var fragment = api.makeFragment(response)
+      var settleInfo = api.makeSettleInfo(socketElt);
+      var fragment = api.makeFragment(response);
 
       if (fragment.children.length) {
-        var children = Array.from(fragment.children)
+        var children = Array.from(fragment.children);
         for (var i = 0; i < children.length; i++) {
-          api.oobSwap(api.getAttributeValue(children[i], 'hx-swap-oob') || 'true', children[i], settleInfo)
+          api.oobSwap(
+            api.getAttributeValue(children[i], "hx-swap-oob") || "true",
+            children[i],
+            settleInfo,
+          );
         }
       }
 
-      api.settleImmediately(settleInfo.tasks)
-      api.triggerEvent(socketElt, 'htmx:wsAfterMessage', { message: response, socketWrapper: socketWrapper.publicInterface })
-    })
+      api.settleImmediately(settleInfo.tasks);
+      api.triggerEvent(socketElt, "htmx:wsAfterMessage", {
+        message: response,
+        socketWrapper: socketWrapper.publicInterface,
+      });
+    });
 
     // Put the WebSocket into the HTML Element's custom data.
-    api.getInternalData(socketElt).webSocket = socketWrapper
+    api.getInternalData(socketElt).webSocket = socketWrapper;
   }
 
   /**
@@ -179,120 +192,138 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
       /** @type {Object<string, Function[]>} */
       events: {},
 
-      addEventListener: function(event, handler) {
+      addEventListener: function (event, handler) {
         if (this.socket) {
-          this.socket.addEventListener(event, handler)
+          this.socket.addEventListener(event, handler);
         }
 
         if (!this.events[event]) {
-          this.events[event] = []
+          this.events[event] = [];
         }
 
-        this.events[event].push(handler)
+        this.events[event].push(handler);
       },
 
-      sendImmediately: function(message, sendElt) {
+      sendImmediately: function (message, sendElt) {
         if (!this.socket) {
-          api.triggerErrorEvent()
+          api.triggerErrorEvent();
         }
-        if (!sendElt || api.triggerEvent(sendElt, 'htmx:wsBeforeSend', {
-          message,
-          socketWrapper: this.publicInterface
-        })) {
-          this.socket.send(message)
-          sendElt && api.triggerEvent(sendElt, 'htmx:wsAfterSend', {
+        if (
+          !sendElt ||
+          api.triggerEvent(sendElt, "htmx:wsBeforeSend", {
             message,
-            socketWrapper: this.publicInterface
+            socketWrapper: this.publicInterface,
           })
+        ) {
+          this.socket.send(message);
+          sendElt &&
+            api.triggerEvent(sendElt, "htmx:wsAfterSend", {
+              message,
+              socketWrapper: this.publicInterface,
+            });
         }
       },
 
-      send: function(message, sendElt) {
+      send: function (message, sendElt) {
         if (this.socket.readyState !== this.socket.OPEN) {
-          this.messageQueue.push({ message, sendElt })
+          this.messageQueue.push({ message, sendElt });
         } else {
-          this.sendImmediately(message, sendElt)
+          this.sendImmediately(message, sendElt);
         }
       },
 
-      handleQueuedMessages: function() {
+      handleQueuedMessages: function () {
         while (this.messageQueue.length > 0) {
-          var queuedItem = this.messageQueue[0]
+          var queuedItem = this.messageQueue[0];
           if (this.socket.readyState === this.socket.OPEN) {
-            this.sendImmediately(queuedItem.message, queuedItem.sendElt)
-            this.messageQueue.shift()
+            this.sendImmediately(queuedItem.message, queuedItem.sendElt);
+            this.messageQueue.shift();
           } else {
-            break
+            break;
           }
         }
       },
 
-      init: function() {
+      init: function () {
         if (this.socket && this.socket.readyState === this.socket.OPEN) {
           // Close discarded socket
-          this.socket.close()
+          this.socket.close();
         }
 
         // Create a new WebSocket and event handlers
         /** @type {WebSocket} */
-        var socket = socketFunc()
+        var socket = socketFunc();
 
         // The event.type detail is added for interface conformance with the
         // other two lifecycle events (open and close) so a single handler method
         // can handle them polymorphically, if required.
-        api.triggerEvent(socketElt, 'htmx:wsConnecting', { event: { type: 'connecting' } })
+        api.triggerEvent(socketElt, "htmx:wsConnecting", {
+          event: { type: "connecting" },
+        });
 
-        this.socket = socket
+        this.socket = socket;
 
-        socket.onopen = function(e) {
-          wrapper.retryCount = 0
-          api.triggerEvent(socketElt, 'htmx:wsOpen', { event: e, socketWrapper: wrapper.publicInterface })
-          wrapper.handleQueuedMessages()
-        }
+        socket.onopen = function (e) {
+          wrapper.retryCount = 0;
+          api.triggerEvent(socketElt, "htmx:wsOpen", {
+            event: e,
+            socketWrapper: wrapper.publicInterface,
+          });
+          wrapper.handleQueuedMessages();
+        };
 
-        socket.onclose = function(e) {
+        socket.onclose = function (e) {
           // If socket should not be connected, stop further attempts to establish connection
           // If Abnormal Closure/Service Restart/Try Again Later, then set a timer to reconnect after a pause.
-          if (!maybeCloseWebSocketSource(socketElt) && [1006, 1012, 1013].indexOf(e.code) >= 0) {
-            var delay = getWebSocketReconnectDelay(wrapper.retryCount)
-            setTimeout(function() {
-              wrapper.retryCount += 1
-              wrapper.init()
-            }, delay)
+          if (
+            !maybeCloseWebSocketSource(socketElt) &&
+            [1006, 1012, 1013].indexOf(e.code) >= 0
+          ) {
+            var delay = getWebSocketReconnectDelay(wrapper.retryCount);
+            setTimeout(function () {
+              wrapper.retryCount += 1;
+              wrapper.init();
+            }, delay);
           }
 
           // Notify client code that connection has been closed. Client code can inspect `event` field
           // to determine whether closure has been valid or abnormal
-          api.triggerEvent(socketElt, 'htmx:wsClose', { event: e, socketWrapper: wrapper.publicInterface })
-        }
+          api.triggerEvent(socketElt, "htmx:wsClose", {
+            event: e,
+            socketWrapper: wrapper.publicInterface,
+          });
+        };
 
-        socket.onerror = function(e) {
-          api.triggerErrorEvent(socketElt, 'htmx:wsError', { error: e, socketWrapper: wrapper })
-          maybeCloseWebSocketSource(socketElt)
-        }
+        socket.onerror = function (e) {
+          api.triggerErrorEvent(socketElt, "htmx:wsError", {
+            error: e,
+            socketWrapper: wrapper,
+          });
+          maybeCloseWebSocketSource(socketElt);
+        };
 
-        var events = this.events
-        Object.keys(events).forEach(function(k) {
-          events[k].forEach(function(e) {
-            socket.addEventListener(k, e)
-          })
-        })
+        var events = this.events;
+        Object.keys(events).forEach(function (k) {
+          events[k].forEach(function (e) {
+            socket.addEventListener(k, e);
+          });
+        });
       },
 
-      close: function() {
-        this.socket.close()
-      }
-    }
+      close: function () {
+        this.socket.close();
+      },
+    };
 
-    wrapper.init()
+    wrapper.init();
 
     wrapper.publicInterface = {
       send: wrapper.send.bind(wrapper),
       sendImmediately: wrapper.sendImmediately.bind(wrapper),
-      queue: wrapper.messageQueue
-    }
+      queue: wrapper.messageQueue,
+    };
 
-    return wrapper
+    return wrapper;
   }
 
   /**
@@ -301,13 +332,13 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    * @param {HTMLElement} elt
    */
   function ensureWebSocketSend(elt) {
-    var legacyAttribute = api.getAttributeValue(elt, 'hx-ws')
-    if (legacyAttribute && legacyAttribute !== 'send') {
-      return
+    var legacyAttribute = api.getAttributeValue(elt, "hx-ws");
+    if (legacyAttribute && legacyAttribute !== "send") {
+      return;
     }
 
-    var webSocketParent = api.getClosestMatch(elt, hasWebSocket)
-    processWebSocketSend(webSocketParent, elt)
+    var webSocketParent = api.getClosestMatch(elt, hasWebSocket);
+    processWebSocketSend(webSocketParent, elt);
   }
 
   /**
@@ -316,7 +347,7 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    * @returns {boolean}
    */
   function hasWebSocket(node) {
-    return api.getInternalData(node).webSocket != null
+    return api.getInternalData(node).webSocket != null;
   }
 
   /**
@@ -326,23 +357,23 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    * @param {HTMLElement} sendElt
    */
   function processWebSocketSend(socketElt, sendElt) {
-    var nodeData = api.getInternalData(sendElt)
-    var triggerSpecs = api.getTriggerSpecs(sendElt)
-    triggerSpecs.forEach(function(ts) {
-      api.addTriggerHandler(sendElt, ts, nodeData, function(elt, evt) {
+    var nodeData = api.getInternalData(sendElt);
+    var triggerSpecs = api.getTriggerSpecs(sendElt);
+    triggerSpecs.forEach(function (ts) {
+      api.addTriggerHandler(sendElt, ts, nodeData, function (elt, evt) {
         if (maybeCloseWebSocketSource(socketElt)) {
-          return
+          return;
         }
 
         /** @type {WebSocketWrapper} */
-        var socketWrapper = api.getInternalData(socketElt).webSocket
-        var headers = api.getHeaders(sendElt, api.getTarget(sendElt))
-        var results = api.getInputValues(sendElt, 'post')
-        var errors = results.errors
-        var rawParameters = Object.assign({}, results.values)
-        var expressionVars = api.getExpressionVars(sendElt)
-        var allParameters = api.mergeObjects(rawParameters, expressionVars)
-        var filteredParameters = api.filterValues(allParameters, sendElt)
+        var socketWrapper = api.getInternalData(socketElt).webSocket;
+        var headers = api.getHeaders(sendElt, api.getTarget(sendElt));
+        var results = api.getInputValues(sendElt, "post");
+        var errors = results.errors;
+        var rawParameters = Object.assign({}, results.values);
+        var expressionVars = api.getExpressionVars(sendElt);
+        var allParameters = api.mergeObjects(rawParameters, expressionVars);
+        var filteredParameters = api.filterValues(allParameters, sendElt);
 
         var sendConfig = {
           parameters: filteredParameters,
@@ -352,32 +383,34 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
 
           triggeringEvent: evt,
           messageBody: undefined,
-          socketWrapper: socketWrapper.publicInterface
-        }
+          socketWrapper: socketWrapper.publicInterface,
+        };
 
-        if (!api.triggerEvent(elt, 'htmx:wsConfigSend', sendConfig)) {
-          return
+        if (!api.triggerEvent(elt, "htmx:wsConfigSend", sendConfig)) {
+          return;
         }
 
         if (errors && errors.length > 0) {
-          api.triggerEvent(elt, 'htmx:validation:halted', errors)
-          return
+          api.triggerEvent(elt, "htmx:validation:halted", errors);
+          return;
         }
 
-        var body = sendConfig.messageBody
+        var body = sendConfig.messageBody;
         if (body === undefined) {
-          var toSend = Object.assign({}, sendConfig.parameters)
-          if (sendConfig.headers) { toSend.HEADERS = headers }
-          body = JSON.stringify(toSend)
+          var toSend = Object.assign({}, sendConfig.parameters);
+          if (sendConfig.headers) {
+            toSend.HEADERS = headers;
+          }
+          body = JSON.stringify(toSend);
         }
 
-        socketWrapper.send(body, elt)
+        socketWrapper.send(body, elt);
 
         if (evt && api.shouldCancel(evt, elt)) {
-          evt.preventDefault()
+          evt.preventDefault();
         }
-      })
-    })
+      });
+    });
   }
 
   /**
@@ -387,17 +420,19 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    */
   function getWebSocketReconnectDelay(retryCount) {
     /** @type {"full-jitter" | ((retryCount:number) => number)} */
-    var delay = htmx.config.wsReconnectDelay
-    if (typeof delay === 'function') {
-      return delay(retryCount)
+    var delay = htmx.config.wsReconnectDelay;
+    if (typeof delay === "function") {
+      return delay(retryCount);
     }
-    if (delay === 'full-jitter') {
-      var exp = Math.min(retryCount, 6)
-      var maxDelay = 1000 * Math.pow(2, exp)
-      return maxDelay * Math.random()
+    if (delay === "full-jitter") {
+      var exp = Math.min(retryCount, 6);
+      var maxDelay = 1000 * Math.pow(2, exp);
+      return maxDelay * Math.random();
     }
 
-    logError('htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"')
+    logError(
+      'htmx.config.wsReconnectDelay must either be a function or the string "full-jitter"',
+    );
   }
 
   /**
@@ -411,14 +446,14 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    */
   function maybeCloseWebSocketSource(elt) {
     if (!api.bodyContains(elt)) {
-      var internalData = api.getInternalData(elt)
+      var internalData = api.getInternalData(elt);
       if (internalData.webSocket) {
-        internalData.webSocket.close()
-        return true
+        internalData.webSocket.close();
+        return true;
       }
-      return false
+      return false;
     }
-    return false
+    return false;
   }
 
   /**
@@ -429,9 +464,9 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    * @returns WebSocket
    */
   function createWebSocket(url) {
-    var sock = new WebSocket(url, [])
-    sock.binaryType = htmx.config.wsBinaryType
-    return sock
+    var sock = new WebSocket(url, []);
+    sock.binaryType = htmx.config.wsBinaryType;
+    return sock;
   }
 
   /**
@@ -441,19 +476,30 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
    * @param {string} attributeName
    */
   function queryAttributeOnThisOrChildren(elt, attributeName) {
-    var result = []
+    var result = [];
 
     // If the parent element also contains the requested attribute, then add it to the results too.
-    if (api.hasAttribute(elt, attributeName) || api.hasAttribute(elt, 'hx-ws')) {
-      result.push(elt)
+    if (
+      api.hasAttribute(elt, attributeName) ||
+      api.hasAttribute(elt, "hx-ws")
+    ) {
+      result.push(elt);
     }
 
     // Search all child nodes that match the requested attribute
-    elt.querySelectorAll('[' + attributeName + '], [data-' + attributeName + '], [data-hx-ws], [hx-ws]').forEach(function(node) {
-      result.push(node)
-    })
+    elt
+      .querySelectorAll(
+        "[" +
+          attributeName +
+          "], [data-" +
+          attributeName +
+          "], [data-hx-ws], [hx-ws]",
+      )
+      .forEach(function (node) {
+        result.push(node);
+      });
 
-    return result
+    return result;
   }
 
   /**
@@ -464,8 +510,8 @@ This extension adds support for WebSockets to htmx.  See /www/extensions/ws.md f
   function forEach(arr, func) {
     if (arr) {
       for (var i = 0; i < arr.length; i++) {
-        func(arr[i])
+        func(arr[i]);
       }
     }
   }
-})()
+})();