Jekyll Webpack Part Three - Diffing for partial reloads

import morph from 'nanomorph'

// every time a link is clicked this function is called to push the history state onto the stack
function historyHandler(e) {
  e.preventDefault();
  window.history.pushState({ url: this.pathname }, "", this.pathname);
}

// as soon as the click has been initiated, show the spinner
function showSpinner (template) {
  const clone = template.content.cloneNode(true)
  document.body.appendChild(clone)
}

// this function wraps nanomorph and is called after the ajax request fetches your page and does the morphing
function updatePage(html) {
  const parser = new DOMParser();
  const page = parser.parseFromString(html, 'text/html');

  morph(document.body, page.body)
}

// the hideSpinner function is called as the last part of the success callback of the fetch
function hideSpinner () {
  const spinner = document.getElementById('loadingSpinner')
  spinner.remove()
}

// patch historys pushState with a new callback
(function(history){
  var pushState = history.pushState;
  window.history.pushState = function(state, name, url) {
    if (typeof history.onpushstate == "function") {
      window.history.onpushstate(state, name, url);
    }
    return pushState.apply(history, arguments);
  };
})(window.history);

// since we are making the site a single page app - the DOMContentLoaded event listener only needs to happen once. All subsequent reloads will be handled with fetch
document.addEventListener("DOMContentLoaded", function(event) {
  var siteUrl = '//'+(document.location.hostname||document.location.host);
  const template = document.getElementsByTagName('template')[0]
  console.log(template)

  // set up the history handling
  document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
      if (target.matches('a[href^="/"], a[href^="'+siteUrl+'"]')) {
        historyHandler.call(target, e);
        break;
      }
    }
  }, false);

  // do the reload in the callbacks of history events
  window.onpopstate = function(e) {
    var state = window.history.state;
    showSpinner(template)

    // now fetch the static html page from the backend
    fetch(state.url)
      .then(response => response.text())
      .then(html => updatePage(html))
  }

  window.history.onpushstate = function(state, name, url) {
    showSpinner(template)

    fetch(url)
      .then(response => response.text())
      .then(html => updatePage(html))
  }
});