diff --git a/Gemfile.lock b/Gemfile.lock index 4f02c5cbaf..f998b32134 100644 --- 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 index dc704d11b0..334e377e3d 100644 --- 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 index 155a2a3397..9262515981 100644 --- 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 index 1470aec037..2538cf92d4 100644 --- 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 index 8b9841d5b0..7d4427efa8 100644 --- 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 index 493e691bce..341cde5bd0 100644 --- 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 index 5197fe6557..9b37331ce9 100644 --- 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 index bd60eccdc2..74be149a08 100644 --- 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" %> <%= render "icons" %> @@ -37,6 +38,5 @@ By default, it renders: - <%= render "javascript" %> diff --git a/bin/importmap b/bin/importmap new file mode 100755 index 0000000000..1ade1564c0 --- /dev/null +++ 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 new file mode 100644 index 0000000000..35f99a9fcb --- /dev/null +++ b/config/importmap.rb @@ -0,0 +1,9 @@ +# 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" diff --git a/lib/administrate/engine.rb b/lib/administrate/engine.rb index 55a179758b..bd511feec6 100644 --- 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 index a859a4a9d4..c3d1089a5d 100644 --- 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 index 3e5bd21447..c28e5badc6 100644 --- 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 new file mode 100644 index 0000000000..beff742ec3 --- /dev/null +++ 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 new file mode 100755 index 0000000000..36502ab16c --- /dev/null +++ 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 new file mode 100644 index 0000000000..0086a327b8 --- /dev/null +++ b/spec/example_app/config/importmap.rb @@ -0,0 +1,3 @@ +# Pin npm packages by running ./bin/importmap + +pin "application" diff --git a/spec/example_app/spec/features/log_search_spec.rb b/spec/example_app/spec/features/log_search_spec.rb index 7eb2990555..c07dad81c0 100644 --- 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 index 0878d7ffb6..4cfa11574b 100644 --- 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)