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

import { defineConfig, mergeConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";
import { createBuildConfig } from "./vite.config.common.mts";
import { loadAppConfig } from "./vite.config.utils.mts";

export default defineConfig(async ({ mode }) => {
  const baseConfig = await createBuildConfig('web');
  const appConfig = await loadAppConfig();

  // Environment-specific configuration based on mode
  const getEnvironmentConfig = (mode: string) => {
    switch (mode) {
      case 'production':
        return {
          // Production optimizations
          build: {
            minify: 'terser',
            sourcemap: false,
            rollupOptions: {
              output: {
                manualChunks: {
                  vendor: ['vue', 'vue-router', 'pinia'],
                  utils: ['luxon', 'ramda', 'zod'],
                  crypto: ['@ethersproject/wallet', '@ethersproject/hdnode', 'ethereum-cryptography'],
                  sql: ['@jlongster/sql.js', 'absurd-sql']
                }
              }
            }
          },
          define: {
            __DEV__: false,
            __TEST__: false,
            __PROD__: true
          }
        };
      case 'test':
        return {
          // Test environment configuration
          build: {
            minify: false,
            sourcemap: true,
            rollupOptions: {
              output: {
                manualChunks: undefined
              }
            }
          },
          define: {
            __DEV__: false,
            __TEST__: true,
            __PROD__: false
          }
        };
      default: // development
        return {
          // Development configuration
          build: {
            minify: false,
            sourcemap: true,
            rollupOptions: {
              output: {
                manualChunks: undefined
              }
            }
          },
          define: {
            __DEV__: true,
            __TEST__: false,
            __PROD__: false
          }
        };
    }
  };

  const environmentConfig = getEnvironmentConfig(mode);

  return mergeConfig(baseConfig, {
    ...environmentConfig,
    // Ensure source maps are enabled for development and test modes
    // This affects both dev server and build output
    sourcemap: mode === 'development' || mode === 'test',
    // Server configuration inherited from base config
    // CORS headers removed to allow images from any domain
    plugins: [
      VitePWA({
        registerType: 'autoUpdate',
        manifest: appConfig.pwaConfig?.manifest,
        // Enable PWA in all web environments for consistent testing
        devOptions: {
          enabled: true, // ✅ Enable in all environments
          type: 'classic'
        },
        workbox: {
          cleanupOutdatedCaches: true,
          skipWaiting: true,
          clientsClaim: true,
          sourcemap: mode !== 'production',
          maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10MB
          // Environment-specific caching strategies
          runtimeCaching: mode === 'production' ? [
            {
              urlPattern: /^https:\/\/api\./,
              handler: 'NetworkFirst',
              options: {
                cacheName: 'api-cache',
                expiration: {
                  maxEntries: 100,
                  maxAgeSeconds: 60 * 60 * 24 // 24 hours
                }
              }
            }
          ] : []
        }
      })
    ]
  });
});