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

@@ -1,4 +1,4 @@
 # Procfile
 backend: bin/rails s -p 3000
-frontend: bin/webpack-dev-server
+frontend: bin/vite dev
 sidekiq: bundle exec sidekiq

README.md

@@ -12,9 +12,8 @@ formerly known as Pomegranate, but renamed to the offical brand: Digital PUL.
 * Ruby
 * Nodejs
 * Java (to run Solr server)
-* (Postgres (for OSX dev systems, install via homebrew)
-* Redis (install via homebrew and run via `homebrew services`)
-
+* Postgres
+* Redis
 
 ## Initial Setup
 
@@ -39,12 +38,18 @@ destroy` or turn off all services with `lando poweroff`.
 1. Install Lando DMG from <https://github.com/lando/lando/releases>
 1. `rake servers:start`
 
-1. For test:
-   - In a separate terminal: `bundle exec rspec`
-1. For development:
-   - In a separate terminal: `foreman start`
-     - Or run services separately as shown in <https://github.com/pulibrary/dpul/blob/main/Procfile>
-   - Access DPUL at <http://localhost:3000/>
+### Running Tests
+
+```sh
+bundle exec rspec
+```
+
+## Running in Development
+
+1. Either run `foreman start` in its own terminal or run
+   each service listed in the [Procfile](https://github.com/pulibrary/dpul/blob/main/Procfile) in its own terminal. Running each separately makes for easier debugging.
+1. Access DPUL at <http://localhost:3000/>
+
 
 ### Importing Data:
 
@@ -56,12 +61,6 @@ destroy` or turn off all services with `lando poweroff`.
 5. Either wait for a solr commit or manually commit in the rails console with
    `Blacklight.default_index.connection.commit`
 
-### Running Tests
-
-```sh
-bundle exec rspec
-```
-
 ### Auto-update from [Figgy](https://github.com/pulibrary/figgy)
 
 Figgy announces events to a durable RabbitMQ fanout exchange. In order to use them, do the

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()
+})