Replace jquery-ujs with @hotwired/turbo

Replace our client-side dependency on `jquery-ujs` with [@hotwired/turbo][]. In addition to adding an entry to the `package.json` file, this commit replaces `[data-confirm]` attributes with `[data-turbo-confirm]`, and `[data-method]` attributes with `[data-turbo-method]`. In an effort to minimize the diff, this commit *does not* replace the `link_to` calls made with `method: :delete` with [button_to][] calls. Ideally, they'd utilize `button_to` to render a `<form>` element for the destructive action. In the future, once that change is complete, the `data: {turbo_method: :delete}` attributes can once again be passed as `method: :delete` options. [@hotwired/turbo]: https://turbo.hotwired.dev [turbo-rails]: https://github.com/hotwired/turbo-rails [link_to]: https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to [button_to]: https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
thoughtbot · Feb 2, 2024 · 43da734 · 43da734
1 parent ee358f4
commit 43da734
Show file tree

Hide file tree

Showing 11 changed files with 4,369 additions and 1,002 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -300,6 +300,10 @@ GEM
     thor (1.3.0)
     timecop (0.9.8)
     timeout (0.4.0)
+    turbo-rails (1.5.0)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uglifier (4.2.0)

diff --git a/app/assets/builds/administrate/application.js b/app/assets/builds/administrate/application.js
diff --git a/app/assets/builds/administrate/application.js.map b/app/assets/builds/administrate/application.js.map
diff --git a/app/assets/javascripts/administrate/application.js b/app/assets/javascripts/administrate/application.js
@@ -1,6 +1,6 @@
 import "./add_jquery";
 
-import {} from "jquery-ujs";
+import "@hotwired/turbo";
 import "selectize/dist/js/selectize.min.js";
 
 import "./controllers";
diff --git a/app/assets/javascripts/administrate/controllers/table_controller.js b/app/assets/javascripts/administrate/controllers/table_controller.js
@@ -16,7 +16,7 @@ export default class extends Controller {
       var dataUrl = $(event.target).closest("tr").data("url");
       var selection = window.getSelection().toString();
       if (selection.length === 0 && dataUrl) {
-        window.location = window.location.protocol + '//' + window.location.host + dataUrl;
+        Turbo.visit(dataUrl);
       }
     }
   }

diff --git a/app/views/administrate/application/_collection_item_actions.html.erb b/app/views/administrate/application/_collection_item_actions.html.erb
@@ -11,7 +11,6 @@
     t("administrate.actions.destroy"),
     [namespace, resource],
     class: "text-color-red",
-    method: :delete,
-    data: { confirm: t("administrate.actions.confirm") }
+    data: { turbo_method: :delete, turbo_confirm: t("administrate.actions.confirm") }
   ) if accessible_action?(resource, :destroy) %></td>
 <% end %>
diff --git a/app/views/administrate/application/_javascript.html.erb b/app/views/administrate/application/_javascript.html.erb
@@ -8,7 +8,7 @@ by providing a `content_for(:javascript)` block.
 %>
 
 <% Administrate::Engine.javascripts.each do |js_path| %>
-  <%= javascript_include_tag js_path %>
+  <%= javascript_include_tag js_path, "data-turbo-track": "reload", defer: true %>
 <% end %>
 
 <%= yield :javascript %>

diff --git a/app/views/administrate/application/show.html.erb b/app/views/administrate/application/show.html.erb
@@ -34,8 +34,7 @@ as well as a link to its edit page.
       t("administrate.actions.destroy"),
       [namespace, page.resource],
       class: "button button--danger",
-      method: :delete,
-      data: { confirm: t("administrate.actions.confirm") }
+      data: { turbo_method: :delete, turbo_confirm: t("administrate.actions.confirm") }
     ) if accessible_action?(page.resource, :destroy) %>
   </div>
 </header>

diff --git a/package.json b/package.json
@@ -6,9 +6,9 @@
   },
   "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo": "^7.3.0",
     "esbuild": "^0.18.11",
     "jquery": "^3.7.0",
-    "jquery-ujs": "^1.2.3",
     "sass": "^1.63.6",
     "selectize": "^0.12.6"
   },

diff --git a/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb b/spec/example_app/app/views/admin/customers/_collection_item_actions.html.erb
@@ -12,7 +12,7 @@
     [namespace, resource],
     class: "text-color-red",
     method: :delete,
-    data: { confirm: t("administrate.actions.confirm") }
+    data: { turbo_confirm: t("administrate.actions.confirm") }
   ) if authorized_action?(resource, :destroy) %></td>
 <% end %>
 

diff --git a/yarn.lock b/yarn.lock
@@ -159,6 +159,11 @@
   resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
   integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
 
+"@hotwired/turbo@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.3.0.tgz#2226000fff1aabda9fd9587474565c9929dbf15d"
+  integrity sha512-Dcu+NaSvHLT7EjrDrkEmH4qET2ZJZ5IcCWmNXxNQTBwlnE5tBZfN6WxZ842n5cHV52DH/AKNirbPBtcEXDLW4g==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"