Replace webpacker with esbuild (#1128)

# What it does

This replaces the use of webpacker for bundling JavaScript and CSS with
a combination of esbuild for JS and DartSass for CSS.

# Why it is important

* The current webpacker config means that rebuilding the JS is pretty
slow.
* Rails has deprecated webpacker and future energy is directed in other
directions. This change aligns the project with upstream efforts.

# Implementation notes

* We were previously using browserlist's `defaults` to translate new JS
features into backward-compatible forms. With `esbuild`, the options are
more limited. Using `--target=chrome58,firefox57,safari11` to restrict
what JS features are used should be OK for now and is more conservative
than what we were shipping before.

# Your bandwidth for additional changes to this PR

_Please choose one of the following to help the project maintainers
provide the appropriate level of support:_

- [x] I have the time and interest to make additional changes to this PR
based on feedback.
- [ ] I am interested in feedback but don't need to make the changes
myself.
- [ ] I don't have time or interest in making additional changes to this
work.
- [ ] Other or not sure (please describe):

.github/workflows/ci.yml

@@ -60,7 +60,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - uses: actions/cache@v2
         with:
@@ -71,7 +71,7 @@ jobs:
 
       - run: yarn install --frozen-lockfile
 
-      - run: bin/rails webpacker:compile
+      - run: bin/rails assets:precompile
 
       - name: Setup database
         env:

.gitignore

@@ -48,4 +48,6 @@ yarn-debug.log*
 .yardoc
 .env.local
 .env.test.local
-gallery-dl
+gallery-dl
+/app/assets/builds/*
+!/app/assets/builds/.keep

.tool-versions

@@ -1,3 +1,3 @@
 ruby 3.1.4
-nodejs 14.17.0
+nodejs 20.6.1
 yarn 1.22.4

Gemfile

@@ -11,9 +11,6 @@ gem "pg", ">= 0.18", "< 2.0"
 # Use Puma as the app server
 gem "puma"
 
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem "webpacker", "5.4.4"
-
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem "turbolinks", "~> 5"
 
@@ -92,3 +89,7 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 # gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "jsbundling-rails", "~> 1.2"
+
+gem "cssbundling-rails", "~> 1.3"

Gemfile.lock

@@ -132,6 +132,8 @@ GEM
     chronic (0.10.2)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
+    cssbundling-rails (1.3.2)
+      railties (>= 6.0.0)
     date (3.3.3)
     devise (4.8.1)
       bcrypt (~> 3.0)
@@ -219,6 +221,8 @@ GEM
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     jmespath (1.6.1)
+    jsbundling-rails (1.2.1)
+      railties (>= 6.0.0)
     jwt (2.3.0)
     kramdown (2.3.1)
       rexml
@@ -281,7 +285,7 @@ GEM
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.8)
-    nokogiri (1.15.3)
+    nokogiri (1.15.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     oauth2 (1.4.9)
@@ -324,11 +328,9 @@ GEM
     pundit (2.1.1)
       activesupport (>= 3.0.0)
     racc (1.7.1)
-    rack (2.2.7)
+    rack (2.2.8)
     rack-protection (2.2.0)
       rack
-    rack-proxy (0.7.6)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (6.1.4.3)
@@ -350,7 +352,7 @@ GEM
       actionpack (>= 5.0.1.rc1)
       actionview (>= 5.0.1.rc1)
       activesupport (>= 5.0.1.rc1)
-    rails-dom-testing (2.1.1)
+    rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
@@ -399,11 +401,10 @@ GEM
     scenic (1.6.0)
       activerecord (>= 4.0.0)
       railties (>= 4.0.0)
-    selenium-webdriver (4.11.0)
+    selenium-webdriver (4.12.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     sentry-raven (3.1.2)
       faraday (>= 1.0)
     singleton (0.1.1)
@@ -423,9 +424,9 @@ GEM
       thor (~> 1.0)
       tilt (~> 2.0)
       yard (~> 0.9, >= 0.9.24)
-    sprockets (4.0.2)
+    sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
+      rack (>= 2.2.4, < 4)
     sprockets-rails (3.4.2)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
@@ -472,21 +473,16 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webpacker (5.4.4)
-      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 (1.2.10)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
     yard (0.9.27)
       webrick (~> 1.7.0)
-    zeitwerk (2.6.8)
+    zeitwerk (2.6.11)
 
 PLATFORMS
   ruby
@@ -503,13 +499,15 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   chronic
+  cssbundling-rails (~> 1.3)
   devise
   dotenv-rails
   erb_lint (~> 0.1.1)
   factory_bot_rails
   http
   image_processing (~> 1.12)
   jbuilder (~> 2.11)
+  jsbundling-rails (~> 1.2)
   lefthook
   letter_opener
   listen
@@ -541,7 +539,6 @@ DEPENDENCIES
   turbolinks (~> 5)
   turbolinks_render
   web-console (>= 3.3.0)
-  webpacker (= 5.4.4)
 
 RUBY VERSION
    ruby 3.1.4p223

Procfile.dev

@@ -0,0 +1,3 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: yarn build-dev --watch
+css: yarn build:css --watch

app/assets/config/manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_tree ../builds

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1,4 @@
+@import './styles.scss';
+@import "awesomplete/awesomplete";
+@import "selectize/dist/css/selectize.default";
+@import './overrides.scss';

app/javascript/stylesheets/application.scss → app/assets/stylesheets/styles.scss

@@ -3,7 +3,7 @@
 @import 'spectre.css/src/spectre';
 @import 'spectre.css/src/spectre-icons';
 @import 'spectre.css/src/spectre-exp';
-@import 'trix/dist/trix.css';
+@import 'trix/dist/trix';
 
 @import 'spectre.css/src/mixins/_shadow';
 @import './partials/index';

app/helpers/application_helper.rb

@@ -18,7 +18,7 @@ def logo(library: current_library, small: false, classes: "")
     if library.image.attached?
       image_tag url_for(library.image.variant(resize_to_limit: [100, 89])), class: classes
     else
-      image_pack_tag "logo#{small ? "_small" : nil}.png", class: classes
+      image_tag "logo#{small ? "_small" : nil}.png", class: classes
     end
   end
 

app/javascript/application.js

@@ -0,0 +1,35 @@
+import Rails from "@rails/ujs"
+Rails.start()
+
+import Turbolinks from "turbolinks"
+Turbolinks.start()
+
+import * as ActiveStorage from "@rails/activestorage"
+ActiveStorage.start()
+
+import "./controllers"
+
+import "trix"
+import "@rails/actiontext"
+
+import feather from "feather-icons/dist/feather"
+document.addEventListener("turbolinks:load", function() {
+  feather.replace({
+    width: 20,
+    height: 20,
+    class: "feather-icon",
+  });
+})
+
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+
+Turbolinks.ScrollManager.prototype.scrollToElement = function(element) {
+  let classes = element.classList;
+  if (classes.contains("highlightable")) {
+    classes.add("highlight");
+  }
+  scrollIntoView(element, {
+    behavior: 'smooth',
+    scrollMode: 'if-needed',
+  });
+}

app/javascript/controllers/index.js

@@ -1,9 +1,57 @@
-// Load all the controllers within this directory and all subdirectories. 
-// Controller files must be named *_controller.js.
-
 import { Application } from "stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
 
-const application = Application.start()
-const context = require.context("controllers", true, /_controller\.js$/)
-application.load(definitionsFromContext(context))
+window.Stimulus = Application.start()
+
+import AlertController from './alert_controller'
+Stimulus.register('alert', AlertController)
+
+import AppointmentDateController from './appointment_date_controller'
+Stimulus.register('appointment-date', AppointmentDateController)
+
+import AppointmentsIndexController from './appointments_index_controller'
+Stimulus.register('appointments-indes', AppointmentsIndexController)
+
+import AutocompleteController from './autocomplete_controller'
+Stimulus.register('autocomplete', AutocompleteController)
+
+import CollapseController from './collapse_controller'
+Stimulus.register('collapse', CollapseController)
+
+import ConditionalFieldController from './conditional_field_controller'
+Stimulus.register('conditional-field', ConditionalFieldController)
+
+import EmailSettingsEditorController from './email_settings_editor_controller'
+Stimulus.register('email-settings-editor', EmailSettingsEditorController)
+
+import FindToolController from './find_tool_controller'
+Stimulus.register('find-tool', FindToolController)
+
+import ImageEditorController from './image_editor_controller'
+Stimulus.register('image-editor', ImageEditorController)
+
+import ModalController from './modal_controller'
+Stimulus.register('modal', ModalController)
+
+import MultiSelectController from './multi_select_controller'
+Stimulus.register('multi-select', MultiSelectController)
+
+import NotesController from './notes_controller'
+Stimulus.register('notes', NotesController)
+
+import PortalController from './portal_controller'
+Stimulus.register('portal', PortalController)
+
+import RequestItemController from './request_item_controller'
+Stimulus.register('request-item', RequestItemController)
+
+import SidebarController from './sidebar_controller'
+Stimulus.register('sidebar', SidebarController)
+
+import TagEditorController from './tag_editor_controller'
+Stimulus.register('tag-editor', TagEditorController)
+
+import ToggleController from './toggle_controller'
+Stimulus.register('toggle', ToggleController)
+
+import TreeNavController from './tree_nav_controller'
+Stimulus.register('tree-nav', TreeNavController)

app/views/admin/settings/email_settings/preview.html.mjml

@@ -1,6 +1,6 @@
 <mj-section>
   <mj-column padding-top="20px">
-    <mj-image src="<%= asset_pack_url "media/images/logo.jpg" %>" width="100px" />
+    <mj-image src="<%= image_url "logo.jpg" %>" width="100px" />
   </mj-column>
 </mj-section>
 

app/views/gift_purchaser_mailer/confirmation.mjml

@@ -1,6 +1,6 @@
 <mj-section>
   <mj-column padding-top="20px">
-    <mj-image src="<%= asset_pack_url "media/images/logo.jpg" %>" width="100px" />
+    <mj-image src="<%= image_url "logo.jpg" %>" width="100px" />
   </mj-column>
 </mj-section>
 <mj-section>