Webpacker migration

.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  'parser': 'babel-eslint',
   'extends': 'airbnb-base',
   'rules': {
     'semi': ['error', 'always'],

.github/workflows/push.yml

@@ -66,5 +66,6 @@ jobs:
           RAILS_ENV: test
         run: |
           bundle exec rails db:create db:schema:load
+          bundle exec rails test:prepare
           bundle exec rails test
           bundle exec rails test:system

.gitignore

@@ -34,9 +34,10 @@ vendor/bundle
 # Fits
 fits.log
 
-/public/packs
-/public/packs-test
 /node_modules
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

CHANGELOG.md

@@ -9,6 +9,9 @@ New entries in this file should aim to provide a meaningful amount of informatio
 
 ## [Unreleased]
 
+### Added
+- Migrate Webpacker to Esbuild [PR#3320](https://github.com/ualbertalib/jupiter/pull/3320)
+
 ### Removed
 - Remove fully enabled feature flags that have been enabled for years [PR#3375](https://github.com/ualbertalib/jupiter/pull/3375)
 

Gemfile

@@ -8,8 +8,10 @@ gem 'image_processing' # for ActiveStorage Variants
 gem 'puma', '~> 6.4'
 gem 'rails', '~> 7.0.8'
 
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 5.4'
+# Assets
+gem 'cssbundling-rails'
+gem 'jsbundling-rails'
+gem 'sprockets-rails'
 
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false

Gemfile.lock

@@ -166,6 +166,8 @@ GEM
       bigdecimal
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.3.3)
+      railties (>= 6.0.0)
     danger (9.4.3)
       claide (~> 1.0)
       claide-plugins (>= 0.9.2)
@@ -285,6 +287,8 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.2.1)
+      railties (>= 6.0.0)
     json (2.7.1)
     json-schema (4.1.1)
       addressable (>= 2.8)
@@ -385,8 +389,6 @@ GEM
     rack (2.2.8.1)
     rack-protection (3.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.7)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.8)
@@ -512,7 +514,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     shoulda-matchers (6.1.0)
       activesupport (>= 5.2.0)
     sidekiq (7.2.2)
@@ -555,6 +556,13 @@ GEM
     sparql-client (3.3.0)
       net-http-persistent (~> 4.0, >= 4.0.2)
       rdf (~> 3.3)
+    sprockets (4.2.1)
+      concurrent-ruby (~> 1.0)
+      rack (>= 2.2.4, < 4)
+    sprockets-rails (3.4.2)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
+      sprockets (>= 3.0.0)
     stringio (3.0.8)
     strong_migrations (1.7.0)
       activerecord (>= 5.2)
@@ -585,11 +593,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.10)
     websocket-driver (0.7.6)
@@ -618,6 +621,7 @@ DEPENDENCIES
   capybara (>= 3.26, < 4.0)
   clamby
   connection_pool
+  cssbundling-rails
   danger (~> 9.4)
   datacite-client!
   debug
@@ -633,6 +637,7 @@ DEPENDENCIES
   haikunator
   image_processing
   jbuilder
+  jsbundling-rails
   json-schema (~> 4.1.1)
   kaminari
   launchy
@@ -668,13 +673,13 @@ DEPENDENCIES
   sidekiq-unique-jobs (~> 8.0)
   simple_form
   simplecov
+  sprockets-rails
   strong_migrations (~> 1.7.0)
   uuidtools
   vcr (= 5.0)
   voight_kampff (~> 2.0)
   web-console (>= 4.1.0)
   webmock
-  webpacker (~> 5.4)
   wicked
 
 RUBY VERSION

Procfile.dev

@@ -1,3 +1,4 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-frontend: bin/webpack-dev-server
 worker: bundle exec sidekiq
+js: yarn build --watch
+css: yarn build:css --watch

README.md

@@ -137,7 +137,7 @@ bin/dev
 
 This starts up Overmind (or fallback to Foreman) running the Procfile.dev config.
 
-We've configured this to run the Rails server, Sidekiq background worker and webpacker (for CSS bundling and JS bundling) out of the box.
+We've configured this to run the Rails server, Sidekiq background worker and CSS/JS bundling out of the box.
 
 Here's a couple of useful Overmind commands:
 

app/assets/config/manifest.js

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

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1,27 @@
+// Entry point for your Sass build
+
+// Set bootstrap sass variables
+@import 'bootstrap-sass-overrides';
+
+// External Library Stylesheets
+@import 'bootstrap/scss/bootstrap';
+
+$fa-font-path: ".";
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "@fortawesome/fontawesome-free/scss/solid.scss";
+@import 'selectize/dist/css/selectize';
+@import 'selectize/dist/css/selectize.bootstrap3';
+@import 'easy-autocomplete/dist/easy-autocomplete';
+@import 'dropzone/dist/dropzone';
+
+// Custom Stylesheets
+@import 'jupiter';
+@import 'simple_form';
+@import 'items';
+@import 'image';
+@import 'search';
+@import 'users';
+@import 'welcome';
+@import 'skip-content';
+@import 'changeset';

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

@@ -51,7 +51,7 @@ body {
       rgba($white, 0.4),
       rgba($white, 0)
     ),
-    url('../images/campus-banner.jpg');
+    url('../assets/campus-banner.jpg');
   background-repeat: no-repeat;
   background-position: center 10%;
   background-size: cover;

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

