Build System

/**
 * Vue SFC descriptor containing parsed template, script, and styles
 */
interface SFCDescriptor {
  template?: {
    content: string;
    attrs: Record<string, string | true>;
  };
  script?: {
    content: string;
    attrs: Record<string, string | true>;
  };
  scriptSetup?: {
    content: string;
    attrs: Record<string, string | true>;
  };
  styles: Array<{
    content: string;
    attrs: Record<string, string | true>;
  }>;
}

/**
 * Parses Vue Single File Component into descriptor object
 * @param filename - Path to .vue file
 * @returns SFC descriptor with parsed sections
 */
function parseSfc(filename: string): SFCDescriptor;

/**
 * Compiles Vue SFC to separate JavaScript and CSS files
 * Handles template compilation, script processing, and style extraction
 * @param filePath - Path to .vue file to compile
 * @returns Promise that resolves when compilation is complete
 */
function compileSfc(filePath: string): Promise<any>;

import { parseSfc, compileSfc } from "@vant/cli";

// Parse SFC structure
const descriptor = parseSfc('./src/button/index.vue');
console.log(descriptor.template?.content);
console.log(descriptor.script?.content);

// Compile SFC to output files
await compileSfc('./src/button/index.vue');
// Generates: button/index.js, button/index.css, button/index.d.ts

/**
 * Compiles style files (CSS, Less, Sass) to CSS output
 * Handles preprocessing, autoprefixing, and optimization
 * @param filePath - Path to style file to compile
 * @returns Promise that resolves when compilation is complete
 */
function compileStyle(filePath: string): Promise<void>;

/**
 * Current CSS preprocessor language detected from configuration
 */
type CSS_LANG = 'css' | 'less' | 'scss';

/**
 * Gets the base CSS file path for the project
 * @returns Path to base CSS file or null if not found
 */
function getCssBaseFile(): string | null;

/**
 * Replaces CSS import extensions in code for compatibility
 * @param code - Source code containing CSS imports
 * @returns Code with updated CSS import extensions
 */
function replaceCSSImportExt(code: string): string;

import { compileStyle, getCssBaseFile } from "@vant/cli";

// Compile individual style file
await compileStyle('./src/button/index.less');

// Get base styles
const baseFile = getCssBaseFile();
if (baseFile) {
  console.log(`Base styles: ${baseFile}`);
}

/**
 * Bundle configuration options
 */
interface BundleOption {
  /** Enable minification for production builds */
  minify?: boolean;
  /** Output formats to generate (es, cjs, umd, etc.) */
  formats: LibraryFormats[];
  /** External dependencies to exclude from bundle */
  external?: string[];
}

/**
 * Compiles library bundles using Vite
 * Generates multiple format outputs based on configuration
 * @returns Promise that resolves when bundle compilation is complete
 */
function compileBundles(): Promise<void>;

/**
 * Generates Vite configuration for package builds
 * @param options - Bundle configuration options
 * @returns Vite InlineConfig for package building
 */
function getViteConfigForPackage(options: BundleOption): InlineConfig;

import { compileBundles, getViteConfigForPackage } from "@vant/cli";

// Generate bundles with default configuration
await compileBundles();

// Custom Vite configuration
const viteConfig = getViteConfigForPackage({
  minify: true,
  formats: ['es', 'cjs'],
  external: ['vue']
});

/**
 * Options for package style generation
 */
interface StyleGenOptions {
  /** Output path for generated style file */
  outputPath?: string;
  /** Custom path resolver function */
  pathResolver?: (path: string) => string;
}

/**
 * Generates package-level style imports file
 * Creates index file that imports all component styles
 * @param options - Generation options
 * @returns Generated style content or void if written to file
 */
function genPackageStyle(options?: StyleGenOptions): void | string;

import { genPackageStyle } from "@vant/cli";

// Generate package styles with default settings
genPackageStyle();

// Custom output path
genPackageStyle({
  outputPath: './lib/style.css',
  pathResolver: (path) => path.replace(/\.less$/, '.css')
});

/**
 * File path resolution result
 */
interface FilePathResult {
  /** Resolved file path with extension */
  path: string;
  /** Whether the path points to an index file */
  isIndex: boolean;
}

/**
 * Resolves file path with appropriate extension
 * @param filePath - Input file path (may be missing extension)
 * @returns Resolved path information
 */
function fillExt(filePath: string): FilePathResult;

/**
 * Clears internal dependency cache
 * Used to reset dependency tracking between builds
 */
function clearDepsCache(): void;

