UNPKG

svgfusion-core

Version:

Core engine and utilities for SVGFusion - the foundation library that powers SVG to component conversion.

180 lines (171 loc) 4.75 kB
/** * SVG parsing and AST (Abstract Syntax Tree) generation * Industry standard approach for parsing SVG content into a structured format */ interface SVGElement { tag: string; attributes: Record<string, string>; children: SVGElement[]; content?: string; } interface SVGAst { root: SVGElement; viewBox?: string; width?: string; height?: string; namespace?: string; } /** * Core transformation engine for SVG processing * Handles optimization, color manipulation, and feature application */ interface TransformationOptions { optimize?: boolean; splitColors?: boolean; splitStrokeWidths?: boolean; fixedStrokeWidth?: boolean; normalizeFillStroke?: boolean; accessibility?: boolean; removeComments?: boolean; removeDuplicates?: boolean; minifyPaths?: boolean; } interface StrokeWidthMapping { originalStrokeWidth: string; variableName: string; } interface ColorMapping { originalColor: string; variableName: string; type: 'fill' | 'stroke' | 'stop-color'; } interface TransformationResult { ast: SVGAst; colorMappings: ColorMapping[]; strokeWidthMappings: StrokeWidthMapping[]; metadata: { originalColors: string[]; originalStrokeWidths: string[]; optimizationApplied: boolean; features: string[]; hasClassAttributes: boolean; }; } /** * Abstract component generator base class * Provides common functionality for all component generators */ interface GeneratorOptions { typescript?: boolean; memo?: boolean; forwardRef?: boolean; exportDefault?: boolean; componentName?: string; prefix?: string; suffix?: string; includeTypes?: boolean; } interface ComponentResult { code: string; filename: string; componentName: string; dependencies: string[]; } /** * Main SVGFusion engine * Orchestrates parsing, transformation, and code generation */ interface SVGFusionOptions { framework: 'react' | 'vue'; transformation?: TransformationOptions; generator?: GeneratorOptions; } interface ConversionResult { code: string; filename: string; componentName: string; dependencies: string[]; metadata: { originalColors: string[]; originalStrokeWidths: string[]; optimizationApplied: boolean; features: string[]; }; } /** * Main SVGFusion engine */ declare class SVGFusion { private parser; private transformer; /** * Initialize SVGFusion engine */ constructor(); /** * Extract colors from SVG for preview/analysis */ extractColors(svgContent: string): string[]; /** * Validate SVG content */ validate(svgContent: string): { valid: boolean; errors: string[]; }; /** * Convert SVG content to component code */ convert(svgContent: string, options: SVGFusionOptions, generatorConstructor: new (options: GeneratorOptions) => any): Promise<ConversionResult>; } interface ConversionOptions { name?: string; prefix?: string; suffix?: string; optimize?: boolean; typescript?: boolean; format?: 'esm' | 'cjs'; splitColors?: boolean; splitStrokeWidths?: boolean; fixedStrokeWidth?: boolean; normalizeFillStroke?: boolean; accessibility?: boolean; removeComments?: boolean; removeDuplicates?: boolean; minifyPaths?: boolean; isFixedStrokeWidth?: boolean; } interface ReactConversionOptions extends ConversionOptions { memo?: boolean; ref?: boolean; titleProp?: boolean; descProp?: boolean; icon?: boolean; dimensions?: boolean; replaceAttrValues?: Record<string, string>; svgProps?: Record<string, string>; expandProps?: boolean | 'start' | 'end'; nativeProps?: boolean; ariaLabelledBy?: boolean; ariaHidden?: boolean; role?: 'img' | 'graphics-document' | 'graphics-symbol' | 'presentation'; } interface VueConversionOptions extends ConversionOptions { compositionApi?: boolean; scriptSetup?: boolean; props?: boolean; dimensions?: boolean; replaceAttrValues?: Record<string, string>; } interface BatchConversionOptions extends ConversionOptions { inputDir: string; outputDir: string; recursive?: boolean; extensions?: string[]; generateIndex?: boolean; indexFormat?: 'ts' | 'js'; exportType?: 'named' | 'default'; framework?: Framework; } type Framework = 'react' | 'vue'; export { type BatchConversionOptions, type ComponentResult, type ConversionOptions, type ConversionResult, type ReactConversionOptions, SVGFusion, type SVGFusionOptions, type TransformationOptions, type TransformationResult, type VueConversionOptions };