live-reload.js

// This isn't magic. If you want custom behavior, copy and modify this however you like.
//
// As with any custom js, add to a single page via the `script` combinator
//  page = do
//     pure $ do
//        el "This is my page"
//        script "custom.js"
//
// or to the entire app by adding a script tag to your document function. See Example.App.toDocument
//
// Consider conditionally adding it based on ENV
console.log("Live Reload enabled")

function showNotification(message) {
  const notification = document.createElement("div")
  notification.classList.add("live-reload")
  notification.innerHTML = message
  jackIn(notification.style)
  notification.addEventListener("click", function () {
    notification.remove()
  })
  document.body.appendChild(notification)
}

document.addEventListener("hyp-socket-disconnect", () => {
  showNotification("DISCONNECTED - will reload on reconnect")
})

document.addEventListener("hyp-socket-reconnect", () => {
  setTimeout(() => {
    location.reload()
  }, 0)
})

// duplicate cyber style stuff here so the default live reload is fun
function jackIn(style) {
  style.position = "fixed"
  style.bottom = "15px"
  style.left = "15px"
  style.right = "15px"
  style.backgroundColor = "rgba(160, 63, 56, 1.0)"
  style.color = "#fff"
  style.borderTop = "solid #EC6458 4px"
  style.padding = "15px"
  style.zIndex = "1000"
  style.clipPath = "polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%)"
}