Replace webpacker with jsbundling

Victims include jquery-ui (replaced with autocompleter for the sole usage of it).

.browserslistrc

@@ -1 +0,0 @@
-defaults

.gitignore

@@ -19,3 +19,6 @@
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -2,9 +2,9 @@ source "https://rubygems.org"
 
 gem "rails", "~> 7.0.1"
 
-gem "webpacker"
+gem "jsbundling-rails"
 gem "coffee-rails"
-gem "uglifier"
+gem "terser"
 
 gem "sass-rails"
 

Gemfile.lock

@@ -110,6 +110,8 @@ GEM
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     jdbc-postgres (42.2.14)
+    jsbundling-rails (1.0.0)
+      railties (>= 6.0.0)
     kgio (2.11.4)
     loofah (2.13.0)
       crass (~> 1.0.2)
@@ -165,8 +167,6 @@ GEM
     rack (2.2.3)
     rack-mini-profiler (2.3.3)
       rack (>= 1.2.0)
-    rack-proxy (0.7.2)
-      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (7.0.1)
@@ -214,7 +214,6 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
-    semantic_range (3.0.0)
     sitemap_generator (6.1.2)
       builder (~> 3.0)
     spoon (0.0.6)
@@ -227,24 +226,19 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     strscan (3.0.1)
+    terser (1.1.8)
+      execjs (>= 0.3.0, < 3)
     thor (1.2.1)
     tilt (2.0.10)
     timeout (0.2.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     unicorn (6.1.0)
       kgio (~> 2.6)
       raindrops (~> 0.7)
     unicorn-worker-killer (0.4.5)
       get_process_mem (~> 0)
       unicorn (>= 4, < 7)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-driver (0.7.5-java)
@@ -269,6 +263,7 @@ DEPENDENCIES
   exception_notification
   i18n-js (~> 3.0.0)
   jbuilder (~> 2.5)
+  jsbundling-rails
   mini_magick
   mini_mime
   newrelic_rpm
@@ -283,10 +278,9 @@ DEPENDENCIES
   rails-i18n
   sass-rails
   sitemap_generator
-  uglifier
+  terser
   unicorn
   unicorn-worker-killer
-  webpacker
   will-paginate-i18n
   will_paginate
 

app/assets/config/manifest.js

@@ -1,6 +1,6 @@
 // JS and CSS bundles
 //
-//= link application.js
+//= link application_classic.js
 //= link application.css
 //
 //= link 404.html
@@ -8,3 +8,4 @@
 //= link 500.html
 //
 //= link_tree ../images
+//= link_tree ../builds

app/assets/javascripts/classes/vars.coffee.erb

@@ -4,7 +4,4 @@ window.Vars =
     'blacklisted-preview.png': '<%= image_path 'blacklisted-preview.png' %>'
     'blank.gif': '<%= image_path 'blank.gif' %>'
   blankImage: 'data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw=='
-  path:
-    ac_tag_name: '<%= url.ac_tag_name_path %>'
-    ac_user_name: '<%= url.ac_user_name_path %>'
   prefix: '<%= url.root_path %>'

app/assets/stylesheets/_variables.scss

@@ -1,2 +1,5 @@
+$c-dark: #222;
+$c-highlight: #e87;
+
 $page-width: 900px;
 $sidebar-width: 200px;

app/assets/stylesheets/application.scss

@@ -1,5 +1,5 @@
 @import 'cropperjs/dist/cropper';
-@import 'jquery-ui-dist/jquery-ui';
+@import 'autocompleter/autocomplete';
 @import 'variables';
 @import 'components/*';
 @import "webtoolkit.clearfix";

app/assets/stylesheets/autocomplete.scss

@@ -1,21 +1,8 @@
-.ui-autocomplete.ui-autocomplete {
+.autocomplete {
-  background: #fff;
+  background: $c-dark;
-  border: 1px solid #333;
-  list-style: none;
-  padding: 0;
-}
 
-.ui-menu-item {
+  > div:hover:not(.group),
-  margin: 0;
+  > div.selected {
-}
+    background: $c-highlight;
-
-.ui-menu-item-wrapper {
-  color: #222;
-  padding: 2px 5px;
-
-  &.ui-state-active {
-    background: #ffc;
-    color: #222;
-    border-color: #555;
   }
 }

app/javascript/application.coffee

@@ -1,13 +1,10 @@
-import 'src/globals'
+import 'src/jquery/all'
-import 'src/globals-jquery'
 
 import 'src/cookie'
-import 'src/compat.jquery'
 import 'src/forum'
 
 import 'src/moebooru'
 
-import 'src/init.autocomplete'
 import 'src/init.cookie'
 import 'src/post'
 import 'src/vote'

app/javascript/src/boot.coffee

@@ -1,3 +1,5 @@
+import Rails from '@rails/ujs'
+import Autocomplete from './classes/autocomplete'
 import BrowserView from './classes/browser_view'
 import CheckAll from './classes/check_all'
 import Comment from './classes/comment'
@@ -28,10 +30,13 @@ import UrlHashHandler from './classes/url_hash_handler'
 import UserRecord from './classes/user_record'
 import WindowTitleHandler from './classes/window_title_handler'
 
+Rails.start()
+
 window.History = new History
 window.InlineImage = new InlineImage
 window.Pool = new Pool
 window.UrlHash = new UrlHashHandler
+window.autocomplete = new Autocomplete
 window.checkAll = new CheckAll
 window.comment = new Comment
 window.dmail = new Dmail

app/javascript/src/classes/autocomplete.coffee

@@ -0,0 +1,45 @@
+import autocompleter from 'autocompleter'
+
+$ = jQuery
+
+autocompleterMap = (match) =>
+  label: match
+  value: match
+
+export default class Autocomplete
+  constructor: ->
+    $ =>
+      @_genericCompletionAll()
+      @_tagCompletion()
+
+
+  _genericCompletion: (input) =>
+    url = input.dataset.autocomplete
+    autocompleter
+      input: input
+      fetch: (text, update) =>
+        $.ajax url,
+          data:
+            term: text
+          dataType: 'json'
+        .done (matches) =>
+          update matches.map(autocompleterMap)
+      onSelect: (match) => input.value = match.value
+
+
+  _genericCompletionAll: =>
+    for input in document.querySelectorAll('[data-autocomplete]')
+      @_genericCompletion(input)
+
+
+  _tagCompletion: =>
+    editForm = document.querySelector('#edit-form')
+
+    return if !editForm?
+
+    tags = document.querySelector('.ac-tags')
+
+    return if !tags?
+
+    new TagCompletionBox(tags)
+    TagCompletion?.observe_tag_changes_on_submit editForm, tags

app/javascript/src/classes/history.coffee

@@ -1,9 +1,10 @@
 $ = jQuery
 
 export default class History
-  last_click: -1
+  constructor: ->
-  checked: []
+    @last_click = -1
-  dragging: false
+    @checked = []
+    @dragging = false
 
 
   init: ->

app/javascript/src/classes/inline_image.coffee

@@ -1,4 +1,14 @@
 export default class InlineImage
+  constructor: ->
+    @mouse_down = null
+
+    @zoom_levels = [
+      1.0
+      1.5
+      2.0
+      4.0
+    ]
+
   init: ->
 
     ### Mouseup events aren't necessarily sent to the same element that received the mousedown,
@@ -18,15 +28,6 @@ export default class InlineImage
       return
     return
 
-  mouse_down: null
-
-  zoom_levels: [
-    1.0
-    1.5
-    2.0
-    4.0
-  ]
-
   get_zoom: (level) ->
     if level >= 0
       @zoom_levels[level]

app/javascript/src/classes/menu.coffee

@@ -1,3 +1,5 @@
+import Mousetrap from 'mousetrap'
+
 $ = jQuery
 
 export default class Menu
@@ -92,7 +94,7 @@ export default class Menu
 
     @forumMenuItems ?= JSON.parse(document.getElementById("forum-posts-latest").text)
 
-    last_read = Cookies.getJSON('forum_post_last_read_at')
+    last_read = JSON.parse(Cookies.get('forum_post_last_read_at'))
     forum_menu_items = @forumMenuItems
     forum_submenu = $('li.forum ul.submenu', @menu)
     forum_items_start = forum_submenu.find('.forum-items-start').show()

app/javascript/src/classes/news_ticker.coffee

@@ -1,7 +1,8 @@
 $ = jQuery
 
+cookieKey = 'hide-news-ticker'
+
 export default class NewsTicker
-  cookieKey: 'hide-news-ticker'
 
   constructor: ->
     $ @initialize
@@ -14,11 +15,11 @@ export default class NewsTicker
     return if @$newsTicker.attr('data-news-hide') == '1'
 
     @$newsTicker.find('.close-link').click @onCloseLink
-    if Cookies.get(@cookieKey) != @newsDate
+    if Cookies.get(cookieKey) != @newsDate
       @$newsTicker.show()
 
 
   onCloseLink: (e) =>
     e.preventDefault()
     @$newsTicker.hide()
-    Cookies.set @cookieKey, @newsDate, expires: 365
+    Cookies.set cookieKey, @newsDate, expires: 365

app/javascript/src/compat.jquery.coffee

@@ -1 +0,0 @@
-jQuery.noConflict()

app/javascript/src/cookie.coffee

@@ -1,18 +1,15 @@
+import BaseCookies from 'js-cookie'
+
 # welp
 # Reference: https://github.com/js-cookie/js-cookie/blob/3f2b5e6884407c54b391483f39ddcd4c70f9243c/SERVER_SIDE.md
-window.Cookies = Cookies.withConverter
+window.Cookies = BaseCookies
-  write: (value) =>
+  .withConverter
-    encodeURIComponent value
+    write: BaseCookies.converter.write
-      .replace /%(23|24|26|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent
-
     read: (value) =>
-    value
+      BaseCookies.converter.read value.replace(/\+/g, " ")
-      .replace /\+/g, " "
+  .withAttributes
-      .replace /(%[0-9A-Z]{2})+/g, decodeURIComponent
+    path: Vars.prefix
-
+    expires: 365
-
-Cookies.defaults.path = Vars.prefix
-Cookies.defaults.expires = 365
 
 window.Cookie =
   put: (name, value, days) ->

app/javascript/src/globals-jquery.coffee

@@ -1,2 +0,0 @@
-import 'timeago'
-import 'jquery-ui/ui/widgets/autocomplete'

app/javascript/src/globals.coffee

@@ -1,4 +0,0 @@
-window.jQuery = require('jquery')
-window.Cookies = require('js-cookie')
-window.Mousetrap = require('mousetrap')
-require('@rails/ujs').start()

app/javascript/src/init.autocomplete.coffee

@@ -1,19 +0,0 @@
-$ = jQuery
-
-$ ->
-  $('.ac-user-name').autocomplete
-    source: Vars.path.ac_user_name
-    minLength: 2
-
-  $('.ac-tag-name').autocomplete
-    source: Vars.path.ac_tag_name
-    minLength: 2
-
-  editForm = $('#edit-form')[0]
-  acTags = $('.ac-tags')[0]
-
-  if editForm? && acTags?
-    new TagCompletionBox(acTags)
-
-    if TagCompletion
-      TagCompletion.observe_tag_changes_on_submit editForm, acTags

app/javascript/src/jquery/all.coffee

@@ -0,0 +1,4 @@
+import './main'
+import './extensions'
+
+$.noConflict()

app/javascript/src/jquery/extensions.coffee

@@ -0,0 +1 @@
+import 'timeago'

app/javascript/src/jquery/main.coffee

@@ -0,0 +1,4 @@
+import jquery from 'jquery'
+
+window.jQuery = jquery
+window.$ = jQuery

app/javascript/src/vote.coffee

@@ -1,3 +1,5 @@
+import Mousetrap from 'mousetrap'
+
 $ = jQuery
 t = I18n.scopify('js.vote')
 

app/views/admin/edit_user.html.erb

@@ -4,7 +4,7 @@
       <tr>
         <th width="15%"><label class="block" for="user_name"><%= t('.user') %></label></th>
         <td width="85%">
-          <%= text_field 'user', 'name', :class => 'ac-user-name' %>
+          <%= text_field 'user', 'name', data: { autocomplete: ac_user_name_path } %>
         </td>
       </tr>
       <tr>

app/views/admin/reset_password.html.erb

@@ -14,7 +14,7 @@
         <tr>
           <th width="15%"><label class="block" for="user_name"><%= t('.name') %></label></th>
           <td width="85%">
-            <%= text_field 'user', 'name', :class => 'ac-user-name' %>
+            <%= text_field 'user', 'name', data: { autocomplete: ac_user_name_path } %>
           </td>
         </tr>
       </tbody>

app/views/dmail/_compose.html.erb

@@ -16,7 +16,7 @@
       <tr>
         <th><label for="dmail_to_name"><%= t('.form.to') %></label></th>
         <td>
-          <%= text_field "dmail", "to_name", :value => params[:to], :class => 'ac-user-name' %>
+          <%= text_field "dmail", "to_name", value: params[:to], data: { autocomplete: ac_user_name_path } %>
         </td>
       </tr>
       <tr>

app/views/layouts/application.html.erb

@@ -40,8 +40,8 @@
     }
   </script>
 
-  <%= javascript_include_tag 'application' %>
+  <%= javascript_include_tag :application_classic %>
-  <%= javascript_pack_tag :application %>
+  <%= javascript_include_tag :application %>
 
   <%= tag :link, :rel => 'search', :type => Mime[:opensearch], :href => opensearch_path(:xml), :title => CONFIG['app_name'] %>
   <%= CONFIG["custom_html_headers"] %>

app/views/tag/edit.html.erb

@@ -3,7 +3,7 @@
     <tr>
       <th width="15%"><label for="tag_name"><%=t :tag_name %></label></th>
       <td width="85%">
-        <%= text_field "tag", "name", :class => 'ac-tag-name' %>
+        <%= text_field "tag", "name", data: { autocomplete: ac_tag_name_path } %>
       </td>
     </tr>
     <tr>

app/views/user/invites.html.erb

@@ -14,7 +14,7 @@
         <tr>
           <td><label for="member_name"><%=t :user_name %></label></td>
           <td>
-            <%= text_field "member", "name", :class => 'ac-user-name' %>
+            <%= text_field "member", "name", data: { autocomplete: ac_user_name_path } %>
           </td>
         </tr>
         <tr>

babel.config.js

@@ -1,70 +0,0 @@
-module.exports = function(api) {
-  var validEnv = ['development', 'test', 'production']
-  var currentEnv = api.env()
-  var isDevelopmentEnv = api.env('development')
-  var isProductionEnv = api.env('production')
-  var isTestEnv = api.env('test')
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
-    )
-  }
-
-  return {
-    presets: [
-      isTestEnv && [
-        '@babel/preset-env',
-        {
-          targets: {
-            node: 'current'
-          }
-        }
-      ],
-      (isProductionEnv || isDevelopmentEnv) && [
-        '@babel/preset-env',
-        {
-          forceAllTransforms: true,
-          useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
-          exclude: ['transform-typeof-symbol']
-        }
-      ]
-    ].filter(Boolean),
-    plugins: [
-      'babel-plugin-macros',
-      '@babel/plugin-syntax-dynamic-import',
-      isTestEnv && 'babel-plugin-dynamic-import-node',
-      '@babel/plugin-transform-destructuring',
-      [
-        '@babel/plugin-proposal-class-properties',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-object-rest-spread',
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          helpers: false
-        }
-      ],
-      [
-        '@babel/plugin-transform-regenerator',
-        {
-          async: false
-        }
-      ]
-    ].filter(Boolean)
-  }
-}

