Vite Exporter Plugin

The Vite Exporter Plugin automatically generates index.ts files that exports all modules from a specified directory. This is useful for organizing and managing your exports in a Vite project.

Installation

1npm install vite-exporter
2# or
3yarn add vite-exporter

Quick Start

1// vite.config.ts
2import { defineConfig } from "vite";
3import { generateIndexPlugin } from "vite-exporter";
4
5export default defineConfig({
6  plugins: [
7    generateIndexPlugin({
8      dirs: ["src/components", "src/utils"],
9    }),
10  ],
11});

file changes will be detected and the index.ts file will be updated automatically.

Configuration

Basic Configuration

1import { generateIndexPlugin, LogLevel, ProcessingMode } from "vite-exporter";
2
3export default defineConfig({
4  plugins: [
5    generateIndexPlugin({
6      dirs: ["src/components", "src/utils"], // Required: directories to process
7      extensions: [".ts", ".tsx", ".js", ".jsx"], // File extensions (default shown)
8      debounceMs: 2000, // Debounce timing (default: 2000)
9      logLevel: LogLevel.DEBUG, // Log verbosity (default: INFO)
10      mode: ProcessingMode.ExportsOnly, // Processing mode (default: ExportsOnly)
11    }),
12  ],
13});

Advanced Per-Directory Configuration

You can now specify different matching, exclusion patterns, and processing modes for each directory:

1generateIndexPlugin({
2  dirs: [
3    // Simple string format (uses global settings)
4    "src/utils",
5
6    // Advanced configuration with per-directory settings
7    {
8      dir: "src/components",
9      match: ["**/*.tsx", "**/*.ts"], // Only include TypeScript files
10      exclude: ["**/*.test.*", "**/*.stories.*"], // Exclude test and story files
11      mode: ProcessingMode.ExportsOnly, // Only export files that have exports
12    },
13    {
14      dir: "src/api",
15      match: "endpoints/**/*", // Only include files in endpoints subdirectory
16      exclude: ["**/*.mock.ts"], // Exclude mock files
17      mode: ProcessingMode.ExportsAndImports, // Export files with exports, import others for side effects
18    },
19    {
20      dir: "src/setup",
21      mode: ProcessingMode.ImportAll, // Import all files (exports + side effects)
22    },
23  ],
24  logLevel: LogLevel.DEBUG,
25});

Processing Modes

The plugin supports three processing modes that determine how files without exports are handled:

1enum ProcessingMode {
2  ExportsOnly = "exports-only", // Only export files that have exports - ignores files with no exports
3  ExportsAndImports = "exports-and-imports", // Export files with exports, import files without exports for side effects
4  ImportAll = "import-all", // Import all files - exports for files with exports, side-effect imports for files without
5}

ExportsOnly (default)

• Only includes files that have exports
• Files without exports are ignored
• Clean, minimal index files

ExportsAndImports

• Includes files with exports as exports
• Includes files without exports as side-effect imports
• Useful for libraries with both exports and initialization code

ImportAll

• Includes all files that match patterns
• Files with exports become exports
• Files without exports become side-effect imports
• Ensures all code is included and executed

Pattern Matching

The plugin uses minimatch for pattern matching, supporting:

• **/* - Match all files (default)
• **/*.tsx - Match only .tsx files
• components/**/* - Match files in components subdirectory
• !**/*.test.* - Exclude test files (use in exclude array)
• *.{ts,tsx} - Match .ts or .tsx files

Directory Configuration Options

Option	Type	Default	Description
dir	string	Required	Directory path to process
match	string | string[]	["**/*"]	Glob patterns to include files
exclude	string | string[]	[]	Glob patterns to exclude files
mode	ProcessingMode	ExportsOnly	How to handle files without exports

Global Configuration Options

Option	Type	Default	Description
dirs	(string | DirConfig)[]	Required	Directories to process
extensions	string[]	['.ts', '.tsx', '.js', '.jsx']	File extensions to include
debounceMs	number	2000	Debounce timing in milliseconds
logLevel	LogLevel	LogLevel.INFO	Logging verbosity level
mode	ProcessingMode	ProcessingMode.ExportsOnly	Default processing mode

Log Levels

1LogLevel.SILENT; // No output
2LogLevel.ERROR; // Only errors
3LogLevel.WARN; // Errors and warnings
4LogLevel.INFO; // Standard info (default)
5LogLevel.DEBUG; // Debug information
6LogLevel.VERBOSE; // All details

Logging Output

The new logging system provides beautiful, colored output with timestamps:

