Replace turbolinks with turbo

Turbolinks is archived and was replaced by Turbo. All Turbolinks usages are replace by Turbo Drive for now.

alchemy_cms.gemspec

@@ -52,7 +52,7 @@ Gem::Specification.new do |gem|
   gem.add_runtime_dependency "sassc-rails", ["~> 2.1"]
   gem.add_runtime_dependency "simple_form", [">= 4.0", "< 6"]
   gem.add_runtime_dependency "sprockets", [">= 3.0", "< 5"]
-  gem.add_runtime_dependency "turbolinks", [">= 2.5"]
+  gem.add_runtime_dependency "turbo-rails", [">= 1.4"]
   gem.add_runtime_dependency "view_component", ["~> 3.0"]
 
   gem.add_development_dependency "capybara", ["~> 3.0"]

app/assets/javascripts/alchemy/admin.js

@@ -2,7 +2,6 @@
 // ------------------------------
 //= require jquery2
 //= require jquery_ujs
-//= require turbolinks
 //= require jquery-ui/effects/effect-fade
 //= require jquery-ui/widgets/draggable
 //= require jquery-ui/widgets/sortable

app/assets/javascripts/alchemy/alchemy.dirty.js.coffee

@@ -40,7 +40,7 @@ $.extend Alchemy,
         $form.submit()
     else if $(element).is("a")
       callback = ->
-        Turbolinks.visit(element.pathname)
+        Turbo.visit(element.pathname)
     if Alchemy.isPageDirty()
       Alchemy.openConfirmDialog Alchemy.t('page_dirty_notice'),
         title: Alchemy.t('warning')

app/assets/javascripts/alchemy/alchemy.initializer.js.coffee

@@ -1,6 +1,6 @@
 # Initialize all onload scripts at once.
 #
-# Called at jQuery ready event and Turbolinks page change event.
+# Called at jQuery ready event and Turbo page change event.
 #
 Alchemy.Initializer = ->
 
@@ -26,13 +26,13 @@ Alchemy.Initializer = ->
   $('select#change_locale').on 'change', (e) ->
     url = window.location.pathname
     delimiter = if url.match(/\?/) then '&' else '?'
-    Turbolinks.visit "#{url}#{delimiter}admin_locale=#{$(this).val()}"
+    Turbo.visit "#{url}#{delimiter}admin_locale=#{$(this).val()}"
 
   # Site select handler
   $('select#change_site').on 'change', (e) ->
     url = window.location.pathname
     delimiter = if url.match(/\?/) then '&' else '?'
-    Turbolinks.visit "#{url}#{delimiter}site_id=#{$(this).val()}"
+    Turbo.visit "#{url}#{delimiter}site_id=#{$(this).val()}"
 
   # Submit forms of selects with `data-autosubmit="true"`
   $('select[data-auto-submit="true"]').on 'change', (e) ->
@@ -46,18 +46,11 @@ Alchemy.Initializer = ->
     tagName = (event.target || event.srcElement).tagName
     key.isPressed('esc') || !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA')
 
-# Enabling the Turbolinks Progress Bar for v2.5
-Turbolinks.enableProgressBar() if Turbolinks.enableProgressBar
-
-# Turbolinks DOM Ready.
-# Handle both v2.5(page:change), and v.5.0 (turbolinks:load)
-$(document).on 'page:change turbolinks:load', ->
+$(document).on 'turbo:load', ->
   Alchemy.Initializer()
   return
 
-# Turbolinks before parsing a new page
-# Handle both v2.5(page:receive), and v.5.0 (turbolinks:request-end)
-$(document).on 'page:receive turbolinks:request-end', ->
+$(document).on 'turbo:before-fetch-request', ->
   # Ensure that all tinymce editors get removed before parsing a new page
   Alchemy.Tinymce.removeFrom $('.has_tinymce')
   return

app/assets/stylesheets/alchemy/base.scss

