Feature: Replace Webpack with Esbuild (#4725)

Because:
- Faster JS compiling!

This commit:
- Adds rails JS bundling gem to handle the esbuild integration with the
asset pipeline
- Removes Webpack and its plugins
- Adds Esbuild
- Use a custom Esbuild config file so we can configure prism and the
esbuild rails plugins
- Renames application.js to main.js because...
- We are importing CSS for some of our dependencies like Flatpickr and
Tippy.js
- Esbuild builds and names its output file the same name as the
entrypoint file - javascript/application.js -> builds/application.js and
builds/application.css
- This was conflicting with our application.css file used with tailwind.
- Renaming the entrypoint to main.js produces builds/main.js and
builds/main.css files which will not conflict

.buildcache

@@ -1,6 +1,5 @@
 public/packs
 tmp/cache/assets
-tmp/cache/webpacker
 ~/.cache/yarn
 node_modules
 tmp/cache/bootsnap-load-path-cache

.eslintrc.json

@@ -6,7 +6,7 @@
     "es2021": true
   },
   "extends": [
-    "airbnb"
+    "airbnb-base"
   ],
   "parserOptions": {
     "ecmaVersion": 12

Gemfile

@@ -22,6 +22,7 @@ gem 'flipper-ui', '~> 1.3'
 gem 'friendly_id', '~> 5.5'
 gem 'github_webhook', '~> 1.4'
 gem 'inline_svg', '~> 1.9'
+gem 'jsbundling-rails', '~> 1.3'
 gem 'kramdown', '~> 2.4'
 gem 'kramdown-parser-gfm'
 gem 'newrelic_rpm', '~> 9.7'
@@ -43,10 +44,10 @@ gem 'seed-fu', '~> 2.3'
 gem 'sentry-rails', '~> 5.17'
 gem 'sentry-ruby', '~> 5.17'
 gem 'sentry-sidekiq', '~> 5.18'
-gem 'shakapacker', '6.6.0'
 gem 'sidekiq', '~> 7.2'
 gem 'sidekiq-cron', '~> 1.12'
 gem 'sprockets-rails', '~> 3.5'
+gem 'stimulus-rails', '~> 1.3'
 gem 'turbo-rails', '~> 2.0'
 gem 'view_component', '~> 3.12'
 

Gemfile.lock

@@ -223,9 +223,11 @@ GEM
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
     io-console (0.7.2)
-    irb (1.13.2)
+    irb (1.14.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json (2.7.2)
     jwt (2.7.0)
     kramdown (2.4.0)
@@ -349,8 +351,6 @@ GEM
     rack-protection (3.2.0)
       base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
-      rack
     rack-session (1.0.2)
       rack (< 3)
     rack-test (2.1.0)
@@ -481,7 +481,6 @@ GEM
     seed-fu (2.3.9)
       activerecord (>= 3.1)
       activesupport (>= 3.1)
-    semantic_range (3.0.0)
     sentry-rails (5.18.2)
       railties (>= 5.0)
       sentry-ruby (~> 5.18.2)
@@ -491,11 +490,6 @@ GEM
     sentry-sidekiq (5.18.2)
       sentry-ruby (~> 5.18.2)
       sidekiq (>= 3.0)
-    shakapacker (6.6.0)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     shoulda-matchers (6.1.0)
       activesupport (>= 5.2.0)
     sidekiq (7.2.4)
@@ -525,6 +519,8 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     statsd-ruby (1.5.0)
+    stimulus-rails (1.3.3)
+      railties (>= 6.0.0)
     stringio (3.1.1)
     strscan (3.1.0)
     thor (1.3.1)
@@ -595,6 +591,7 @@ DEPENDENCIES
   friendly_id (~> 5.5)
   github_webhook (~> 1.4)
   inline_svg (~> 1.9)
+  jsbundling-rails (~> 1.3)
   kramdown (~> 2.4)
   kramdown-parser-gfm
   letter_opener (~> 1.8)
@@ -628,12 +625,12 @@ DEPENDENCIES
   sentry-rails (~> 5.17)
   sentry-ruby (~> 5.17)
   sentry-sidekiq (~> 5.18)
-  shakapacker (= 6.6.0)
   shoulda-matchers (~> 6.1)
   sidekiq (~> 7.2)
   sidekiq-cron (~> 1.12)
   simplecov (~> 0.22)
   sprockets-rails (~> 3.5)
+  stimulus-rails (~> 1.3)
   turbo-rails (~> 2.0)
   vcr (~> 6.2)
   view_component (~> 3.12)

Procfile.dev

@@ -1,4 +1,4 @@
 web: bundle exec puma -C config/puma_development.rb -p 3000
 worker: bundle exec sidekiq
-webpack: bin/webpacker-dev-server
 css: yarn build:css --watch
+js: yarn build --watch

app/javascript/controllers/index.js

@@ -1,15 +1,22 @@
-// Load all the controllers within this directory and all subdirectories.
-// Controller files must be named *_controller.js.
-
+/* eslint-disable import/extensions, import/no-unresolved */
 import { Application } from '@hotwired/stimulus';
-import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers';
+import controllers from './*_controller.js';
+import componentControllers from '../../components/**/*_controller.js';
 
 const application = Application.start();
-const context = require.context('controllers', true, /_controller\.js$/);
-const contextComponents = require.context('../../components', true, /_controller\.js$/);
-
-application.load(
-  definitionsFromContext(context).concat(
-    definitionsFromContext(contextComponents),
-  ),
-);
+
+// Register componentControllers from "../../components/**/*_controller.js"
+componentControllers.forEach((controller) => {
+  application.register(controller.name.replace('..--..--components--', ''), controller.module.default);
+});
+
+// Register controllers from "./*_controller.js"
+controllers.forEach((controller) => {
+  application.register(controller.name, controller.module.default);
+});
+
+// Configure Stimulus development experience
+application.debug = false;
+window.Stimulus = application;
+
+export default application;

app/javascript/main.js

@@ -0,0 +1,5 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import './controllers';
+import '@hotwired/turbo-rails';
+import './src/custom_turbo_stream_actions';

app/views/layouts/_error_tracking.html.erb

@@ -1,5 +1,5 @@
 
-  <% if Rails.env.production? %>
+  <% if false %>
     <script type='text/javascript'>
       window.SENTRY_DSN = "<%= ENV['SENTRY_DSN'] %>"
       window.currentUserSignedIn = "<%= user_signed_in? %>"

app/views/layouts/admin/base.html.erb

@@ -26,10 +26,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
-    <%= stylesheet_pack_tag 'application', 'data-turbo-track': 'reload' %>
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
-
-    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', 'data-turbo-track': 'reload' %>
+    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', defer: true %>
   </head>
 
   <body class="h-full bg-white text-gray-600 dark:bg-gray-900 dark:text-gray-300">

app/views/layouts/application.html.erb

@@ -24,11 +24,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
-    <%= stylesheet_pack_tag 'application', 'data-turbo-track': 'reload' %>
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
-
-    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', 'data-turbo-track': 'reload' %>
     <%= render 'shared/analytics' %>
+    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', type: 'module' %>
   </head>
 
   <body class="h-full bg-gray-50 text-gray-600 dark:bg-gray-900 dark:text-gray-300">

app/views/layouts/component_preview.html.erb

@@ -5,9 +5,8 @@
       Component Previews
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= stylesheet_link_tag 'application_stylesheet', media: 'all' %>
-    <%= stylesheet_pack_tag 'application' %>
-    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
+    <%= stylesheet_link_tag 'application', 'main' media: 'all', 'data-turbo-track': 'reload' %>
+    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', defer: true %>
   </head>
   <body style="padding: 20px">
     <div style="

app/views/layouts/errors.html.erb

@@ -5,8 +5,8 @@
       <%= content_for(:title) || 'Your Career in Web Development Starts Here | The Odin Project' %>
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <%= stylesheet_link_tag 'application', media: 'all' %>
-    <%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
+    <%= stylesheet_link_tag 'application', 'main', media: 'all', 'data-turbo-track': 'reload' %>
+    <%= javascript_include_tag 'main', 'data-turbo-track': 'reload', defer: true %>
   </head>
   <body class="text-center h-screen m-0">
     <main class="grid place-items-center min-h-screen">

babel.config.js

@@ -39,14 +39,6 @@ module.exports = function(api) {
     ].filter(Boolean),
     plugins: [
       '@babel/plugin-transform-destructuring',
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          helpers: false,
-          regenerator: true,
-          corejs: false
-        }
-      ],
       [
         '@babel/plugin-transform-regenerator',
         {
@@ -56,3 +48,4 @@ module.exports = function(api) {
     ].filter(Boolean)
   }
 }
+

bin/dev

@@ -1,9 +1,11 @@
-#!/usr/bin/env bash
+#!/usr/bin/env sh
 
-if ! command -v foreman &> /dev/null
-then
-  echo 'Installing foreman...'
+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 "$@"