Replacing Webpacker with Vite (#268)

.github/workflows/ci.yml

@@ -34,7 +34,8 @@ jobs:
       - name: Install Yarn dependencies
         run: |
           yarn install
-          bundle exec rails webpacker:compile
+          bin/vite build
+          bundle exec rails assets:precompile
       - name: Rubocop
         run: bundle exec rubocop
       - name: Test

.gitignore

@@ -34,3 +34,11 @@ yarn-debug.log*
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+# 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

@@ -19,11 +19,10 @@ gem 'kaminari'
 gem 'premailer-rails'
 gem 'pygmentize'
 gem 'redcarpet'
-gem "dartsass-rails", "~> 0.5.0"
 gem 'validates_email_format_of'
 gem 'warden' # use for auth
-gem 'webpacker', '6.0.0.rc.6'
-gem 'sprockets-rails' # as of Rails 7.0, this is optional
+gem 'vite_rails'
+gem 'sprockets-rails'
 
 group :production do
   gem 'rails_12factor'

Gemfile.lock

@@ -119,9 +119,6 @@ GEM
     css_parser (1.21.0)
       addressable
     csv (3.3.2)
-    dartsass-rails (0.5.1)
-      railties (>= 6.0.0)
-      sass-embedded (~> 1.63)
     date (3.4.1)
     decent_exposure (3.0.4)
       activesupport (>= 4.0)
@@ -136,6 +133,7 @@ GEM
     diff-lcs (1.5.1)
     docile (1.4.1)
     drb (2.2.1)
+    dry-cli (1.2.0)
     erubi (1.13.1)
     factory_bot (6.5.0)
       activesupport (>= 5.0.0)
@@ -151,18 +149,6 @@ GEM
     formatador (1.1.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-protobuf (4.29.2)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.29.2-aarch64-linux)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.29.2-arm64-darwin)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.29.2-x86_64-linux)
-      bigdecimal
-      rake (>= 13)
     guard (2.19.0)
       formatador (>= 0.2.4)
       listen (>= 2.7, < 4.0)
@@ -244,6 +230,7 @@ GEM
     minitest (5.25.4)
     multi_xml (0.7.1)
       bigdecimal (~> 3.1)
+    mutex_m (0.3.0)
     nenv (0.3.0)
     net-imap (0.5.4)
       date
@@ -402,17 +389,7 @@ GEM
       rubocop (>= 1.52.0, < 2.0)
       rubocop-ast (>= 1.31.1, < 2.0)
     ruby-progressbar (1.13.0)
-    sass-embedded (1.83.0)
-      google-protobuf (~> 4.28)
-      rake (>= 13)
-    sass-embedded (1.83.0-aarch64-linux-gnu)
-      google-protobuf (~> 4.28)
-    sass-embedded (1.83.0-arm64-darwin)
-      google-protobuf (~> 4.28)
-    sass-embedded (1.83.0-x86_64-linux-gnu)
-      google-protobuf (~> 4.28)
     securerandom (0.4.1)
-    semantic_range (3.1.0)
     shellany (0.0.1)
     simplecov (0.22.0)
       docile (~> 1.1)
@@ -445,6 +422,15 @@ GEM
     validates_email_format_of (1.8.2)
       i18n (>= 0.8.0)
       simpleidn
+    vite_rails (3.0.19)
+      railties (>= 5.1, < 9)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.9.1)
+      dry-cli (>= 0.7, < 2)
+      logger (~> 1.6)
+      mutex_m
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -456,11 +442,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (6.0.0.rc.6)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -482,7 +463,6 @@ DEPENDENCIES
   capybara-email!
   codeclimate-test-reporter
   createsend
-  dartsass-rails (~> 0.5.0)
   decent_exposure
   devise
   devise-multi_email
@@ -518,10 +498,10 @@ DEPENDENCIES
   sprockets-rails
   tzinfo-data
   validates_email_format_of
+  vite_rails
   warden
   web-console
   webmock
-  webpacker (= 6.0.0.rc.6)
 
 RUBY VERSION
    ruby 3.3.5p100

Procfile.dev

@@ -1,3 +1,2 @@
-js: bin/webpack-dev-server
-web: bundle exec rails server -p 3000
-css: bin/rails dartsass:watch
+web: bin/rails server -p 3000
+vite: bin/vite dev

app/assets/config/manifest.js

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

app/packs/entrypoints/application.js → app/frontend/entrypoints/application.js

@@ -1,29 +1,21 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
-
 import 'core-js/stable'
 import 'regenerator-runtime/runtime'
