vite.config.mts

import { readdir } from 'node:fs/promises';
import path from 'node:path';

import formatjs from '@formatjs/unplugin/vite';
import { optimizeLodashImports } from '@optimize-lodash/rollup-plugin';
import babel, { defineRolldownBabelPreset } from '@rolldown/plugin-babel';
import legacy from '@vitejs/plugin-legacy';
import react from '@vitejs/plugin-react';
import browserslist from 'browserslist';
import postcssPresetEnv from 'postcss-preset-env';
import Compress from 'rollup-plugin-gzip';
import { visualizer } from 'rollup-plugin-visualizer';
import {
  PluginOption,
  defineConfig,
  UserConfigFnPromise,
  UserConfig,
} from 'vite';
import manifestSRI from 'vite-plugin-manifest-sri';
import svgr from 'vite-plugin-svgr';

import { MastodonAssetsManifest } from './config/vite/plugin-assets-manifest.mts';
import { GlitchThemes as MastodonThemes } from './config/vite/plugin-glitch-themes.mts';
import { MastodonServiceWorkerChunkPaths } from './config/vite/plugin-sw-chunk-paths.mts';
import { MastodonServiceWorkerLocales } from './config/vite/plugin-sw-locales.mts';

const jsRoot = path.resolve(import.meta.dirname, 'app/javascript');

const cssAliasClasses: ReadonlyArray<string> = ['components', 'features'];

// Avoid parsing files which don't reference `propTypes`
const removePropTypesPreset = defineRolldownBabelPreset({
  preset: () => ({ plugins: ['transform-react-remove-prop-types'] }),
  rolldown: {
    filter: {
      code: /propTypes/i,
    },
  },
});

