import { readFileSync } from 'fs';
import { parseComponent } from '../parsers/jsx-parser.js';
import type { AnalysisResult } from '../types/index.js';
export interface AnalyzeInput {
file: string;
}
export function analyzeComponent(input: AnalyzeInput): AnalysisResult {
const { file } = input;
// Read the file
const code = readFileSync(file, 'utf-8');
// Parse the component
const parsed = parseComponent(code, file);
// Return analysis result
return {
name: parsed.name,
children: parsed.children,
props: parsed.props,
styles: parsed.styles
};
}
export function formatAnalysisResult(result: AnalysisResult): string {
const lines: string[] = [];
lines.push(`# Component: ${result.name}`);
lines.push('');
// Props
if (result.props.length > 0) {
lines.push('## Props');
for (const prop of result.props) {
lines.push(`- ${prop.name}`);
}
lines.push('');
}
// Children tree
if (result.children.length > 0) {
lines.push('## Component Tree');
formatChildrenTree(result.children, lines, 0);
lines.push('');
}
// Styles
lines.push('## Styles');
if (result.styles.colors.length > 0) {
lines.push('### Colors');
for (const style of result.styles.colors) {
lines.push(`- ${style.property}: ${style.value} (${style.source})`);
}
lines.push('');
}
if (result.styles.spacing.length > 0) {
lines.push('### Spacing');
for (const style of result.styles.spacing) {
lines.push(`- ${style.property}: ${style.value} (${style.source})`);
}
lines.push('');
}
if (result.styles.typography.length > 0) {
lines.push('### Typography');
for (const style of result.styles.typography) {
lines.push(`- ${style.property}: ${style.value} (${style.source})`);
}
lines.push('');
}
if (result.styles.other.length > 0) {
lines.push('### Other Styles');
for (const style of result.styles.other) {
lines.push(`- ${style.property}: ${style.value} (${style.source})`);
}
lines.push('');
}
return lines.join('\n');
}
function formatChildrenTree(
children: AnalysisResult['children'],
lines: string[],
depth: number
): void {
const indent = ' '.repeat(depth);
for (const child of children) {
let line = `${indent}- <${child.name}`;
// Add key props inline
const keyProps = child.props.filter(p =>
['key', 'id', 'className', 'data-testid'].includes(p.name)
);
if (keyProps.length > 0) {
const propsStr = keyProps
.map(p => `${p.name}="${p.value}"`)
.join(' ');
line += ` ${propsStr}`;
}
line += '>';
if (child.textContent) {
line += ` "${child.textContent}"`;
}
lines.push(line);
if (child.children.length > 0) {
formatChildrenTree(child.children, lines, depth + 1);
}
}
}
