Importmap

app/assets/config/spotlight/manifest.js

@@ -1 +1,2 @@
-//= link spotlight/blocks/sir-trevor-icons.svg
+//= link spotlight/blocks/sir-trevor-icons.svg
+//= link_tree ../../javascripts/spotlight .js

app/assets/javascripts/spotlight/admin/index.js

@@ -5,8 +5,8 @@
 //= require parameterize
 //= require bootstrap-tagsinput
 //= require jquery.serializejson
-//= require clipboard
-//= require leaflet
+// require clipboard/dist/clipboard
+// require leaflet/dist/leaflet-src
 //= require leaflet-iiif
 //= require Leaflet.Editable
 //= require Path.Drag

app/assets/javascripts/spotlight/application.js

@@ -9,6 +9,5 @@
 //
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
-//
 //= require spotlight/user/index
 //= require spotlight/admin/index

app/assets/javascripts/spotlight/spotlight.js

@@ -1,4 +1,4 @@
-Spotlight = function() {
+const Spotlight = function() {
   var buffer = [];
   return {
     onLoad: function(func) {
@@ -13,11 +13,12 @@ Spotlight = function() {
   };
 }();
 
-Blacklight.onLoad(function() {
+window.Blacklight.onLoad(function() {
   Spotlight.activate();
 });
 
 Spotlight.onLoad(function(){
   SpotlightNestable.init();
 });
 
+export default Spotlight;

app/views/layouts/spotlight/base.html.erb

@@ -13,7 +13,13 @@
     <% else %>
       <%= stylesheet_link_tag "application" %>
     <% end %>
-    <%= javascript_include_tag "application" %>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+
+    <% if defined? Importmap %>
+      <%= javascript_importmap_tags %>
+    <% else %>
+      <%= javascript_include_tag "application" %>
+    <% end %>
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
     <%= description %>

blacklight-spotlight.gemspec

@@ -29,7 +29,6 @@ these collections.)
   s.add_dependency 'breadcrumbs_on_rails', '>= 3.0', '< 5'
   s.add_dependency 'cancancan'
   s.add_dependency 'carrierwave', '~> 2.2'
-  s.add_dependency 'clipboard-rails', '~> 1.5'
   s.add_dependency 'devise', '~> 4.1'
   s.add_dependency 'devise_invitable'
   s.add_dependency 'faraday'
@@ -41,7 +40,6 @@ these collections.)
   s.add_dependency 'i18n-active_record'
   s.add_dependency 'iiif_manifest'
   s.add_dependency 'iiif-presentation'
-  s.add_dependency 'leaflet-rails'
   s.add_dependency 'legato'
   s.add_dependency 'mini_magick'
   s.add_dependency 'nokogiri'

config/importmap.rb

@@ -0,0 +1 @@
+pin_all_from File.expand_path("../app/assets/javascripts/spotlight", __dir__), under: 'spotlight'

lib/generators/spotlight/install_generator.rb

@@ -35,6 +35,16 @@ def add_js_rails7
       append_to_file 'app/assets/javascripts/application.js', "\n//= require_tree .\n"
     end
 
+    def add_js_deps
+      say 'Install Clipboard & Leaflet'
+      if defined?(Importmap)
+        run 'bin/importmap pin [email protected] leaflet@^1.9.3'
+        append_to_file 'app/javascript/application.js', "\nimport \"spotlight/application\"\n"
+      else
+        run 'yarn add [email protected] leaflet@^1.9.3'
+      end
+    end
+
     def add_manifest
       append_to_file 'app/assets/config/manifest.js', "\n//= link spotlight/manifest.js"
     end

lib/generators/spotlight/templates/spotlight.scss

@@ -4,5 +4,4 @@
 @import 'spotlight/variables_bootstrap';
 @import 'bootstrap';
 @import 'sir-trevor/main';
-@import 'leaflet';
 @import 'spotlight/spotlight';

lib/spotlight/engine.rb

@@ -9,12 +9,10 @@
 require 'activejob-status'
 require 'autoprefixer-rails'
 require 'blacklight'
-require 'clipboard/rails'
 require 'faraday'
 require 'faraday/follow_redirects'
 require 'friendly_id'
 require 'i18n/active_record'
-require 'leaflet-rails'
 require 'paper_trail'
 require 'riiif'
 require 'spotlight/riiif_service'
@@ -66,15 +64,24 @@ class Engine < ::Rails::Engine
       FactoryBot.definition_file_paths << File.expand_path('../../spec/factories', __dir__) if defined?(FactoryBot)
     end
 
+    PRECOMPILE_ASSETS = %w(spotlight/default_thumbnail.jpg spotlight/default_thumbnail.jpg
+      spotlight.js application.js).freeze
+
     initializer 'spotlight.assets.precompile' do |app|
-      app.config.assets.precompile += %w[spotlight/default_thumbnail.jpg spotlight/default_browse_thumbnail.jpg]
+      config.assets.paths << Rails.root.join('node_modules')
+
+      app.config.assets.precompile += Engine::PRECOMPILE_ASSETS
 
       Sprockets::ES6.configuration = { 'modules' => 'umd', 'moduleIds' => true }
       # When we upgrade to Sprockets 4, we can ditch sprockets-es6 and config AMD
       # in this way:
       # https://github.com/rails/sprockets/issues/73#issuecomment-139113466
     end
 
+    initializer "spotlight.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << Engine.root.join("config/importmap.rb") if app.config.respond_to?(:importmap)
+    end
+
     def self.user_class
       Spotlight::Engine.config.user_class.constantize
     end

package.json

@@ -25,5 +25,7 @@
     "not IE 11"
   ],
   "dependencies": {
+    "clipboard": "1.7.1",
+    "leaflet": "^1.9.3"
   }
 }