migrate to turbo 8

app/javascript/application.js

@@ -1,5 +1,4 @@
-import '@hotwired/turbo'
-import { encodeMethodIntoRequestBody } from '@hotwired/turbo-rails/app/javascript/turbo/fetch_requests'
+import '@hotwired/turbo-rails'
 
 import { createApp, reactive } from 'vue'
 import TemplateBuilder from './template_builder/builder'
@@ -69,9 +68,7 @@ import OpenModalMobile from './elements/open_modal_mobile'
 import HistoryBack from './elements/history_back'
 import DatePlaceholder from './elements/date_placeholder'
 
-import * as TurboInstantClick from './lib/turbo_instant_click'
 
-TurboInstantClick.start()
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -83,7 +80,6 @@ document.addEventListener('keyup', (e) => {
   }
 })
 
-document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:before-fetch-request', (event) => {
   event.detail.fetchOptions.headers['X-Turbo'] = 'true'
 })

app/javascript/lib/turbo_instant_click.js

@@ -1,98 +0,0 @@
-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', 'X-Turbo': '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 && turboFrame.getAttribute('target') !== '_top') {
-      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 }

app/views/layouts/application.html.erb

@@ -7,6 +7,8 @@
     <% end %>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <%= csrf_meta_tags %>
+    <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-refresh-scroll" content="preserve">
     <% if ENV['ROLLBAR_CLIENT_TOKEN'] %>
       <meta name="rollbar-token" content="<%= ENV.fetch('ROLLBAR_CLIENT_TOKEN', nil) %>">
       <%= javascript_pack_tag 'rollbar', 'application', defer: true %>

app/views/shared/_navbar.html.erb

@@ -42,7 +42,7 @@
           </li>
           <% if !Docuseal.demo? && can?(:manage, EncryptedConfig) %>
             <li>
-              <%= link_to Docuseal.multitenant? ? console_redirect_index_path : Docuseal::CONSOLE_URL, data: { prefetch: false }, class: 'flex items-center' do %>
+              <%= link_to Docuseal.multitenant? ? console_redirect_index_path : Docuseal::CONSOLE_URL, data: { turbo_prefetch: false }, class: 'flex items-center' do %>
                 <%= svg_icon('terminal', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
                 <%= t('console') %>
               <% end %>

app/views/shared/_navbar_buttons.html.erb

@@ -1,7 +1,7 @@
 <% if signed_in? && current_user != true_user %>
   <%= render 'shared/test_alert' %>
 <% elsif request.path.starts_with?('/settings') %>
-  <%= link_to "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premises" }.to_query}", class: 'hidden md:inline-flex btn btn-warning btn-sm', data: { prefetch: false } do %>
+  <%= link_to "#{Docuseal::CLOUD_URL}/sign_up?#{{ redir: "#{Docuseal::CONSOLE_URL}/on_premises" }.to_query}", class: 'hidden md:inline-flex btn btn-warning btn-sm', data: { turbo_prefetch: false } do %>
     <%= t('upgrade') %>
   <% end %>
   <span class="hidden md:inline-flex h-3 border-r border-base-content"></span>