Migrate from Webpacker to ViteJS

.dockerignore

@@ -9,6 +9,9 @@ public/system
 public/assets
 public/packs
 public/packs-test
+public/vite
+public/vite-dev
+public/vite-test
 node_modules
 neo4j
 vendor/bundle

.eslintrc.js

@@ -196,7 +196,7 @@ module.exports = defineConfig({
       {
         devDependencies: [
           '.eslintrc.js',
-          'config/webpack/**',
+          'vite.config.mts',
           'app/javascript/mastodon/performance.js',
           'app/javascript/mastodon/test_setup.js',
           'app/javascript/**/__tests__/**',
@@ -209,7 +209,6 @@ module.exports = defineConfig({
     'import/no-relative-packages': 'error',
     'import/no-self-import': 'error',
     'import/no-useless-path-segments': 'error',
-    'import/no-webpack-loader-syntax': 'error',
 
     'import/order': [
       'error',
@@ -305,7 +304,6 @@ module.exports = defineConfig({
         '*.config.js',
         '.*rc.js',
         'ide-helper.js',
-        'config/webpack/**/*',
         'config/formatjs-formatter.js',
       ],
 
@@ -382,9 +380,20 @@ module.exports = defineConfig({
         '**/__tests__/*.jsx',
       ],
 
-      env: {
-        jest: true,
-      },
+      globals: {
+        suite: true,
+        test: true,
+        describe: true,
+        it: true,
+        expect: true,
+        assert: true,
+        vitest: true,
+        vi: true,
+        beforeAll: true,
+        afterAll: true,
+        beforeEach: true,
+        afterEach: true,
+      }
     }
   ],
 });

.github/renovate.json5

@@ -21,23 +21,6 @@
         'tesseract.js', // Requires code changes
         'react-hotkeys', // Requires code changes
 
-        // Requires Webpacker upgrade or replacement
-        '@svgr/webpack',
-        '@types/webpack',
-        'babel-loader',
-        'compression-webpack-plugin',
-        'css-loader',
-        'imports-loader',
-        'mini-css-extract-plugin',
-        'postcss-loader',
-        'sass-loader',
-        'terser-webpack-plugin',
-        'webpack',
-        'webpack-assets-manifest',
-        'webpack-bundle-analyzer',
-        'webpack-dev-server',
-        'webpack-cli',
-
         // react-router: Requires manual upgrade
         'history',
         'react-router-dom',

.github/workflows/test-js.yml

@@ -39,4 +39,4 @@ jobs:
         uses: ./.github/actions/setup-javascript
 
       - name: JavaScript testing
-        run: yarn jest --reporters github-actions summary
+        run: yarn test:js

.github/workflows/test-ruby.yml

@@ -53,7 +53,7 @@ jobs:
 
       - name: Archive asset artifacts
         run: |
-          tar --exclude={"*.br","*.gz"} -zcf artifacts.tar.gz public/assets public/packs*
+          tar --exclude={"*.br","*.gz"} -zcf artifacts.tar.gz public/assets public/packs
 
       - uses: actions/upload-artifact@v4
         if: matrix.mode == 'test'

.gitignore

@@ -69,5 +69,8 @@ yarn-debug.log
 # Ignore Docker option files
 docker-compose.override.yml
 
+# Vite Ruby
+/public/vite*
+
 # Ignore dotenv .local files
 .env*.local

.prettierignore

@@ -22,6 +22,9 @@
 /public/assets
 /public/packs
 /public/packs-test
+/public/vite
+/public/vite-dev
+/public/vite-test
 .env
 .env.production
 .env.development

CONTRIBUTING.md

@@ -41,7 +41,7 @@ It is not always possible to phrase every change in such a manner, but it is des
 
 **Pull requests that do not pass automated checks may not be reviewed**. In particular, you need to keep in mind:
 
-- Unit and integration tests (rspec, jest)
+- Unit and integration tests (rspec, vitest)
 - Code style rules (rubocop, eslint)
 - Normalization of locale files (i18n-tasks)
 

Gemfile

@@ -94,8 +94,8 @@ gem 'strong_migrations', '1.8.0'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2023'
+gem 'vite_rails', '~> 3.0.17'
 gem 'webauthn', '~> 3.0'
-gem 'webpacker', '~> 5.4'
 gem 'webpush', github: 'ClearlyClaire/webpush', ref: 'f14a4d52e201128b1b00245d11b6de80d6cfdcd9'
 
 gem 'json-ld'

Gemfile.lock

@@ -212,6 +212,7 @@ GEM
       railties (>= 5)
     dotenv (3.1.2)
     drb (2.2.1)
+    dry-cli (1.0.0)
     ed25519 (1.3.0)
     elasticsearch (7.17.10)
       elasticsearch-api (= 7.17.10)
@@ -782,7 +783,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     sidekiq (6.5.12)
       connection_pool (>= 2.2.5, < 3)
       rack (~> 2.0)
@@ -865,6 +865,13 @@ GEM
     validate_url (1.0.15)
       activemodel (>= 3.0.0)
       public_suffix
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.5.0)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     webauthn (3.1.0)
@@ -883,11 +890,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket (1.2.10)
     websocket-driver (0.7.6)
@@ -1046,9 +1048,9 @@ DEPENDENCIES
   tty-prompt (~> 0.23)
   twitter-text (~> 3.1.0)
   tzinfo-data (~> 1.2023)
+  vite_rails (~> 3.0.17)
   webauthn (~> 3.0)
   webmock (~> 3.18)
-  webpacker (~> 5.4)
   webpush!
   xorcist (~> 1.1)
 

Procfile.dev

@@ -1,4 +1,4 @@
 web: env PORT=3000 RAILS_ENV=development bundle exec puma -C config/puma.rb
 sidekiq: env PORT=3000 RAILS_ENV=development bundle exec sidekiq
 stream: env PORT=4000 yarn workspace @mastodon/streaming start
-webpack: bin/webpack-dev-server
+vite: bin/vite dev

app/helpers/routing_helper.rb

@@ -4,7 +4,7 @@ module RoutingHelper
   extend ActiveSupport::Concern
 
   include ActionView::Helpers::AssetTagHelper
-  include Webpacker::Helper
+  include ViteRails::TagHelpers
 
   included do
     include Rails.application.routes.url_helpers
@@ -25,7 +25,7 @@ def asset_host
   end
 
   def frontend_asset_path(source, **options)
-    asset_pack_path("media/#{source}", **options)
+    vite_asset_path(source, **options)
   end
 
   def frontend_asset_url(source, **options)

app/helpers/theme_helper.rb

@@ -3,10 +3,10 @@
 module ThemeHelper
   def theme_style_tags(theme)
     if theme == 'system'
-      stylesheet_pack_tag('mastodon-light', media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') +
-        stylesheet_pack_tag('default', media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
+      vite_stylesheet_tag('styles/mastodon-light.scss', media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous') +
+        vite_stylesheet_tag('styles/application.scss', media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
     else
-      stylesheet_pack_tag theme, media: 'all', crossorigin: 'anonymous'
+      vite_stylesheet_tag "styles/#{theme}.scss", media: 'all', crossorigin: 'anonymous'
     end
   end
 

app/javascript/entrypoints/admin.tsx

@@ -1,4 +1,3 @@
-import './public-path';
 import { createRoot } from 'react-dom/client';
 
 import Rails from '@rails/ujs';

app/javascript/entrypoints/application.ts

@@ -1,4 +1,3 @@
-import './public-path';
 import main from 'mastodon/main';
 
 import { start } from '../mastodon/common';

app/javascript/entrypoints/error.ts

@@ -1,4 +1,3 @@
-import './public-path';
 import ready from '../mastodon/ready';
 
 ready(() => {

app/javascript/entrypoints/mailer.ts

@@ -1,3 +1 @@
 import '../styles/mailer.scss';
-
-require.context('../icons');

app/javascript/entrypoints/public.tsx

@@ -1,7 +1,5 @@
 import { createRoot } from 'react-dom/client';
 
-import './public-path';
-
 import { IntlMessageFormat } from 'intl-messageformat';
 import type { MessageDescriptor, PrimitiveType } from 'react-intl';
 import { defineMessages } from 'react-intl';
@@ -186,9 +184,7 @@ function loaded() {
   const reactComponents = document.querySelectorAll('[data-component]');
 
   if (reactComponents.length > 0) {
-    import(
-      /* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container'
-    )
+    import('../mastodon/containers/media_container')
       .then(({ default: MediaContainer }) => {
         reactComponents.forEach((component) => {
           Array.from(component.children).forEach((child) => {

app/javascript/entrypoints/remote_interaction_helper.ts

@@ -8,8 +8,6 @@ and performs no other task.
 
 */
 
-import './public-path';
-
 import axios from 'axios';
 
 interface JRDLink {

app/javascript/entrypoints/share.tsx

@@ -1,4 +1,3 @@
-import './public-path';
 import { createRoot } from 'react-dom/client';
 
 import { start } from '../mastodon/common';

app/javascript/entrypoints/sign_up.ts

@@ -1,4 +1,3 @@
-import './public-path';
 import axios from 'axios';
 
 import ready from '../mastodon/ready';

app/javascript/entrypoints/two_factor_authentication.ts

@@ -3,8 +3,6 @@ import axios, { AxiosError } from 'axios';
 
 import ready from '../mastodon/ready';
 
-import 'regenerator-runtime/runtime';
-
 type PublicKeyCredentialCreationOptionsJSON =
   WebAuthnJSON.CredentialCreationOptionsJSON['publicKey'];
 

app/javascript/mastodon/common.js

@@ -2,7 +2,7 @@ import Rails from '@rails/ujs';
 import 'font-awesome/css/font-awesome.css';
 
 export function start() {
-  require.context('../images/', true, /\.(jpg|png|svg)$/);
+  // require.context('../images/', true, /\.(jpg|png|svg)$/);
 
   try {
     Rails.start();

app/javascript/mastodon/components/__tests__/__snapshots__/autosuggest_emoji-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<AutosuggestEmoji /> renders emoji with custom url 1`] = `
+exports[`<AutosuggestEmoji /> > renders emoji with custom url 1`] = `
 <div
   className="autosuggest-emoji"
 >
@@ -17,7 +17,7 @@ exports[`<AutosuggestEmoji /> renders emoji with custom url 1`] = `
 </div>
 `;
 
-exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
+exports[`<AutosuggestEmoji /> > renders native emoji 1`] = `
 <div
   className="autosuggest-emoji"
 >

app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
+exports[`<Avatar /> > Autoplay > renders a animated avatar 1`] = `
 <div
   className="account__avatar"
   onMouseEnter={[Function]}
@@ -19,7 +19,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
 </div>
 `;
 
-exports[`<Avatar /> Still renders a still avatar 1`] = `
+exports[`<Avatar /> > Still > renders a still avatar 1`] = `
 <div
   className="account__avatar"
   onMouseEnter={[Function]}

app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.jsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<AvatarOverlay renders a overlay avatar 1`] = `
+exports[`<AvatarOverlay > renders a overlay avatar 1`] = `
 <div
   className="account__avatar-overlay"
   onMouseEnter={[Function]}