Modular Event-driven Zero-js Engine (M.E.Z.E.)

A lightweight, stateful, server-side web framework built on top of ASP.NET Core, designed for building modern interactive web apps with near zero JavaScript (except strictly necessary vendor libs like HTMX).

🚀 Key Features

1. Zero-JS Architecture

• State Lifting: Application state is defined in C# POCOs and automatically persisted/restored via Session (In-Memory, File, or DB).
• Server-Side Rendering: All UI logic resides in C#. No client-side frameworks (React/Angular) required.
• HTMX Integration: Seamless partial page updates, AJAX form handling, and event routing.

2. Rich Component Library

• DataGrid: A fully featured Grid with:
  • Server-Side Pagination & Sorting.
  • Inline Editing with Type-Safe Editors (Dropdowns for Enums/Bools, Inputs for Numbers/Strings).
  • Configuration: Fluid API (e.g., .Column(x => x.Role).Options(...)).
• Dynamic Theming: Switch between Tailwind and Bulma (or others) at runtime. Components automatically render correct classes.

3. Server-Sent Events (SSE)

• Real-Time Updates: Built-in SseService to push updates to valid clients.
• Components: HxSseConnect and HxSseSwap helpers make real-time UI simple.
• Background Services: Demo includes a live Clock and System Stats monitor running in the background.

4. Composite Applications

• App Mixing: ability to embed multiple independent "Apps" (e.g., Dashboard + Calculator) into a single "Composite App" view.
• Event Routing: Smart dispatching system that routes generic events to the correct specific child component.

📦 Project Structure

WebApp.Framework

The core library containing:

• BaseApp / BaseController: The foundation for stateful apps.
• Components: HtmlElement, DataGrid, Button, etc.
• Session API: Interfaces and implementations (Db, File, Memory) for state persistence.
• Services: SseService for real-time comms.

WebApp.Demo

A showcase application implementing:

• Calculator: (/calculator) A functioning calculator with history and "State" preservation.
• Dashboard: (/dashboard) Real-time SSE Clock and Graphs.
• User Grid: (/grid) Complex DataGrid implementation.
• Composite: (/composite) All of the above running on a single screen.

🛠️ Getting Started

Prerequisites

• .NET 8.0 or later.

Running the Demo

dotnet run --project WebApp.Demo/WebApp.Demo.csproj --urls=http://localhost:5000

Navigation

• Home: / (Dispatcher)
• Calculator: /calculator
• Dashboard: /dashboard
• User Grid: /grid
• Composite View: /composite

💡 How it Works

1. State Definition: You define an App class inheriting BaseApp.

   public class CounterApp : BaseApp {
       [JsonInclude] public int Count { get; set; }
   }

2. Behavior: You add methods to modify state.

   public void Increment() { Count++; }

3. UI Construction: You override Build() to return a Virtual DOM.

   public override IHtmlElement Build() => 
       new Div().Content($"Count: {Count}")
                .OnClick(nameof(Increment));

4. Execution:
   • User clicks "Increment".
   • HTMX sends POST to Server.
   • Server loads App State from Session.
   • Server invokes Increment().
   • Server re-renders Build() and sends HTML back to update the DOM.

🎨 Theming

The framework supports "Theme Adapters". Change the look of your entire app with one property:

public void ToggleTheme() {
    ThemeName = "Bulma"; // or "Tailwind"
}

All components (Button, Card, Input, Table) instantly re-render using the new CSS framework's classes.