Moon

Moon is a minimal reactive UI library for building user interfaces with a component composition framework, client-side routing, server-side rendering, and signals-based reactivity. It provides a virtual DOM diffing engine that computes minimal real DOM mutations, enabling efficient view updates by comparing in-memory UI representations against previous versions.

The library distinguishes itself through a signals-based reactivity system that tracks data dependencies through observable signals, triggering targeted DOM updates only when values change. It implements a state driver pattern for unidirectional data flow, where a centralized state store provides data as input and accepts changes as output. Moon also includes a client-side history router that intercepts URL changes via the History API to swap view components without reloading the page, preserving application state.

The framework supports declarative view rendering using HTML-like markup with embedded expressions for data binding and event handling, along with directive-based behavior for common UI patterns. It offers server-side string rendering that generates complete HTML strings on the server by executing components in a non-browser environment, and includes project scaffolding through a command-line tool that sets up a predefined directory structure and build configuration from a single command.

Features

Reactive UI Libraries - A minimal library for building user interfaces from components that automatically update when underlying data changes.

HTML-Like Markup Renderers - Describes UI structure directly in JavaScript using HTML-like markup with embedded expressions for data binding and event handling.

UI Component Compositions - Builds interfaces by nesting reusable functions that return virtual DOM trees for modular view logic.

Component Composition Frameworks - Nests reusable, self-contained UI pieces together to build complex interfaces from simple building blocks.

Reactive UI Updates - Automatically re-computes and updates the user interface in response to state changes via signals.

Signal-Based Reactivity - Implements observable signals that trigger targeted DOM re-renders only when their values change.

Client-Side Routers - Ships a client-side history router that intercepts URL changes via the History API to swap views without reloading.

Client-side Routing - Navigates between component-based views on the client side using URL changes without full page reloads.

Component Composition - Builds interfaces by nesting reusable functions that return virtual DOM trees for modular composition.

Declarative UI Structures - Uses HTML-like markup with embedded expressions for data binding and event handling directly in JavaScript.

Reactive State Management - Provides a signals-based reactivity system that automatically updates the DOM when underlying data changes.

Server-Side Renderers - Generates complete HTML strings on the server by executing components in a non-browser environment.

Server-Side Rendering - Generates complete HTML strings on the server by executing components in a non-browser environment.

Server-Side Rendering Engines - Generates HTML on the server for faster page loads and search engine indexing.

Virtual DOM Diffing - Compares in-memory UI representations to compute minimal real DOM mutations.

Centralized State Stores - Stores and updates application data through a centralized driver that provides data as input and accepts changes as output.

Driver-Based State Flows - Manages application state through a unidirectional data flow where a driver function receives new state and returns it as input.

Event Handling - Responds to DOM interactions like input changes and clicks by running handler functions that update state.

UI Directives - Ships built-in directives for common UI patterns such as conditional rendering and iteration.

State-Comparison Updates - Updates the DOM only where data changes by comparing previous and current states.

kbrshmoon

Features

Star history