WIP: Enable and use import maps

Gemfile

@@ -46,8 +46,6 @@ gem "jquery-rails"
 gem "jquery-ui-rails"
 # SASS CSS framework (nested selectors, variables, etc.)
 gem "sass-rails"
-# JavaScript bundler.
-gem 'webpacker', '~> 5.0'
 # Used to verify that the user is a human.
 gem "recaptcha"
 # Hotwire for SPA like without much JS
@@ -112,7 +110,7 @@ gem "clockwork"
 gem "mini_racer", "~> 0.6.3"
 gem "nokogiri", ">= 1.10.4"
 gem "image_processing"
-gem "sprockets", "~> 4.2.0"
+gem "sprockets", "~> 4.0.0"
 
 group :production do
   # Reduce the noise of logs and include custom fields to it for easier access
@@ -218,3 +216,5 @@ end
 
 # Use Redis for Action Cable
 gem "redis", "~> 5.0"
+
+gem "importmap-rails", "~> 1.1"

Gemfile.lock

@@ -240,6 +240,9 @@ GEM
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (1.1.5)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -404,8 +407,6 @@ GEM
     rack (2.2.6.2)
     rack-protection (2.1.0)
       rack
-    rack-proxy (0.7.0)
-      rack
     rack-test (2.0.2)
       rack (>= 1.3)
     rails (7.0.4.2)
@@ -528,7 +529,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     shellany (0.0.1)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
@@ -552,9 +552,9 @@ GEM
     snaky_hash (2.0.0)
       hashie
       version_gem (~> 1.1)
-    sprockets (4.2.0)
+    sprockets (4.0.3)
       concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
+      rack (> 1, < 3)
     sprockets-rails (3.4.2)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
@@ -596,11 +596,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.7.0)
     websocket (1.2.9)
     websocket-driver (0.7.5)
@@ -654,6 +649,7 @@ DEPENDENCIES
   httparty
   icalendar
   image_processing
+  importmap-rails (~> 1.1)
   jbuilder
   jquery-rails
   jquery-ui-rails
@@ -695,7 +691,7 @@ DEPENDENCIES
   simple_form
   simplecov
   skylight
-  sprockets (~> 4.2.0)
+  sprockets (~> 4.0.0)
   standard (~> 1.0)
   stimulus-rails
   strong_migrations (= 1.4.2)
@@ -704,10 +700,9 @@ DEPENDENCIES
   web-console
   webdrivers (~> 5.2)
   webmock (~> 3.18)
-  webpacker (~> 5.0)
 
 RUBY VERSION
    ruby 3.1.2p20
 
 BUNDLED WITH
-   2.3.22
+   2.3.25

Procfile.dev

@@ -1,3 +1,2 @@
 web: bundle exec rails s -p 3000
 worker: bundle exec rails jobs:work
-webpack: bin/webpack-dev-server

app/assets/config/manifest.js

@@ -1,4 +1,5 @@
 //= link filterrific/filterrific-spinner.gif
 //= link_tree ../images
-//= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

app/javascript/packs/application.js → app/javascript/application.js

@@ -1,37 +1,41 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 
-import { Turbo } from "@hotwired/turbo-rails"
-
-// Disable turbo by default to avoid issues with turbolinks
-Turbo.session.drive = false
+import jQuery from 'jquery'
+window.jQuery = jQuery
+window.$ = jQuery
 
-import "../controllers/index"
+import 'admin-lte'
+import "cocoon-js-vanilla";
+import 'filterrific'
+import { Turbo } from "@hotwired/turbo-rails"
 import "trix"
 import "@rails/actiontext"
-import "stylesheets/application.scss"
-import $ from 'jquery';
 
 import {DateTime} from "luxon";
-import Litepicker from 'litepicker';
+import 'litepicker';
 import { Calendar } from '@fullcalendar/core';
 import luxonPlugin from '@fullcalendar/luxon'
 import dayGridPlugin from '@fullcalendar/daygrid';
 import listPlugin from '@fullcalendar/list';
 import toastr from 'toastr';
-import 'litepicker/dist/plugins/ranges';
-import "@fortawesome/fontawesome-free/css/fontawesome.css";
-import "@fortawesome/fontawesome-free/css/solid.css";
-import "@fortawesome/fontawesome-free/css/regular.css";
-import "@fortawesome/fontawesome-free/css/brands.css";
-import "@fortawesome/fontawesome-free/css/v4-shims.css";
-import "toastr/build/toastr.css"
+import 'litepicker/ranges';
+
+import 'bootstrap'
+import 'controllers'
+
+import 'utils/adjustments'
+import 'utils/barcode_items'
+import 'utils/barcode_scan'
+import 'utils/deadline_day_pickers'
+import 'utils/distributions_and_transfers'
+import 'utils/donations'
+import 'utils/purchases'
+
+import Rails from "@rails/ujs"
+Rails.start()
+
+// Disable turbo by default to avoid issues with turbolinks
+Turbo.session.drive = false
 
 // Global toastr options
 window.toastr = toastr;
@@ -47,7 +51,13 @@ function isShortHeightScreen() {
   return $(window).height() < 768 && !isMobileResolution();
 }
 
+
+// es-module-shims calls DOMContentLoaded twice for some reason
 document.addEventListener("DOMContentLoaded", function() {
+  const hash = window.location.hash;
+  if (hash) {
+    $('ul.nav a[href="' + hash + '"]').tab('show');
+  }
   const isMobile = isMobileResolution();
   const isShortHeight = isShortHeightScreen();
 
@@ -96,3 +106,5 @@ document.addEventListener("DOMContentLoaded", function() {
   });
   picker.setDateRange(startDate, endDate);
 }, false);
+
+

app/javascript/controllers/application.js

@@ -1,11 +1,6 @@
 import { Application } from "@hotwired/stimulus"
-import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
 
 const application = Application.start()
-window.Stimulus = application;
-
-const context = require.context("/", true, /\.js$/)
-Stimulus.load(definitionsFromContext(context))
 
 // Configure Stimulus development experience
 application.debug = false

app/javascript/controllers/index.js

@@ -1,5 +1,11 @@
-// This file is auto-generated by ./bin/rails stimulus:manifest:update
-// Run that command whenever you add a new controller or create them with
-// ./bin/rails generate stimulus controllerName
+// Import and register all your controllers from the importmap under controllers/*
 
-import { application } from "./application"
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

app/javascript/controllers/select2_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
-import Select2 from "select2"
 import $ from 'jquery';
+import "select2"
 
 export default class extends Controller {
   static values = {

app/assets/javascripts/adjustments.js → app/javascript/utils/adjustments.js

@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Likely we can remove this since distribution_and_transfers.js seen to cover this use
  */
@@ -25,13 +27,12 @@ $(function() {
   });
 
   $(document).on("cocoon:after-insert", "form#new_adjustment", function(
-    e,
-    insertedItem
-  ) {
+    e) {
     const control = $(control_id);
+    const insertedItem = $(e.detail[2]);
     insertedItem
       .find("#_barcode-lookup-new_line_items")
-      .attr("id", `_barcode-lookup-${$(".nested-fields").size() - 1}`);
+      .attr("id", `_barcode-lookup-${$(".nested-fields").length - 1}`);
     $.ajax({
       url: control
         .data("storage-location-inventory-path")