Inherit keyword in hx-include / hx-indicator

bigskysoftware · Dec 13, 2024 · 2f5c60a · 2f5c60a
1 parent db42b46
commit 2f5c60a
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 0 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -1350,6 +1350,16 @@ var htmx = (function() {
         return [findThisElement(elt, attrName)]
       } else {
         const result = querySelectorAllExt(elt, attrTarget)
+        // find `inherit` whole word in value, make sure it's surrounded by commas or is at the start/end of string
+        const shouldInherit = /(^|,)(\s*)inherit(\s*)($|,)/.test(attrTarget)
+        if (shouldInherit) {
+          const eltToInheritFrom = asElement(getClosestMatch(elt, function(parent) {
+            return parent !== elt && hasAttribute(asElement(parent), attrName)
+          }))
+          if (eltToInheritFrom) {
+            result.push(...findAttributeTargets(eltToInheritFrom, attrName))
+          }
+        }
         if (result.length === 0) {
           logError('The selector "' + attrTarget + '" on ' + attrName + ' returned no matches!')
           return [DUMMY_ELT]

diff --git a/test/attributes/hx-include.js b/test/attributes/hx-include.js
@@ -336,4 +336,88 @@ describe('hx-include attribute', function() {
     this.server.respond()
     btn.innerHTML.should.equal('Clicked!')
   })
+
+  it('`inherit` can be used to expand parent hx-include', function() {
+    this.server.respondWith('POST', '/include', function(xhr) {
+      var params = getParameters(xhr)
+      params.i1.should.equal('test1')
+      params.i2.should.equal('test2')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+    make('<div hx-include="#i1">' +
+      '   <button id="btn" hx-include="inherit, #i2" hx-post="/include"></button>' +
+      '</div>' +
+      '<input id="i1" name="i1" value="test1"/>' +
+      '<input id="i2" name="i2" value="test2"/>')
+    var btn = byId('btn')
+    btn.click()
+    this.server.respond()
+    btn.innerHTML.should.equal('Clicked!')
+  })
+
+  it('`inherit` can be used to expand multiple parents hx-include', function() {
+    this.server.respondWith('POST', '/include', function(xhr) {
+      var params = getParameters(xhr)
+      params.i1.should.equal('test1')
+      params.i2.should.equal('test2')
+      params.i3.should.equal('test3')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+    make('<div hx-include="#i1">' +
+      '   <div hx-include="inherit, #i2">' +
+      '       <button id="btn" hx-include="inherit, #i3" hx-post="/include"></button>' +
+      '   </div>' +
+      '</div>' +
+      '<input id="i1" name="i1" value="test1"/>' +
+      '<input id="i2" name="i2" value="test2"/>' +
+      '<input id="i3" name="i3" value="test3"/>')
+    var btn = byId('btn')
+    btn.click()
+    this.server.respond()
+    btn.innerHTML.should.equal('Clicked!')
+  })
+
+  it('`inherit` chain breaks properly', function() {
+    this.server.respondWith('POST', '/include', function(xhr) {
+      var params = getParameters(xhr)
+      should.not.exist(params.i1)
+      params.i2.should.equal('test2')
+      params.i3.should.equal('test3')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+    make('<div hx-include="#i1">' +
+      '   <div hx-include="#i2">' +
+      '       <button id="btn" hx-include="inherit, #i3" hx-post="/include"></button>' +
+      '   </div>' +
+      '</div>' +
+      '<input id="i1" name="i1" value="test1"/>' +
+      '<input id="i2" name="i2" value="test2"/>' +
+      '<input id="i3" name="i3" value="test3"/>')
+    var btn = byId('btn')
+    btn.click()
+    this.server.respond()
+    btn.innerHTML.should.equal('Clicked!')
+  })
+
+  it('`inherit` syntax regex properly catches keyword', function() {
+    this.server.respondWith('POST', '/include', function(xhr) {
+      var params = getParameters(xhr)
+      params.i1.should.equal('test1')
+      params.i2.should.equal('test2')
+      params.i3.should.equal('test3')
+      xhr.respond(200, {}, 'Clicked!')
+    })
+    make('<div hx-include="#i1">' +
+      '   <div hx-include="#i2,   inherit,.nonexistent-class">' +
+      '       <button id="btn" hx-include="customtag,inherit   , #i3" hx-post="/include"></button>' +
+      '   </div>' +
+      '</div>' +
+      '<input id="i1" name="i1" value="test1"/>' +
+      '<input id="i2" name="i2" value="test2"/>' +
+      '<input id="i3" name="i3" value="test3"/>')
+    var btn = byId('btn')
+    btn.click()
+    this.server.respond()
+    btn.innerHTML.should.equal('Clicked!')
+  })
 })
diff --git a/test/attributes/hx-indicator.js b/test/attributes/hx-indicator.js
@@ -123,4 +123,68 @@ describe('hx-indicator attribute', function() {
     b2.classList.contains('htmx-request').should.equal(false)
     a1.classList.contains('htmx-request').should.equal(false)
   })
+
+  it('`inherit` can be used to expand parent hx-indicator', function() {
+    this.server.respondWith('GET', '/test', 'Clicked!')
+    make('<div hx-indicator="#a1">' +
+      '   <button id="btn" hx-get="/test" hx-indicator="inherit, #a2">Click Me!</button>' +
+      '</div>')
+    var btn = byId('btn')
+    var a1 = make('<a id="a1"></a>')
+    var a2 = make('<a id="a2"></a>')
+    btn.click()
+    btn.classList.contains('htmx-request').should.equal(false)
+    a1.classList.contains('htmx-request').should.equal(true)
+    a2.classList.contains('htmx-request').should.equal(true)
+    this.server.respond()
+    btn.classList.contains('htmx-request').should.equal(false)
+    a1.classList.contains('htmx-request').should.equal(false)
+    a2.classList.contains('htmx-request').should.equal(false)
+  })
+
+  it('`inherit` can be used to expand multiple parents hx-indicator', function() {
+    this.server.respondWith('GET', '/test', 'Clicked!')
+    make('<div hx-indicator="#a1">' +
+      '   <div hx-indicator="inherit, #a2">' +
+      '       <button id="btn" hx-get="/test" hx-indicator="inherit, #a3">Click Me!</button>' +
+      '   </div>' +
+      '</div>')
+    var btn = byId('btn')
+    var a1 = make('<a id="a1"></a>')
+    var a2 = make('<a id="a2"></a>')
+    var a3 = make('<a id="a3"></a>')
+    btn.click()
+    btn.classList.contains('htmx-request').should.equal(false)
+    a1.classList.contains('htmx-request').should.equal(true)
+    a2.classList.contains('htmx-request').should.equal(true)
+    a3.classList.contains('htmx-request').should.equal(true)
+    this.server.respond()
+    btn.classList.contains('htmx-request').should.equal(false)
+    a1.classList.contains('htmx-request').should.equal(false)
+    a2.classList.contains('htmx-request').should.equal(false)
+    a3.classList.contains('htmx-request').should.equal(false)
+  })
+
+  it('`inherit` chain breaks properly', function() {
+    this.server.respondWith('GET', '/test', 'Clicked!')
+    make('<div hx-indicator="#a1">' +
+      '   <div hx-indicator="#a2">' +
+      '       <button id="btn" hx-get="/test" hx-indicator="inherit, #a3">Click Me!</button>' +
+      '   </div>' +
+      '</div>')
+    var btn = byId('btn')
+    var a1 = make('<a id="a1"></a>')
+    var a2 = make('<a id="a2"></a>')
+    var a3 = make('<a id="a3"></a>')
+    btn.click()
+    btn.classList.contains('htmx-request').should.equal(false)
+    a1.classList.contains('htmx-request').should.equal(false)
+    a2.classList.contains('htmx-request').should.equal(true)
+    a3.classList.contains('htmx-request').should.equal(true)
+    this.server.respond()
+    btn.classList.contains('htmx-request').should.equal(false)
+    a1.classList.contains('htmx-request').should.equal(false)
+    a2.classList.contains('htmx-request').should.equal(false)
+    a3.classList.contains('htmx-request').should.equal(false)
+  })
 })