Remove webpacker and switch to dartsass/esbuild

.github/workflows/build.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   bundle-audit:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code
@@ -17,8 +17,12 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: "yarn"
+          node-version: 22
+          cache: "npm"
+
+      - name: Install packages
+        run: |
+          npm install --no-fund --no-audit
 
       - name: Setup ruby
         uses: ruby/setup-ruby@v1
@@ -31,7 +35,7 @@ jobs:
           bundle exec bundle-audit check --update
 
   brakeman:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code
@@ -40,8 +44,12 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: "yarn"
+          node-version: 22
+          cache: "npm"
+
+      - name: Install packages
+        run: |
+          npm install --no-fund --no-audit
 
       - name: Setup ruby
         uses: ruby/setup-ruby@v1
@@ -54,7 +62,7 @@ jobs:
           bundle exec brakeman --no-pager
 
   rubocop:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     steps:
       - name: Checkout code
@@ -63,8 +71,12 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: "yarn"
+          node-version: 22
+          cache: "npm"
+
+      - name: Install packages
+        run: |
+          npm install --no-fund --no-audit
 
       - name: Setup ruby
         uses: ruby/setup-ruby@v1
@@ -77,7 +89,7 @@ jobs:
           bundle exec rubocop
 
   rspec:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     services:
       postgres:
@@ -98,8 +110,12 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: "yarn"
+          node-version: 22
+          cache: "npm"
+
+      - name: Install packages
+        run: |
+          npm install --no-fund --no-audit
 
       - name: Setup ruby
         uses: ruby/setup-ruby@v1
@@ -129,7 +145,7 @@ jobs:
           bundle exec rspec
 
   cucumber:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     services:
       postgres:
@@ -150,8 +166,12 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 16
-          cache: "yarn"
+          node-version: 22
+          cache: "npm"
+
+      - name: Install packages
+        run: |
+          npm install --no-fund --no-audit
 
       - name: Setup ruby
         uses: ruby/setup-ruby@v1

.gitignore

@@ -28,6 +28,10 @@
 # Ignore master key for decrypting credentials and more.
 /config/master.key
 
+# Ignore asset builds
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
 /public/packs
 /public/packs-test
 /node_modules

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:3.2-bullseye
+FROM ruby:3.2-bookworm
 
 ENV BUNDLE_PATH=/bundle
 
@@ -9,9 +9,9 @@ RUN wget --quiet -O - https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key
     gpg --dearmor -o /usr/share/keyrings/pgdg.gpg
 
 # Add apt repositories
-RUN echo 'deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_16.x nodistro main' \
+RUN echo 'deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_22.x nodistro main' \
     > /etc/apt/sources.list.d/nodesource.list && \
-    echo 'deb [signed-by=/usr/share/keyrings/pgdg.gpg] http://apt.postgresql.org/pub/repos/apt/ bullseye-pgdg main' \
+    echo 'deb [signed-by=/usr/share/keyrings/pgdg.gpg] http://apt.postgresql.org/pub/repos/apt/ bookworm-pgdg main' \
     > /etc/apt/sources.list.d/pgdg.list && \
     apt-get update
 
@@ -23,10 +23,7 @@ RUN apt-get install -y --no-install-recommends \
 RUN mkdir -p "/root/.config/chromium/Crash Reports/pending/"
 
 # Install NPM
-RUN npm install -g npm@9
-
-# Install Yarn
-RUN npm install -g yarn@1
+RUN npm install -g npm@10
 
 # Install Bundler
 RUN gem install bundler -v 2.5.23

Gemfile

@@ -8,14 +8,17 @@ gem 'rails', '< 7.0'
 gem 'bootsnap', require: false
 
 gem 'appsignal'
+gem 'dartsass-rails'
 gem 'devise'
 gem 'delayed_job_active_record'
 gem 'jbuilder'
+gem 'jsbundling-rails'
 gem 'pg', '< 1.5'
 gem 'puma'
 gem 'notifications-ruby-client'
+gem 'sprockets-rails'
+gem 'stimulus-rails'
 gem 'textacular'
-gem 'webpacker'
 gem 'will_paginate'
 gem 'statesman'
 
@@ -37,8 +40,9 @@ group :development, :test do
 end
 
 group :development do
-  gem 'web-console'
+  gem 'foreman'
   gem 'listen'
+  gem 'web-console'
 end
 
 group :test do

Gemfile.lock

@@ -68,6 +68,7 @@ GEM
     ast (2.4.2)
     base64 (0.2.0)
     bcrypt (3.1.20)
+    bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
@@ -124,6 +125,9 @@ GEM
       rexml (~> 3.0)
       webrick (~> 1.7)
     cucumber-tag-expressions (4.1.0)
+    dartsass-rails (0.5.1)
+      railties (>= 6.0.0)
+      sass-embedded (~> 1.63)
     database_cleaner (2.1.0)
       database_cleaner-active_record (>= 2, < 3)
     database_cleaner-active_record (2.2.0)
