npm package: @fliidotdev/ast
Description: Advanced Abstract Syntax Tree (AST) parser and analyzer for JavaScript, TypeScript, and JSX code. This package provides powerful code parsing capabilities for the Flii development platform.
Latest version: 0.1.2

# @fliidotdev/ast

Advanced Abstract Syntax Tree (AST) parser and analyzer for JavaScript, TypeScript, and JSX code. This package provides powerful code parsing capabilities for the Flii development platform.

## Installation

```bash
npm install @fliidotdev/ast
# or
yarn add @fliidotdev/ast
# or
pnpm add @fliidotdev/ast
```

## Features

- **Full JSX/TSX Support**: Parse modern React components with TypeScript
- **Babel-Powered**: Built on top of Babel's robust parsing infrastructure
- **Component Analysis**: Extract component structure, props, and hierarchy
- **Import/Export Tracking**: Analyze module dependencies and exports
- **Type-Safe**: Written in TypeScript with comprehensive type definitions

## Usage

### Basic Parsing

```typescript
import { ASTParser } from '@fliidotdev/ast';

const parser = new ASTParser();

const code = `
  import React from 'react';
  
  export const Button = ({ label, onClick }) => {
    return <button onClick={onClick}>{label}</button>;
  };
`;

const ast = parser.parse(code);
console.log(ast);
// Output: { type: 'root', imports: [...], exports: [...], children: [...] }
```

### Component AST Structure

```typescript
interface ComponentAST {
  type: string;                    // Component type or element name
  props: Record<string, any>;      // Component properties
  children: ComponentAST[];        // Nested components
  imports: string[];               // Import statements
  exports: string[];               // Export statements
}
```

### Advanced Example

```typescript
import { ASTParser } from '@fliidotdev/ast';

const parser = new ASTParser();

// Parse a complex component
const complexComponent = `
  import React, { useState } from 'react';
  import { Button } from './Button';
  
  export default function Form() {
    const [value, setValue] = useState('');
    
    return (
      <form>
        <input value={value} onChange={(e) => setValue(e.target.value)} />
        <Button label="Submit" onClick={() => console.log(value)} />
      </form>
    );
  }
`;

const ast = parser.parse(complexComponent);

// Access component structure
ast.children.forEach(child => {
  console.log(`Found ${child.type} with props:`, child.props);
});
```

## API Reference

### `ASTParser`

The main parser class for analyzing JavaScript/TypeScript code.

#### Methods

##### `parse(code: string): ComponentAST`

Parses source code and returns a structured AST representation.

**Parameters:**
- `code` (string): The source code to parse

**Returns:**
- `ComponentAST`: Structured representation of the parsed code

### Supported Language Features

- ES6+ JavaScript
- TypeScript
- JSX/TSX
- React Components
- Import/Export statements
- Arrow functions
- Class components
- Hooks

## Integration with Flii Platform

This package is a core component of the Flii development platform, enabling:

- Visual component editing
- Code generation
- Component analysis
- Dependency management
- Real-time code transformation

## Development

```bash
# Install dependencies
pnpm install

# Build the package
pnpm build

# Run tests
pnpm test
```

## License

MIT © [fliidotdev](https://github.com/fliidotdev)

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## Support

For issues and questions, please visit our [GitHub Issues](https://github.com/fliidotdev/builder-engine/issues) page.