Working with Turbolinks events

README.md

Here are the Turbolinks events which fire when you do things.

first visit: load

click: click before-visit request-start visit request-end before-cache before-render render load

back: visit before-cache before-render render load

cached: click before-visit request-start visit before-cache before-render render request-end before-render render load

index.js

const tlEvent = event => {
  console.log(...event)
}

document.addEventListener('turbolinks:click', e => {
  tlEvent([e.type, e.originalEvent.data.url])
}) // e.preventDefault() to restore bubble
document.addEventListener('turbolinks:before-visit', e => {
  tlEvent([e.type, e.originalEvent.data.url])
}) // e.preventDefault() to prevent visit
document.addEventListener('turbolinks:request-start', e => {
  tlEvent([e.type, e.originalEvent.data.xhr])
})
document.addEventListener('turbolinks:visit', e => {
  tlEvent([e.type])
}) // after a visit starts
document.addEventListener('turbolinks:request-end', e => {
  tlEvent([e.type, e.originalEvent.data.xhr])
})
document.addEventListener('turbolinks:before-cache', e => {
  tlEvent([e.type])
}) // restore page to neutral state for caching
document.addEventListener('turbolinks:before-render', e => {
  tlEvent([e.type, e.originalEvent.data.newBody])
})
document.addEventListener('turbolinks:render', e => {
  tlEvent([e.type])
}) // fires after rendering cached version and again after fresh version
document.addEventListener('turbolinks:load', e => {
  tlEvent([e.type, e.originalEvent.data.timing])
})

stimulus-turbolinks.js

// if your controllers have a `teardown` method defined, run it right before Turbolinks caches the page

document.addEventListener('turbolinks:before-cache', () => {
  application.controllers.forEach(controller => {
    if (typeof controller.teardown === 'function') {
      controller.teardown()
    }
  })
})