@@ -3,8 +3,8 @@ html {
   height: 100%;
   font-size: $base-font-size;
 
-  &.turbolinks-progress-bar::before,
-  .turbolinks-progress-bar {
+  &.turbo-progress-bar::before,
+  .turbo-progress-bar {
     background-color: $blue !important;
     z-index: 400001;
   }

app/controllers/alchemy/base_controller.rb

@@ -9,13 +9,6 @@ class BaseController < ApplicationController
     include Alchemy::ControllerActions
     include Alchemy::Modules
 
-    # Include Turbolinks explicitly in case Alchemy is embedded into a
-    # larger application that doesn't work with Turbolinks. The app
-    # can then set config.turbolinks.auto_include = false so that
-    # Turbolinks is not included in the app controllers.
-    include Turbolinks::Controller
-    ::ActionDispatch::Assertions.include ::Turbolinks::Assertions
-
     protect_from_forgery
 
     before_action :mailer_set_url_options

app/javascript/alchemy_admin.js

@@ -1,3 +1,5 @@
+import "@hotwired/turbo-rails"
+
 import translate from "./alchemy_admin/i18n"
 import translationData from "./alchemy_admin/translations"
 import fileEditors from "./alchemy_admin/file_editors"

app/views/alchemy/_menubar.html.erb

@@ -1,5 +1,5 @@
 <% if !@preview_mode && @page && can?(:edit_content, @page) %>
-  <div id="alchemy_menubar" style="display: none" data-turbolinks="false">
+  <div id="alchemy_menubar" style="display: none" data-turbo="false">
     <ul>
       <li><%= link_to Alchemy.t(:to_alchemy), alchemy.admin_dashboard_url %></li>
       <li><%= link_to Alchemy.t(:edit_page), alchemy.edit_admin_page_url(@page) %></li>

app/views/alchemy/admin/attachments/_replace_button.html.erb

@@ -17,7 +17,7 @@
       selector: '#replace_<%= dom_id(object) %>',
       file_types: '<%= file_types.join("|") %>',
       complete: function() {
-        Turbolinks.visit('<%= redirect_url.html_safe %>');
+        Turbo.visit('<%= redirect_url.html_safe %>');
       }
     };
     Alchemy.Uploader(options);

app/views/alchemy/admin/attachments/destroy.js.erb

@@ -1 +1 @@
-Turbolinks.visit('<%= @url %>');
+Turbo.visit('<%= @url %>');

app/views/alchemy/admin/elements/_element.html.erb

@@ -20,7 +20,7 @@
 
     <% if element.editable? %>
       <%= form_for [alchemy, :admin, element], remote: true,
-        html: {id: "element_#{element.id}_form".html_safe, class: 'element-body'} do |f| %>
+        html: {id: "element_#{element.id}_form".html_safe, class: 'element-body', 'data-turbo': false} do |f| %>
 
         <div id="element_<%= element.id %>_errors" class="element_errors"></div>
 

app/views/alchemy/admin/pages/_page_layout_filter.html.erb

@@ -23,7 +23,7 @@
     $("#page_layout").on("change", function(e) {
       var url = "<%= alchemy.admin_pages_path(search_filter_params.except(:page_layout, :page).merge(view: "list")) %>";
       delimiter = url.match(/\?/) ? "&" : "?";
-      Turbolinks.visit(url + delimiter + "page_layout=" + encodeURIComponent($(this).val()));
+      Turbo.visit(url + delimiter + "page_layout=" + encodeURIComponent($(this).val()));
     });
   });
 </script>

app/views/alchemy/admin/pages/edit.html.erb

@@ -81,7 +81,7 @@
               host: @page.site.host == "*" ? request.host : @page.site.host,
             ),
             title: Alchemy.t("Visit page"),
-            data: { turbolinks: false },
+            data: { turbo: false },
             target: "_blank",
             class: 'icon_button' do %>
           <%= render_icon('external-link-alt') %>
@@ -140,12 +140,11 @@
 <% content_for :javascripts do %>
 
 <% content_for :javascript_includes do %>
-  <meta name="turbolinks-cache-control" content="no-cache">
+  <meta name="turbo-cache-control" content="no-cache">
 <% end %>
 
 <script type="text/javascript" charset="utf-8">
