allow hx-headers to access event

src/htmx.js

@@ -2637,27 +2637,6 @@ var htmx = (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
-        triggerEvent(elt, 'htmx:trigger')
-        handler(elt)
-      }
-    }
-    if (delay > 0) {
-      getWindow().setTimeout(load, delay)
-    } else {
-      load()
-    }
-  }
-
   /**
    * @param {Element} elt
    * @param {HtmxNodeInternalData} nodeData
@@ -2724,9 +2703,10 @@ var htmx = (function() {
       observer.observe(asElement(elt))
       addEventListener(asElement(elt), handler, nodeData, triggerSpec)
     } else if (!nodeData.firstInitCompleted && triggerSpec.trigger === 'load') {
-      if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
-        loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
-      }
+      triggerSpec.once = true
+      addEventListener(elt, handler, nodeData, triggerSpec)
+      // dispatch a custom non bubbling load event to just trigger the load
+      elt.dispatchEvent(new CustomEvent('load', { detail: { elt } }))
     } else if (triggerSpec.pollInterval > 0) {
       nodeData.polling = true
       processPolling(asElement(elt), handler, triggerSpec)
@@ -3684,10 +3664,11 @@ var htmx = (function() {
   /**
  * @param {Element} elt
  * @param {Element} target
- * @param {string} prompt
+ * @param {string=} prompt
+ * @param {Event=} event
  * @returns {HtmxHeaderSpecification}
  */
-  function getHeaders(elt, target, prompt) {
+  function getHeaders(elt, target, prompt, event) {
     /** @type HtmxHeaderSpecification */
     const headers = {
       'HX-Request': 'true',
@@ -3696,7 +3677,7 @@ var htmx = (function() {
       'HX-Target': getAttributeValue(target, 'id'),
       'HX-Current-URL': location.href
     }
-    getValuesForElement(elt, 'hx-headers', false, headers)
+    getValuesForElement(elt, 'hx-headers', false, headers, event)
     if (prompt !== undefined) {
       headers['HX-Prompt'] = prompt
     }
@@ -4420,7 +4401,7 @@ var htmx = (function() {
       }
     }
 
-    let headers = getHeaders(elt, target, promptResponse)
+    let headers = getHeaders(elt, target, promptResponse, event)
 
     if (verb !== 'get' && !usesFormData(elt)) {
       headers['Content-Type'] = 'application/x-www-form-urlencoded'

test/attributes/hx-headers.js

@@ -147,4 +147,48 @@ describe('hx-headers attribute', function() {
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
   })
+
+  it('using js: with hx-headers has event available', function() {
+    this.server.respondWith('POST', '/vars', function(xhr) {
+      var headers = xhr.requestHeaders
+      headers.i1.should.equal('test')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+
+    var div = make('<div id="test" hx-post="/vars" hx-headers="js:i1:event.target.id"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked!')
+  })
+
+  it('using js: with hx-headers has event available on load event', function() {
+    this.server.respondWith('POST', '/vars', function(xhr) {
+      var headers = xhr.requestHeaders
+      headers.i1.should.equal('load')
+      xhr.respond(200, {}, 'Loaded!')
+    })
+
+    var div = make('<div id="test" hx-post="/vars" hx-headers="js:i1:event.type" hx-trigger="load"></div>')
+    this.server.respond()
+    div.innerHTML.should.equal('Loaded!')
+  })
+
+  it('using js: with hx-headers has event available on load event after swapping', function() {
+    this.server.respondWith('POST', '/vars', function(xhr) {
+      var headers = xhr.requestHeaders
+      headers.i1.should.equal('load')
+      xhr.respond(200, {}, '<div id="test2" hx-post="/vars2" hx-headers="js:i2:event.type" hx-trigger="load"></div>')
+    })
+    var div = make('<div id="test" hx-post="/vars" hx-headers="js:i1:event.type" hx-trigger="load" hx-swap="afterend"></div>')
+    this.server.respond()
+
+    this.server.respondWith('POST', '/vars2', function(xhr) {
+      var headers = xhr.requestHeaders
+      headers.i2.should.equal('load')
+      xhr.respond(200, {}, 'Nice!')
+    })
+    this.server.respond()
+    var test2 = byId('test2')
+    test2.innerHTML.should.equal("Nice!")
+  })
 })

www/content/attributes/hx-headers.md

@@ -17,6 +17,12 @@ If you wish for `hx-headers` to *evaluate* the values given, you can prefix the
   <div hx-get="/example" hx-headers='js:{myVal: calculateValue()}'>Get Some HTML, Including a Dynamic Custom Header from Javascript in the Request</div>
 ```
 
+When using evaluated code you can access the `event` object.
+
+```html
+  <div hx-get="/example" hx-headers='js:{"hx-trigger-event": event.type}'>Get some HTML, including a custom header indicating which event triggered the request.</div>
+```
+
 ## Security Considerations
 
 * By default, the value of `hx-headers` must be valid [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON).