vite-plugin-export-index

A Vite plugin that automatically generates index files with exports for your directories. This plugin watches specified directories and automatically creates/updates index.ts files with export statements based on the files in those directories.

Features

• 🚀 Automatic Generation: Automatically generates index.ts files with exports
• 👀 File Watching: Watches for file changes and updates exports in real-time during development
• 🎨 Customizable: Flexible resolver functions to control export generation
• 📝 Custom Banners: Add custom headers to generated files
• 🔧 TypeScript Support: Full TypeScript support with proper type definitions

Installation

npm

npm install @domeadev/vite-plugin-export-index

pnpm

pnpm add @domeadev/vite-plugin-export-index

yarn

yarn add @domeadev/vite-plugin-export-index

Usage

Basic Setup

Add the plugin to your vite.config.ts:

import { defineConfig } from "vite";
import { exportIndex } from "@domeadev/vite-plugin-export-index";

export default defineConfig({
  plugins: [
    exportIndex({
      options: [
        {
          dir: "src/components",
          resolver: ({ basename, extname }) => {
            if (extname === "tsx" || extname === "ts") {
              return `export { default as ${basename} } from './${basename}';`;
            }
            return null;
          },
        },
      ],
    }),
  ],
});

Advanced Configuration

import { defineConfig } from "vite";
import {
  exportIndex,
  defineResolver,
} from "@domeadev/vite-plugin-export-index";

const componentResolver = defineResolver(({ basename, extname, name }) => {
  // Skip non-TypeScript files
  if (!["ts", "tsx"].includes(extname)) return null;

  // Skip test files
  if (basename.includes(".test") || basename.includes(".spec")) return null;

  // Generate named exports for components
  if (extname === "tsx") {
    return `export { default as ${basename} } from './${basename}';`;
  }

  // Generate barrel exports for utilities
  if (extname === "ts") {
    return `export * from './${basename}';`;
  }

  return null;
});

export default defineConfig({
  plugins: [
    exportIndex({
      options: [
        {
          dir: "src/components",
          dest: "src/components/index.ts", // Optional: custom destination
          banner:
            "// Components barrel export\n// Auto-generated - do not edit manually\n\n",
          resolver: componentResolver,
        },
        {
          dir: "src/utils",
          resolver: ({ basename, extname }) => {
            if (extname === "ts") {
              return `export * from './${basename}';`;
            }
            return null;
          },
        },
      ],
      showLogs: true, // Enable/disable logging (default: true)
    }),
  ],
});

API Reference

exportIndex(config)

Main plugin function.

Parameters

• config.options - Array of export options
• config.showLogs - Whether to show logs (default: true)

ExportOption

Configuration for each directory to watch:

interface ExportOption {
  /** Custom banner/header for the generated file */
  banner?: string;

  /** Directory to watch for files */
  dir: string;

  /** Destination file path (default: `${dir}/index.ts`) */
  dest?: string;

  /** Function to resolve export statements for each file */
  resolver: (variables: {
    /** Relative directory path from src */
    dir: string;
    /** Full filename with extension */
    name: string;
    /** Filename without extension */
    basename: string;
    /** File extension without dot */
    extname: string;
  }) => string | null | undefined | false;
}

defineResolver(resolver)

Helper function for better TypeScript support when defining resolvers.

Examples

React Components

{
  dir: 'src/components',
  resolver: ({ basename, extname }) => {
    if (extname === 'tsx') {
      return `export { default as ${basename} } from './${basename}';`
    }
    return null
  }
}

Utility Functions

{
  dir: 'src/utils',
  resolver: ({ basename, extname }) => {
    if (extname === 'ts' && !basename.includes('.test')) {
      return `export * from './${basename}';`
    }
    return null
  }
}

Custom Types

{
  dir: 'src/types',
  resolver: ({ basename, extname }) => {
    if (extname === 'ts') {
      return `export type * from './${basename}';`
    }
    return null
  }
}

How It Works

1. Directory Watching: The plugin watches specified directories for file changes
2. File Analysis: When files are added/removed, the resolver function is called for each file
3. Export Generation: The resolver determines what export statement to generate (or skip)
4. Index File Update: The plugin writes all export statements to the index file
5. Real-time Updates: During development, changes trigger automatic regeneration

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT