Migrate JavaScript to integrate with importmap-rails

Depend on [importmap-rails][] to serve our client-side JavaScript. As part of this change, move the `render "javascript"` partial from the bottom of the `<body>` element to the bottom of the `<head>` element. Replace a server-side dependency on `jquery-rails` with a client-side importmaps declaration for `jquery` and `jquery-ujs`. We're unable to do the same with `selectize` because we're depending on that pre-bundled package to expose CSS. [importmap-rails]: https://github.com/rails/importmap-rails/
thoughtbot · Oct 11, 2023 · ba82d43 · ba82d43
1 parent 7d497cd
commit ba82d43
Show file tree

Hide file tree

Showing 18 changed files with 56 additions and 18 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -5,7 +5,7 @@ PATH
       actionpack (>= 5.0)
       actionview (>= 5.0)
       activerecord (>= 5.0)
-      jquery-rails (>= 4.0)
+      importmap-rails
       kaminari (>= 1.0)
       sassc-rails (~> 2.1)
       selectize-rails (~> 0.6)
@@ -163,10 +163,9 @@ GEM
       rails-i18n
       rainbow (>= 2.2.2, < 4.0)
       terminal-table (>= 1.5.1)
-    jquery-rails (4.6.0)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
+    importmap-rails (1.2.1)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)

diff --git a/administrate.gemspec b/administrate.gemspec
@@ -17,7 +17,7 @@ Gem::Specification.new do |s|
   s.add_dependency "actionview", ">= 5.0"
   s.add_dependency "activerecord", ">= 5.0"
 
-  s.add_dependency "jquery-rails", ">= 4.0"
+  s.add_dependency "importmap-rails"
   s.add_dependency "kaminari", ">= 1.0"
   s.add_dependency "sassc-rails", "~> 2.1"
   s.add_dependency "selectize-rails", "~> 0.6"

diff --git a/app/assets/javascripts/administrate/application.js b/app/assets/javascripts/administrate/application.js
@@ -1,4 +1,11 @@
-//= require jquery
-//= require jquery_ujs
-//= require selectize
-//= require_tree .
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+
+import jQuery from "jquery"
+import Rails from "jquery-ujs"
+import "selectize"
+
+import "./components/associative"
+import "./components/select"
+import "./components/table"
+
+Rails(jQuery)
diff --git a/app/assets/javascripts/administrate/components/associative.js b/app/assets/javascripts/administrate/components/associative.js
@@ -1,3 +1,5 @@
+import $ from "jquery"
+
 $(function() {
   $('.field-unit--belongs-to select').selectize({});
   $(".field-unit--has-many select").selectize({});

diff --git a/app/assets/javascripts/administrate/components/select.js b/app/assets/javascripts/administrate/components/select.js
@@ -1,3 +1,5 @@
+import $ from "jquery"
+
 $(function() {
   $('.field-unit--select select').selectize({});
 });
diff --git a/app/assets/javascripts/administrate/components/table.js b/app/assets/javascripts/administrate/components/table.js
@@ -1,3 +1,5 @@
+import $ from "jquery"
+
 $(function() {
   var keycodes = { space: 32, enter: 13 };
 

diff --git a/app/views/administrate/application/_javascript.html.erb b/app/views/administrate/application/_javascript.html.erb
@@ -7,6 +7,8 @@ but each page can define additional JS sources
 by providing a `content_for(:javascript)` block.
 %>
 
+<%= javascript_importmap_tags "administrate/application" %>
+
 <% Administrate::Engine.javascripts.each do |js_path| %>
   <%= javascript_include_tag js_path %>
 <% end %>

diff --git a/app/views/layouts/administrate/application.html.erb b/app/views/layouts/administrate/application.html.erb
@@ -24,6 +24,7 @@ By default, it renders:
   <%= render "stylesheet" %>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag if defined?(csp_meta_tag) %>
+  <%= render "javascript" %>
 </head>
 <body>
   <%= render "icons" %>
@@ -37,6 +38,5 @@ By default, it renders:
     </main>
   </div>
 
-  <%= render "javascript" %>
 </body>
 </html>
diff --git a/bin/importmap b/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../spec/example_app/config/application"
+require "importmap/commands"
diff --git a/config/importmap.rb b/config/importmap.rb
@@ -0,0 +1,11 @@
+# Pin npm packages by running ./bin/importmap
+
+pin_all_from "app/javascript/administrate/components", under: "components"
+
+pin "administrate/application", preload: true
+
+pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.0/dist/jquery.js"
+pin "jquery-ujs", to: "https://ga.jspm.io/npm:jquery-ujs@1.2.3/src/rails.js"
+pin "selectize", to: "https://ga.jspm.io/npm:selectize.js@0.12.12/dist/js/selectize.js"
+pin "microplugin", to: "https://ga.jspm.io/npm:microplugin@0.0.3/src/microplugin.js"
+pin "sifter", to: "https://ga.jspm.io/npm:sifter@0.5.3/sifter.js"
diff --git a/lib/administrate/engine.rb b/lib/administrate/engine.rb
@@ -1,4 +1,4 @@
-require "jquery-rails"
+require "importmap-rails"
 require "kaminari"
 require "sassc-rails"
 require "selectize-rails"
@@ -22,9 +22,12 @@ class Engine < ::Rails::Engine
     @@javascripts = []
     @@stylesheets = []
 
+    initializer "administrate.importmap" do |app|
+      app.importmap.draw root.join("config/importmap.rb")
+    end
+
     initializer "administrate.assets.precompile" do |app|
       app.config.assets.precompile += [
-        "administrate/application.js",
         "administrate/application.css",
       ]
     end
@@ -45,7 +48,6 @@ def self.javascripts
       @@javascripts
     end
 
-    add_javascript "administrate/application"
     add_stylesheet "administrate/application"
   end
 end
diff --git a/spec/example_app/app/assets/config/manifest.js b/spec/example_app/app/assets/config/manifest.js
@@ -1,2 +1,3 @@
 //= link administrate/application.css
 //= link administrate/application.js
+//= link_tree ../../javascript .js
diff --git a/spec/example_app/app/assets/javascripts/application.js b/spec/example_app/app/assets/javascripts/application.js
@@ -10,6 +10,4 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery
-//= require jquery_ujs
 //= require_tree .
diff --git a/spec/example_app/app/javascript/application.js b/spec/example_app/app/javascript/application.js
@@ -0,0 +1 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
diff --git a/spec/example_app/bin/importmap b/spec/example_app/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"
diff --git a/spec/example_app/config/importmap.rb b/spec/example_app/config/importmap.rb
@@ -0,0 +1,3 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application", preload: true
diff --git a/spec/example_app/spec/features/log_search_spec.rb b/spec/example_app/spec/features/log_search_spec.rb
@@ -27,6 +27,6 @@ def have_records_table(rows:)
   end
 
   def submit_search
-    page.execute_script("$('.search').submit()")
+    page.execute_script("document.querySelector('.search').submit()")
   end
 end
diff --git a/spec/features/search_spec.rb b/spec/features/search_spec.rb
@@ -154,7 +154,7 @@ def page_params
   end
 
   def submit_search
-    page.execute_script("$('.search').submit()")
+    page.execute_script("document.querySelector('.search').submit()")
   end
 
   def order_row_match(order)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Pin npm packages by running ./bin/importmap

		pin "application", preload: true