Alegio.js

The Boundaryless, Local-First, Resumable Web Framework

Alegio.js is a next-generation full-stack web framework designed to eliminate server-client boundary friction, zero-hydration CPU overhead, and complex data fetching boilerplate.

---

Features

• Native Resumability: HTML arrives ready from SSR. The browser skips re-executing JavaScript (Zero Hydration) and attaches event listeners lazily without Virtual DOM.
• Full-Stack LiveSignal (liveSignal): Unified reactivity from Database to DOM. State mutations automatically perform instant optimistic UI updates, persist locally, and stream delta updates to all connected clients via Server-Sent Events (SSE).
• Local-First & Offline Native: Works 100% offline out-of-the-box via LocalStorage/IndexedDB. Automatically reconciles data deltas when internet connectivity resumes using Conflict-free Replicated Data Types (CRDT).
• Zero-Boundary Compiler: No 'use client' or 'use server' pragmas required. Sensitive DB queries & secrets are automatically isolated to edge server runners.
• Zero-VDOM JSX Runtime: Fine-grained JSX compilation directly to native DOM elements.

---

Primary Use Cases & Case Studies

1. Real-Time Collaborative Workspaces

• Challenge: Traditional web apps require complex WebSocket infrastructure, GraphQL subscriptions, and custom optimistic UI state rollback code.
• Alegio Solution: Using liveSignal, state changes in one browser window automatically replicate to all connected team members in real-time via Server-Sent Events (SSE) without writing custom API endpoints.
• Example: Collaborative Task Boards (Alegio Nexus), Shared Document Editors, and Multi-user Kanban Systems.

2. Offline-First Retail & Field Applications

• Challenge: Standard web apps block users with loading spinners or fail completely when network connectivity drops in retail stores or field locations.
• Alegio Solution: Alegio.js persists all state mutations locally to IndexedDB/LocalStorage first. Cashiers and field workers can process transactions 100% offline. Once connectivity is restored, background CRDT reconciliation automatically syncs pending transactions to the cloud database.
• Example: Point of Sale (POS) Cashier Hubs (Alegio POS Hub), Field Delivery Logistics, and Warehouse Inventory Trackers.

3. High-Frequency Analytics & Financial Dashboards

• Challenge: Heavy Virtual DOM diffing during high-frequency data streaming causes frame drops and UI sluggishness.
• Alegio Solution: Alegio's fine-grained signal engine bypasses the Virtual DOM entirely. Updates mutate specific DOM text nodes directly, maintaining 60 FPS performance under heavy real-time data flow.
• Example: Crypto & Stock Trading Terminals, System Telemetry Monitors, and IoT Sensor Dashboards.

4. High-Performance E-Commerce & Public Portals

• Challenge: Heavy client-side JavaScript hydration degrades Google Core Web Vitals (INP/FID) and decreases e-commerce conversion rates.
• Alegio Solution: Native Resumability delivers server-rendered HTML with embedded state metadata. The client skips component re-execution during boot, achieving sub-millisecond (0.3ms) boot times.
• Example: Online Marketplaces, Content Portals, and High-Traffic SaaS Landing Pages.

---

Quick Start

Initialize a new Alegio.js application with a single command:

npx create-alegio-app my-workspace
cd my-workspace
npm run dev

Or install alegio as a dependency in an existing project:

npm install alegio

---

Code Example

Unified Full-Stack Signal (liveSignal)

import { liveSignal } from 'alegio';

// Single signal bound to Local Storage + Edge DB + SSE Real-Time Sync
const [todos, setTodos] = liveSignal('todos_state', [
  { id: '1', title: 'Build with Alegio.js', completed: false }
]);

// Optimistic Update (0ms latency + auto server sync)
setTodos(prev => [...prev, { id: '2', title: 'Deploy App', completed: false }]);

Component with Fine-Grained JSX Runtime

/** @jsxImportSource alegio */
import { createSignal } from 'alegio';

export function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Clicked {count} times
    </button>
  );
}

---

Repository Structure

.
├── alegio.js            # Core Runtime Engine (createSignal, liveSignal, createRouter)
├── index.d.ts           # TypeScript Definitions for Alegio Core
├── jsx-runtime.js       # Zero-VDOM Fine-Grained JSX Compiler Runtime
├── jsx-runtime.d.ts     # TypeScript Definitions for JSX
├── create-alegio-app.js # CLI Application Starter Tooling
├── server.js            # Real-Time Edge DB & SSE Sync Backend Server
├── docs.html / docs.js  # Interactive Documentation & Benchmark Portal
├── nexus.html / nexus.js# Real-Time Collaborative Workspace Showcase
├── pos.html / pos.js    # Offline-First Retail POS Showcase
├── test_alegio.js       # Automated Unit Verification Suite
├── test_server_sync.js  # Multi-Client SSE Real-Time Sync Test Suite
└── package.json         # npm Package Manifest

---

Running Verification Tests

Run the automated test suites:

# Core Signal & Resumability Test Suite
npm test

# Multi-Client SSE Real-Time Sync Test
node test_server_sync.js

---

License

Distributed under the MIT License. Built for next-generation web performance.