or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

built-in-resolvers.mdcustom-resolvers.mdindex.mdplugin-configuration.mdutility-functions.md
tile.json

tessl/npm-vite-plugin-dts

A Vite plugin that generates TypeScript declaration files from source files in library mode

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-dts@4.5.x

To install, run

npx @tessl/cli install tessl/npm-vite-plugin-dts@4.5.0

index.mddocs/

Vite Plugin DTS

Vite Plugin DTS is a comprehensive Vite plugin that automatically generates TypeScript declaration files (*.d.ts) from TypeScript (.ts, .tsx) and Vue (.vue) source files when building libraries with Vite. It provides flexible configuration options including declaration file bundling, custom resolvers, and advanced TypeScript compilation features.

Package Information

  • Package Name: vite-plugin-dts
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vite-plugin-dts -D or pnpm add vite-plugin-dts -D

Core Imports

import dts from "vite-plugin-dts";

For CommonJS:

const dts = require("vite-plugin-dts").default;

Named imports:

import dts, { editSourceMapDir, type PluginOptions } from "vite-plugin-dts";

Basic Usage

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";

export default defineConfig({
  build: {
    lib: {
      entry: "src/index.ts",
      name: "MyLib",
      formats: ["es"],
      fileName: "my-lib"
    }
  },
  plugins: [
    dts({
      // Generate declaration files to match source structure
      outDir: "dist",
      // Include all TypeScript files
      include: ["src/**/*.ts"],
      // Exclude test files
      exclude: ["src/**/*.test.ts"]
    })
  ]
});

Architecture

Vite Plugin DTS is built around several key components:

  • Core Plugin: Main dtsPlugin function that integrates with Vite's build lifecycle
  • TypeScript Compiler Integration: Uses TypeScript's compiler API for accurate declaration generation
  • Built-in Resolvers: Specialized handlers for Vue, Svelte, and JSON files
  • Transform Engine: Code transformation utilities for alias resolution and import handling
  • Rollup Integration: Optional bundling of declaration files using Microsoft API Extractor
  • Source Map Support: Full source map generation and transformation for debugging

Capabilities

Plugin Configuration

Core plugin factory function with comprehensive configuration options for declaration file generation, TypeScript compilation, and build integration.

function dts(options?: PluginOptions): import('vite').Plugin;

interface PluginOptions {
  root?: string;
  outDir?: string | string[];
  entryRoot?: string;
  strictOutput?: boolean;
  compilerOptions?: ts.CompilerOptions | null;
  tsconfigPath?: string;
  resolvers?: Resolver[];
  pathsToAliases?: boolean;
  aliasesExclude?: (string | RegExp)[];
  cleanVueFileName?: boolean;
  staticImport?: boolean;
  include?: string | string[];
  exclude?: string | string[];
  clearPureImport?: boolean;
  insertTypesEntry?: boolean;
  rollupTypes?: boolean;
  bundledPackages?: string[];
  rollupConfig?: RollupConfig;
  rollupOptions?: IExtractorInvokeOptions;
  copyDtsFiles?: boolean;
  declarationOnly?: boolean;
  logLevel?: LogLevel;
  afterDiagnostic?: (diagnostics: readonly ts.Diagnostic[]) => MaybePromise<void>;
  beforeWriteFile?: (filePath: string, content: string) => MaybePromise<void | false | { filePath?: string; content?: string }>;
  afterRollup?: (result: ExtractorResult) => MaybePromise<void>;
  afterBuild?: (emittedFiles: Map<string, string>) => MaybePromise<void>;
}

Plugin Configuration

Utility Functions

Source map manipulation and path handling utilities for advanced declaration file processing.

function editSourceMapDir(content: string, fromDir: string, toDir: string): string | boolean;

Utility Functions

Custom Resolvers

Extensible resolver system for handling non-standard file types during declaration generation.

interface Resolver {
  name: string;
  supports: (id: string) => void | boolean;
  transform: (payload: {
    id: string;
    code: string;
    root: string;
    outDir: string;
    host: ts.CompilerHost;
    program: ts.Program;
  }) => MaybePromise<
    | { outputs: { path: string; content: string }[]; emitSkipped?: boolean; diagnostics?: readonly ts.Diagnostic[] }
    | { path: string; content: string }[]
  >;
}

Custom Resolvers

Built-in Resolvers

Pre-configured resolvers for common file types including JSON, Vue SFC, and Svelte components. These are automatically included in the plugin and do not need to be imported separately.

// Built-in resolvers are automatically included:
// - JSON file resolver for .json files
// - Vue SFC resolver for .vue files  
// - Svelte component resolver for .svelte files

Built-in Resolvers

Declaration Bundling

Bundle multiple declaration files into single files using Microsoft API Extractor.

function rollupDeclarationFiles(options: BundleOptions): ExtractorResult;

interface BundleOptions {
  root: string;
  configPath?: string;
  compilerOptions: Record<string, any>;
  outDir: string;
  entryPath: string;
  fileName: string;
  libFolder?: string;
  rollupConfig?: RollupConfig;
  rollupOptions?: IExtractorInvokeOptions;
}

Types

type MaybePromise<T> = T | Promise<T>;

type RollupConfig = Omit<
  IExtractorConfigPrepareOptions['configObject'],
  'projectFolder' | 'mainEntryPointFilePath' | 'compiler' | 'dtsRollup'
>;

interface BundleOptions {
  root: string;
  configPath?: string;
  compilerOptions: Record<string, any>;
  outDir: string;
  entryPath: string;
  fileName: string;
  libFolder?: string;
  rollupConfig?: RollupConfig;
  rollupOptions?: IExtractorInvokeOptions;
}

function rollupDeclarationFiles(options: BundleOptions): ExtractorResult;

// External types from dependencies
interface ExtractorResult {
  succeeded: boolean;
  errorCount: number;
  warningCount: number;
}

interface IExtractorInvokeOptions {
  localBuild?: boolean;
  showVerboseMessages?: boolean;
  showDiagnostics?: boolean;
  typescriptCompilerFolder?: string;
}

interface IExtractorConfigPrepareOptions {
  configObject: any;
}

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