Modernise asset pipeline

.github/workflows/brain.yml

@@ -22,7 +22,7 @@ jobs:
 
     services:
       postgres:
-        image: postgres:12
+        image: postgres:13
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: postgres

brain/.gitignore

@@ -41,3 +41,6 @@ dump.psql.gz
 .DS_Store
 .vscode
 Brewfile.lock*
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

brain/.tool-versions

@@ -1,5 +1,5 @@
-postgres 12.11
-yarn 1.22.17
+postgres 13.20
+yarn 1.22.22
 
 # if you're changing either of these, please update
 # `.node-version` or `.ruby-version` to match

brain/Gemfile

@@ -18,14 +18,14 @@ gem 'concurrent-ruby', '1.3.4'
 
 gem 'googlecharts'
 
-gem 'sass-rails'
+gem 'cssbundling-rails'
 gem 'sdoc', group: :doc
-gem 'sprockets-rails'
+gem 'propshaft'
 gem 'terminal-table'
 gem 'trueskill'
 gem 'will_paginate'
 
-gem 'webpacker', '~> 6.0.0.rc.6'
+gem 'jsbundling-rails'
 gem 'bootsnap', require: false
 
 group :development do

brain/Gemfile.lock

@@ -88,6 +88,8 @@ GEM
     coderay (1.1.3)
     concurrent-ruby (1.3.4)
     crass (1.0.6)
+    cssbundling-rails (1.4.3)
+      railties (>= 6.0.0)
     date (3.4.1)
     diff-lcs (1.5.1)
     dry-core (1.1.0)
@@ -130,6 +132,8 @@ GEM
       multi_json (>= 1.3.2)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
+    jsbundling-rails (1.3.1)
+      railties (>= 6.0.0)
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
@@ -171,6 +175,11 @@ GEM
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     pg (1.5.9)
+    propshaft (1.1.0)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
+      railties (>= 7.0.0)
     pry (0.15.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -182,8 +191,6 @@ GEM
       nio4r (~> 2.0)
     racc (1.8.1)
     rack (2.2.15)
-    rack-proxy (0.7.7)
-      rack
     rack-test (2.2.0)
       rack (>= 1.3)
     rails (7.0.8.7)
@@ -241,16 +248,6 @@ GEM
     rspec-support (3.13.2)
     ruby2_keywords (0.0.5)
     rubyzip (2.4.1)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     sdoc (2.6.1)
       rdoc (>= 5.0)
     selenium-webdriver (4.28.0)
@@ -259,21 +256,12 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.1.0)
     shoulda-matchers (6.4.0)
       activesupport (>= 5.2.0)
-    sprockets (4.2.1)
-      concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
-    sprockets-rails (3.5.2)
-      actionpack (>= 6.1)
-      activesupport (>= 6.1)
-      sprockets (>= 3.0.0)
     stringio (3.1.2)
     terminal-table (4.0.0)
       unicode-display_width (>= 1.1.1, < 4)
     thor (1.3.2)
-    tilt (2.6.0)
     timecop (0.9.10)
     timeout (0.4.3)
     trueskill (1.0.0)
@@ -288,11 +276,6 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.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 (1.2.11)
     websocket-driver (0.7.7)
       base64
@@ -311,29 +294,29 @@ DEPENDENCIES
   bootsnap
   capybara
   concurrent-ruby (= 1.3.4)
+  cssbundling-rails
   factory_bot_rails
   faker
   googlecharts
   grape
   grape-entity
+  jsbundling-rails
   listen
   net-http
   newrelic_rpm
   pg
+  propshaft
   pry
   puma
   rails (~> 7.0.8)
   rspec-rails
-  sass-rails
   sdoc
   selenium-webdriver
   shoulda-matchers
-  sprockets-rails
   terminal-table
   timecop
   trueskill
   web-console
-  webpacker (~> 6.0.0.rc.6)
   will_paginate
 
 RUBY VERSION

brain/Procfile.dev

@@ -1,2 +1,4 @@
-webpack: bin/webpack-dev-server
+postgres: pg_ctl status | grep -q "no server running" && postgres -F -p ${LEAGUEBOT_DB_PORT:-5432} || (echo "Postgres already running, using existing server" && tail -f /dev/null)
+js: NODE_ENV=${NODE_ENV:-development} yarn build --watch
+css: yarn build:css --watch
 rails: bin/rails s -p 3000

brain/app/assets/stylesheets/application.scss

@@ -1,34 +1,19 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require reset
- *= require_tree .
- *= require_self
- */
+@use 'reset';
 
 @font-face {
   font-family: SuperMario;
-  src: font-url('SuperMario.ttf');
+  src: url('SuperMario.ttf');
 }
 
 @font-face {
   font-family: Circular;
-  src: font-url('CircularStd-Medium.otf');
+  src: url('CircularStd-Medium.otf');
 }
 
 @font-face {
   font-family: Circular;
   font-weight: bold;
-  src: font-url('CircularStd-Bold.otf');
+  src: url('CircularStd-Bold.otf');
 }
 
 html, body {

brain/app/javascript/application.js

@@ -1,17 +1,2 @@
-// 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.
-
-// require('@rails/ujs').start();
-// require('@rails/activestorage').start();
-require('channels');
-
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)
-
-require('entrypoints/Application');
+// Entry point for the build script in your package.json
+import './entrypoints/Application';

brain/app/views/layouts/application.html.erb

@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="root"></div>
-  <%= javascript_pack_tag 'application' %>
+  <%= javascript_include_tag 'application' %>
 </body>
 </html>

brain/babel.config.js

@@ -1,18 +1,3 @@
-function hasPreset(presets, preset) {
-  return presets.some(p => (Array.isArray(p) ? p[0] === preset : p == preset));
-}
-
-module.exports = function (api) {
-  const webpackerConfig = require('@rails/webpacker/package/babel/preset.js');
-  const config = webpackerConfig(api);
-
-  return {
-    ...config,
-    presets: [
-      ...config.presets,
-      !hasPreset(config.presets, '@babel/preset-react') && '@babel/preset-react',
-      !hasPreset(config.presets, '@babel/preset-typescript') && '@babel/preset-typescript',
-      '@emotion/babel-preset-css-prop',
-    ].filter(Boolean),
-  };
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript', '@emotion/babel-preset-css-prop'],
 };

brain/config/initializers/assets.rb

@@ -5,11 +5,3 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-
-# Precompile additional assets.
-# application.js, application.css, and all non-JS/CSS in the app/assets
-# folder are already added.
-# Rails.application.config.assets.precompile += %w( admin.js admin.css )
-
-# Add node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join("node_modules")