add instantclick

app/javascript/application.js

@@ -1,4 +1,5 @@
-import '@hotwired/turbo-rails'
+import '@hotwired/turbo'
+import { encodeMethodIntoRequestBody } from '@hotwired/turbo-rails/app/javascript/turbo/fetch_requests'
 
 import { createApp, reactive } from 'vue'
 import TemplateBuilder from './template_builder/builder'
@@ -15,6 +16,10 @@ import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
 import AutoresizeTextarea from './elements/autoresize_textarea'
 
+import * as TurboInstantClick from './lib/turbo_instant_click'
+
+TurboInstantClick.start()
+
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
 })
@@ -37,6 +42,8 @@ window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 
+document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
+
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')

app/javascript/lib/turbo_instant_click.js

@@ -0,0 +1,98 @@
+const requestCache = new Map()
+const cacheTtl = 10 * 1000
+
+function isPreloadable (linkElement) {
+  const href = linkElement.getAttribute('href')
+
+  if (!href || href === '#' || linkElement.dataset.turbo === 'false' || linkElement.dataset.prefetch === 'false') {
+    return
+  }
+
+  if (linkElement.origin !== document.location.origin) {
+    return
+  }
+
+  if (!['http:', 'https:'].includes(linkElement.protocol)) {
+    return
+  }
+
+  if (linkElement.pathname + linkElement.search === document.location.pathname + document.location.search) {
+    return
+  }
+
+  if (linkElement.dataset.turboMethod && linkElement.dataset.turboMethod !== 'get') {
+    return
+  }
+
+  return true
+}
+
+function mouseoverListener (event) {
+  let linkElement
+
+  if (event.target.tagName === 'A') {
+    linkElement = event.target
+  } else {
+    linkElement = event.target.closest('a')
+  }
+
+  if (!linkElement) {
+    return
+  }
+
+  if (!isPreloadable(linkElement)) {
+    return
+  }
+
+  const url = linkElement.getAttribute('href')
+  const loc = new URL(url, location.protocol + '//' + location.host)
+  const absoluteUrl = loc.toString()
+
+  const cached = requestCache.get(absoluteUrl)
+
+  if (cached && cached.ttl > new Date()) {
+    return
+  }
+
+  const requestOptions = {
+    credentials: 'same-origin',
+    headers: { Accept: 'text/html, application/xhtml+xml', 'VND.PREFETCH': 'true' },
+    method: 'GET',
+    redirect: 'follow'
+  }
+
+  if (linkElement.dataset.turboFrame && linkElement.dataset.turboFrame !== '_top') {
+    requestOptions.headers['Turbo-Frame'] = linkElement.dataset.turboFrame
+  } else if (linkElement.dataset.turboFrame !== '_top') {
+    const turboFrame = linkElement.closest('turbo-frame')
+
+    if (turboFrame) {
+      requestOptions.headers['Turbo-Frame'] = turboFrame.id
+    }
+  }
+
+  requestCache.set(absoluteUrl, { request: fetch(absoluteUrl, requestOptions), ttl: new Date(new Date().getTime() + cacheTtl) })
+}
+
+function turboBeforeFetchRequest (event) {
+  if (event.target.tagName !== 'FORM' && event.detail.fetchOptions.method === 'GET') {
+    const cached = requestCache.get(event.detail.url.toString())
+
+    if (cached && cached.ttl > new Date()) {
+      event.detail.response = cached.request
+    }
+  }
+
+  requestCache.clear()
+}
+
+function start () {
+  if (!window.turboInstantClickEnabled) {
+    document.addEventListener('turbo:before-fetch-request', turboBeforeFetchRequest)
+    document.addEventListener('mouseover', mouseoverListener, { capture: true, passive: true })
+  }
+
+  window.turboInstantClickEnabled = true
+}
+
+export { start }