Refactor vite config, upgrade rollup-plugin-visualizer

package.json

@@ -180,7 +180,7 @@
     "husky": "^9.0.0",
     "jsdom": "^24.0.0",
     "lint-staged": ">=10",
-    "rollup-plugin-visualizer": "^5.9.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "tailwindcss": "^3.4.13",

vite.config.ts

@@ -1,119 +1,148 @@
-/* eslint-disable quotes */
 /// <reference types="vitest" />
+
 import fs from 'node:fs';
 import { fileURLToPath, URL } from 'node:url';
 
 import react from '@vitejs/plugin-react';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { defineConfig } from 'vite';
+import { defineConfig, Plugin, UserConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 import compileTime from 'vite-plugin-compile-time';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { VitePWA } from 'vite-plugin-pwa';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-const { NODE_ENV } = process.env;
+const { NODE_ENV, PORT } = process.env;
 
-// @ts-ignore
+export default defineConfig(() => {
-export default defineConfig(({ command }) => ({
+  const config: UserConfig = {
-  build: {
+    build: {
-    assetsDir: 'packs',
+      assetsDir: 'packs',
-    assetsInlineLimit: 0,
+      assetsInlineLimit: 0,
-    rollupOptions: {
+      rollupOptions: {
-      output: {
+        output: {
-        assetFileNames: 'packs/assets/[name]-[hash].[ext]',
+          assetFileNames: 'packs/assets/[name]-[hash].[ext]',
-        chunkFileNames: 'packs/js/[name]-[hash].js',
+          chunkFileNames: 'packs/js/[name]-[hash].js',
-        entryFileNames: 'packs/[name]-[hash].js',
+          entryFileNames: 'packs/[name]-[hash].js',
-      },
-    },
-    sourcemap: true,
-  },
-  assetsInclude: ['**/*.oga'],
-  server: {
-    port: Number(process.env.PORT ?? 3036),
-  },
-  optimizeDeps: {
-    exclude: command === 'serve' ? ['@soapbox.pub/wasmboy'] : [],
-  },
-  plugins: [
-    checker({ typescript: true }),
-    compileTime(),
-    createHtmlPlugin({
-      template: 'index.html',
-      minify: {
-        collapseWhitespace: true,
-        removeComments: false,
-      },
-      inject: {
-        data: {
-          snippets: readFileContents('custom/snippets.html'),
-          csp: NODE_ENV === 'production'
-            ? "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';"
-            : "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*; media-src 'self' https: http://localhost:* http://127.0.0.1:*; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';",
         },
       },
-    }),
+      sourcemap: true,
-    react(),
-    VitePWA({
-      injectRegister: null,
-      strategies: 'injectManifest',
-      injectManifest: {
-        injectionPoint: undefined,
-        plugins: [
-          // @ts-ignore
-          compileTime(),
-        ],
-      },
-      manifest: {
-        name: 'Soapbox',
-        short_name: 'Soapbox',
-        description: 'A social media frontend with a focus on custom branding and ease of use.',
-      },
-      srcDir: 'src/service-worker',
-      filename: 'sw.ts',
-    }),
-    viteStaticCopy({
-      targets: [{
-        src: './node_modules/@twemoji/svg/*',
-        dest: 'packs/emoji/',
-      }, {
-        src: './src/instance',
-        dest: '.',
-      }, {
-        src: './custom/instance',
-        dest: '.',
-      }],
-    }),
-    visualizer({
-      emitFile: true,
-      filename: 'report.html',
-      title: 'Soapbox Bundle',
-    }),
-    {
-      name: 'mock-api',
-      configureServer(server) {
-        server.middlewares.use((req, res, next) => {
-          if (/^\/api\//.test(req.url!)) {
-            res.statusCode = 404;
-            res.end('Not Found');
-          } else {
-            next();
-          }
-        });
-      },
     },
-  ],
+    assetsInclude: ['**/*.oga'],
-  resolve: {
+    server: {
-    alias: [
+      port: Number(PORT ?? 3036),
-      { find: 'soapbox', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
+    },
+    plugins: [
+      checker({ typescript: true }),
+      compileTime(),
+      createHtmlPlugin({
+        template: 'index.html',
+        minify: {
+          collapseWhitespace: true,
+          removeComments: false,
+        },
+        inject: {
+          data: {
+            snippets: readFileContents('custom/snippets.html'),
+            csp: buildCSP(NODE_ENV),
+          },
+        },
+      }),
+      react(),
+      VitePWA({
+        injectRegister: null,
+        strategies: 'injectManifest',
+        injectManifest: {
+          injectionPoint: undefined,
+          plugins: [
+            // @ts-ignore
+            compileTime(),
+          ],
+        },
+        manifest: {
+          name: 'Soapbox',
+          short_name: 'Soapbox',
+          description: 'A social media frontend with a focus on custom branding and ease of use.',
+        },
+        srcDir: 'src/service-worker',
+        filename: 'sw.ts',
+      }),
+      viteStaticCopy({
+        targets: [{
+          src: './node_modules/@twemoji/svg/*',
+          dest: 'packs/emoji/',
+        }, {
+          src: './src/instance',
+          dest: '.',
+        }, {
+          src: './custom/instance',
+          dest: '.',
+        }],
+      }),
+      visualizer({
+        emitFile: true,
+        filename: 'report.html',
+        title: 'Soapbox Bundle',
+      }) as Plugin,
+      {
+        name: 'mock-api',
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (/^\/api\//.test(req.url!)) {
+              res.statusCode = 404;
+              res.end('Not Found');
+            } else {
+              next();
+            }
+          });
+        },
+      },
     ],
-  },
+    resolve: {
-  test: {
+      alias: [
-    globals: true,
+        { find: 'soapbox', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
-    environment: 'jsdom',
+      ],
-    setupFiles: 'src/jest/test-setup.ts',
+    },
-  },
+    test: {
-}));
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: 'src/jest/test-setup.ts',
+    },
+  };
+
+  return config;
+});
+
+/** Build a sane default CSP string to embed in index.html in case the server doesn't return one. */
+/* eslint-disable quotes */
+function buildCSP(env: string | undefined): string {
+  const csp = [
+    "default-src 'none'",
+    "script-src 'self' 'wasm-unsafe-eval'",
+    "style-src 'self' 'unsafe-inline'",
+    "frame-src 'self' https:",
+    "font-src 'self'",
+    "base-uri 'self'",
+    "manifest-src 'self'",
+  ];
+
+  if (env === 'development') {
+    csp.push(
+      "connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*",
+      "img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*",
+      "media-src 'self' https: http://localhost:* http://127.0.0.1:*",
+    );
+  } else {
+    csp.push(
+      "connect-src 'self' blob: https: wss:",
+      "img-src 'self' data: blob: https:",
+      "media-src 'self' https:",
+    );
+  }
+
+  return csp.join('; ');
+}
+/* eslint-enable quotes */
 
 /** Return file as string, or return empty string if the file isn't found. */
 function readFileContents(path: string) {

yarn.lock

@@ -7416,10 +7416,10 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-visualizer@^5.9.2:
+rollup-plugin-visualizer@^5.12.0:
-  version "5.9.2"
+  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz#f1aa2d9b1be8ebd6869223c742324897464d8891"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz#661542191ce78ee4f378995297260d0c1efb1302"
-  integrity sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==
+  integrity sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==
   dependencies:
     open "^8.4.0"
     picomatch "^2.3.1"