Move towards import maps

app/assets/javascripts/core.js

@@ -33,11 +33,7 @@
 //= require cookies_eu
 
 //= require angular/angular
-//= require ace-builds/src-min-noconflict/ace
-//= require ace-builds/src-min-noconflict/ext-language_tools
-//= require ace-builds/src-min-noconflict/mode-json
-//= require ace-builds/src-min-noconflict/mode-javascript
-//= require ace-builds/src-min-noconflict/mode-lucene
+
 
 //= require vega
 //= require vega-lite
@@ -75,12 +71,6 @@
 //= require_tree ./factories
 //= require_tree ./filters
 //= require_tree ./interceptors
-//= require_tree ./services
 //= require_tree ./values
 //= require_tree ../templates
 //= require_tree ./components
-//= require footer
-//= require tether-shepherd/dist/js/tether
-//= require tether-shepherd/dist/js/shepherd
-//= require tour
-//= require ace_config

app/assets/stylesheets/core.css.scss

@@ -37,7 +37,7 @@
 @import "admin2";
 
 // Tour/Guides
-@import "tether-shepherd/dist/css/shepherd-theme-arrows";
+@import "shepherd.js/dist/css/shepherd";
 @import "tour";
 
 // Screens

app/controllers/pages_controller.rb

@@ -2,29 +2,27 @@
 
 class PagesController < ApplicationController
   skip_before_action :require_login
-  skip_before_action :verify_authenticity_token, only: [ :theme_textmate, :mode_json ]
+  skip_before_action :verify_authenticity_token, only: [:worker_javascript, :worker_json ]
   skip_before_action :check_for_announcement
   # before_action :check_page, only: [:show]
 
   # def show
   # render template: "pages/#{params[:page]}"
   # end
-
-  # this is how we deal with the ACE editor wanting this specific file.
-
-  def theme_textmate
-    path = 'node_modules/ace-builds/src-min-noconflict/theme-textmate.js'
+  
+  # ace wants to always load the workers from the root "/" end point.  So /worker-javascript.js and /worker-json.s
+  # It defines it's own full path, so we can't override it with one from importmaps
+  def worker_javascript
+    path = 'node_modules/ace-builds/src-min-noconflict/worker-javascript.js'
     file_contents = File.read(path)
     render js: file_contents, content_type: Mime::Type.lookup('application/javascript')
   end
-
-  # In production this route kicks in, and in dev we load /assets/mode-json.js from
-  # the /app/assets/javascripts/mode-json.js location..
-  def mode_json
-    path = 'node_modules/ace-builds/src-min-noconflict/mode-json.js'
+
+  def worker_json
+    path = 'node_modules/ace-builds/src-min-noconflict/worker-json.js'
     file_contents = File.read(path)
     render js: file_contents, content_type: Mime::Type.lookup('application/javascript')
-  end
+  end  
 
   private
 

app/javascript/application2.js

@@ -6,8 +6,47 @@
 // Note: the file in vendor/javascript/vendored-local-time.js is the one that was downloaded via
 // importmap pin.  See https://github.com/basecamp/local_time/issues/113 for others who suggested
 // remaining it
-import "@hotwired/turbo-rails"
-import LocalTime from "local-time"
-LocalTime.start()
+//import "@hotwired/turbo-rails"
+//import LocalTime from "local-time"
+//LocalTime.start()
 
-window.Turbo.setProgressBarDelay(1);
+//window.Turbo.setProgressBarDelay(1);
+
+import "ace"; // Import the Ace library
+import "ext-language_tools"; // Import the JavaScript mode
+import "mode-json"; // Import the Monokai theme
+import "mode-javascript";
+import "mode-lucene";
+import "theme-chrome";
+//import "worker-javascript"
+//import "ace_config"
+
+//import "tour" // Can't figure out how to get Shepherd.js to load
+import "footer"
+
+// Importing services
+import "annotationsSvc";
+import "bookSvc";
+import "bootstrapSvc";
+import "caseCSVSvc";
+import "caseSvc";
+import "caseTryNavSvc";
+import "configurationSvc";
+import "diffResultsSvc";
+import "docCacheSvc";
+import "importRatingsSvc";
+import "paneSvc";
+import "queriesSvc";
+import "querySnapshotSvc";
+import "queryViewSvc";
+import "rateBulkSvc";
+import "rateElementSvc";
+import "ratingsStoreSvc";
+import "scorerControllerActionsSvc";
+import "scorerSvc";
+import "searchEndpointSvc";
+import "searchErrorTranslatorSvc";
+import "settingsSvc";
+import "teamSvc";
+import "userSvc";
+import "varExtractorSvc";

app/views/layouts/core.html.erb

