Remove rails-erb-loader and unify JS-generated files

We have two integrations between JavaScript and Rails:
* js-routes
* i18n-js

Both allow using the same interface in JavaScript as their Ruby pendant. Previously, the setup of both was different and somewhat "hidden" (with temporary files). Now, we make the setup more obvious and put the generated files in a subdirectory of the main `app/javascript` folder.

For the Raketask integration, we use the respective Ruby methods directly, rather than invoking a subprocess (improves performance).

Author: MrSerth

.gitignore

@@ -82,3 +82,6 @@ yarn-debug.log*
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Ignore automatically generated JavaScript files.
+/app/javascript/generated/*

app/javascript/application.js

@@ -46,7 +46,7 @@ import 'jquery-ui/themes/base/sortable.css'
 
 // I18n locales
 import { I18n } from "i18n-js";
-import locales from "../../tmp/locales.json";
+import locales from "./generated/locales.json";
 
 Promise.all(
     Object.keys(locales).map(locale => import(`select2/dist/js/i18n/${locale}`))
@@ -74,7 +74,7 @@ i18n.locale = userLocale;
 window.I18n = i18n;
 
 // Routes
-import * as Routes from 'routes.js.erb';
+import * as Routes from 'generated/routes';
 window.Routes = Routes;
 
 // ACE editor

app/javascript/routes.js.erb

@@ -113,4 +113,7 @@
 
   # Apply autocorrection by RuboCop to files generated by `bin/rails generate`.
   config.generators.apply_rubocop_autocorrect_after_generate!
+
+  # Automatically update js-routes file when routes.rb is changed
+  config.middleware.use(JsRoutes::Middleware)
 end

config/environments/development.rb

@@ -1,6 +1,6 @@
 ---
 translations:
-  - file: tmp/locales.json
+  - file: app/javascript/generated/locales.json
     patterns:
       - "*"
       - "!*.activerecord"

config/i18n.yml

@@ -1,6 +1,29 @@
 # frozen_string_literal: true
 
-JsRoutes.setup do |config|
-  config.documentation = false
-  config.url_links = true
+JsRoutes.setup do |c|
+  # Setup your JS module system:
+  # ESM, CJS, AMD, UMD or nil.
+  c.module_type = 'ESM'
+
+  # Follow javascript naming convention
+  # but lose the ability to match helper name
+  # on backend and frontend consistently.
+  # c.camel_case = true
+
+  # Generate only helpers that match specific pattern.
+  # c.exclude = /^api_/
+  # c.include = /^admin_/
+
+  # Generate `*_url` helpers besides `*_path`
+  # for apps that work on multiple domains.
+  c.url_links = true
+
+  # Specify the file that will be generated.
+  c.file = Rails.root.join('app/javascript/generated/routes.js')
+
+  # Include JSDoc comments in generated file.
+  c.documentation = true
+
+  # More options:
+  # @see https://github.com/railsware/js-routes#available-options
 end

config/initializers/js_routes.rb

@@ -10,9 +10,6 @@ const TerserPlugin = require("terser-webpack-plugin");
 const WebpackAssetsManifest = require('webpack-assets-manifest');
 const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
 
-// Custom ERB loader to disable Spring and prevent crashes
-const erb = require("./loaders/erb");
-
 // This setting will change the absolute path used to refer
 // external files (images, fonts, ...) in the generated assets
 const relative_url_root = process.env.RAILS_RELATIVE_URL_ROOT || '';
@@ -45,7 +42,6 @@ const envConfig = module.exports = {
                     filename: 'icons/[hash].png'
                 },
             },
-            erb,
             {
                 // Exclude non-JS file from select2-i18n, otherwise breaking our dynamic language lookup.
                 test: /select2\/dist\/js\/i18n\/build\.txt$/,

config/webpack/loaders/erb.js

@@ -1,15 +1,16 @@
 # frozen_string_literal: true
 
 task before_assets_precompile: :environment do
-  system('bundle exec i18n export')
+  I18nJS.call(config_file: './config/i18n.yml')
+  JsRoutes.generate!(typed: true)
 end
 
 # every time you execute 'rake assets:precompile'
 # run 'before_assets_precompile' first
 Rake::Task['assets:precompile'].enhance ['before_assets_precompile']
 
 task before_assets_clobber: :environment do
-  system('rm -rf ./tmp/locales.json')
+  FileUtils.rm_rf('./app/javascript/generated/.', secure: true)
 end
 
 # every time you execute 'rake assets:precompile'

config/webpack/webpack.config.js

@@ -23,7 +23,6 @@
     "jquery-ui": "^1.14.1",
     "jquery-ujs": "^1.2.3",
     "mini-css-extract-plugin": "^2.9.2",
-    "rails-erb-loader": "usabilityhub/rails-erb-loader#master",
     "rails_admin": "3.3.0",
     "sass": "^1.83.4",
     "sass-loader": "^16.0.4",