Migrate JavaScript and Stylesheets to esbuild

.gitignore

@@ -28,9 +28,10 @@
 # Ignore master key for decrypting credentials and more.
 /config/master.key
 
-/public/packs
-/public/packs-test
 /node_modules
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

.node-version

@@ -1 +1 @@
-16.15.0
+22.11.0

Gemfile

@@ -17,8 +17,8 @@ gem 'puma', '~> 5'
 # Use SCSS for stylesheets
 gem 'sass-rails', '>= 6'
 
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-gem 'webpacker', '~> 5.4.0'
+# Bundle and transpile JavaScript in Rails with esbuild, rollup.js, bun, or Webpack.
+gem 'jsbundling-rails', '~> 1.3'
 
 # The speed of a single-page web application without having to write any JavaScript
 gem 'turbo-rails'

Gemfile.lock

@@ -100,6 +100,8 @@ GEM
       activesupport (>= 6.1)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json (2.9.1)
     language_server-protocol (3.17.0.3)
     listen (3.8.0)
@@ -146,8 +148,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (2.2.10)
-    rack-proxy (0.7.6)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.8.7)
@@ -218,7 +218,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     spring (2.1.1)
     spring-watcher-listen (2.0.1)
       listen (>= 2.7, < 4.0)
@@ -262,11 +261,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket (1.2.9)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
@@ -283,6 +277,7 @@ DEPENDENCIES
   byebug
   capybara (>= 2.15)
   ffaker (~> 2.14)
+  jsbundling-rails (~> 1.3)
   listen (~> 3.2)
   pg (>= 0.18, < 2.0)
   puma (~> 5)
@@ -299,7 +294,6 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers
-  webpacker (~> 5.4.0)
 
 RUBY VERSION
    ruby 3.1.4p223

Procfile.dev

@@ -1,2 +1,2 @@
 web: rails s -p 3000
-js: bin/webpack-dev-server
+js: yarn build --watch

README.md

@@ -18,8 +18,8 @@
 * Stimulus 3.2
 * StimulusReflex 3.5
 * Turbo 7.2
-* Webpacker 5
-* Node 16
+* esbuild via ([jsbundling-rails](https://github.com/rails/jsbundling-rails) and [esbuild-rails](https://github.com/excid3/esbuild-rails))
+* Node 22
 * Yarn 1
 * PostgreSQL
 * Redis

app/assets/config/manifest.js

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

app/javascript/application.js

@@ -0,0 +1,5 @@
+import './config'
+import './channels'
+import './controllers'
+
+import './stylesheets/application.scss'

app/javascript/channels/index.js

@@ -1,5 +1,4 @@
 // Load all the channels within this directory and all subdirectories.
 // Channel files must be named *_channel.js.
 
-const channels = require.context('.', true, /_channel\.js$/)
-channels.keys().forEach(channels)
+import "./channels/**/*_channel.js"

app/javascript/controllers/index.js

@@ -2,7 +2,8 @@
 // Controller files must be named *_controller.js.
 
 import { application } from './application'
-import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers'
+import controllers from './**/*_controller.js'
 
-const context = require.context('controllers', true, /_controller\.js$/)
-application.load(definitionsFromContext(context))
+controllers.forEach((controller) => {
+  application.register(controller.name, controller.module.default)
+})

app/javascript/stylesheets/_bootstrap.scss

@@ -0,0 +1,8 @@
+$primary: #44449b;
+$secondary: lightgrey;
+$success: #4fcb4a;
+$info: #9ecdfa;
+
+$breadcrumb-divider: quote(">");
+
+@import 'bootstrap/scss/bootstrap';

app/javascript/stylesheets/application.scss

@@ -1,8 +1,6 @@
-$primary: #44449b;
-$secondary: lightgrey;
-$success: #4fcb4a;
-$info: #9ecdfa;
+#app {
+  margin-bottom: 125px
+}
 
-$breadcrumb-divider: quote(">");
-
-@import 'bootstrap/scss/bootstrap';
+@import './bootstrap';
+@import './folders';

app/views/layouts/application.html.erb

@@ -11,8 +11,7 @@
     <%= content_tag :link, '', rel: 'shortcut icon', href: '/favicon.ico' %>
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
-    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
-    <%= stylesheet_pack_tag 'application', 'data-turbo-track': 'reload' %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/regular.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/solid.css">

bin/dev

@@ -1,9 +1,11 @@
-#!/usr/bin/env bash
+#!/usr/bin/env sh
 
-if ! foreman version &> /dev/null
-then
+if gem list --no-installed --exact --silent foreman; then
   echo "Installing foreman..."
   gem install foreman
 fi
 
-foreman start -f Procfile.dev "$@"
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+exec foreman start -f Procfile.dev --env /dev/null "$@"