Replace webpacker with Vite

.gitignore

@@ -27,3 +27,10 @@
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local

Gemfile

@@ -51,7 +51,6 @@ source "https://gems.contribsys.com/" do
   gem "sidekiq-pro"
 end
 
-gem 'almond-rails', '~> 0.1'
 gem 'bixby', '2.0.0'
 gem 'blacklight', '~> 7.18', '< 7.25'
 gem 'blacklight-gallery'
@@ -85,7 +84,7 @@ gem 'sneakers'
 gem 'sprockets', '~> 3.7'
 gem 'sprockets-es6'
 gem 'string_rtl'
-gem 'webpacker', '>= 4.0.x'
+gem 'vite_rails'
 
 gem 'dalli'
 gem 'honeybadger'

Gemfile.lock

@@ -76,8 +76,6 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     airbrussh (1.4.0)
       sshkit (>= 1.6.1, != 1.7.0)
-    almond-rails (0.3.0)
-      rails (>= 4.2)
     amq-protocol (2.3.2)
     ast (2.4.2)
     autoprefixer-rails (10.4.7.0)
@@ -248,6 +246,7 @@ GEM
     diffy (3.4.0)
     digest-crc (0.5.1)
     docile (1.4.0)
+    dry-cli (0.7.0)
     dumb_delegator (1.0.0)
     erubi (1.10.0)
     execjs (2.8.1)
@@ -549,7 +548,6 @@ GEM
     selenium-webdriver (3.142.7)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     serverengine (2.1.1)
       sigdump (~> 0.2.2)
     set (1.0.1)
@@ -635,6 +633,13 @@ GEM
       axiom-types (~> 0.1)
       coercible (~> 1.0)
       descendants_tracker (~> 0.0, >= 0.0.3)
+    vite_rails (3.0.10)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0)
+    vite_ruby (3.2.0)
+      dry-cli (~> 0.7.0)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -650,11 +655,6 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (6.0.0.pre.2)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -666,7 +666,6 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  almond-rails (~> 0.1)
   axe-core-rspec
   bixby (= 2.0.0)
   blacklight (~> 7.18, < 7.25)
@@ -732,10 +731,10 @@ DEPENDENCIES
   string_rtl
   turbolinks
   uglifier (>= 1.3.0)
+  vite_rails
   web-console (~> 4.0)
   webdrivers (~> 3.0)
   webmock
-  webpacker (>= 4.0.x)
 
 BUNDLED WITH
-   2.3.18
+   2.3.17

Procfile.dev

@@ -0,0 +1,3 @@
+
+vite: bin/vite dev
+web: bin/rails s

app/assets/javascripts/application.js

@@ -21,21 +21,4 @@
 //= require blacklight_gallery
 //= require openseadragon
 //= require spotlight
-// ES6 modules
-//= require almond
-//= require universal_viewer
-//= require pom_boot
-//= require more_link
-//= require back_to_top
 //= require sir_trevor/blocks/recent_items
-
-Blacklight.onLoad(function() {
-  Initializer = require('pom_boot')
-  window.pom = new Initializer()
-})
-
-// work around for https://bugs.chromium.org/p/chromium/issues/detail?id=1262589&q=contenteditable&can=1
-if (navigator.userAgentData && navigator.userAgentData.brands &&
-    Boolean(navigator.userAgentData.brands.find(function(b) { return b.brand === 'Chromium' && parseFloat(b.version, 10) >= 95 && parseFloat(b.version, 10) < 97; }))) {
-  SirTrevor.Blocks.Text.prototype.editorHTML = "<div class=\"st-text-block\" spellcheck=\"false\" contenteditable=\"true\"></div>";
-}

app/assets/javascripts/back_to_top.js → app/javascript/dpul/back_to_top.js

@@ -1,14 +1,16 @@
-$(document).ready(function() {
+export default class BackToTop {
+  constructor() {
     $(window).scroll(function(){
         if ($(this).scrollTop() > 100) {
             $('.back-to-top').fadeIn();
         } else {
             $('.back-to-top').fadeOut();
         }
-    });
+    })
 
     $('.back-to-top').click(function(){
         $('html, body').animate({scrollTop : 0},800);
         return false;
-    });
-});
+    })
+  }
+}

app/assets/javascripts/more_link.js → app/javascript/dpul/more_link.js