@@ -1,8 +1,3 @@
-[type="search"]::-webkit-search-cancel-button {
-  // Bootstrap 4 override
-  -webkit-appearance: searchfield-cancel-button;
-}
-
 // Filter sidebar for small screens
 @include media-breakpoint-between(xs, sm) {
   .jupiter-filters {

app/helpers/images_helper.rb

@@ -28,7 +28,7 @@ def file_icon(content_type)
   def safe_thumbnail_tag(thumbnail, image_tag_options)
     image_tag_options[:class] ||= 'j-thumbnail img-thumbnail'
     image_tag_options[:onerror] = "this.onerror=null;this.src='#{
-      asset_pack_url('media/images/era-logo-without-text.png')
+      image_url('era-logo-without-text.png')
     }';"
 
     image_tag(thumbnail, image_tag_options)

app/helpers/page_layout_helper.rb

@@ -54,7 +54,7 @@ def thumbnail_path(logo, args = { resize_to_limit: [100, 100], auto_orient: true
 
   # rubocop:disable Rails/HelperInstanceVariable
   def page_image_url
-    default_url = asset_pack_url('media/images/era-logo.png')
+    default_url = image_url('era-logo.png')
     # We only have images on community and item/thesis show pages
     image_path = thumbnail_path(@community&.thumbnail_file) || thumbnail_path(@item&.thumbnail_file)
 

app/javascript/admin.js

@@ -0,0 +1 @@
+import './src/admin';

app/javascript/application.js

@@ -0,0 +1,20 @@
+// Entry point for the build script in your package.json
+
+import './src/add_jquery';
+
+import Rails from '@rails/ujs';
+import Turbolinks from 'turbolinks';
+import * as ActiveStorage from '@rails/activestorage';
+
+import 'trix';
+import '@rails/actiontext';
+import 'bootstrap/dist/js/bootstrap';
+import 'selectize/dist/js/standalone/selectize';
+import 'easy-autocomplete/dist/jquery.easy-autocomplete';
+import 'jquery-multidownload/jquery-multidownload';
+
+import './src/application';
+
+ActiveStorage.start();
+Rails.start();
+Turbolinks.start();

app/javascript/src/add_jquery.js

@@ -0,0 +1,4 @@
+import jquery from 'jquery';
+
+window.jQuery = jquery;
+window.$ = jquery;

app/javascript/src/admin/ajax_table.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', () => {
+document.addEventListener('turbolinks:load', () => {
   function renderNewTable() {
     const $form = $(this).closest('form');
     let action = $form.attr('action');

app/javascript/src/admin/new_batch_ingest.js

@@ -192,15 +192,17 @@ function loadAndInitGAPI() {
 }
 
 document.addEventListener('turbolinks:load', () => {
-  loadAndInitGAPI();
-  $('.js-batch-ingest-spreadsheet').on(
-    'click',
-    '.js-btn-delete-file',
-    deleteSpreadsheet,
-  );
-  $('.js-batch-ingest-files-list').on(
-    'click',
-    '.js-btn-delete-file',
-    deleteFileFromFilesList,
-  );
+  if (document.querySelector('.js-batch-ingest-spreadsheet')) {
+    loadAndInitGAPI();
+    $('.js-batch-ingest-spreadsheet').on(
+      'click',
+      '.js-btn-delete-file',
+      deleteSpreadsheet,
+    );
+    $('.js-batch-ingest-files-list').on(
+      'click',
+      '.js-btn-delete-file',
+      deleteFileFromFilesList,
+    );
+  }
 });

app/views/application/_feature_image.html.erb

@@ -10,5 +10,5 @@
     </div>
   <% end %>
 <% else %>
-  <%= image_pack_tag('locked-uofa-logo.png', class: 'j-feature-image img-thumbnail', alt: '', size: '350x350') %>
+  <%= image_tag('locked-uofa-logo.png', class: 'j-feature-image img-thumbnail', alt: '', size: '350x350') %>
 <% end %>

app/views/application/_footer.html.erb

@@ -35,7 +35,7 @@
         </li>
       </ul>
       <%= link_to 'https://www.library.ualberta.ca/', target: :_blank, rel: 'noopener' do %>
-        <%= image_pack_tag('ualib-logo.png', alt: t('.uofa_library_logo_alt'), size: '262x40') %>
+        <%= image_tag('ualib-logo.png', alt: t('.uofa_library_logo_alt'), size: '262x40') %>
       <% end %>
     </div>
   </div>

app/views/application/_navbar.html.erb

@@ -4,14 +4,14 @@
   </a>
   <nav class="container">
     <%= link_to root_path, class: 'navbar-brand' do %>
-      <%= image_pack_tag('era-logo.png',
-                         width: '100',
-                         class: 'align-top d-none d-md-block',
-                         alt: t('.era_logo_alt')) %>
-      <%= image_pack_tag('era-logo-without-text.png',
-                         width: '100',
-                         class: 'd-inline-block align-top d-md-none',
-                         alt: t('.era_logo_alt')) %>
+      <%= image_tag('era-logo.png',
+                    width: '100',
+                    class: 'align-top d-none d-md-block',
+                    alt: t('.era_logo_alt')) %>
+      <%= image_tag('era-logo-without-text.png',
+                    width: '100',
+                    class: 'd-inline-block align-top d-md-none',
+                    alt: t('.era_logo_alt')) %>
     <% end %>
 
     <button type="button"