Prove out importmaps with AngularJS app.

First use of importmaps Worked through how to make ace_builds work.
o19s · Nov 4, 2024 · 1bd07f6 · 1bd07f6
1 parent b131549
commit 1bd07f6
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 33 deletions.
diff --git a/app/assets/javascripts/ace_config.js b/app/assets/javascripts/ace_config.js
diff --git a/app/assets/javascripts/core.js b/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
@@ -79,8 +75,6 @@
 //= 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
diff --git a/app/controllers/pages_controller.rb b/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
 

diff --git a/app/javascript/application2.js b/app/javascript/application2.js
@@ -6,8 +6,20 @@
 // 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 "footer"
diff --git a/app/views/layouts/core.html.erb b/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">

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -3,5 +3,13 @@
 # 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
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -19,6 +19,22 @@
                                                   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 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 +43,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')
diff --git a/config/routes.rb b/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