@rettangoli/fe

Rettangoli Frontend

A modern frontend framework that uses YAML for view definitions, web components for composition, and Immer for state management. Build reactive applications with minimal complexity using just 3 types of files.

Features

• 🗂️ Three-File Architecture - .view.yaml, .store.js, .handlers.js files scale from single page to complex applications
• 📝 YAML Views - Declarative UI definitions that compile to virtual DOM
• 🧩 Web Components - Standards-based component architecture
• 🔄 Reactive State - Immer-powered immutable state management
• ⚡ Fast Development - Hot reload with Vite integration
• 🎯 Template System - Jempl templating for dynamic content
• 🧪 Testing Ready - Pure functions and dependency injection for easy testing

Quick Start

rtgl fe build     # Build components
rtgl fe watch     # Start dev server

Documentation

• Developer Quickstart - Complete introduction and examples
• View System - Complete YAML syntax
• Store Management - State patterns
• Event Handlers - Event handling

Architecture

Technology Stack

Runtime:

• Snabbdom - Virtual DOM
• Immer - Immutable state management
• Jempl - Template engine
• RxJS - Reactive programming

Build & Development:

• ESBuild - Fast bundling
• Vite - Development server with hot reload

Browser Native:

• Web Components - Component encapsulation

Development

Prerequisites

• Node.js 18+ or Bun
• A rettangoli.config.yaml file in your project root

Setup

• Install dependencies:

bun install

• Create project structure:

# Scaffold a new component
node ../rettangoli-cli/cli.js fe scaffold --category components --name MyButton

• Start development:

# Build once
node ../rettangoli-cli/cli.js fe build

# Watch for changes (recommended)
node ../rettangoli-cli/cli.js fe watch

Project Structure

src/
├── cli/
│   ├── build.js       # Build component bundles
│   ├── watch.js       # Development server with hot reload
│   ├── scaffold.js    # Component scaffolding
│   ├── examples.js    # Generate examples for testing
│   └── blank/         # Component templates
├── createComponent.js # Component factory
├── createWebPatch.js  # Virtual DOM patching
├── parser.js          # YAML to JSON converter
├── common.js          # Shared utilities
└── index.js           # Main exports

Configuration

Create a rettangoli.config.yaml file in your project root:

fe:
  dirs:
    - "./src/components"
    - "./src/pages"
  setup: "setup.js"
  outfile: "./dist/bundle.js"
  examples:
    outputDir: "./vt/specs/examples"

Testing

View Components

Use visual testing with rtgl vt:

rtgl vt generate
rtgl vt report

Examples

For a complete working example, see the todos app in examples/example1/.