crowd-funder-for-time-pwa/vite.config.electron.mts

import { defineConfig, mergeConfig } from "vite";
import { createBuildConfig } from "./vite.config.common.mts";
import path from 'path';

export default defineConfig(async () => {
  const baseConfig = await createBuildConfig('electron');
  
  return mergeConfig(baseConfig, {
    build: {
      outDir: 'dist-electron',
      rollupOptions: {
        input: {
          // Main process entry points
          main: path.resolve(__dirname, 'src/electron/main.ts'),
          preload: path.resolve(__dirname, 'src/electron/preload.js'),
          // Renderer process entry point (the web app)
          app: path.resolve(__dirname, 'index.html'),
        },
        external: ['electron'],
        output: {
          format: 'cjs',
          entryFileNames: (chunkInfo) => {
            // Use different formats for main process vs renderer
            if (chunkInfo.name === 'main' || chunkInfo.name === 'preload') {
              return '[name].js';
            }
            return 'assets/[name].[hash].js';
          },
          assetFileNames: (assetInfo) => {
            // Keep main process files in root, others in assets
            if (assetInfo.name === 'main.js' || assetInfo.name === 'preload.js') {
              return '[name].[ext]';
            }
            return 'assets/[name].[hash].[ext]';
          },
          chunkFileNames: 'assets/[name].[hash].js',
        },
      },
      target: 'node18',
      minify: false,
      sourcemap: true,
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    optimizeDeps: {
      include: ['@/utils/logger']
    },
    plugins: [
      {
        name: 'typescript-transform',
        transform(code: string, id: string) {
          if (id.endsWith('main.ts')) {
            // Replace the logger import with inline logger
            return code.replace(
              /import\s*{\s*logger\s*}\s*from\s*['"]@\/utils\/logger['"];?/,
              `const logger = {
                log: (...args) => console.log(...args),
                error: (...args) => console.error(...args),
                info: (...args) => console.info(...args),
                warn: (...args) => console.warn(...args),
                debug: (...args) => console.debug(...args),
              };`
            );
          }
          return code;
        }
      },
      {
        name: 'remove-sw-imports',
        transform(code: string, id: string) {
          // Remove service worker imports and registrations
          if (id.includes('registerServiceWorker') || 
              id.includes('register-service-worker') || 
              id.includes('sw_scripts') || 
              id.includes('PushNotificationPermission') || 
              code.includes('navigator.serviceWorker')) {
            return {
              code: code
                .replace(/import.*registerServiceWorker.*$/mg, '')
                .replace(/import.*register-service-worker.*$/mg, '')
                .replace(/navigator\.serviceWorker/g, 'undefined')
                .replace(/if\s*\([^)]*serviceWorker[^)]*\)\s*{[^}]*}/g, '')
                .replace(/import.*workbox.*$/mg, '')
                .replace(/importScripts\([^)]*\)/g, '')
            };
          }
          return code;
        }
      },
      {
        name: 'remove-sw-files',
        enforce: 'pre',
        resolveId(id: string) {
          // Prevent service worker files from being included
          if (id.includes('sw.js') || 
              id.includes('workbox') || 
              id.includes('registerSW.js') || 
              id.includes('manifest.webmanifest')) {
            return '\0empty';
          }
          return null;
        },
        load(id: string) {
          if (id === '\0empty') {
            return 'export default {}';
          }
          return null;
        }
      },
      {
        name: 'electron-css-injection',
        enforce: 'post',
        generateBundle(options, bundle) {
          // Find the main CSS file
          const cssAsset = Object.values(bundle).find(
            (asset: any) => asset.type === 'asset' && asset.fileName?.endsWith('.css')
          ) as any;
          
          if (cssAsset) {
            // Find the HTML file and inject CSS link
            const htmlAsset = Object.values(bundle).find(
              (asset: any) => asset.type === 'asset' && asset.fileName?.endsWith('.html')
            ) as any;
            
            if (htmlAsset) {
              const cssHref = `./${cssAsset.fileName}`;
              const cssLink = `    <link rel="stylesheet" href="${cssHref}">\n`;
              
              // Check if CSS link already exists
              if (!htmlAsset.source.includes(cssHref)) {
                // Inject CSS link after the title tag
                htmlAsset.source = htmlAsset.source.replace(
                  /(<title>.*?<\/title>)/,
                  `$1\n${cssLink}`
                );
                console.log(`[electron-css-injection] Injected CSS link: ${cssHref}`);
              } else {
                console.log(`[electron-css-injection] CSS link already present: ${cssHref}`);
              }
            }
          }
        }
      }
    ],
    ssr: {
      noExternal: ['@/utils/logger']
    },
    base: './',
    publicDir: 'public',
  });
});