npm package: @fliidotdev/codegen
Description: Production-ready code generation library for React, Vue, Angular, and vanilla JavaScript. Transform visual designs and component configurations into clean, maintainable code.
Latest version: 0.1.2

# @fliidotdev/codegen

Production-ready code generation library for React, Vue, Angular, and vanilla JavaScript. Transform visual designs and component configurations into clean, maintainable code.

## Installation

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

## Features

- **Multi-Framework Support**: Generate code for React, Vue, Angular, and vanilla JS
- **Smart Imports**: Automatically manages and optimizes import statements
- **Type-Safe Generation**: Full TypeScript support with proper type definitions
- **Prettier Integration**: All generated code is automatically formatted
- **Component Composition**: Build complex components from simple configurations
- **Style Management**: Handle CSS-in-JS, CSS modules, and inline styles
- **Performance Optimized**: Generate production-ready, optimized code

## Usage

### React Code Generation

```typescript
import { ReactGenerator } from '@fliidotdev/codegen';

const generator = new ReactGenerator();

const components = [
  {
    id: 'hero-section',
    type: 'div',
    props: { 
      className: 'hero-container' 
    },
    style: {
      padding: '48px',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    },
    children: [
      {
        id: 'hero-title',
        type: 'h1',
        props: { 
          className: 'hero-title' 
        },
        children: [{
          id: 'text-1',
          type: 'text',
          props: { value: 'Welcome to Flii' }
        }]
      },
      {
        id: 'hero-button',
        type: 'Button',
        props: { 
          variant: 'primary',
          onClick: '() => console.log("Clicked")'
        },
        children: [{
          id: 'button-text',
          type: 'text',
          props: { value: 'Get Started' }
        }]
      }
    ]
  }
];

const code = generator.generate(components);
console.log(code);
```

### Generated Output

```jsx
import React from 'react';
import { Button } from '@/components/ui/button';

export default function GeneratedComponent() {
  return (
    <>
      <div 
        className="hero-container" 
        style={{
          padding: '48px',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
        }}
      >
        <h1 className="hero-title">
          Welcome to Flii
        </h1>
        <Button 
          variant="primary" 
          onClick={() => console.log("Clicked")}
        >
          Get Started
        </Button>
      </div>
    </>
  );
}
```

### Vue Code Generation

```typescript
import { VueGenerator } from '@fliidotdev/codegen';

const generator = new VueGenerator();

const config = {
  template: components,
  script: {
    setup: true,
    imports: ['ref', 'computed'],
    state: {
      count: 0
    }
  }
};

const vueComponent = generator.generate(config);
```

### Angular Code Generation

```typescript
import { AngularGenerator } from '@fliidotdev/codegen';

const generator = new AngularGenerator();

const config = {
  selector: 'app-hero',
  components: components,
  styles: ['./hero.component.css']
};

const angularComponent = generator.generate(config);
```

## API Reference

### `ReactGenerator`

Generates React component code from configuration objects.

#### Methods

##### `generate(components: ComponentConfig[]): string`

Generates a complete React component.

**Parameters:**
- `components`: Array of component configurations

**Returns:**
- Formatted React component code as string

### `ComponentConfig`

```typescript
interface ComponentConfig {
  id: string;                      // Unique identifier
  type: string;                    // HTML element or component name
  props: Record<string, any>;      // Component properties
  children: ComponentConfig[];     // Nested components
  style?: Record<string, any>;     // Inline styles
}
```

### Framework Generators

- `ReactGenerator`: React/Next.js code generation
- `VueGenerator`: Vue 3 composition API generation
- `AngularGenerator`: Angular component generation
- `VanillaGenerator`: Plain JavaScript generation

## Advanced Features

### Custom Component Mapping

```typescript
import { ReactGenerator } from '@fliidotdev/codegen';

const generator = new ReactGenerator({
  componentMap: {
    'CustomButton': '@/components/CustomButton',
    'Card': '@/components/Card'
  }
});
```

### Template Customization

```typescript
const generator = new ReactGenerator({
  template: 'functional', // 'functional' | 'class' | 'arrow'
  typescript: true,
  prettier: {
    semi: false,
    singleQuote: true
  }
});
```

## Integration with Flii Platform

This package powers the code generation capabilities of the Flii visual development platform:

- Visual to code transformation
- Live code preview
- Framework switching
- Export to production-ready projects
- Component library integration

## Development

```bash
# Install dependencies
pnpm install

# Build the package
pnpm build

# Run tests
pnpm test

# Development mode
pnpm dev
```

## License

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

## Contributing

We welcome contributions! Please see our [Contributing Guide](https://github.com/fliidotdev/builder-engine/blob/main/CONTRIBUTING.md) for details.

## Support

- [Documentation](https://docs.flii.dev/codegen)
- [GitHub Issues](https://github.com/fliidotdev/builder-engine/issues)
- [Discord Community](https://discord.gg/fliidotdev)