users posts comments

./eql v

╔════════════════════════════════════════╗
║         VISUAL QUERY BUILDER           ║
╠════════════════════════════════════════╣
║                                        ║
║  [users]────→(posts)────→(comments)   ║
║                                        ║
╠════════════════════════════════════════╣
║ Query: users { posts { comments } }   ║
╚════════════════════════════════════════╝

Use arrow keys to move, SPACE to add nodes, ENTER to connect

component Counter {
  ~count = localStorage.getItem('count') || 0
  ~history = []
  doubled => count * 2
  
  count :: {
    history = [...history, count]
    localStorage.setItem('count', count)
  }
  
  <[
    h1 { "Count: " + count }
    p { "Doubled: " + doubled }
    button(@click: count++) { "+" }
    button(@click: count--) { "-" }
  ]>
}

my-eghact-app/
├── src/
│   ├── routes/              # File-based routing (no React Router!)
│   │   ├── index.egh        # Home page
│   │   ├── about.egh        # About page
│   │   └── products/
│   │       ├── index.egh    # Products list
│   │       └── [id].egh     # Dynamic route
│   ├── components/          # Reusable components
│   ├── stores/              # Compile-time state management
│   └── queries/             # EghQL queries
├── eghact_modules/          # EPkg packages (not node_modules!)
├── epkg.json                # Package manifest (not package.json!)
├── epkg-lock.yaml           # Lock file (better than package-lock!)
└── eghact.config.js         # Zero-config by default

// State with ~ prefix
~count = 0
~user = null

// Computed values with =>
fullName => user?.firstName + ' ' + user?.lastName
isLoggedIn => user !== null

// Effects with ::
user :: {
  console.log('User changed:', user)
  analytics.track('user_update', user)
}

// Automatic two-way binding with <~>
input(<~> searchQuery)

// No onChange handlers needed!

store AppStore {
  ~user = null
  ~theme = 'light'
  ~cart = []
  
  totalItems => cart.length
  totalPrice => cart.reduce((sum, item) => sum + item.price, 0)
  
  login(credentials) {
    user = await api.login(credentials)
  }
  
  addToCart(item) {
    cart = [...cart, item]
  }
}

match status {
  'loading' -> Spinner()
  'error' -> ErrorMessage(error)
  'success' -> Content(data)
  _ -> Empty()
}

component MobileApp {
  <[
    @platform('ios') {
      IOSStatusBar(style: 'light')
    }
    
    @platform('android') {
      AndroidNavigationBar()
    }
    
    SharedContent()
  ]>
}

// Build for mobile
./eghact-production build --platform ios
./eghact-production build --platform android

import { CartStore, ProductCard, CheckoutForm } from '@eghact/ecommerce'
import { AuthStore, LoginForm } from '@eghact/auth'
import { ImageCarousel } from '@eghact/carousel'

component Shop {
  @provide cart: CartStore
  @provide auth: AuthStore
  
  ~products = []
  
  // Fetch products with EghQL
  @mount {
    products = await eghql`
      products(featured: true) { 
        id name price image 
        variants { color size }
      }
    `
  }
  
  <[
    ImageCarousel(images: heroImages)
    
    div.products {
      *~products as product {
        ProductCard(
          product: product
          onAddToCart: cart.add
        )
      }
    }
    
    ShoppingCart()
    CheckoutForm()
  ]>
}