vite.config.web.mts

/**
 * Vite configuration for Maestro Web Interface
 *
 * This config builds the web interface (both mobile and desktop)
 * as a standalone bundle that can be served by the Fastify server.
 *
 * Output: dist/web/
 */

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { readFileSync } from 'fs';
import { execFileSync } from 'child_process';

// Read version from package.json
const packageJson = JSON.parse(readFileSync(path.join(__dirname, 'package.json'), 'utf-8'));
const appVersion = process.env.VITE_APP_VERSION || packageJson.version;

// Get git hash
function getGitHash() {
	try {
		return execFileSync('git', ['rev-parse', '--short=8', 'HEAD'], {
			encoding: 'utf8',
			stdio: ['pipe', 'pipe', 'pipe'],
		}).trim();
	} catch {
		return 'unknown';
	}
}
const gitHash = getGitHash();

export default defineConfig(({ mode }) => ({
	plugins: [react()],

	// Entry point for web interface
	root: path.join(__dirname, 'src/web'),

	// Public directory for static assets (manifest.json, icons, etc.)
	// Files here are copied to the build output root as-is
	publicDir: path.join(__dirname, 'src/web/public'),

	// Use relative paths for assets (served from Fastify)
	base: './',

	define: {
		__APP_VERSION__: JSON.stringify(appVersion),
		__GIT_HASH__: JSON.stringify(gitHash),
	},

	esbuild: {
		// Strip console.log and console.debug in production builds
		drop: mode === 'production' ? ['console', 'debugger'] : [],
	},

	resolve: {
		alias: {
			// Allow importing from renderer types/constants
			'@renderer': path.join(__dirname, 'src/renderer'),
			'@web': path.join(__dirname, 'src/web'),
			'@shared': path.join(__dirname, 'src/shared'),
		},
	},

	build: {
		outDir: path.join(__dirname, 'dist/web'),
		emptyOutDir: true,

		// Generate source maps for debugging
		sourcemap: true,

		rollupOptions: {
			input: {
				// Single entry point that handles routing to mobile/desktop
				main: path.join(__dirname, 'src/web/index.html'),
			},
			output: {
				// Organize output by type
				entryFileNames: 'assets/[name]-[hash].js',
				// Use dynamic chunk names that preserve mobile/desktop distinction
				chunkFileNames: (chunkInfo) => {
					// Preserve mobile/desktop naming for their respective chunks
					if (
						chunkInfo.name?.includes('mobile') ||
						chunkInfo.facadeModuleId?.includes('/mobile/')
					) {
						return 'assets/mobile-[hash].js';
					}
					if (
						chunkInfo.name?.includes('desktop') ||
						chunkInfo.facadeModuleId?.includes('/desktop/')
					) {
						return 'assets/desktop-[hash].js';
					}
					// Named chunks (react, vendor) keep their names
					if (chunkInfo.name && !chunkInfo.name.startsWith('_')) {
						return `assets/${chunkInfo.name}-[hash].js`;
					}
					return 'assets/[name]-[hash].js';
				},
				assetFileNames: 'assets/[name]-[hash].[ext]',

				// Manual chunking for better caching and code splitting
				manualChunks: (id) => {
					// React core in its own chunk for optimal caching
					if (id.includes('node_modules/react-dom')) {
						return 'react';
					}
					if (id.includes('node_modules/react/') || id.includes('node_modules/react-is')) {
						return 'react';
					}
					// Scheduler is a React dependency
					if (id.includes('node_modules/scheduler')) {
						return 'react';
					}

					// Mobile-specific dependencies (future-proofing for Phase 1)
					// When mobile-specific libraries are added, they'll be bundled separately
					if (id.includes('/mobile/') && !id.includes('node_modules')) {
						return 'mobile';
					}

					// Desktop-specific dependencies (future-proofing for Phase 2)
					// When desktop-specific libraries are added, they'll be bundled separately
					if (id.includes('/desktop/') && !id.includes('node_modules')) {
						return 'desktop';
					}

					// Shared web components stay in main bundle or get split automatically
					// This allows React.lazy() to create async chunks for mobile/desktop

					// Return undefined for other modules to let Rollup handle them
					return undefined;
				},
			},
		},

		// Target modern browsers (web interface doesn't need legacy support)
		target: 'es2020',

		// Minimize bundle size
		minify: 'esbuild',

		// Report chunk sizes
		reportCompressedSize: true,
	},

	// Development server (for testing web interface standalone)
	server: {
		port: process.env.VITE_WEB_PORT ? parseInt(process.env.VITE_WEB_PORT) : 5174, // Different from renderer dev server (5173)
		strictPort: true,
		// Proxy API calls to the running Maestro app during development
		proxy: {
			'/api': {
				target: 'http://localhost:45678',
				changeOrigin: true,
			},
			'/ws': {
				target: 'ws://localhost:45678',
				ws: true,
			},
		},
	},

	// Preview server for testing production build
	preview: {
		port: 5175,
		strictPort: true,
	},

	// Enable CSS code splitting
	css: {
		devSourcemap: true,
	},

	// Optimize dependencies
	optimizeDeps: {
		include: ['react', 'react-dom'],
	},
}));