Moving from webpacker to vite

.gitignore

@@ -47,3 +47,11 @@ yarn-debug.log*
 .DS_Store
 
 /spec/fixtures/storage/
+
+# 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
+

Capfile

@@ -34,6 +34,7 @@ install_plugin Capistrano::SCM::Git
 # require "capistrano/bundler"
 # require "capistrano/rails/assets"
 # require "capistrano/rails/migrations"
+require "capistrano/rails"
 require "capistrano/passenger"
 require "whenever/capistrano"
 

Gemfile

@@ -16,8 +16,6 @@ gem "pg"
 gem "puma", "~> 5.0"
 # Use SCSS for stylesheets
 gem "sass-rails", ">= 6"
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem "webpacker", "~> 5.0"
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem "turbolinks", "~> 5"
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
@@ -29,6 +27,7 @@ gem "jbuilder", "~> 2.7"
 gem "nokogiri", ">= 1.13.4"
 gem "rolify"
 gem "rspec-rails", "~> 5.0.0"
+gem "vite_rails"
 gem "webmock"
 gem "whenever"
 

Gemfile.lock

@@ -178,6 +178,7 @@ GEM
       warden (~> 1.2.3)
     diff-lcs (1.5.0)
     docile (1.4.0)
+    dry-cli (0.7.0)
     dry-core (0.8.1)
       concurrent-ruby (~> 1.0)
     dry-monads (1.4.0)
@@ -241,10 +242,6 @@ GEM
     nokogiri (1.13.8)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.8-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.13.8-x86_64-linux)
-      racc (~> 1.4)
     omniauth (1.9.2)
       hashie (>= 3.4.6)
       rack (>= 1.6.2, < 3)
@@ -373,7 +370,6 @@ GEM
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     simplecov (0.21.2)
       docile (~> 1.1)
       simplecov-html (~> 0.11)
@@ -415,6 +411,13 @@ GEM
       axiom-types (~> 0.1)
       coercible (~> 1.0)
       descendants_tracker (~> 0.0, >= 0.0.3)
+    vite_rails (3.0.12)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.2.3)
+      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)
@@ -430,11 +433,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.3)
-      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)
@@ -499,10 +497,10 @@ DEPENDENCIES
   spring
   turbolinks (~> 5)
   tzinfo-data
+  vite_rails
   web-console (>= 4.1.0)
   webdrivers
   webmock
-  webpacker (~> 5.0)
   whenever
 
 BUNDLED WITH

Procfile

@@ -1,3 +1,2 @@
 # Procfile
 backend: bin/rails s -p 3000
-frontend: bin/webpack-dev-server

Procfile.dev

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

README.md

@@ -33,17 +33,9 @@ To stop database services:
 2. Run in browser: `RUN_IN_BROWSER=true bundle exec rspec spec`
 
 ### Starting the development server
