cinny/vite.config.js

import { defineConfig } 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/pdfjs-dist/build/pdf.worker.min.mjs',
      dest: '',
      rename: 'pdf.worker.min.js',
    },
    {
      src: 'node_modules/gif.js/dist/gif.worker.js',
      dest: '',
    },
    {
      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: 'public/sound',
      dest: 'public/',
    },
    {
      src: 'public/font',
      dest: 'public/',
    },
  ],
};

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();
        }
      });
    },
  };
}

function serveGifWorker() {
  return {
    name: 'vite-plugin-serve-gif-worker',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url === '/gif.worker.js') {
          const resolvedPath = path.join(path.resolve(), '/node_modules/gif.js/dist/gif.worker.js');

          if (fs.existsSync(resolvedPath)) {
            res.setHeader('Content-Type', 'application/javascript');
            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();
        }
      });
    },
  };
}

function servePublicAssets() {
  return {
    name: 'vite-plugin-serve-public-assets',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        // Serve sound files
        if (req.url?.startsWith('/sound/')) {
          const fileName = req.url.replace('/sound/', '');
          const resolvedPath = path.join(path.resolve(), 'public', 'sound', fileName);

          if (fs.existsSync(resolvedPath)) {
            const ext = path.extname(fileName);
            const contentType = ext === '.ogg' ? 'audio/ogg' : 'application/octet-stream';
            res.setHeader('Content-Type', contentType);
            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();
        }
      });
    },
  };
}

// CORS proxy for Matrix homeservers during development
/**
 * Vite adds crossorigin to module/CSS tags when base is relative (./).
 * Electron serves the build via file:// — those assets then fail CORS checks
 * and the app renders with browser defaults (black text, broken spacing).
 */
function stripCrossoriginForFileProtocol() {
  return {
    name: 'strip-crossorigin-for-file-protocol',
    apply: 'build',
    transformIndexHtml(html) {
      return html.replace(/\s+crossorigin/g, '');
    },
  };
}

function corsProxyMiddleware() {
  return {
    name: 'vite-plugin-cors-proxy',
    configureServer(server) {
      server.middlewares.use(async (req, res, next) => {
        // Proxy /.well-known requests: /_matrix-cors-proxy/homeserver.com/.well-known/matrix/client
        const corsProxyMatch = req.url?.match(/^\/_matrix-cors-proxy\/([^/]+)(\/.*)/);
        if (corsProxyMatch) {
          const [, hostname, pathname] = corsProxyMatch;
          const targetUrl = `https://${hostname}${pathname}`;
          
          console.log(`[CORS Proxy] ${req.method} ${req.url}`);
          console.log(`[CORS Proxy] Target: ${targetUrl}`);
          
          // Handle preflight OPTIONS request
          if (req.method === 'OPTIONS') {
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
            res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
            res.writeHead(204);
            res.end();
            return;
          }
          
          try {
            // Collect request body for POST/PUT
            let body = null;
            if (req.method === 'POST' || req.method === 'PUT') {
              const chunks = [];
              for await (const chunk of req) {
                chunks.push(chunk);
              }
              body = Buffer.concat(chunks).toString();
              console.log(`[CORS Proxy] Request body:`, body);
            }
            
            // Forward request with method, headers, and body
            const fetchOptions = {
              method: req.method,
              headers: {
                'Content-Type': req.headers['content-type'] || 'application/json',
                'Authorization': req.headers['authorization'] || '',
              },
            };
            
            if (body) {
              fetchOptions.body = body;
            }
            
            const response = await fetch(targetUrl, fetchOptions);
            const data = await response.text();
            
            console.log(`[CORS Proxy] Response status: ${response.status}`);
            console.log(`[CORS Proxy] Response data:`, data.substring(0, 500));
            
            // Set CORS headers
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
            res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
            res.setHeader('Content-Type', response.headers.get('content-type') || 'application/json');
            
            res.writeHead(response.status);
            res.end(data);
          } catch (error) {
            console.error(`[CORS Proxy] Error for ${targetUrl}:`, error);
            res.writeHead(500);
            res.end(JSON.stringify({ error: error.message }));
          }
        } else {
          next();
        }
      });
    },
  };
}

export default defineConfig({
  appType: 'spa',
  publicDir: false,
  base: buildConfig.base,
  assetsInclude: ['**/*.ogg', '**/*.mp3', '**/*.wav'],
  server: {
    port: 38347,
    host: '0.0.0.0',
    cors: true, // Enable CORS for dev server
    open: false,
    fs: {
      // Allow serving files from one level up to the project root
      allow: ['..'],
    },
  },
  plugins: [
    stripCrossoriginForFileProtocol(),
    corsProxyMiddleware(), // Add CORS proxy for development
    serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
    serveGifWorker(),
    servePublicAssets(),
    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: {
    rolldownOptions: {
      define: {
        global: 'globalThis',
      },
      plugins: [
        // Enable polyfill plugins
        NodeGlobalsPolyfillPlugin({
          process: false,
          buffer: true,
        }),
      ],
    },
  },
  build: {
    target: 'es2022',
    outDir: 'dist',
    sourcemap: true,
    copyPublicDir: false,
    rollupOptions: {
      plugins: [inject({ Buffer: ['buffer', 'Buffer'] })],
    },
  },
});