Add error logging for bad oob swap modifers

Author: MichaelWest22

src/htmx.js

@@ -1467,6 +1467,9 @@ var htmx = (function() {
         swapSpec = { swapStyle: oobValue === 'true' ? 'outerHTML' : oobValue }
       }
     }
+    if (WHITESPACE.test(swapSpec.swapStyle)) {
+      logError('invalid modifier in hx-swap-oob: ' + oobValue)
+    }
 
     oobElement.removeAttribute('hx-swap-oob')
     oobElement.removeAttribute('data-hx-swap-oob')

test/attributes/hx-swap-oob.js

@@ -485,9 +485,35 @@ describe('hx-swap-oob attribute', function() {
   it('handles textContent swap style', function() {
     this.server.respondWith('GET', '/test', '<div id="d2" hx-swap-oob="textContent"><p>Swapped16</p><p>!</p></div>')
     var div = make('<div hx-get="/test">click me</div>')
-    var div2 = make('<div id="d2"><div>')
+    var div2 = make('<div id="d2"></div>')
     div.click()
     this.server.respond()
     div2.innerHTML.should.equal('Swapped16!')
   })
+
+  it('invalid swap modifers with ":" will prevent oob swap and log error', function() {
+    this.server.respondWith('GET', '/test', '<div id="d2" hx-swap-oob="innerHTML swapp:1s">Swapped17</div>')
+    var div = make('<div hx-get="/test">click me</div>')
+    var div2 = make('<div id="d2"></div>')
+    var errorSpy = sinon.spy(console, 'error')
+    try {
+      div.click()
+      this.server.respond()
+    } catch (e) {}
+    errorSpy.called.should.equal(true)
+    div2.innerHTML.should.equal('')
+    errorSpy.restore()
+  })
+
+  it('invalid swap modifers without ":" will fall back to innerHTML swap and log error', function() {
+    this.server.respondWith('GET', '/test', '<div id="d2" hx-swap-oob="outerHTML swapp">Swapped18</div>')
+    var div = make('<div hx-get="/test">click me</div>')
+    var div2 = make('<div id="d2"></div>')
+    var errorSpy = sinon.spy(console, 'error')
+    div.click()
+    this.server.respond()
+    errorSpy.called.should.equal(true)
+    div2.innerHTML.should.equal('Swapped18')
+    errorSpy.restore()
+  })
 })

www/content/attributes/hx-swap-oob.md

@@ -50,7 +50,7 @@ The following modifers from [`hx-swap`](@/attributes/hx-swap.md) can now be incl
 * `strip:` - Override the stripping or not of the oob elements encapsulating tag pair
 * `target:` - Set a custom CSS selector to use as the target
 
-Before modifers were supported the swap strategy value could not contain spaces and the target selector was placed after a colon like `innerHTML:#status`. Now when the `hx-swap-oob` value is parsed and checked to see if is a valid swap specification with modifers before using it. If this parsing fails it falls back to the old legacy way and treats the first `:` as a seperator between a swap style and CSS selector. Any invalid or incorrectly spelt modifers used will prevent it using a valid selector preventing the oob swap.
+Before modifers were supported the swap strategy value could not contain spaces and the target selector was placed after a colon like `innerHTML:#status`. Now the `hx-swap-oob` value is parsed and checked to see if is a valid swap specification with modifers before using it. If this parsing fails it falls back to the old legacy method and treats the first `:` as a seperator between a swap style and CSS selector. Any invalid or incorrectly spelt modifers will log errors and will either fail or fall back to an innerHTML oob swap.
 
 ### Using alternate swap strategies