botsu.app/apps/client/vite.config.js

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import { wasm } from '@rollup/plugin-wasm';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
import inject from '@rollup/plugin-inject';
import topLevelAwait from 'vite-plugin-top-level-await';
import { VitePWA } from 'vite-plugin-pwa';
import fs from 'fs';
import path from 'path';
import buildConfig from './build.config';

const copyFiles = {
  targets: [
    {
      src: 'node_modules/@element-hq/element-call-embedded/dist/*',
      dest: 'public/element-call',
    },
    {
      src: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
      dest: '',
      rename: 'pdf.worker.min.js',
    },
    {
      src: 'netlify.toml',
      dest: '',
    },
    {
      src: 'config.json',
      dest: '',
    },
    {
      src: 'public/manifest.json',
      dest: '',
    },
    {
      src: 'public/res/android',
      dest: 'public/',
    },
    {
      src: 'public/locales',
      dest: 'public/',
    },
    {
      src: 'vendor/voxelier/index.html',
      dest: 'voxelier',
    },
    {
      src: 'vendor/voxelier/botsu-embedded.css',
      dest: 'voxelier',
    },
    {
      src: 'vendor/voxelier/blockstate-manager.js',
      dest: 'voxelier',
    },
    {
      src: 'vendor/voxelier/blockstate-manager.css',
      dest: 'voxelier',
    },
    {
      src: 'vendor/voxelier/assets/*',
      dest: 'voxelier/assets',
    },
    {
      src: 'vendor/voxelier/packs/*',
      dest: 'packs',
    },
    {
      src: 'vendor/voxelier/sanctuary-assets',
      dest: '',
    },
    {
      src: 'vendor/twitch/embed-v1.js',
      dest: 'vendor/twitch',
    },
  ],
};

function serverMatrixSdkCryptoWasm(wasmFilePath) {
  return {
    name: 'vite-plugin-serve-matrix-sdk-crypto-wasm',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === wasmFilePath) {
          const resolvedPath = path.join(
            path.resolve(),
            '/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm'
          );

          if (fs.existsSync(resolvedPath)) {
            res.setHeader('Content-Type', 'application/wasm');
            res.setHeader('Cache-Control', 'no-cache');

            const fileStream = fs.createReadStream(resolvedPath);
            fileStream.pipe(res);
          } else {
            res.writeHead(404);
            res.end('File not found');
          }
        } else {
          next();
        }
      });
    },
  };
}

export default defineConfig(({ mode }) => {
  const env = { ...loadEnv(mode, path.resolve('../..'), ''), ...process.env };
  const host = env.BOTSU_DEV_HOST || '127.0.0.1';
  const port = Number(env.BOTSU_DEV_PORT || 5173);
  const allowedHosts = (env.BOTSU_DEV_ALLOWED_HOSTS || 'localhost,127.0.0.1')
    .split(',')
    .map((value) => value.trim())
    .filter(Boolean);
  const hmr = env.BOTSU_DEV_HMR_HOST
    ? {
        host: env.BOTSU_DEV_HMR_HOST,
        protocol: env.BOTSU_DEV_HMR_PROTOCOL || 'wss',
        clientPort: Number(env.BOTSU_DEV_HMR_CLIENT_PORT || 443),
      }
    : undefined;

  if (!Number.isInteger(port) || port < 1 || port > 65535) {
    throw new Error('BOTSU_DEV_PORT must be an integer between 1 and 65535');
  }

  return {
    appType: 'spa',
    publicDir: false,
    base: buildConfig.base,
    server: {
      port,
      host,
      strictPort: true,
      allowedHosts,
      hmr,
      headers: {
        'Cache-Control': 'no-store',
      },
      proxy: {
        '/presence': {
          target: env.BOTSU_PRESENCE_PROXY_URL || 'http://127.0.0.1:8091',
          ws: true,
          changeOrigin: false,
        },
        '/godot': {
          target: env.BOTSU_PRESENCE_PROXY_URL || 'http://127.0.0.1:8091',
          changeOrigin: false,
        },
      },
      fs: {
        // Allow serving files from one level up to the project root
        allow: ['..'],
      },
    },
    plugins: [
      serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
      topLevelAwait({
        // The export name of top-level await promise for each chunk module
        promiseExportName: '__tla',
        // The function to generate import names of top-level await promise in each chunk module
        promiseImportName: (i) => `__tla_${i}`,
      }),
      viteStaticCopy(copyFiles),
      vanillaExtractPlugin(),
      wasm(),
      react(),
      VitePWA({
        srcDir: 'src',
        filename: 'sw.ts',
        strategies: 'injectManifest',
        injectRegister: false,
        manifest: false,
        injectManifest: {
          injectionPoint: undefined,
        },
        devOptions: {
          enabled: false,
          type: 'module',
        },
      }),
    ],
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: 'globalThis',
        },
        plugins: [
          // Enable esbuild polyfill plugins
          NodeGlobalsPolyfillPlugin({
            process: false,
            buffer: true,
          }),
        ],
      },
    },
    build: {
      outDir: 'dist',
      sourcemap: true,
      copyPublicDir: false,
      rollupOptions: {
        plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
      },
    },
    resolve: {
      alias: {
        buffer: 'buffer',
      },
    },
  };
});