-
-  $(function() {
+  $(document).one('turbo:load', function() {
     $('#unlock_page_form, #publish_page_form').on('submit', function(event) {
       var not_dirty = Alchemy.checkPageDirtyness(this);
       if (!not_dirty) Alchemy.pleaseWaitOverlay(false);

app/views/alchemy/admin/pages/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for :javascript_includes do %>
-  <meta name="turbolinks-cache-control" content="no-cache">
+  <meta name="turbo-cache-control" content="no-cache">
 <% end %>
 
 <% content_for :toolbar do %>

app/views/alchemy/admin/pages/update.js.erb

@@ -31,11 +31,11 @@
     Alchemy.growl("<%= j @notice %>");
     Alchemy.closeCurrentDialog();
   } else {
-    document.addEventListener('turbolinks:load', function () {
+    document.addEventListener('turbo:load', function () {
       Alchemy.growl("<%= j @notice %>");
     }, { once: true })
     Alchemy.closeCurrentDialog(function() {
-      Turbolinks.visit(location.toString(), { action: "replace" });
+      Turbo.visit(location.toString(), { action: "replace" });
     });
   }
 

app/views/alchemy/admin/resources/_filter_bar.html.erb

@@ -19,7 +19,7 @@
       if ($this.data('remote') === true) {
         $.get(path, params.toString(), null, 'script');
       } else {
-        Turbolinks.visit(path + '?' + params.toString());
+        Turbo.visit(path + '?' + params.toString());
       }
       return false;
     });

app/views/alchemy/admin/styleguide/index.html.erb

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :javascript_includes do %>
-  <meta name="turbolinks-cache-control" content="no-cache">
+  <meta name="turbo-cache-control" content="no-cache">
 <% end %>
 
 <% content_for(:toolbar) do %>

app/views/alchemy/admin/uploader/_button.html.erb

@@ -27,7 +27,7 @@
       <% if local_assigns[:in_dialog] %>
         $.get(url, null, null, 'script');
       <% else %>
-        Turbolinks.visit(url);
+        Turbo.visit(url);
       <% end %>
       }
     };

app/views/alchemy/base/permission_denied.js.erb

@@ -1,3 +1,3 @@
 Alchemy.closeCurrentDialog(function() {
-  Turbolinks.visit('<%= Alchemy.login_path %>');
+  Turbo.visit('<%= Alchemy.login_path %>');
 });

app/views/alchemy/base/redirect.js.erb

@@ -1,7 +1,7 @@
 (function() {
   var dialog = Alchemy.currentDialog();
   var callback = function() {
-    Turbolinks.visit('<%= url_for(@redirect_url) %>');
+    Turbo.visit('<%= url_for(@redirect_url) %>');
   };
   if (dialog) {
     Alchemy.closeCurrentDialog(callback);

app/views/layouts/alchemy/admin.html.erb

@@ -7,8 +7,8 @@
     <link rel="shortcut icon" href="<%= asset_path('alchemy/favicon.ico') %>">
     <%= csrf_meta_tag %>
     <meta name="robots" content="noindex">
-    <%= stylesheet_link_tag('alchemy/admin/all', media: 'screen', 'data-turbolinks-track' => true) %>
-    <%= stylesheet_link_tag('alchemy/print', media: 'print', 'data-turbolinks-track' => true) %>
+    <%= stylesheet_link_tag('alchemy/admin/all', media: 'screen', 'data-turbo-track' => true) %>
+    <%= stylesheet_link_tag('alchemy/print', media: 'print', 'data-turbo-track' => true) %>
     <%= yield :stylesheets %>
     <script>
       // Global Alchemy JavaScript object.
@@ -33,7 +33,7 @@
       };
     </script>
     <%= render 'alchemy/admin/partials/routes' %>
-    <%= javascript_include_tag('alchemy/admin/all', 'data-turbolinks-track' => true) %>
+    <%= javascript_include_tag('alchemy/admin/all', 'data-turbo-track' => true) %>
     <%= javascript_importmap_tags("alchemy_admin", importmap: Alchemy.importmap) %>
     <%= yield :javascript_includes %>
   </head>

config/importmap.rb

@@ -2,6 +2,7 @@
 pin "lodash-es/debounce", to: "https://ga.jspm.io/npm:lodash-es@4.17.21/debounce.js", preload: true
 pin "lodash-es/max", to: "https://ga.jspm.io/npm:lodash-es@4.17.21/max.js", preload: true
 pin "sortablejs", to: "https://ga.jspm.io/npm:sortablejs@1.15.0/modular/sortable.esm.js", preload: true
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 
 pin "alchemy_admin", to: "alchemy_admin.js", preload: true
 pin_all_from File.expand_path("../app/javascript/alchemy_admin", __dir__), under: "alchemy_admin"

lib/alchemy_cms.rb

@@ -22,7 +22,7 @@
 require "responders"
 require "sassc-rails"
 require "simple_form"
-require "turbolinks"
+require "turbo-rails"
 require "userstamp"
 require "view_component"
 

lib/generators/alchemy/install/files/application.html.erb

@@ -5,8 +5,8 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbo-track': 'reload' %>
   </head>
 
   <body>

spec/controllers/alchemy/admin/pages_controller_spec.rb

@@ -55,7 +55,7 @@
 
       it "returns with error message" do
         delete :destroy, params: {id: page.id, format: :js}
-        expect(response).to redirect_to admin_page_path(page.id)
+        expect(response).to render_template(:redirect)
         expect(flash[:warning]).to \
           eq("Nodes are still attached to this page. Please remove them first.")
       end
@@ -64,7 +64,7 @@
     context "without nodes" do
       it "removes the page" do
         delete :destroy, params: {id: page.id, format: :js}
-        expect(response).to redirect_to admin_page_path(page.id)
+        expect(response).to render_template(:redirect)
         expect(flash[:notice]).to eq Alchemy.t("Page deleted", name: page.name)
       end
     end

spec/views/alchemy/admin/partials/_main_navigation_entry.html.erb_spec.rb

@@ -12,7 +12,7 @@
         action: "index",
         name: "Pages",
         image: "alchemy/alchemy-logo.svg",
-        data: {turbolinks: false},
+        data: {turbo: false},
         sub_navigation: []
       }
     }.with_indifferent_access
@@ -30,7 +30,7 @@
   it "renders navigation with data attribute" do
     render
 
-    expect(rendered).to have_selector('div[data-turbolinks="false"]')
+    expect(rendered).to have_selector('div[data-turbo="false"]')
   end
 
   context "with no data attribute" do
@@ -51,7 +51,7 @@
     it "renders navigation without data attribute" do
       render
 
-      expect(rendered).not_to have_selector('div[data-turbolinks="false"]')
+      expect(rendered).not_to have_selector('div[data-turbo="false"]')
     end
   end
 end