bin/webpack

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

bin/webpack-dev-server

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

build.js

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+import coffeeScriptPlugin from 'esbuild-coffeescript';
+import esbuild from 'esbuild';
+
+esbuild.build({
+  bundle: true,
+  entryPoints: ['app/javascript/application.coffee'],
+  nodePaths: ['app/javascript'],
+  outdir: 'app/assets/builds',
+  plugins: [coffeeScriptPlugin({ bare: true })],
+  resolveExtensions: ['.coffee', '.js'],
+  sourcemap: true,
+  watch: process.argv[2] === '--watch',
+});

config/environments/production.rb

@@ -27,6 +27,8 @@ Rails.application.configure do
   # Compress CSS using a preprocessor.
   # config.assets.css_compressor = :sass
 
+  config.assets.js_compressor = :terser
+
   # Do not fallback to assets pipeline if a precompiled asset is missed.
   config.assets.compile = false
 

config/webpack/development.js

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

config/webpack/environment.js

@@ -1,5 +0,0 @@
-const { environment } = require('@rails/webpacker')
-const coffee =  require('./loaders/coffee')
-
-environment.loaders.prepend('coffee', coffee)
-module.exports = environment

config/webpack/loaders/coffee.js

@@ -1,11 +0,0 @@
-module.exports = {
-  test: /\.coffee(\.erb)?$/,
-  use: [{
-    loader: 'coffee-loader',
-    options: {
-      transpile: {
-        presets: ['@babel/env'],
-      }
-    },
-  }]
-}

