urlchange.js

urlchange.js

// This module installs a custom global DOM event, 'urlchange', which is
// dispatched when the URL _semantically_ changes for any reason.
//
// It also alters URL behavior more generally. The URL is kept consistently in a
// canonical form, such that differences in the order of query parameters (other
// than same-key parameters, whose order is potentially meaningful) are
// eliminated. While the event is not fired on load, URL canonicalization may be
// performed.
//
// Like HashChangeEvent, URLChangeEvent has two properties, 'newURL' and
// 'oldURL', except they are instances of URL rather than strings.

class URLChangeEvent extends CustomEvent {
  constructor(newURL, oldURL) {
    super('urlchange');

    this.newURL = newURL;
    this.oldURL = oldURL;
  }
}

const { pushState, replaceState } = History.prototype;

Object.defineProperties(History.prototype, {
  pushState: {
    value() {
      pushState.apply(this, arguments);
      respond();
    }
  },
  replaceState: {
    value() {
      replaceState.apply(this, arguments);
      respond();
    }
  }
});

const respond = () => {
  const newURL = new URL(location);

  newURL.searchParams.sort();

  if (String(newURL) !== location.href) {
    history.replaceState(undefined, undefined, newURL);
    return;
  }

  if (String(newURL) !== String(oldURL)) {
    const event = new URLChangeEvent(newURL, oldURL);

    oldURL = newURL;

    console.debug(`Emitting URLChange global DOM event: ${ newURL }`);

    window.dispatchEvent(event);
  }
};

let oldURL = new URL(location);

oldURL.searchParams.sort();

if (String(oldURL) !== location.href) {
  replaceState.call(history, undefined, undefined, oldURL);
}

window.addEventListener('hashchange', respond);
window.addEventListener('popstate', respond);

class PathChangeEvent extends CustomEvent {
  constructor(newPath, oldPath) {
    super('pathchange');

    this.newPath = newPath;
    this.oldPath = oldPath;
  }
}

window.addEventListener('urlchange', ({ newURL, oldURL }) => {
  if (newURL.pathname !== oldURL.pathname) {
    console.debug(`Emitting PathChange global DOM event: ${ newURL.pathname }`);
    window.dispatchEvent(new PathChangeEvent(newURL.pathname, oldURL.pathname));
  }
});


class SearchChangeEvent extends CustomEvent {
  constructor(newSearchParams, oldSearchParams) {
    super('searchchange');

    this.newSearchParams = newSearchParams;
    this.oldSearchParams = oldSearchParams;
  }
}

window.addEventListener('urlchange', ({ newURL, oldURL }) => {
  if (newURL.search !== oldURL.search) {
    console.debug(`Emitting SearchChange global DOM event: ${ newURL.search }`);

    window.dispatchEvent(
      new SearchChangeEvent(newURL.searchParams, oldURL.searchParams)
    );
  }
});