@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

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

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

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

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

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

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

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

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

Template Customization

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

# Install dependencies
pnpm install

# Build the package
pnpm build

# Run tests
pnpm test

# Development mode
pnpm dev

License

MIT © fliidotdev

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Support

• Documentation
• GitHub Issues
• Discord Community