Evaluate hx-vals with "this" referring to the element it is defined on

Author: scrhartley

src/htmx.js

@@ -3878,9 +3878,9 @@ var htmx = (function() {
       if (evaluateValue) {
         varsValues = maybeEval(elt, function() {
           if (event) {
-            return Function('event', 'return (' + str + ')')(event)
+            return Function('event', 'return (' + str + ')').call(elt, event)
           } else { // allow window.event to be accessible
-            return Function('return (' + str + ')')()
+            return Function('return (' + str + ')').call(elt)
           }
         }, {})
       } else {

test/attributes/hx-vals.js

@@ -364,4 +364,16 @@ describe('hx-vals attribute', function() {
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
   })
+
+  it('js: this refers to the element with the hx-vals attribute', function() {
+    this.server.respondWith('POST', '/vars', function(xhr) {
+      var params = getParameters(xhr)
+      params.i1.should.equal('test')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+    var div = make('<div hx-post="/vars" hx-vals="javascript:{ ...this.dataset }" data-i1="test"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked!')
+  })
 })

www/content/attributes/hx-vals.md

@@ -45,3 +45,4 @@ In this example, if `foo()` returns an object like `{name: "John", age: 30}`, bo
 * `hx-vals` is inherited and can be placed on a parent element.
 * A child declaration of a variable overrides a parent declaration.
 * Input values with the same name will be overridden by variable declarations.
+* When using `javascript:`, `this` refers to the element with the `hx-vals` attribute