DPL-1047-18: Upgrade Node to v18 (as a stepping stone)

.eslintrc.js

@@ -1,14 +1,17 @@
 module.exports = {
   env: {
     browser: true,
+    commonjs: true,
     es6: true,
-    amd: true,
+    jasmine: true,
+    node: true,
   },
   plugins: ['vue'],
   extends: ['eslint:recommended', 'plugin:vue/recommended', 'prettier'],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     sourceType: 'module',
+    requireConfigFile: false,
   },
   rules: {
     'linebreak-style': ['error', 'unix'],

.github/workflows/test_js.yml

@@ -30,5 +30,5 @@ jobs:
           flags: javascript,${{ github.event_name }}
           fail_ci_if_error: true
           disable_search: true
-          files: ${{ github.workspace }}/app/javascript/coverage/lcov.info
+          files: ${{ github.workspace }}/app/frontend/coverage/lcov.info
           # Note: see codecov.yml for more additional settings

.gitignore

@@ -22,9 +22,9 @@ public/stylesheets/*.css
 doc/
 
 # Testing
+/app/frontend/coverage/
 /coverage
 /spec/examples.txt
-app/javascript/coverage/
 lcov.info
 
 # Tempfiles
@@ -49,5 +49,12 @@ REVISION
 TAG
 release.tar.gz
 
+# 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
+
 # Bye-bug history
 .byebug_history

.nvmrc

@@ -1 +1 @@
-v16.20.2
+v18.20.4

.prettierignore

@@ -15,6 +15,7 @@ public/stylesheets/*.css
 /node_modules
 /public/app/assets
 /public/assets
+/public/vite-*/
 release.tar.gz
 REVISION
 /vendor
@@ -31,10 +32,10 @@ yarn-error.log
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
-app/javascript/coverage/
+app/frontend/coverage/
 
 # Special formatting here
-app/javascript/shared/resources.js
+app/frontend/javascript/shared/resources.js
 
 # if using LSP for Ruby
 .ruby-lsp/

Dockerfile

@@ -16,7 +16,7 @@ RUN apt-get install -y git
 # Set Node to install version 16+, a more recent version such as 20 is recommended
 #   https://github.com/nodesource/distributions
 RUN set -uex \
-    && NODE_MAJOR=16 \
+    && NODE_MAJOR=18 \
     && apt-get update \
     && apt-get install -y ca-certificates curl gnupg \
     && mkdir -p /etc/apt/keyrings \

Gemfile

@@ -6,13 +6,13 @@ group :default do
   gem 'bootsnap'
   gem 'rails'
 
-  # Lets us easily inline our svg to allow styling. Supports the rails asset pipeline.
-  gem 'inline_svg'
-
   gem 'exception_notification'
   gem 'rake'
   gem 'state_machines'
-  gem 'webpacker'
+
+  # Build dependencies
+  gem 'vite_rails'
+  gem 'vite_ruby'
 
   # Adds easy conversions between units
   gem 'ruby-units'
@@ -54,18 +54,8 @@ group :test do
 end
 
 group :development, :test do
-  gem 'uglifier'
-
-  # Bootstrap is a css framework
-  # Pinning to v4 as bootstrap 5 drops compatibility with the latest versions of chrome and FF on XP
-  # Some lab machines are locked to XP due to vendor compatibility
   gem 'bootstrap', '~>4'
-
-  # gem 'coffee-rails', require: false
-  # Use jquery as the JavaScript library
-  gem 'jquery-rails'
-  gem 'sass-rails'
-  gem 'select2-rails'
+  gem 'uglifier'
 end
 
 group :development do

Gemfile.lock

@@ -142,6 +142,7 @@ GEM
     diff-lcs (1.5.1)
     docile (1.4.0)
     drb (2.2.1)
+    dry-cli (1.1.0)
     erubi (1.13.0)
     exception_notification (4.5.0)
       actionmailer (>= 5.2, < 8)
@@ -196,17 +197,10 @@ GEM
     hashie (5.0.0)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
-    inline_svg (1.9.0)
-      activesupport (>= 3.0)
-      nokogiri (>= 1.6)
     io-console (0.7.2)
     irb (1.13.2)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
-    jquery-rails (4.6.0)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     json (2.7.1)
     language_server-protocol (3.17.0.3)
     launchy (3.0.1)
@@ -374,8 +368,6 @@ GEM
     ruby-units (4.0.2)
     ruby2_keywords (0.0.5)
     rubyzip (2.3.2)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -384,13 +376,11 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
-    select2-rails (4.0.13)
     selenium-webdriver (4.18.1)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     sequencescape-client-api (2.0.0)
       activemodel (>= 5.0.0)
       activesupport (>= 5.0.0)
@@ -423,6 +413,13 @@ GEM
     uglifier (4.2.0)
       execjs (>= 0.3.0, < 3)
     unicode-display_width (2.5.0)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.6.0)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