/**
 * Gets all file dependencies for a given file
 * @param filePath - Path to analyze for dependencies
 * @returns Array of dependency file paths
 */
function getDeps(filePath: string): string[];

/**
 * Replaces import extensions in script code
 * @param code - Source code containing import statements
 * @param filePath - Current file path for context
 * @param ext - Target extension to use
 * @returns Code with updated import extensions
 */
function replaceScriptImportExt(code: string, filePath: string, ext: string): string;

import { getDeps, fillExt, replaceScriptImportExt } from "@vant/cli";

// Analyze file dependencies
const deps = getDeps('./src/button/index.ts');
console.log('Dependencies:', deps);

// Resolve file extension
const resolved = fillExt('./src/button/index');
console.log(resolved); // { path: './src/button/index.ts', isIndex: true }

// Update import extensions
const code = `import Button from './button';`;
const updatedCode = replaceScriptImportExt(code, './src/index.ts', '.js');
console.log(updatedCode); // import Button from './button.js';

/**
 * Vue component slot definition
 */
interface VueSlot {
  name: string;
  description: string;
}

/**
 * Vue component event argument
 */
interface VueEventArgument {
  name: string;
  type: string;
}

/**
 * Vue component event definition
 */
interface VueEvent {
  name: string;
  description?: string;
  arguments?: VueEventArgument[];
}

/**
 * Vue component attribute definition
 */
interface VueAttribute {
  name: string;
  default: string;
  description: string;
  value: {
    kind: 'expression';
    type: string;
  };
}

/**
 * Vue component tag definition for IDE
 */
interface VueTag {
  name: string;
  slots?: VueSlot[];
  events?: VueEvent[];
  attributes?: VueAttribute[];
  description?: string;
}

/**
 * Web types generation options
 */
interface WebTypesOptions {
  name: string;
  path: PathLike;
  test: RegExp;
  version: string;
  outputDir?: string;
  tagPrefix?: string;
}

/**
 * Parses markdown documentation and generates web-types
 * @param options - Generation options
 * @returns Promise that resolves when generation is complete
 */
function parseAndWrite(options: WebTypesOptions): Promise<void>;

/**
 * Generates WebStorm type definitions for Vue components
 * @param tagPrefix - Optional prefix for component tags
 */
function genWebStormTypes(tagPrefix?: string): void;

import { genWebStormTypes, parseAndWrite } from "@vant/cli";

// Generate WebStorm types
genWebStormTypes('van');

// Parse markdown and generate types
await parseAndWrite({
  name: 'MyLibrary',
  path: './docs',
  test: /\.md$/,
  version: '1.0.0',
  tagPrefix: 'my'
});

// Example build pipeline usage
import { 
  clean, 
  compileSfc, 
  compileStyle, 
  compileBundles, 
  genPackageStyle,
  genWebStormTypes 
} from "@vant/cli";

async function buildLibrary() {
  // 1. Clean previous builds
  await clean();
  
  // 2. Compile Vue components
  const components = await getComponents();
  for (const component of components) {
    await compileSfc(`./src/${component}/index.vue`);
    await compileStyle(`./src/${component}/index.less`);
  }
  
  // 3. Generate package styles
  genPackageStyle();
  
  // 4. Generate bundles
  await compileBundles();
  
  // 5. Generate IDE support
  genWebStormTypes();
}

lib/                    # CommonJS modules
├── button/
│   ├── index.js       # Compiled component
│   ├── index.css      # Component styles
│   └── index.d.ts     # TypeScript declarations
└── index.js           # Main entry point

es/                     # ES modules
├── button/
│   ├── index.js       # Compiled component (ESM)
│   ├── index.css      # Component styles
│   └── index.d.ts     # TypeScript declarations
└── index.js           # Main entry point (ESM)

dist/                   # Bundled outputs
├── index.js           # UMD bundle
├── index.min.js       # Minified UMD bundle
└── index.css          # Combined styles

site-dist/              # Documentation site
└── [static files]

// Build-related configuration options
interface BuildConfig {
  /** Source directory (default: 'src') */
  srcDir?: string;
  /** Component tag prefix */
  tagPrefix?: string;
  /** Enable named exports */
  namedExport?: boolean;
  /** CSS preprocessor configuration */
  css?: {
    preprocessor?: 'css' | 'less' | 'sass';
    base?: string;
    removeSourceFile?: boolean;
  };
  /** Bundle configurations */
  bundleOptions?: BundleOption[];
  /** Custom Vite configuration */
  configureVite?: (config: InlineConfig) => InlineConfig | void;
}