tessl/npm-electron-vite

Electron build tooling based on Vite with pre-configured development environments, plugins, and hot reloading

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Configuration

Name: tessl/npm-electron-vite
Author: tessl

The configuration system allows you to define Vite settings for each Electron process (main, preload, renderer) with full TypeScript support and helper functions.

Capabilities

Define Configuration

Helper function for creating type-safe Electron Vite configurations.

/**
 * Type helper to make it easier to use electron.vite.config files
 * @param config - Configuration object or function
 * @returns The same configuration with proper typing
 */
function defineConfig(config: ElectronViteConfig): ElectronViteConfig;
function defineConfig(config: Promise<ElectronViteConfig>): Promise<ElectronViteConfig>;
function defineConfig(config: ElectronViteConfigFnObject): ElectronViteConfigFnObject;
function defineConfig(config: ElectronViteConfigExport): ElectronViteConfigExport;

type ElectronViteConfigExport =
  | ElectronViteConfig
  | Promise<ElectronViteConfig>
  | ElectronViteConfigFnObject
  | ElectronViteConfigFnPromise
  | ElectronViteConfigFn;

type ElectronViteConfigFn = (env: ConfigEnv) => ElectronViteConfig | Promise<ElectronViteConfig>;

interface ConfigEnv {
  command: 'build' | 'serve';
  mode: string;
}

Usage Examples:

// Static configuration
export default defineConfig({
  main: {
    build: {
      outDir: "dist-electron/main"
    }
  },
  preload: {
    build: {
      outDir: "dist-electron/preload"
    }
  },
  renderer: {
    build: {
      outDir: "dist-electron/renderer"
    }
  }
});

// Function-based configuration
export default defineConfig(({ command, mode }) => {
  const isProduction = mode === 'production';
  
  return {
    main: {
      build: {
        minify: isProduction,
        sourcemap: !isProduction
      }
    },
    renderer: {
      base: command === 'serve' ? '/' : './',
      build: {
        minify: isProduction
      }
    }
  };
});

Configuration Interfaces

Core configuration interfaces for each Electron process.

interface ElectronViteConfig {
  /** Vite config options for electron main process */
  main?: ViteConfigExport;
  /** Vite config options for electron renderer process */
  renderer?: ViteConfigExport;
  /** Vite config options for electron preload files */
  preload?: ViteConfigExport;
}

interface UserConfig {
  /** Vite config options for electron main process */
  main?: ViteConfig & { configFile?: string | false };
  /** Vite config options for electron renderer process */
  renderer?: ViteConfig & { configFile?: string | false };
  /** Vite config options for electron preload files */
  preload?: ViteConfig & { configFile?: string | false };
}

type InlineConfig = Omit<ViteConfig, 'base'> & {
  configFile?: string | false;
  envFile?: false;
  ignoreConfigWarning?: boolean;
};

Configuration Resolution

Load and resolve configuration from files with dependency tracking.

/**
 * Resolve configuration from file or inline config
 * @param inlineConfig - Inline configuration options
 * @param command - Build command type
 * @param defaultMode - Default mode if not specified
 * @returns Resolved configuration with dependencies
 */
function resolveConfig(
  inlineConfig: InlineConfig,
  command: 'build' | 'serve',
  defaultMode?: string
): Promise<ResolvedConfig>;

/**
 * Load configuration from file system
 * @param configEnv - Configuration environment context
 * @param configFile - Optional config file path
 * @param configRoot - Root directory for config resolution
 * @param logLevel - Logging level
 * @param ignoreConfigWarning - Whether to ignore config warnings
 * @returns Configuration with file path and dependencies
 */
function loadConfigFromFile(
  configEnv: ConfigEnv,
  configFile?: string,
  configRoot?: string,
  logLevel?: LogLevel,
  ignoreConfigWarning?: boolean
): Promise<{
  path: string;
  config: UserConfig;
  dependencies: string[];
}>;

interface ResolvedConfig {
  config?: UserConfig;
  configFile?: string;
  configFileDependencies: string[];
}

Vite Integration

Re-exported Vite configuration utilities for seamless integration.

// Re-exported from Vite for convenience
function defineViteConfig(config: ViteConfig): ViteConfig;
function mergeConfig(defaults: ViteConfig, overrides: ViteConfig): ViteConfig;
function createLogger(level?: LogLevel): Logger;

type LogLevel = 'info' | 'warn' | 'error' | 'silent';

Configuration File Patterns

Electron Vite looks for configuration files in this order:

electron.vite.config.js
electron.vite.config.ts
electron.vite.config.mjs
electron.vite.config.cjs
electron.vite.config.mts
electron.vite.config.cts

Note: Configuration files cannot be named vite.config.* to avoid conflicts.

Process-Specific Configuration

Main Process Configuration

Configuration for the Electron main process, typically includes:

{
  main: {
    build: {
      outDir: 'dist-electron/main',
      lib: {
        entry: 'src/main/index.ts',
        formats: ['cjs']
      },
      rollupOptions: {
        external: ['electron']
      }
    }
  }
}

Preload Configuration

Configuration for preload scripts:

{
  preload: {
    build: {
      outDir: 'dist-electron/preload',
      lib: {
        entry: 'src/preload/index.ts',
        formats: ['cjs']
      },
      rollupOptions: {
        external: ['electron']
      }
    }
  }
}

Renderer Configuration

Configuration for renderer processes (web content):

{
  renderer: {
    root: 'src/renderer',
    build: {
      outDir: 'dist-electron/renderer'
    },
    // Standard Vite configuration for web content
    plugins: [/* framework plugins */]
  }
}

Install with Tessl CLI