Add replace option to api as well

Author: MichaelWest22

src/htmx.js

@@ -4054,7 +4054,8 @@ var htmx = (function() {
             swapOverride: context.swap,
             select: context.select,
             returnPromise: true,
-            pushUrl: context.pushUrl
+            push: context.push,
+            replace: context.replace
           })
       }
     } else {
@@ -4633,82 +4634,39 @@ var htmx = (function() {
    * @return {HtmxHistoryUpdate}
    */
   function determineHistoryUpdates(elt, responseInfo) {
-    const xhr = responseInfo.xhr
+    const { xhr, pathInfo, etc } = responseInfo
 
-    //= ==========================================
-    // First consult response headers
-    //= ==========================================
-    let pathFromHeaders = null
-    let typeFromHeaders = null
-    if (hasHeader(xhr, /HX-Push:/i)) {
-      pathFromHeaders = xhr.getResponseHeader('HX-Push')
-      typeFromHeaders = 'push'
-    } else if (hasHeader(xhr, /HX-Push-Url:/i)) {
-      pathFromHeaders = xhr.getResponseHeader('HX-Push-Url')
-      typeFromHeaders = 'push'
-    } else if (hasHeader(xhr, /HX-Replace-Url:/i)) {
-      pathFromHeaders = xhr.getResponseHeader('HX-Replace-Url')
-      typeFromHeaders = 'replace'
-    }
+    let push = xhr.getResponseHeader('HX-Push') || xhr.getResponseHeader('HX-Push-Url')
+    let replace = xhr.getResponseHeader('HX-Replace-Url')
 
     // if there was a response header, that has priority
-    if (pathFromHeaders) {
-      if (pathFromHeaders === 'false') {
-        return {}
-      } else {
-        return {
-          type: typeFromHeaders,
-          path: pathFromHeaders
-        }
+    if (!push && !replace) {
+      // Next resolve via DOM values
+      push = getClosestAttributeValue(elt, 'hx-push-url') || etc.push
+      replace = getClosestAttributeValue(elt, 'hx-replace-url') || etc.replace
+      if (!push && !replace && getInternalData(elt).boosted) {
+        push = 'true'
       }
     }
 
-    //= ==========================================
-    // Next resolve via DOM values
-    //= ==========================================
-    const requestPath = responseInfo.pathInfo.finalRequestPath
-    const responsePath = responseInfo.pathInfo.responsePath
-
-    const pushUrl = getClosestAttributeValue(elt, 'hx-push-url') || responseInfo.etc.pushUrl
-    const replaceUrl = getClosestAttributeValue(elt, 'hx-replace-url')
-    const elementIsBoosted = getInternalData(elt).boosted
-
-    let saveType = null
-    let path = null
-
-    if (pushUrl) {
-      saveType = 'push'
-      path = pushUrl
-    } else if (replaceUrl) {
-      saveType = 'replace'
-      path = replaceUrl
-    } else if (elementIsBoosted) {
-      saveType = 'push'
-      path = responsePath || requestPath // if there is no response path, go with the original request path
+    let path = push || replace
+    // unset or false indicates no push, return empty object
+    if (!path || path === 'false') {
+      return {}
     }
 
-    if (path) {
-    // false indicates no push, return empty object
-      if (path === 'false') {
-        return {}
-      }
-
-      // true indicates we want to follow wherever the server ended up sending us
-      if (path === 'true') {
-        path = responsePath || requestPath // if there is no response path, go with the original request path
-      }
-
-      // restore any anchor associated with the request
-      if (responseInfo.pathInfo.anchor && path.indexOf('#') === -1) {
-        path = path + '#' + responseInfo.pathInfo.anchor
-      }
+    // true indicates we want to follow wherever the server ended up sending us
+    if (path === 'true') {
+      path = pathInfo.responsePath || pathInfo.finalRequestPath // if there is no response path, go with the original request path
+    }
+    // restore any anchor associated with the request
+    if (pathInfo.anchor && path.indexOf('#') === -1) {
+      path = path + '#' + pathInfo.anchor
+    }
 
-      return {
-        type: saveType,
-        path
-      }
-    } else {
-      return {}
+    return {
+      type: push ? 'push' : 'replace',
+      path
     }
   }
 
@@ -4798,7 +4756,7 @@ var htmx = (function() {
         redirectPath = redirectSwapSpec.path
         delete redirectSwapSpec.path
       }
-      redirectSwapSpec.pushUrl = redirectSwapSpec.pushUrl || 'true'
+      redirectSwapSpec.push = redirectSwapSpec.push || 'true'
       ajaxHelper('get', redirectPath, redirectSwapSpec)
       return
     }
@@ -5215,7 +5173,8 @@ var htmx = (function() {
  * @property {Object|FormData} [values]
  * @property {Record<string,string>} [headers]
  * @property {string} [select]
- * @property {string} [pushUrl]
+ * @property {string} [push]
+ * @property {string} [replace]
  */
 
 /**
@@ -5262,7 +5221,8 @@ var htmx = (function() {
  * @property {Object|FormData} [values]
  * @property {boolean} [credentials]
  * @property {number} [timeout]
- * @property {string} [pushUrl]
+ * @property {string} [push]
+ * @property {string} [replace]
  */
 
 /**

test/core/api.js

@@ -657,29 +657,59 @@ describe('Core htmx API test', function() {
     htmx.process(div.firstChild)
   })
 
-  it('ajax api pushUrl should push an element into the cache when true', function() {
+  it('ajax api push Url should push an element into the cache when true', function() {
     this.server.respondWith('POST', '/test123', 'Clicked!')
 
     var div = make("<div id='d1'></div>")
     htmx.ajax('POST', '/test123', {
       target: '#d1',
       swap: 'innerHTML',
-      pushUrl: 'true'
+      push: 'true'
     })
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')
     var path = sessionStorage.getItem('htmx-current-path-for-history')
     path.should.equal('/test123')
   })
 
-  it('ajax api pushUrl should push an element into the cache when string', function() {
+  it('ajax api push Url should push an element into the cache when string', function() {
     this.server.respondWith('POST', '/test', 'Clicked!')
 
     var div = make("<div id='d1'></div>")
     htmx.ajax('POST', '/test', {
       target: '#d1',
       swap: 'innerHTML',
-      pushUrl: '/abc123'
+      push: '/abc123'
+    })
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked!')
+    var path = sessionStorage.getItem('htmx-current-path-for-history')
+    path.should.equal('/abc123')
+  })
+
+  it('ajax api replace Url should replace an element into the cache when true', function() {
+    this.server.respondWith('POST', '/test123', 'Clicked!')
+
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('POST', '/test123', {
+      target: '#d1',
+      swap: 'innerHTML',
+      replace: 'true'
+    })
+    this.server.respond()
+    div.innerHTML.should.equal('Clicked!')
+    var path = sessionStorage.getItem('htmx-current-path-for-history')
+    path.should.equal('/test123')
+  })
+
+  it('ajax api replace Url should replace an element into the cache when string', function() {
+    this.server.respondWith('POST', '/test', 'Clicked!')
+
+    var div = make("<div id='d1'></div>")
+    htmx.ajax('POST', '/test', {
+      target: '#d1',
+      swap: 'innerHTML',
+      replace: '/abc123'
     })
     this.server.respond()
     div.innerHTML.should.equal('Clicked!')

test/core/headers.js

@@ -426,9 +426,9 @@ describe('Core htmx AJAX headers', function() {
     }, 30)
   })
 
-  it('should not push new Url on HX-Location if pushUrl false', function(done) {
+  it('should not push new Url on HX-Location if push Url false', function(done) {
     sessionStorage.setItem('htmx-current-path-for-history', '/old')
-    this.server.respondWith('GET', '/test', [200, { 'HX-Location': '{"pushUrl":"false", "path":"/test2", "target":"#work-area"}' }, ''])
+    this.server.respondWith('GET', '/test', [200, { 'HX-Location': '{"push":"false", "path":"/test2", "target":"#work-area"}' }, ''])
     this.server.respondWith('GET', '/test2', [200, {}, '<div>Yay! Welcome</div>'])
     var div = make('<div id="testdiv" hx-trigger="click" hx-get="/test"></div>')
     div.click()
@@ -442,11 +442,11 @@ describe('Core htmx AJAX headers', function() {
     }, 30)
   })
 
-  it('should push different Url on HX-Location if pushUrl is string', function(done) {
+  it('should push different Url on HX-Location if push Url is string', function(done) {
     sessionStorage.removeItem('htmx-current-path-for-history')
     var HTMX_HISTORY_CACHE_NAME = 'htmx-history-cache'
     sessionStorage.removeItem(HTMX_HISTORY_CACHE_NAME)
-    this.server.respondWith('GET', '/test', [200, { 'HX-Location': '{"pushUrl":"/abc123", "path":"/test2", "target":"#work-area"}' }, ''])
+    this.server.respondWith('GET', '/test', [200, { 'HX-Location': '{"push":"/abc123", "path":"/test2", "target":"#work-area"}' }, ''])
     this.server.respondWith('GET', '/test2', [200, {}, '<div>Yay! Welcome</div>'])
     var div = make('<div id="testdiv" hx-trigger="click" hx-get="/test"></div>')
     div.click()

www/content/api.md

@@ -65,7 +65,8 @@ or
     * `values` - values to submit with the request
     * `headers` - headers to submit with the request
     * `select` - allows you to select the content you want swapped from a response
-    * `pushUrl` - can be `'true'` or a path to push a URL into browser location history
+    * `push` - can be `'true'` or a path to push a URL into browser location history
+    * `replace` - can be `'true'` or a path to replace the URL in the browser location history
 
 ##### Example
 

www/content/headers/hx-location.md

@@ -30,7 +30,8 @@ Path is required and is url to load the response from. The rest of the data mirr
 * `values` - values to submit with the request
 * `headers` - headers to submit with the request
 * `select` - allows you to select the content you want swapped from a response
-* `pushUrl` - set to `'false'` or a path string to prevent or override the URL pushed to browser location history
+* `push` - set to `'false'` or a path string to prevent or override the URL pushed to browser location history
+* `replace` - a path string to prevent or override the URL replaced in the browser location history
 
 ## Notes