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

import { defineConfig, UserConfig, Plugin } from "vite";
import vue from "@vitejs/plugin-vue";
import dotenv from "dotenv";
import { loadAppConfig } from "./vite.config.utils.mts";
import path from "path";
import { fileURLToPath } from 'url';

// Load environment variables
dotenv.config();

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export async function createBuildConfig(platform: string): Promise<UserConfig> {
  console.log(`[VITE CONFIG] createBuildConfig called with platform: ${platform}`);
  console.log(`[VITE CONFIG] NODE_ENV: ${process.env.NODE_ENV}`);
  console.log(`[VITE CONFIG] VITE_PLATFORM: ${process.env.VITE_PLATFORM}`);
  
  const appConfig = await loadAppConfig();
  const isCapacitor = platform === "capacitor";
  const isElectron = platform === "electron";
  const isNative = isCapacitor || isElectron;

  console.log(`[VITE CONFIG] Platform flags - isCapacitor: ${isCapacitor}, isElectron: ${isElectron}, isNative: ${isNative}`);

  // Set platform - PWA is always enabled for web platforms
  process.env.VITE_PLATFORM = platform;
  console.log(`[VITE CONFIG] Set VITE_PLATFORM to: ${platform}`);

  const config: UserConfig = {
    base: "/",
    plugins: [
      {
        name: 'vite-config-logger',
        config(config, { command, mode }) {
          console.log(`[VITE CONFIG] Plugin config called - command: ${command}, mode: ${mode}`);
          console.log(`[VITE CONFIG] Current config keys:`, Object.keys(config || {}));
          return config;
        },
        configResolved(config) {
          console.log(`[VITE CONFIG] Config resolved - mode: ${config.mode}, command: ${config.command}`);
          console.log(`[VITE CONFIG] Plugins found:`, config.plugins.map(p => p.name).filter(Boolean));
          console.log(`[VITE CONFIG] Build target:`, config.build?.target);
          console.log(`[VITE CONFIG] Minify setting:`, config.build?.minify);
        }
      },
      // Plugin to explicitly handle HTML elements that Vue might treat as components
      {
        name: 'vue-html-elements',
        transform(code, id) {
          if (id.endsWith('.vue')) {
            console.log(`[VUE HTML PLUGIN] Processing Vue file: ${id}`);
            // This plugin ensures that HTML elements like <b> are treated as HTML elements
            // The actual transformation is handled by the Vue compiler configuration above
          }
          return code;
        }
      },
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => {
              console.log(`[VUE COMPILER] isCustomElement called for tag: "${tag}"`);
              // Only treat SVG elements as custom elements
              // This prevents warnings when using v-html with SVG content from libraries like jdenticon
              // Don't treat single-letter tags as custom elements to avoid Vue warnings about <b>, <i>, etc.
              const result = tag.startsWith('svg') || tag.startsWith('SVG');
              console.log(`[VUE COMPILER] isCustomElement result for "${tag}": ${result}`);
              return result;
            }
          }
        }
      })
    ],
    server: {
      port: parseInt(process.env.VITE_PORT || "8080"),
      fs: { strict: false },
      // CORS headers disabled to allow images from any domain
      // This means SharedArrayBuffer is unavailable, but absurd-sql
      // will automatically fall back to IndexedDB mode which still works
    },
    build: {
      outDir: "dist",
      assetsDir: 'assets',
      chunkSizeWarningLimit: 1000,
      rollupOptions: {
        external: isNative 
          ? ['@capacitor/app'] 
          : [],
        output: {
          format: 'esm',
          generatedCode: {
            preset: 'es2015'
          },
          manualChunks: undefined
        }
      }
    },
    worker: {
      format: 'es',
      plugins: () => []
    },
    define: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.VITE_PLATFORM': JSON.stringify(platform),
      // PWA is always enabled for web platforms
      __dirname: JSON.stringify(process.cwd()),
      __IS_MOBILE__: JSON.stringify(isCapacitor),
      __IS_ELECTRON__: JSON.stringify(isElectron),
      __USE_QR_READER__: JSON.stringify(!isCapacitor),
      'process.platform': JSON.stringify('browser'),
      'process.version': JSON.stringify('v16.0.0'),
      'process.env.NODE_DEBUG': JSON.stringify(false),
      'global.process': JSON.stringify({
        platform: 'browser',
        version: 'v16.0.0',
        env: { NODE_DEBUG: false }
      })
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@nostr/tools': path.resolve(__dirname, 'node_modules/@nostr/tools'),
        '@nostr/tools/nip06': path.resolve(__dirname, 'node_modules/@nostr/tools/nip06'),
        ...appConfig.aliasConfig,
        'path': path.resolve(__dirname, './src/utils/node-modules/path.js'),
        'fs': path.resolve(__dirname, './src/utils/node-modules/fs.js'),
        'crypto': path.resolve(__dirname, './src/utils/node-modules/crypto.js'),
        'dexie-export-import': path.resolve(__dirname, 'node_modules/dexie-export-import')
      }
    },
    optimizeDeps: {
      include: [
        '@nostr/tools',
        '@nostr/tools/nip06',
      ],
      exclude: isNative ? [
        'register-service-worker',
        'workbox-window',
        'web-push',
        'serviceworker-webpack-plugin'
      ] : []
    }
  };
  
  console.log(`[VITE CONFIG] Final config object keys:`, Object.keys(config));
  console.log(`[VITE CONFIG] Vue plugin configuration:`, JSON.stringify(config.plugins?.find(p => typeof p === 'object' && p && 'name' in p && p.name === 'vue') || 'Not found'));
  
  return config;
}

export default defineConfig(async () => createBuildConfig('web'));