-*`foreman` is used to enable [Hot Module Replacement for Webpack](https://webpack.js.org/concepts/hot-module-replacement/).*
-
-1. `bundle exec foreman start`
+1. `bundle exec rails s -p 3000`
 2. Access application at [http://localhost:3000/](http://localhost:3000/)
 
-You can also use two terminal windows instead of `foreman` to start the Rails application and the Webpack server.
-This is convenient when you need to step through the code as `byebug` does not always show the prompt when using `foreman`.
-
-1. Terminal one: `bin/rails s -p 3000`
-2. Terminal two: `bin/webpack-dev-server`
-3. Access pdc_describe at [http://localhost:3000/](http://localhost:3000/)
 
 ## DataCite integration
 We use DataCite to mint DOIs and in production you must to define the `DATACITE_*` environment values indicated [here](https://github.com/pulibrary/princeton_ansible/blob/main/group_vars/pdc_describe/production.yml) for the system to run. During development if you do not set these values the system will use a hard-coded DOI.

app/assets/stylesheets/application.scss

@@ -12,12 +12,12 @@
 *
 */
 
-@import "variables/typography";
-@import "components/container";
-@import "components/header";
-@import "components/footer";
-@import "components/works";
-@import "components/works/form";
+@import "variables/typography.scss";
+@import "components/container.scss";
+@import "components/header.scss";
+@import "components/footer.scss";
+@import "components/works.scss";
+@import "components/works/form.scss";
 
 .hidden {
   display: none;

app/assets/stylesheets/components/_container.scss

@@ -1,4 +1,4 @@
-@import "./variables/typography";
+@import "./variables/typography.scss";
 
 .container,
 .container-lg,

app/assets/stylesheets/components/footer.scss

@@ -1,4 +1,4 @@
-@import "./variables/typography";
+@import "./variables/typography.scss";
 
 #footer {
   font-family: "Open Sans", sans-serif;

app/assets/stylesheets/components/header.scss

@@ -1,4 +1,4 @@
-@import "./variables/typography";
+@import "./variables/typography.scss";
 
 header {
   font-family: "Open Sans", sans-serif;

app/javascript/entrypoints/application.js

@@ -0,0 +1,56 @@
+// 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')
+
+// If using a TypeScript entrypoint file:
+//     <%= vite_typescript_tag 'application' %>
+//
+// If you want to use .jsx or .tsx, add the extension:
+//     <%= vite_javascript_tag 'application.jsx' %>
+
+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('../channels/*.js')
+
+// Example: Import a stylesheet in app/frontend/index.css
+// import '~/index.css'
+
+import Rails from "@rails/ujs"
+import Turbolinks from "turbolinks"
+import ActiveStorage from "@rails/activestorage"
+// Provides @mention functionality in textboxes (adds to jQuery UI autocomplete)
+import "./vendor/jquery-ui-triggeredAutocomplete"
+import WorkForm from "./works/form"
+
+if (typeof(window._rails_loaded) == "undefined" || window._rails_loaded == null || !window._rails_loaded) {
+  Rails.start()
+}
+Turbolinks.start()
+ActiveStorage.start()
+
+function setup_work_form () {
+
+    $(".work-form").each( (index, element) => {
+      const $element = $(element);
+      const work = $element.data('work');
+      const workForm = new WorkForm($element, work);
+    });
+  };
+
+$(document).ready( (event) => setup_work_form);
+
+
+$(document).on('turbolinks:load', setup_work_form);
+

app/views/layouts/application.html.erb

@@ -39,7 +39,7 @@
 
   <!-- Provides @mention functionality in textboxes (adds to jQuery UI autocomplete)-->
 
-  <%= javascript_pack_tag 'file_upload', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_pack_tag 'orcid', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= vite_javascript_tag 'file_upload', 'data-turbolinks-track': 'reload' %>
+  <%= vite_javascript_tag 'orcid', 'data-turbolinks-track': 'reload' %>
+  <%= vite_javascript_tag 'application', 'data-turbolinks-track': 'reload' %>
 <% end %>

bin/vite

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'vite' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("vite_ruby", "vite")

config/initializers/content_security_policy.rb

@@ -11,9 +11,20 @@
 #   policy.img_src     :self, :https, :data
 #   policy.object_src  :none
 #   policy.script_src  :self, :https
+# Allow @vite/client to hot reload javascript changes in development
+#    policy.script_src *policy.script_src, :unsafe_eval, "http://#{ ViteRuby.config.host_with_port }" if Rails.env.development?
+
+# You may need to enable this in production as well depending on your setup.
+#    policy.script_src *policy.script_src, :blob if Rails.env.test?
+
 #   policy.style_src   :self, :https
+# Allow @vite/client to hot reload style changes in development
+#    policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development?
+
 #   # If you are using webpack-dev-server then specify webpack-dev-server host
 #   policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
+# Allow @vite/client to hot reload changes in development
+#    policy.connect_src *policy.connect_src, "ws://#{ ViteRuby.config.host_with_port }" if Rails.env.development?
 
 #   # Specify URI for violation reports
 #   # policy.report_uri "/csp-violation-report-endpoint"

config/vite.json

@@ -0,0 +1,22 @@
+{
+  "all": {
+    "sourceCodeDir": "app/javascript",
+    "watchAdditionalPaths": []
+  },
+  "staging": {
+    "publicOutputDir": "describe/vite"
+  },
+  "production": {
+    "publicOutputDir": "describe/vite"
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-dev",
+    "port": 3036
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "vite-test",
+    "port": 3037
+  }
+}