spa applicaiton listen url change|-|&tag=JS

on-change-url.js&env=plain

import _ from 'lodash'

// eslint-disable-next-line no-undef
class URLChangeEvent extends HashChangeEvent {
  get [Symbol.toStringTag] () {
    return 'URLChangeEvent'
  }
}

let urlCache = window.location.href

const onURLChange = () => {
  if (window.location.href !== urlCache) {
    const event = new URLChangeEvent('urlchange', {
      oldURL: urlCache,
      newURL: window.location.href
    })
    window.dispatchEvent(event)
    typeof window.onurlchange === 'function' && window.onurlchange(event)
    urlCache = window.location.href
  }
}

const registryOnChangeURL = _.once(() => {
  const pushStateNative = window.history.pushState
  window.history.pushState = (...args) => {
    pushStateNative.apply(window.history, args)
    onURLChange()
  }
  window.addEventListener('hashchange', onURLChange)
})

export { registryOnChangeURL }