-
-import Rails from "@rails/ujs"
-Rails.start()
-
-const SignaturePad = require("signature_pad").default;
-
-import "./2019_survey";
-
-import "../styles/application.scss";
-import "../styles/committee.scss";
-import "../styles/sponsorship.scss";
-import "../styles/forms.scss";
-import "../styles/admin.scss";
-import "../styles/signatures.scss";
-import "../styles/surveys.scss";
+import Rails from '@rails/ujs';
+import $ from 'jquery';
+window.$ = $;
+window.jQuery = $;
+
+Rails.start();
+
+import SignaturePad from "signature_pad";
+
+import "./styles/application.scss";
+import "./styles/committee.scss";
+import "./styles/sponsorship.scss";
+import "./styles/forms.scss";
+import "./styles/admin.scss";
+import "./styles/signatures.scss";
+import "./styles/surveys.scss";
 
 $(document).ready(() => {
   $('#mobile-menu-trigger').on('click', () => $('#mobile-menu').slideToggle());

app/packs/styles/application.scss → app/frontend/entrypoints/styles/application.scss

@@ -3,21 +3,22 @@
 body {
   font-family: sans-serif;
   line-height: 1.15;
+  background-color: white;
 }
 
 @tailwind components;
 @tailwind utilities;
 
 p, li, div, span {
-  &> a {
-    @apply text-pink no-underline border-0;
+  & > a {
+    @apply text-red no-underline border-0;
 
     &:hover {
-      @apply text-pink-darker border-b border-pink;
+      @apply text-red-darker border-b border-red;
     }
 
     svg {
-      fill: theme('colors.pink');
+      fill: theme('colors.red');
       opacity: 0.5;
     }
   }
@@ -30,19 +31,19 @@ a {
 }
 
 h1 {
-  @apply text-xl bg-pink text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold;
+  @apply text-xl bg-red text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold;
 }
 
 h2 {
-  @apply text-xl text-pink-dark font-bold my-4 pl-5;
+  @apply text-xl text-red-dark font-bold my-4 pl-5;
 }
 
 h3 {
-  @apply text-lg text-pink-dark font-bold my-3 pl-5;
+  @apply text-lg text-red-dark font-bold my-3 pl-5;
 }
 
 h4 {
-  @apply text-lg text-pink-darkest font-bold mt-3 mb-2 pl-5;
+  @apply text-lg text-red-darkest font-bold mt-3 mb-2 pl-5;
 }
 
 p, li {
@@ -51,7 +52,7 @@ p, li {
 
 .markdown {
   h1 {
-    @apply bg-white text-pink-darkest;
+    @apply bg-white text-red;
   }
 
   blockquote {
@@ -94,11 +95,11 @@ p, li {
 nav {
   .actions {
     a, button {
-      @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-pink font-mono text-pink text-center no-underline;
+      @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-red font-mono text-red text-center no-underline;
       transition: background-color 0.5s ease;
 
       &:hover {
-        @apply bg-pink-darker text-white;
+        @apply bg-red-darker text-white;
       }
     }
   }
@@ -129,7 +130,7 @@ nav {
         @apply no-underline border-cyan border-b;
 
         &:hover {
-          @apply border-purple;
+          @apply border-purple-500;
         }
       }
     }
@@ -163,11 +164,11 @@ nav {
 
 .call-to-action {
   a {
-    @apply text-purple w-5/6 my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-purple text-purple no-underline font-mono;
+    @apply text-red-dark my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-red no-underline font-mono;
     transition: all 0.25s ease;
 
     &:hover {
-      @apply bg-purple-darker text-white;
+      @apply bg-red-darker text-white;
     }
   }
 }
@@ -203,10 +204,10 @@ nav {
   }
 
   a, p {
-    @apply inline-block border-pink border-2 text-pink font-mono no-underline font-bold bg-white py-2 px-5 shadow-md;
+    @apply inline-block border-red border-2 text-red font-mono no-underline font-bold bg-white py-2 px-5 shadow-md;
 
     &:hover {
-      @apply bg-pink text-white;
+      @apply bg-red text-white;
     }
   }
 }
@@ -215,17 +216,13 @@ nav {
   @apply max-w-md text-center my-4;
 
   .flash {
-    @apply text-purple w-5/6 my-4 px-5 py-2 border-2 shadow bg-white border-purple font-mono mx-auto text-sm;
+    @apply text-purple w-6 my-4 px-5 py-2 border-2 shadow bg-white border-purple-500 font-mono mx-auto text-sm;
     transition: all 0.25s ease;
   }
 }
 
 @screen md {
   .devise-links {
-    @apply pl-1/3;
+    @apply pl-4;
   }
 }
-
-.badge {
-  @apply inline-flex items-center rounded bg-green px-2 py-1 text-xs font-medium text-white ring-1 ring-inset;
-}