Kotoba2TSX

Complete toolchain for converting Kotoba configuration files to React TypeScript components. Transforms Jsonnet-based UI declarations into production-ready TSX code with full type safety and modern React patterns.

🎯 Overview

Kotoba2TSX bridges the gap between declarative UI configuration and React development. It parses Kotoba files (Jsonnet format) and generates TypeScript React components with proper typing, state management, and event handling.

🏗️ Architecture

Core Pipeline

Kotoba File (.kotoba) → Parser → AST → Generator → TSX Component (.tsx)
       ↓                        ↓           ↓              ↓
   Jsonnet/JSON            Validation    TypeScript   React + Hooks
   Evaluation              & Transform   Generation   Component Code

Key Components

Parser (parser.rs)

// Jsonnet-enhanced JSON parsing with validation
pub struct KotobaParser;

impl KotobaParser {
    pub fn parse_file(&self, path: &str) -> Result<KotobaConfig>;
    pub fn parse_content(&self, content: &str) -> Result<KotobaConfig>;
}

Generator (generator.rs)

// TypeScript + React code generation
pub struct TsxGenerator;

impl TsxGenerator {
    pub fn generate_tsx(&self, config: &KotobaConfig) -> Result<String>;
    pub fn generate_file(&self, config: &KotobaConfig, path: &str) -> Result<()>;
}

SWC Integration (swc_integration.rs)

// Advanced code formatting and optimization
pub struct SwcCodeGenerator;

impl SwcCodeGenerator {
    pub fn format_code(&self, code: &str) -> Result<String>;
    pub fn create_react_import(&self) -> String;
}

📊 Quality Metrics

🔧 Usage

Basic Conversion

use kotoba2tsx::prelude::*;

// Convert content string to TSX
let kotoba_content = r#"{
    "name": "MyApp",
    "version": "1.0.0",
    "theme": "light",
    "components": {
        "Button": {
            "type": "component",
            "name": "Button",
            "component_type": "button",
            "props": {"children": "Click me"}
        }
    },
    "handlers": {},
    "states": {},
    "config": {}
}"#;

let tsx_code = kotoba2tsx::convert_content(kotoba_content)?;
println!("{}", tsx_code);

File-based Conversion

use kotoba2tsx::convert_file;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Convert .kotoba file to .tsx file
    convert_file("app.kotoba", "App.tsx").await?;
    Ok(())
}

Advanced Generation

use kotoba2tsx::{KotobaParser, TsxGenerator};

// Custom configuration
let parser = KotobaParser::new();
let config = parser.parse_file("complex_app.kotoba").await?;

let generator = TsxGenerator::new();
let tsx_code = generator.generate_tsx(&config)?;

🔗 Ecosystem Integration

Kotoba2TSX is part of the complete Kotoba toolchain:

🧪 Testing

cargo test -p kotoba2tsx

Test Coverage:

• ✅ JSON/Jsonnet parsing and validation
• ✅ TSX code generation for all component types
• ✅ TypeScript interface generation
• ✅ React hooks and state management
• ✅ Event handler integration
• ✅ CSS-in-JS styled components
• ✅ SWC code formatting
• ✅ File I/O operations
• ✅ Error handling and edge cases

📈 Performance

• Fast Parsing: Efficient Jsonnet evaluation and AST construction
• Optimized Generation: Template-based TSX code generation
• SWC Integration: Lightning-fast code formatting and optimization
• Streaming Output: Memory-efficient large file processing
• Parallel Processing: Concurrent file conversion support

🔒 Security

• Input Validation: Comprehensive Jsonnet/JSON syntax validation
• Code Injection Prevention: Safe code generation without eval()
• Type Safety: Full TypeScript type checking
• Sanitized Output: XSS-safe React component generation

📚 API Reference

Core Types

• [KotobaConfig] - Main configuration structure
• [KotobaComponent] - Individual component definition
• [ComponentType] - Component classification enum
• [TsxGenerator] - Main code generation engine
• [KotobaParser] - Configuration parsing engine

Generation Options

• [TsxGenerationOptions] - Code generation configuration
• [CssInJsLibrary] - CSS-in-JS framework selection
• [ComponentStyle] - Styling configuration

Utilities

• [convert_content()] - Convert string content to TSX
• [convert_file()] - Convert file to file (async)
• [SwcCodeGenerator] - Advanced code formatting

🤝 Contributing

See the main Kotoba repository for contribution guidelines.

📄 License

Licensed under MIT OR Apache-2.0. See LICENSE for details.