15:30:45 [Vite Exporter] INFO    🚀 Plugin initialized with configuration:
┌─ Configuration
│ Directories: src/components, src/utils
│ Extensions: .ts, .tsx, .js, .jsx
│ Debounce: 1500ms
│ Log Level: DEBUG
│ Mode: exports-only
└─

15:30:45 [Vite Exporter] DEBUG   👀 Watching directory: src/components
15:30:45 [Vite Exporter] SUCCESS 📝 Generated index.ts in src/components with 5 exports
15:30:46 [Vite Exporter] DEBUG   ➕ File ADD: src/components/NewComponent.tsx
15:30:48 [Vite Exporter] SUCCESS 📝 Generated index.ts in src/components with 6 exports

Generated Files

Given this structure:

src/
  components/
    Button.tsx        // export default Button + named exports
    Input.tsx         // export default Input
    Select.ts         // only named exports
    database.init.ts  // no exports, side effects only

With ExportsOnly mode (default):

1{
2  dir: 'src/components',
3  mode: ProcessingMode.ExportsOnly
4}

The plugin generates:

1// src/components/index.ts
2// This file is auto-generated by vite-exporter-plugin
3export { default as Button } from "./Button";
4export * from "./Button";
5export { default as Input } from "./Input";
6export * from "./Select";
7// database.init.ts is ignored (no exports)

With ExportsAndImports mode:

1{
2  dir: 'src/components',
3  mode: ProcessingMode.ExportsAndImports
4}

The plugin generates:

1// src/components/index.ts
2// This file is auto-generated by vite-exporter-plugin
3export { default as Button } from "./Button";
4export * from "./Button";
5export { default as Input } from "./Input";
6export * from "./Select";
7import "./database.init";

Configuration Options

Option	Type	Default	Description
dirs	(string | DirConfig)[]	Required	Directories to process
extensions	string[]	['.ts', '.tsx', '.js', '.jsx']	File extensions to include
debounceMs	number	2000	Debounce timing in milliseconds
logLevel	LogLevel	LogLevel.INFO	Logging verbosity level
mode	ProcessingMode	ProcessingMode.ExportsOnly	Default processing mode

Examples

Component Library with Tests

1generateIndexPlugin({
2  dirs: [
3    {
4      dir: "src/components",
5      match: ["**/*.tsx", "**/*.ts"],
6      exclude: ["**/*.test.*", "**/*.stories.*", "**/__tests__/**"],
7      mode: ProcessingMode.ExportsOnly,
8    },
9  ],
10});

API Endpoints with Side Effects

1generateIndexPlugin({
2  dirs: [
3    {
4      dir: "src/api",
5      match: "endpoints/**/*.ts",
6      exclude: ["**/*.mock.ts", "**/*.spec.ts"],
7      mode: ProcessingMode.ExportsAndImports, // Include initialization files
8    },
9  ],
10});

Setup with Initialization Files

1generateIndexPlugin({
2  dirs: [
3    {
4      dir: "src/setup",
5      match: ["**/*.ts"],
6      mode: ProcessingMode.ExportsAndImports, // Import files for side effects
7    },
8  ],
9});

Multiple Directories with Different Rules

1generateIndexPlugin({
2  dirs: [
3    "src/utils", // Simple: match everything
4    {
5      dir: "src/components",
6      exclude: ["**/*.test.*", "**/*.stories.*"],
7    },
8    {
9      dir: "src/hooks",
10      match: "use*.ts", // Only hook files
11    },
12    {
13      dir: "src/config",
14      mode: ProcessingMode.ExportsAndImports, // Side-effect imports
15    },
16  ],
17});

Troubleshooting

Enable verbose logging to see everything:

1generateIndexPlugin({
2  dirs: ["src/components"],
3  logLevel: LogLevel.VERBOSE,
4});

Common issues:

• Files not detected → Check extensions configuration and match patterns
• Too many updates slow down the build → Increase debounceMs value
• Files excluded → Check exclude patterns and ensure they use forward slashes
• Side-effect imports not working → Use ProcessingMode.ExportsAndImports or ImportAll

Migration Guide

From v1.x to v2.x

1// Old (v1.x)
2generateIndexPlugin({
3  dirs: ["src/components"],
4  excludes: ["**/*.test.ts", "**/*.spec.ts"], // Global excludes
5  enableDebugging: true,
6  enableDebuggingVerbose: true,
7});
8
9// New (v2.x)
10generateIndexPlugin({
11  dirs: [
12    "src/utils",
13    {
14      dir: "src/components",
15      // not match pattern/patterns so all files will be imported from
16      exclude: ["**/*.test.ts", "**/*.spec.ts"], // Per-directory excludes
17    },
18  ],
19  logLevel: LogLevel.VERBOSE,
20});

License

MIT License