export const config: UserConfigFnPromise = async ({ mode, command }) => {
  const isProdBuild = mode === 'production' && command === 'build';

  let outDirName = 'packs-dev';
  if (mode === 'test' || mode === 'production') {
    outDirName = 'packs';
  }
  const outDir = path.resolve('public', outDirName);

  return {
    root: jsRoot,
    base: `/${outDirName}/`,
    envDir: import.meta.dirname,
    resolve: {
      tsconfigPaths: true,
      alias: {
        '~/': `${jsRoot}/`,
        '@/': `${jsRoot}/`,
      },
    },
    css: {
      modules: {
        generateScopedName(name, filename) {
          let prefix = '';

          // Use the top two segments of the path as the prefix.
          const [parentDirName, dirName] = path
            .dirname(filename)
            .split(path.sep)
            .slice(-2)
            .map((dir) => dir.toLowerCase());

          // If the parent directory is in the cssAliasClasses list, use
          // the first four letters of it as the prefix, otherwise use the full name.
          if (parentDirName) {
            if (cssAliasClasses.includes(parentDirName)) {
              prefix = parentDirName.slice(0, 4);
            } else {
              prefix = parentDirName;
            }
          }

          // If we have a directory name, append it to the prefix.
          if (dirName) {
            prefix = `${prefix}_${dirName}`;
          }

          // If the file is not styles.module.scss or style.module.scss,
          // append the file base name to the prefix.
          const baseName = path.basename(
            filename,
            `.module${path.extname(filename)}`,
          );
          if (baseName !== 'styles' && baseName !== 'style') {
            prefix = `${prefix}_${baseName}`;
          }

          return `_${prefix}__${name}`;
        },
      },
      postcss: {
        plugins: [
          postcssPresetEnv({
            features: {
              'logical-properties-and-values': false,
            },
          }),
        ],
      },
    },
    server: {
      headers: {
        // This is needed in dev environment because we load the worker from `/dev-sw/dev-sw.js`,
        // but it needs to be scoped to the whole domain
        'Service-Worker-Allowed': '/',
      },
      hmr: true,
      ws: {
        // Forcing the protocol to be insecure helps if you are proxying your dev server with SSL,
        // because Vite still tries to connect to localhost.
        protocol: 'ws',
        // The client can't connect through the main Rails app proxy since it doesn't support
        // WebSockets. It needs to connect directly to Vite's server, that's why we set the port again
        clientPort: 3036,
      },
      port: 3036,
    },
    build: {
      commonjsOptions: { transformMixedEsModules: true },
      chunkSizeWarningLimit: 1 * 1024 * 1024, // 1MB
      sourcemap: true,
      emptyOutDir: mode !== 'production',
      manifest: true,
      outDir,
      assetsDir: 'assets',
      assetsInlineLimit: (filePath, _) =>
        /\.woff2?$/.exec(filePath) ? false : undefined,
      rolldownOptions: {
        input: await findEntrypoints(),
        output: {
          chunkFileNames({ facadeModuleId, name }) {
            if (!facadeModuleId) {
              return '[name]-[hash].js';
            }
            if (/mastodon\/locales\/[a-zA-Z\-]+\.json/.exec(facadeModuleId)) {
              // put all locale files in `intl/`
              return 'intl/[name]-[hash].js';
            } else if (/node_modules\/@formatjs\//.exec(facadeModuleId)) {
              // use a custom name for formatjs polyfill files
              const newName = /node_modules\/@formatjs\/([^/]+)\//.exec(
                facadeModuleId,
              );

              if (newName?.[1]) {
                return `intl/[name]-${newName[1]}-[hash].js`;
              }
            } else if (name === 'index') {
              // Use a custom name for chunks, to avoid having too many of them called "index"
              const parts = facadeModuleId.split('/');

              const parent = parts.at(-2);

              if (parent) {
                return `${parent}-[name]-[hash].js`;
              }
            }
            return '[name]-[hash].js';
          },
          entryFileNames({ name }) {
            // If this is the service worker, don't add the hash to the name.
            if (name === 'sw') {
              return '[name].js';
            }
            // Otherwise, use the same value as chunkFileNames.
            return '[name]-[hash].js';
          },
        },
      },
    },
    experimental: {
      /**
       * Setting this causes Vite to not rely on the base config for import URLs,
       * and instead uses import.meta.url, which is what we want for proper CDN support.
       * @see https://github.com/mastodon/mastodon/pull/37310
       */
      renderBuiltUrl: () => undefined,
    },
    worker: {
      format: 'es',
    },
    plugins: [
      react(),
      babel({
        presets: [removePropTypesPreset],
      }),
      formatjs(),
      MastodonThemes(),
      MastodonAssetsManifest(),
      MastodonServiceWorkerLocales(),
      MastodonServiceWorkerChunkPaths(),
      legacy({
        renderLegacyChunks: false,
        modernPolyfills: true,
        modernTargets: browserslist.loadConfig({ path: process.cwd() }),
      }),
      isProdBuild && (Compress() as PluginOption),
      command === 'build' &&
        manifestSRI({
          manifestPaths: ['.vite/manifest.json'],
        }),
      svgr(),
      // Old library types need to be converted
      optimizeLodashImports() as PluginOption,
      !!process.env.ANALYZE_BUNDLE_SIZE &&
        (visualizer({
          template: process.env.CI ? 'raw-data' : 'treemap',
        }) as PluginOption),
    ],
  } satisfies UserConfig;
};

async function findEntrypoints() {
  const entrypoints: Record<string, string> = {
    sw: path.resolve(jsRoot, 'mastodon/service_worker/sw.ts'),
  };

  // Upstream adds files from `app/javascript/entrypoints` in there.
  // In glitch-soc, `GlitchThemes` is taking care of that, so remove the
  // upstream code to prevent processing the same file twice, which results
  // in weird import cycles in the manifest.

  // Next, SCSS entrypoints
  const scssEntrypointsDir = path.resolve(jsRoot, 'styles/entrypoints');
  const scssEntrypoints = await readdir(scssEntrypointsDir, {
    withFileTypes: true,
  });
  const scssExtTest = /\.s?css$/;
  for (const file of scssEntrypoints) {
    if (file.isFile() && scssExtTest.test(file.name)) {
      entrypoints[file.name.replace(scssExtTest, '')] = path.resolve(
        scssEntrypointsDir,
        file.name,
      );
    }
  }

  return entrypoints;
}

export default defineConfig(config);