@@ -432,11 +429,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)
@@ -459,8 +451,6 @@ DEPENDENCIES
   factory_bot
   guard-rspec
   hashie
-  inline_svg
-  jquery-rails
   json_api_client!
   launchy
   oj
@@ -479,8 +469,6 @@ DEPENDENCIES
   rubocop-rails
   ruby-units
   sanger_barcode_format!
-  sass-rails
-  select2-rails
   selenium-webdriver (~> 4.1)
   sequencescape-client-api
   simplecov
@@ -489,9 +477,10 @@ DEPENDENCIES
   sprockets-rails
   state_machines
   uglifier
+  vite_rails
+  vite_ruby
   web-console
   webmock
-  webpacker
   yard
 
 BUNDLED WITH

Procfile.dev

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

README.md

@@ -97,6 +97,12 @@ Only one terminal for Limber is needed (unless running the integration suite)
    bundle exec rails s
    ```
 
+1. In a second Limber terminal, start the Vite development server for faster development of frontend resources (will start on port 3036):
+
+   ```shell
+   yarn dev
+   ```
+
 ## Linting and formatting
 
 Linting and formatting are provided by rubocop, prettier and Eslint. I strongly
@@ -175,15 +181,6 @@ yarn test
 yarn test "path/to/file" -t "name of the test"
 ```
 
-If you get '[Webpacker] Compilation Failed' when trying to run specs, you might need to get yarn to install its dependencies properly. One way of doing this is by precompiling the assets:
-
-```bash
-yarn
-rake assets:precompile
-```
-
-This has the added benefit that it reduces the risk of timeouts when the tests are running, as assets will not get compiled on the fly.
-
 ### Writing specs
 
 There are a few tools available to assist with writing specs:
@@ -206,6 +203,18 @@ Request stubs are provided by webmock. Two helper methods will assist with the m
 
 **Note**: Due to the way the api functions, the factories don't yet support nested associations.
 
+#### Feature debugging
+
+To help with debugging feature specs, temporarily comment out the line `options.add_argument('--headless')` in `spec/spec_helper.rb`. This will allow you to see the browser as the tests run. To pause the execution at certain point, possibly before an expected failure, insert `binding.pry` at the appropriate place in the spec.
+
+To save a screenshot of the browser, insert the line below into the spec.
+
+```rb
+save_screenshot("#{Time.now.iso8601}.png")
+```
+
+Screenshots will be saved to `tmp/capybara/`.
+
 ### Lefthook
 
 [Lefthook](https://github.com/Arkweid/lefthook) is a git-hook manager that will

app/assets/config/manifest.js

@@ -1,3 +1 @@
-//= link_tree ../images
-//= link_directory ../javascripts application.js
-//= link_directory ../stylesheets .css
+// Required to keep Sprockets happy, else Sprockets::Railtie::ManifestNeededError is raised