Add replaceNode switch (#141)

* Add replaceNode switch

* Add test for replaceNode()

* Update TS definitions

README.md

@@ -262,6 +262,7 @@ Callbacks are bound to Pjax instance itself to allow you to reuse it (ex: `this.
 
 - `Pjax.switches.outerHTML`: default behavior, replace elements using outerHTML
 - `Pjax.switches.innerHTML`: replace elements using innerHTML and copy className too
+- `Pjax.switches.replaceNode`: replace elements using replaceChild
 - `Pjax.switches.sideBySide`: smart replacement that allows you to have both elements in the same parent when you want to use CSS animations. Old elements are removed when all children have been fully animated ([animationEnd](http://www.w3.org/TR/css3-animations/#animationend) event triggered)
 
 ###### Create a switch callback

index.d.ts

@@ -1,4 +1,6 @@
 declare class Pjax {
+  options: Pjax.IOptions;
+
   constructor(options?: Partial<Pjax.IOptions>);
 
   static switches: {
@@ -91,7 +93,7 @@ declare class Pjax {
    *   }
    * </pre>
    */
-  [key: string]: Function;
+  [key: string]: Function | Pjax.IOptions;
 }
 
 declare namespace Pjax {
@@ -180,7 +182,8 @@ type ElementFunction = (el: Element) => void;
 declare enum DefaultSwitches {
   innerHTML = "innerHTML",
   ouetrHTML = "outerHTML",
-  sideBySide = "sideBySide"
+  sideBySide = "sideBySide",
+  replaceNode = "replaceNode"
 }
 
 export = Pjax;

lib/switches.js

@@ -26,6 +26,12 @@ module.exports = {
     this.onSwitch()
   },
 
+  // Equivalent to outerHTML(), but doesn't require switchElementsAlt() for <head> and <body>
+  replaceNode: function(oldEl, newEl) {
+    oldEl.parentNode.replaceChild(newEl, oldEl)
+    this.onSwitch()
+  },
+
   sideBySide: function(oldEl, newEl, options, switchOptions) {
     var forEach = Array.prototype.forEach
     var elsToRemove = []

tests/lib/switches.js

@@ -0,0 +1,24 @@
+var tape = require("tape")
+var switches = require("../../lib/switches")
+var noop = require("../../lib/util/noop")
+
+tape("test replaceNode switch", function(t) {
+  var replaceNode = switches.replaceNode
+
+  var doc = document.implementation.createHTMLDocument()
+
+  var container = doc.createElement("div")
+  container.innerHTML = "<p>Original Text</p>"
+  doc.body.appendChild(container)
+
+  var p = doc.createElement("p")
+  p.innerHTML = "New Text"
+
+  replaceNode.bind({
+    onSwitch: noop
+  })(doc.querySelector("p"), p)
+
+  t.equals(doc.querySelector("div").innerHTML, "<p>New Text</p>", "Elements correctly switched")
+
+  t.end()
+})