fix oobBeforeSwap and hx-select-oob backwards compat

Author: MichaelWest22

src/htmx.js

@@ -1478,19 +1478,25 @@ var htmx = (function() {
       forEach(
         targets,
         function(target) {
+          let fragment
           const oobElementClone = oobElement.cloneNode(true)
-          const fragment = getDocument().createDocumentFragment()
+          fragment = getDocument().createDocumentFragment()
           fragment.appendChild(oobElementClone)
           if (swapSpec.strip === undefined && !isInlineSwap(swapSpec.swapStyle, target)) {
             swapSpec.strip = true
           }
+          if (swapSpec.strip) {
+            // @ts-ignore if elt is template, content will be valid so use as inner content
+            fragment = oobElementClone.content || asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
+            swapSpec.strip = undefined
+          }
 
-          const beforeSwapDetails = { shouldSwap: true, target, fragment }
+          const beforeSwapDetails = { shouldSwap: true, target, fragment, swapSpec }
           if (!triggerEvent(target, 'htmx:oobBeforeSwap', beforeSwapDetails)) return
 
           target = beforeSwapDetails.target // allow re-targeting
           if (beforeSwapDetails.shouldSwap) {
-            swap(target, fragment, swapSpec, {
+            swap(target, fragment, beforeSwapDetails.swapSpec, {
               contextElement: target,
               afterSwapCallback: function(settleInfo) {
                 forEach(settleInfo.elts, function(elt) {
@@ -1846,7 +1852,7 @@ var htmx = (function() {
   }
 
   /**
-   * @param {DocumentFragment} fragment
+   * @param {DocumentFragment|ParentNode} fragment
    * @param {HtmxSettleInfo} settleInfo
    * @param {Node|Document} [rootNode]
    */
@@ -1870,7 +1876,7 @@ var htmx = (function() {
    * Implements complete swapping pipeline, including: delay, view transitions, focus and selection preservation,
    * title updates, scroll, OOB swapping, normal swapping and settling
    * @param {string|Element} target
-   * @param {string|DocumentFragment} content
+   * @param {string|ParentNode} content
    * @param {HtmxSwapSpecification} swapSpec
    * @param {SwapOptions} [swapOptions]
    * @param {HtmxSettleInfo} [oobSettleInfo]
@@ -1911,12 +1917,12 @@ var htmx = (function() {
         target.textContent = content
       // Otherwise, make the fragment and process it
       } else {
+        /** @type DocumentFragment|ParentNode */
         let fragment = typeof content === 'string' ? makeFragment(content) : content
 
         // @ts-ignore if fragment is a ParentNode title will be undefined which is fine
         settleInfo.title = swapOptions.title || fragment.title
         if (swapOptions.historyRequest) {
-          // @ts-ignore fragment can be a parentNode Element
           fragment = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
         }
 
@@ -1926,12 +1932,15 @@ var htmx = (function() {
             const oobSelectValues = swapOptions.selectOOB.split(',')
             for (let i = 0; i < oobSelectValues.length; i++) {
               const oobSelectValue = oobSelectValues[i].split(':')
-              let id = oobSelectValue.shift().trim()
-              if (id.indexOf('#') === 0) {
-                id = id.substring(1)
-              }
+              const selector = oobSelectValue.shift().trim()
               const oobValue = oobSelectValue.length > 0 ? oobSelectValue.join(':') : 'true'
-              const oobElement = fragment.querySelector('#' + CSS.escape(id))
+              let oobElement
+              if (selector.indexOf('#') !== 0) {
+                oobElement = fragment.querySelector('#' + CSS.escape(selector)) // check if selector is an id first
+              }
+              if (!oobElement) {
+                oobElement = fragment.querySelector(selector) // then support any full selector
+              }
               if (oobElement) {
                 oobSwap(oobValue, oobElement, settleInfo, rootNode)
               }
@@ -1947,10 +1956,6 @@ var htmx = (function() {
           })
         }
 
-        if (swapSpec.strip) {
-          // @ts-ignore if element is really a template tag we can safely use its content otherwise use first child
-          fragment = fragment.firstElementChild?.content || fragment.firstElementChild // if this is not an inline swap, we use the content of the node, not the node itself
-        }
         // normal swap
         if (swapOptions.select) {
           const newFragment = getDocument().createDocumentFragment()
@@ -1959,6 +1964,9 @@ var htmx = (function() {
           })
           fragment = newFragment
         }
+        if (swapSpec.strip) {
+          fragment = fragment.firstElementChild
+        }
         handlePreservedElements(fragment)
         swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
         restorePreservedElements()

test/attributes/hx-select-oob.js

@@ -66,4 +66,26 @@ describe('hx-select-oob attribute', function() {
     var div2 = byId('d2')
     div2.innerHTML.should.equal('bar')
   })
+
+  it('basic hx-select-oob works with just an id without #', function() {
+    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
+    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="d2"></div>')
+    make('<div id="d2"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('<div id="d1">foo</div>')
+    var div2 = byId('d2')
+    div2.innerHTML.should.equal('bar')
+  })
+
+  it('basic hx-select-oob works with just a non id selector', function() {
+    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><span><div id='d2'>bar</div></span>")
+    var div = make('<div hx-get="/test" hx-select="#d1" hx-select-oob="span div"></div>')
+    make('<div id="d2"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('<div id="d1">foo</div>')
+    var div2 = byId('d2')
+    div2.innerHTML.should.equal('bar')
+  })
 })

test/attributes/hx-select.js

@@ -34,4 +34,13 @@ describe('BOOTSTRAP - htmx AJAX Tests', function() {
     this.server.respond()
     div.innerHTML.should.equal('<div id="d1">foo</div>')
   })
+
+  it('properly handles a select with strip:true', function() {
+    var i = 1
+    this.server.respondWith('GET', '/test', "<div id='d1'>foo</div><div id='d2'>bar</div>")
+    var div = make('<div hx-get="/test" hx-select="#d1" hx-swap="innerHTML strip:true"></div>')
+    div.click()
+    this.server.respond()
+    div.innerHTML.should.equal('foo')
+  })
 })

test/attributes/hx-swap-oob.js

@@ -420,7 +420,7 @@ describe('hx-swap-oob attribute', function() {
     byId('d3').innerHTML.should.equal('Swapped14')
   })
 
-  it.only('handles using template as the encapsulating tag of an inner swap', function() {
+  it('handles using template as the encapsulating tag of an inner swap', function() {
     this.server.respondWith('GET', '/test', '<template id="foo" hx-swap-oob="innerHTML"><tr><td>Swapped15</td></tr></template>')
     var div = make('<div hx-get="/test">click me</div>')
     make('<table><tbody id="foo"></tbody></table>')

www/content/events.md

@@ -275,7 +275,7 @@ You can also override the details of the history restoration request in this eve
 * `detail.item.content` - the content of the cache that will be swapped in
 * `detail.item.title` - the page title to update from the cache
 * `detail.path` - the path and query of the page being restored
-* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
+* `detial.swapSpec` - the swapSpec to be used containing the default swapStyle='innerHTML'
 
 ### Event - `htmx:historyCacheMiss` {#htmx:historyCacheMiss}
 
@@ -289,7 +289,7 @@ You can also modify the xhr request or other details before it makes the the req
 * `detail.historyElt` - the history element or body that will get replaced
 * `detail.xhr` - the `XMLHttpRequest` that will retrieve the remote content for restoration
 * `detail.path` - the path and query of the page being restored
-* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
+* `detial.swapSpec` - the swapSpec to be used containing the default swapStyle='innerHTML'
 
 ### Event - `htmx:historyCacheMissLoadError` {#htmx:historyCacheMissLoadError}
 
@@ -314,7 +314,7 @@ You can modify the details before it makes the swap to restore the history
 * `detail.xhr` - the `XMLHttpRequest`
 * `detail.path` - the path and query of the page being restored
 * `detail.response` - the response text that will be swapped in
-* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
+* `detial.swapSpec` - the swapSpec to be used containing the default swapStyle='innerHTML'
 
 ### Event - `htmx:historyRestore` {#htmx:historyRestore}
 
@@ -375,6 +375,7 @@ This event is triggered as part of an [out of band swap](@/docs.md#oob_swaps) an
 * `detail.shouldSwap` - if the content will be swapped (defaults to `true`)
 * `detail.target` - the target of the swap
 * `detail.fragment` - the response fragment
+* `detial.swapSpec` - the swapSpec to be used containing the swapStyle
 
 ### Event - `htmx:oobErrorNoTarget` {#htmx:oobErrorNoTarget}