kbrsh/moon
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.