@@ -11,6 +11,8 @@
 <%= stylesheet_link_tag 'ng-json-explorer/dist/angular-json-explorer', 'angular-wizard/dist/angular-wizard', 'ng-tags-input/build/ng-tags-input.min.css', 'ng-tags-input/build/ng-tags-input.bootstrap.min.css', media: 'all' %>
 <%= csrf_meta_tags %>
 
+<%= javascript_importmap_tags 'application2' %>
+
 <base href="<%= ENV['RAILS_RELATIVE_URL_ROOT'] %>/">
 </head>
 <body ng-app="QuepidApp">

config/importmap.rb

@@ -3,5 +3,21 @@
 # Pin npm packages by running ./bin/importmap
 
 pin 'application2', preload: true
-pin 'local-time', to: 'vendored-local-time.js' # @3.0.2
-pin '@hotwired/turbo-rails', to: 'turbo.min.js'
+#pin 'local-time', to: 'vendored-local-time.js' # @3.0.2
+#pin '@hotwired/turbo-rails', to: 'turbo.min.js'
+
+pin "ace", to: "ace-builds/src-min-noconflict/ace.js"
+pin "ext-language_tools", to: "ace-builds/src-min-noconflict/ext-language_tools.js"
+pin "mode-json", to: "ace-builds/src-min-noconflict/mode-json.js"
+pin "mode-javascript", to: "ace-builds/src-min-noconflict/mode-javascript.js"
+pin "mode-lucene", to: "ace-builds/src-min-noconflict/mode-lucene.js"
+pin "theme-chrome", to: "ace-builds/src-min-noconflict/theme-chrome.js"
+pin 'footer', preload: true
+
+#pin 'services/annotationsSvc.js'
+# Pin each JavaScript file in the app/javascript/custom directory
+Dir.glob(Rails.root.join('app', 'assets', 'javascripts','services', '*.js')).each do |file|
+  pin File.basename(file, '.js'), to: "services/#{File.basename(file)}"
+end
+
+# pin 'tour' // Can't figure out how to get Shepherd.js to load

config/initializers/assets.rb

@@ -19,6 +19,32 @@
                                                   analytics.js ]
 Rails.application.config.assets.precompile += %w[ application_spec.js ]
 
+# need to precompile stuff for importmaps
+# In the past we made a giant single jS file, and then precompiled it
+# but now we list each individaul file.
+Rails.application.config.assets.precompile += %w[ footer.js ace_config.js ]
+
+# JS from AngularJS app
+Dir.glob(Rails.root.join('app', 'assets', 'javascripts', 'services', '*.js')).each do |file|
+  #relative_path = Pathname.new(file).relative_path_from(Pathname.new(Rails.root)).to_s
+  #puts "File.basename(file): #{relative_path}"
+  Rails.application.config.assets.precompile << "services/#{File.basename(file, '.js')}"
+end
+Rails.application.config.assets.precompile += %w[
+  services/annotationsSvc.js
+]
+
+# JS from node modules
+Rails.application.config.assets.precompile += %w[
+  ace-builds/src-min-noconflict/ace.js
+  ace-builds/src-min-noconflict/ext-language_tools.js
+  ace-builds/src-min-noconflict/mode-json.js
+  ace-builds/src-min-noconflict/mode-javascript.js
+  ace-builds/src-min-noconflict/mode-lucene.js
+  ace-builds/src-min-noconflict/theme-chrome.js
+  ace-builds/src-min-noconflict/worker-javascript.js
+]
+
 # CSS from node modules
 Rails.application.config.assets.precompile += %w[
   ng-json-explorer/dist/angular-json-explorer.css
@@ -27,5 +53,6 @@
   ng-tags-input/build/ng-tags-input.bootstrap.min.css
 ]
 
+
 # For some reason the mapping in core.css.scss isn't working, so do this.'
 Rails.application.config.assets.paths << Rails.root.join('node_modules/bootstrap-icons/font')

config/routes.rb

@@ -272,8 +272,8 @@
   # get '*page' => 'pages#show'
   #
 
-  # Deal with ACE Editor really really wanting this file here
-  get '/javascripts/ace/theme-textmate.js' => 'pages#theme_textmate'
-  get '/assets/mode-json.js' => 'pages#mode_json'
+  # Deal with ACE Editor really really wanting workers to be in specific urls.
+  get '/worker-javascript.js' => 'pages#worker_javascript'
+  get '/worker-json.js' => 'pages#worker_json'
 end
 # rubocop:enable Metrics/BlockLength

package.json

@@ -39,8 +39,8 @@
     "ngclipboard": "^2.0.0",
     "party-js": "^2.2.0",
     "popper.js": "^1.16.1",
+    "shepherd.js": "^14.1.0", 
     "splainer-search": "2.33.0",
-    "tether-shepherd": "latest",
     "vega": "^5.27.0"
   },
   "devDependencies": {