joelui - UI Compiler Toolchain

joelui --version

# Compile UI component to React
joelui compile Button.joel --target react
 
# Start development server
joelui dev
 
# Build for production
joelui build

# Compile to React (JSX)
joelui compile Button.joel --target react --output Button.jsx
 
# Compile to React Native
joelui compile Button.joel --target react-native --output Button.tsx
 
# Compile to Vue
joelui compile Button.joel --target vue --output Button.vue
 
# Compile to Web Components
joelui compile Button.joel --target web-components --output button.js
 
# Compile multiple components
joelui compile components/*.joel --target react --output-dir dist/

# Start dev server
joelui dev
 
# Start on specific port
joelui dev --port 3000
 
# Start with specific target
joelui dev --target react-native
 
# Watch mode
joelui dev --watch

# Build all components
joelui build
 
# Build with specific target
joelui build --target react --optimize
 
# Build with tree-shaking
joelui build --tree-shake
 
# Build with minification
joelui build --minify

# Show component dependencies
joelui analyze Button.joel
 
# Show component tree
joelui tree App.joel
 
# Check component props
joelui props Button.joel
 
# Validate component
joelui validate Button.joel

# Extract styles to CSS
joelui extract-styles Button.joel --output styles.css
 
# Compile Tailwind classes
joelui compile Button.joel --tailwind
 
# Generate CSS-in-JS
joelui compile Button.joel --css-in-js styled-components

# Generate Redux actions/reducers
joelui generate-state Button.joel --redux
 
# Generate Zustand store
joelui generate-state Button.joel --zustand
 
# Generate Jotai atoms
joelui generate-state Button.joel --jotai

joelui compile Button.joel --target react --output Button.jsx

[Compiled]
[target react]

component Button {
  label: str
  onClick: fn()
  
  fn render() -> Element {
    return <button onClick={self.onClick}>
      {self.label}
    </button>
  }
}

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

# Start dev server
joelui dev
 
# In another terminal, edit components
# Changes hot-reload automatically

# Show configuration
joelui config show
 
# Set default target
joelui config set default_target react
 
# Set output directory
joelui config set output_dir dist/
 
# Configure styling
joelui config set style_engine tailwind