@@ -156,14 +160,20 @@ GEM
     faker (2.19.0)
       i18n (>= 1.6, < 2)
     ffi (1.17.0)
+    foreman (0.88.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    google-protobuf (4.28.3)
+      bigdecimal
+      rake (>= 13)
     hashdiff (1.0.1)
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
     jbuilder (2.13.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     json (2.7.6)
     jwt (2.3.0)
     language_server-protocol (3.17.0.3)
@@ -220,8 +230,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (2.2.10)
-    rack-proxy (0.7.0)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (6.1.7.10)
@@ -307,13 +315,15 @@ GEM
       rubocop-rspec (~> 3, >= 3.0.1)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sass-embedded (1.80.6)
+      google-protobuf (~> 4.28)
+      rake (>= 13)
     selenium-webdriver (4.26.0)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     shoulda-matchers (5.0.0)
       activesupport (>= 5.2.0)
     sprockets (4.2.1)
@@ -324,6 +334,8 @@ GEM
       activesupport (>= 6.1)
       sprockets (>= 3.0.0)
     statesman (9.0.1)
+    stimulus-rails (1.3.4)
+      railties (>= 6.0.0)
     sys-uname (1.3.0)
       ffi (~> 1.1)
     textacular (5.4.0)
@@ -345,11 +357,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)
     webrick (1.9.0)
     websocket (1.2.11)
     websocket-driver (0.7.6)
@@ -371,13 +378,16 @@ DEPENDENCIES
   byebug
   capybara
   cucumber-rails
+  dartsass-rails
   database_cleaner
   delayed_job_active_record
   devise
   dotenv-rails
   factory_bot_rails
   faker
+  foreman
   jbuilder
+  jsbundling-rails
   listen
   notifications-ruby-client
   pg (< 1.5)
@@ -393,12 +403,13 @@ DEPENDENCIES
   rubocop-rspec_rails
   selenium-webdriver
   shoulda-matchers
+  sprockets-rails
   statesman
+  stimulus-rails
   textacular
   timecop
   web-console
   webmock
-  webpacker
   will_paginate
 
 RUBY VERSION

Procfile.dev

@@ -1,3 +1,4 @@
-app: bin/rails server
-assets: bin/webpack-dev-server
-worker: rake jobs:work
+web: bin/rails server -b 0.0.0.0 -p 3000
+worker: bin/rake jobs:work
+css: bin/rails dartsass:watch
+js: npm run esbuild -- --sourcemap --watch

app.json

@@ -7,5 +7,5 @@
       "url": "heroku/ruby"
     }
   ],
-  "stack": "heroku-20"
+  "stack": "heroku-24"
 }

app/assets/config/manifest.js

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

app/javascript/stylesheets/application.scss → app/assets/stylesheets/application.scss

@@ -1,7 +1,7 @@
-$govuk-assets-path: "~govuk-frontend/govuk/assets/";
+$govuk-assets-path: "govuk-frontend/govuk/assets/";
 
 @import "govuk-frontend/govuk/all";
-@import 'admin';
+@import "admin";
 
 .custom-background {
   background-color: #f3f2f1;

app/helpers/errors_helper.rb

@@ -18,7 +18,7 @@ def error_message_for(object, field, options = {})
       class: "govuk-error-message"
     }
 
-    tag.span(defaults.merge(options)) do
+    tag.span(**defaults, **options) do
       concat(t(:prefix_html, scope: :errors))
       concat(errors.first)
     end
@@ -31,7 +31,7 @@ def error_summary(object, options = {})
       class: "govuk-list govuk-error-summary__list"
     }
 
-    summary = tag.ul(defaults.merge(options)) do
+    summary = tag.ul(**defaults, **options) do
       object.errors.each do |error|
         id = error.attribute.to_s.dasherize
         link = link_to(error.full_message, "##{id}-error")

app/javascript/application.js

@@ -0,0 +1,3 @@
+require("@rails/ujs").start()
+
+import "./controllers"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/bulk_actions_controller.js

@@ -1,4 +1,4 @@
-import { Controller } from "stimulus"
+import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [

app/javascript/controllers/index.js

@@ -1,9 +1,8 @@
-// Load all the controllers within this directory and all subdirectories. 
-// Controller files must be named *_controller.js.
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller or create them with
+// ./bin/rails generate stimulus controllerName
 
-import { Application } from "stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
+import { application } from "./application"
 
-const application = Application.start()
-const context = require.context("controllers", true, /_controller\.js$/)
-application.load(definitionsFromContext(context))
+import BulkActionsController from "./bulk_actions_controller"
+application.register("bulk-actions", BulkActionsController)

app/javascript/packs/govuk.js → app/javascript/govuk.js

@@ -1,4 +1,3 @@
 require("govuk-frontend/govuk/all").initAll()
-require.context('govuk-frontend/govuk/assets/images', true)
 
 document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');