config/webpack/production.js

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

config/webpack/test.js

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

config/webpacker.yml

@@ -1,98 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  source_path: app/javascript
-  source_entry_path: packs
-  public_root_path: public
-  public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: true
-
-  # Additional paths webpack should lookup modules
-  # ['app/assets', 'engine/foo/app/assets']
-  additional_paths: ['lib/assets/javascripts']
-
-
-  # Reload manifest.json on all requests so we reload latest compiled packs
-  cache_manifest: false
-
-  # Extract and emit a css file
-  extract_css: false
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .coffee
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
-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
-
-  # Reference: https://webpack.js.org/configuration/dev-server/
-  dev_server:
-    https: false
-    host: localhost
-    port: 3035
-    public: localhost:3035
-    hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
-    compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
-    pretty: false
-    headers:
-      'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
-
-
-test:
-  <<: *default
-  compile: true
-
-  # Compile test packs to a separate directory
-  public_output_path: packs-test
-
-production:
-  <<: *default
-
-  # 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

@@ -1,20 +1,19 @@
 {
   "dependencies": {
-    "@rails/ujs": "^6.0.4",
+    "@rails/ujs": "^7.0.1",
-    "@rails/webpacker": "5.4.2",
+    "autocompleter": "^6.1.2",
-    "coffee-loader": "^1.0.0",
+    "coffeescript": "2.6.1",
-    "coffeescript": "2.5.1",
     "cropperjs": "^1.5.12",
+    "esbuild": "^0.14.16",
+    "esbuild-coffeescript": "^2.0.0",
     "jquery": "^3.6.0",
-    "jquery-ui": "^1.13.0",
+    "js-cookie": "^3.0.1",
-    "jquery-ui-dist": "^1.12.1",
-    "js-cookie": "^2.2.1",
     "mousetrap": "^1.6.5",
-    "timeago": "^1.6.7",
+    "timeago": "^1.6.7"
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
   },
-  "devDependencies": {
+  "devDependencies": {},
-    "webpack-dev-server": "^3.0.0"
+  "scripts": {
-  }
+    "build": "./build.js"
+  },
+  "type": "module"
 }

postcss.config.js

@@ -1,12 +0,0 @@
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('postcss-preset-env')({
-      autoprefixer: {
-        flexbox: 'no-2009'
-      },
-      stage: 3
-    })
-  ]
-}