@@ -1,13 +1,14 @@
-$(document).ready(function() {
-    var value_id = $("#document").data("document-id");
-    var limitCharacters = 1200;
-    var dl_children = $("#doc_"+value_id).find('dd');
+export default class MoreLink {
+  constructor() {
+    let value_id = $("#document").data("document-id");
+    let limitCharacters = 1200;
+    let dl_children = $("#doc_"+value_id).find('dd');
     dl_children.each(function(i, item){
-        var char_length = $(this).text().length;
+        let char_length = $(this).text().length;
         if (char_length > limitCharacters) {
-           var displayedCharacters = $(this).text().substr(0,limitCharacters);
-           var hiddenCharacters = $(this).text().substr(limitCharacters, char_length - limitCharacters );
-           var html_ul_li =
+           let displayedCharacters = $(this).text().substr(0,limitCharacters);
+           let hiddenCharacters = $(this).text().substr(limitCharacters, char_length - limitCharacters );
+           let html_ul_li =
            displayedCharacters +
            '<span class="morecontent">' + hiddenCharacters +
            '</span>&nbsp;&nbsp;<span><a href="" class="morelink">' + " ... Less" + '</a></span>';
@@ -28,4 +29,5 @@ $(document).ready(function() {
         $(this).prev().toggle();
         return false;
     })
-});
+  }
+}

app/javascript/dpul/pom_boot.js

@@ -0,0 +1,43 @@
+import UniversalViewer from "./universal_viewer"
+import BackToTop from "./back_to_top"
+import MoreLink from "./more_link"
+
+export default class Initializer {
+  constructor() {
+    this.initialize_blacklight_oembed()
+    this.universal_viewer = new UniversalViewer
+    this.initialize_tooltips()
+    this.bindPageModifier()
+    this.initializeChromeWorkaround()
+    new BackToTop()
+    new MoreLink()
+  }
+
+  initialize_blacklight_oembed() {
+    $("[data-embed-url]").oEmbed()
+  }
+
+  initialize_tooltips() {
+    $('[data-toggle="tooltip"]').tooltip()
+  }
+
+  // Updates page display for embed widget.
+  // TODO: Remove when fixed in Spotlight
+  bindPageModifier() {
+    const pictureElement = $("picture")
+    if(pictureElement.length == 0) return
+    pictureElement.data("osdViewer").addHandler("page", this.updatePage)
+  }
+
+  updatePage(data) {
+    $("#osd-page").text(data.page + 1)
+  }
+
+  // work around for https://bugs.chromium.org/p/chromium/issues/detail?id=1262589&q=contenteditable&can=1
+  initializeChromeWorkaround() {
+    if (navigator.userAgentData && navigator.userAgentData.brands &&
+        Boolean(navigator.userAgentData.brands.find(function(b) { return b.brand === 'Chromium' && parseFloat(b.version, 10) >= 95 && parseFloat(b.version, 10) < 97; }))) {
+      SirTrevor.Blocks.Text.prototype.editorHTML = "<div class=\"st-text-block\" spellcheck=\"false\" contenteditable=\"true\"></div>";
+    }
+  }
+}

app/javascript/entrypoints/application.js

@@ -0,0 +1,38 @@
+// To see this message, add the following to the `<head>` section in your
+// views/layouts/application.html.erb
+//
+//    <%= vite_client_tag %>
+//    <%= vite_javascript_tag 'application' %>
+console.log('Vite ⚡️ Rails')
+console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
+
+// Example: Load Rails libraries in Vite.
+//
+// import * as Turbo from '@hotwired/turbo'
+// Turbo.start()
+//
+// import ActiveStorage from '@rails/activestorage'
+// ActiveStorage.start()
+//
+// // Import all channels.
+// const channels = import.meta.globEager('./**/*_channel.js')
+
+// Example: Import a stylesheet in app/frontend/index.css
+// import '~/index.css'
+import Vue from 'vue/dist/vue.esm'
+import system from 'lux-design-system'
+import 'lux-design-system/dist/system/system.css'
+import Initializer from '@/dpul/pom_boot'
+
+Vue.use(system)
+
+document.addEventListener('DOMContentLoaded', () => {
+  var elements = document.getElementsByClassName('lux')
+  for(var i = 0; i < elements.length; i++){
+    new Vue({
+      el: elements[i]
+    })
+  }
+
+  window.pom = new Initializer()
+})

app/views/layouts/spotlight/base.html.erb

@@ -8,15 +8,14 @@
     <title><%= h(@page_title || application_name.to_s) %></title>
     <link href="<%= current_exhibit ? spotlight.opensearch_exhibit_catalog_url(current_exhibit, format: 'xml') : main_app.opensearch_catalog_url(format: 'xml') %>" title="<%= h(@page_title || application_name.to_str) %>" type="application/opensearchdescription+xml" rel="search"/>
     <%= favicon_link_tag 'favicon.ico' %>
-    <%= javascript_pack_tag 'application' %>
+    <%= vite_javascript_tag 'application' %>
+    <%= javascript_include_tag "application" %>
     <link rel="stylesheet" href="https://use.typekit.net/yhr7zwc.css">
-    <%= stylesheet_pack_tag 'application' %>
     <% if current_exhibit %>
       <%= exhibit_stylesheet_link_tag "application" %>
     <% else %>
       <%= stylesheet_link_tag "application" %>
     <% end %>
-    <%= javascript_include_tag "application" %>
     <%= csrf_meta_tags %>
     <%= content_for(:head) %>
     <%= description %>

app/views/shared/_footer.html.erb

@@ -1,4 +1,6 @@
-<footer class="lux" role="contentinfo">
+<footer role="contentinfo">
+  <div class="lux">
     <library-footer></library-footer>
-    <a href="#l-page" class="back-to-top">Back to top.</a>
+  </div>
+  <a href="#l-page" class="back-to-top">Back to top.</a>
 </footer>