Upgrade to Webpacker 6.0.

.eslintrc.yml

@@ -11,6 +11,8 @@ globals:
 parser: babel-eslint
 plugins:
   - babel
+ignorePatterns:
+  - app/javascript/vendor/**/*.js
 rules:
   # https://eslint.org/docs/rules/
   array-callback-return: error
@@ -29,7 +31,7 @@ rules:
   no-lone-blocks: error
   no-lonely-if: error
   no-mixed-operators: error
-  no-new: error
+  no-new: warn
   no-new-wrappers: error
   no-return-assign: error
   no-self-compare: error

.gitignore

@@ -1,4 +1,5 @@
 .env.*
+.eslintcache
 .yarn-integrity
 .gitconfig
 .git/

Gemfile.lock

@@ -392,7 +392,7 @@ GEM
       unicorn (>= 4, < 6)
     view_component (2.25.0)
       activesupport (>= 5.0.0, < 7.0)
-    webpacker (5.2.1)
+    webpacker (6.0.0.pre.2)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)

app/javascript/packs/application.js

@@ -1,5 +1,4 @@
 /* eslint no-console:0 */
-
 function importAll(r) {
   r.keys().forEach(r);
 }

app/javascript/src/javascripts/utility.js

@@ -114,7 +114,8 @@ Utility.regexp_escape = function(string) {
 }
 
 Utility.regexp_split = function(string) {
-  return [...new Set(String(string === null || string === undefined ? "" : string).match(/\S+/g))];
+  string ??= "";
+  return string.match(/\S+/g) ?? [];
 }
 
 $.fn.selectEnd = function() {

app/javascript/src/styles/base/030_links.scss

@@ -1,4 +1,4 @@
-@import "../../javascript/src/styles/base/000_vars.scss";
+@import "./000_vars.scss";
 
 a:link {
   color: var(--link-color);

app/javascript/src/styles/common/tables.scss

@@ -53,7 +53,7 @@ table.autofit {
   }
 }
 
-table.search {
+table.search, table.aligned-vertical {
   tr {
     height: 2em;
   }
@@ -70,9 +70,5 @@ table.search {
 }
 
 table.aligned-vertical {
-  @extend table.search;
-
-  tr {
-    height: 1.75em;
-  }
+  height: 1.75em;
 }

app/views/layouts/default.html.erb

@@ -16,8 +16,8 @@
   <% if CurrentUser.user.blacklisted_tags.present? %>
     <meta name="blacklisted-tags" content="<%= CurrentUser.user.blacklisted_tags.gsub(/(?:\r|\n)+/, ",") %>">
   <% end %>
-  <%= javascript_pack_tag "application" %>
-  <%= stylesheet_pack_tag "application" %>
+  <%= javascript_packs_with_chunks_tag "application" %>
+  <%= stylesheet_packs_with_chunks_tag "application" %>
   <% if CurrentUser.user.custom_style.present? && params.fetch(:css, "true").truthy?  %>
     <%= stylesheet_link_tag custom_style_users_path(md5: Digest::MD5.hexdigest(CurrentUser.user.custom_style)), media: "screen" %>
   <% end %>

bin/webpack

@@ -1,15 +1,18 @@
 #!/usr/bin/env ruby
 
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= ENV["NODE_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"
 require "webpacker/webpack_runner"
-Webpacker::WebpackRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

bin/webpack-dev-server

@@ -1,15 +1,18 @@
 #!/usr/bin/env ruby
 
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= ENV["NODE_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
   Pathname.new(__FILE__).realpath)
 
-require "rubygems"
 require "bundler/setup"
 
 require "webpacker"
 require "webpacker/dev_server_runner"
-Webpacker::DevServerRunner.run(ARGV)
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end

config/webpack/base.js

@@ -0,0 +1,25 @@
+const { webpackConfig, merge } = require('@rails/webpacker')
+
+module.exports = merge(webpackConfig, {
+  output: {
+    library: "Danbooru",
+  },
+  resolve: {
+    alias: {
+      "jquery": "jquery/src/jquery.js",
+      "react": "preact/compat",
+      "react-dom": "preact/compat",
+    }
+  },
+  module: {
+    rules: [{
+      test: /.erb$/,
+      enforce: "pre",
+      exclude: /node_modules/,
+      loader: "rails-erb-loader",
+      options: {
+        runner: "bin/rails runner"
+      }
+    }]
+  },
+});

config/webpack/development.js

@@ -1,8 +1,15 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
-const eslint = require('./loaders/eslint')
+const { merge } = require('@rails/webpacker')
+const webpackConfig = require('./base');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
-environment.loaders.append('eslint', eslint);
-
-module.exports = environment.toWebpackConfig()
+module.exports = merge(webpackConfig, {
+  plugins: [
+    new ESLintPlugin({
+      cache: true,
+      threads: true,
+      emitWarning: true
+    })
+  ]
+});

config/webpack/environment.js

@@ -1,15 +0,0 @@
-const { environment } = require('@rails/webpacker')
-const erb =  require('./loaders/erb')
-const webpack = require('webpack');
-
-environment.loaders.append('erb', erb);
-
-environment.config.output.library = ["Danbooru"];
-
-environment.config.set("resolve.alias", {
-  "jquery": "jquery/src/jquery.js",
-  "react": "preact/compat",
-  "react-dom": "preact/compat",
-});
-
-module.exports = environment

config/webpack/loaders/erb.js

@@ -1,11 +0,0 @@
-module.exports = {
-  test: /\.erb$/,
-  enforce: 'pre',
-  exclude: /node_modules/,
-  use: [{
-    loader: 'rails-erb-loader',
-    options: {
-      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
-    }
-  }]
-}

config/webpack/loaders/eslint.js

@@ -1,10 +0,0 @@
-module.exports = {
-  enforce: 'pre',
-  test: /\.(js)$/i,
-  exclude: /node_modules|vendor/,
-  loader: 'eslint-loader',
-  options: {
-    cache: true,
-    emitWarning: true,
-  }
-}

config/webpack/production.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpack/test.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpacker.yml

@@ -6,8 +6,7 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -17,7 +16,7 @@ default: &default
   cache_manifest: false
 
   # Extract and emit a css file
-  extract_css: false
+  extract_css: true
 
   static_assets_extensions:
     - .jpg
@@ -53,30 +52,33 @@ development:
   <<: *default
   compile: true
 
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-  webpack_compile_output: true
-
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
     host: localhost
     port: 3035
     public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
+    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
     inline: true
+    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
+    # Should we use gzip compression?
     compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
     disable_host_check: true
+    # This option lets the browser open with your local IP
     use_local_ip: false
+    # When enabled, nothing except the initial startup information will be written to the console.
+    # This also means that errors or warnings from webpack are not visible.
     quiet: false
+    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
       ignored: '**/node_modules/**'
 
-
 test:
   <<: *default
   compile: true
@@ -90,8 +92,5 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
-  # Extract and emit a css file
-  extract_css: true
-
   # Cache manifest.json for performance
   cache_manifest: true

package.json

@@ -5,16 +5,25 @@
     "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@fortawesome/fontawesome-free": "^5.11.2",
     "@rails/ujs": "^6.0.2-1",
-    "@rails/webpacker": "^5.0.0",
+    "@rails/webpacker": "^6.0.0-beta.4",
+    "css-loader": "^5.0.1",
     "dropzone": "^5.5.1",
     "hammerjs": "^2.0.8",
     "jquery": "3.5.1",
     "jquery-hotkeys": "^0.2.2",
     "jquery-ui": "^1.12.1",
+    "mini-css-extract-plugin": "^1.3.4",
     "mobx": "^6.0",
     "mobx-react": "^7.0",
+    "postcss": "^8.2.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^14.0.0",
+    "postcss-loader": "^4.2.0",
+    "postcss-preset-env": "^6.7.0",
     "preact": "^10.4.6",
     "rails-erb-loader": "^5.5.0",
+    "sass": "^1.32.5",
+    "sass-loader": "^10.1.1",
     "spark-md5": "^3.0.0",
     "tippy.js": "^6.2.3",
     "typeface-anton": "^0.0.72",
@@ -26,24 +35,31 @@
     "typeface-rokkitt": "^1.0.0",
     "typeface-unifrakturmaguntia": "^0.0.72",
     "typopro-web": "^4.2.2",
-    "webpack-cli": "^3.3.0"
+    "webpack": "^5.11.0",
+    "webpack-cli": "^4.2.0"
   },
   "devDependencies": {
+    "@webpack-cli/serve": "^1.2.2",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.0.0",
-    "eslint-loader": "^4.0.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-ignore-erb": "^0.1.1",
+    "eslint-webpack-plugin": "^2.4.3",
     "stylelint": "^13.0.0",
     "stylelint-config-standard": "^20.0.0",
-    "webpack-dev-server": "^3.8.0"
+    "webpack-dev-server": "^3.11.2"
+  },
+  "scripts": {
+    "eslint-all": "yarn run eslint --plugin eslint-plugin-ignore-erb --ext .js,.js.erb app/javascript/src/javascripts",
+    "stylelint-all": "yarn run stylelint 'app/javascript/src/styles/**/*.scss'"
+  },
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
+    ]
   },
   "browserslist": [
     "defaults",
     "since 2012"
-  ],
-  "scripts": {
-    "eslint-all": "yarn run eslint --plugin eslint-plugin-ignore-erb --ext .js,.js.erb app/javascript/src/javascripts",
-    "stylelint-all": "yarn run stylelint 'app/javascript/src/styles/**/*.scss'"
-  }
+  ]
 }