Use vite to replace webpack

Resolves #1205 (closed)

Checklist

• can enter index.html and load js
• service worker
  • has transformSW option, if enabled it will bundle and transform to iife
• handling of static assets (config.json, emoji.json, tos, default bg, default logo)
• emoji annotations
• wasm
• commit hash
• dev overrides
• eslint
• stylelint
• remove webpack

Changes

• BREAKING: static/emoji.json is no longer there, meaning server admins cannot provide their own set of unicode emojis, but this allows it to be cached properly (not implemented here).
• BREAKING: static/img/nsfw.2958239.png is now static/img/nsfw.DepQPhG0.png, which may affect people who specifies exactly this path as the cover image.
• BREAKING: css source map does not work in production https://github.com/vitejs/vite/issues/2830
• BREAKING: dropped support for browsers that do not support <script type="module">
• internal: tests: now uses vitest, not fully compatible with mocha, but has a similar interface. it internally uses chai and sinon.
• internal: static path is now under /public/static, which is mapped to /static in dev and prod builds (resulting directory unchanged)

Test Plan

Both in dev and in prod build:

• Verify page loads
• Verify styles are good
• Verify style editor works
• Verify the service worker can be registered after unregistering any current ones, and push notifications work
• Verify you can load flash content
• Verify commit hash is set accordingly
• Verify source maps work (js and css) (css source map does not work in production)
• Verify i18n works by switching to another language than English, seeing the UI in the other language, and check you can search emojis in that language (e.g. when Chinese is in the language list, you can search for the cat emoji by entering 猫 in emoji picker) (this depends on the actual content in emoji-annotations, not all languages are well supported)

Only in dev:

• Verify HMR works (change something, and expect [vite] hot updated: ... in logs)
• Verify eslint and stylelint errors are reported in the console (but they do not block the content to be served on the web, and do not show up on the webpage)
• Verify that, if transformSW is set to true in local options, /sw-pleroma.js is served as iife, and you can successfully register the service worker after unregistering any current ones
• Verify that, if transformSW is set to false in local options, /sw-pleroma.js is served as ESM, and you can successfully register the service worker after unregistering any current ones in a browser that supports ESM service workers

build/service_worker_messages.js

@@ -3,14 +3,20 @@ import { readFile } from 'node:fs/promises'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
+const i18nDir = resolve(
+  dirname(dirname(fileURLToPath(import.meta.url))),
+  'src/i18n'
+)
+
+export const i18nFiles = languages.reduce((acc, lang) => {
+  const name = langCodeToJsonName(lang)
+  const file = resolve(i18nDir, name + '.json')
+  acc[lang] = file
+  return acc
+}, {})
+
 export const generateServiceWorkerMessages = async () => {
-  const i18nDir = resolve(
-    dirname(dirname(fileURLToPath(import.meta.url))),
-    'src/i18n'
-  )
-  const msgArray = await Promise.all(languages.map(async lang => {
-    const name = langCodeToJsonName(lang)
-    const file = resolve(i18nDir, name + '.json')
+  const msgArray = await Promise.all(Object.entries(i18nFiles).map(async ([lang, file]) => {
     const fileContent = await readFile(file, 'utf-8')
     const msg = {
       notifications: JSON.parse(fileContent).notifications || {}