@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

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

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

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

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

# Install dependencies
pnpm install

# Build the package
pnpm build

# Run tests
pnpm test

License

MIT © fliidotdev

Contributing

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

Support

For issues and questions, please visit our GitHub Issues page.