@vscode/component-explorer-vite-plugin

@vscode/component-explorer-vite-plugin

Vite plugin for the Component Explorer. Discovers fixture files, generates virtual entry modules, and serves the explorer UI during development.

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import { componentExplorer } from '@vscode/component-explorer-vite-plugin';

export default defineConfig({
  plugins: [
    componentExplorer({
      // options (all optional)
    }),
  ],
});

Options

Option	Type	Default	Description
include	string	'./src/**/*.fixture.{ts,tsx}'	Glob pattern for discovering fixture files.
route	string	'/___explorer'	URL path where the explorer UI is served during development.
build	BuildMode	'app-only'	Controls what gets included in vite build output. See Build Modes.
outFile	string	'___explorer.html'	Output filename for the explorer HTML in production builds. Defaults to 'index.html' when build is 'explorer-only'.
logLevel	LogLevel	'info'	Logging verbosity: 'silent', 'info', or 'verbose'.

Build Modes

The build option controls what gets emitted during vite build (has no effect on vite dev):

Mode	Description
'app-only'	Build the app without the explorer. Suitable for production deployments.
'all'	Build both the app and the explorer. Useful for CI/staging environments.
'explorer-only'	Build only the explorer, emitting index.html. For static hosting of the explorer.

componentExplorer({
  build: 'all', // include explorer in production build
})

To set the build mode via an environment variable:

import { type BuildMode } from '@vscode/component-explorer-vite-plugin';

componentExplorer({
  build: (process.env.EXPLORER_BUILD as BuildMode) ?? undefined,
})