Ripple UI Framework

Ripple provides several core capabilities for building modern UIs:

• Reactive Primitives: Built-in reactivity via track and &[] lazy destructuring.
• Reactive Objects: Support for fully reactive arrays and objects using RippleArray and RippleObject.
• Component-Based Architecture: Reusable components with props and children.
• Statement Containers: Use @{...} for local setup within components.
• Performance: Fine-grained rendering with optimized bundle size and memory usage.
• Developer Experience: Full TypeScript integration, VSCode support (diagnostics, syntax highlighting, IntelliSense), and default support for Prettier and ESLint for .tsrx modules.

Ripple has an ecosystem of community-driven libraries for common tasks such as routing, UI components, charting, and state management.

Warning: Ripple is currently not production-ready. It may undergo breaking changes at any time. Use these libraries for exploration and building use-cases, but do not rely on them for production environments.

When comparing Ripple to Svelte, note the following distinctions:

• Type Safety: Ripple follows a TypeScript-first approach.
• Syntax: Ripple uses a JSX-like syntax rather than Svelte's HTML-based templates.
• File Structure: Ripple allows for multiple components within a single file.
• Reactivity: While reactivity concepts are similar, the syntax implementation differs.

The Ripple ecosystem includes several community-driven libraries for routing, UI components, charts, and state management.

Warning: Ripple is currently not production-ready and may undergo breaking changes at any time. Use these libraries for exploration and development, but avoid relying on them for production environments.

The benchmark evaluates performance across six specific operations designed to stress component overhead, context lookup, and DOM reconciliation:

• MOUNT: Measures the time to go from an empty DOM to a fully painted tree (exercises creation and subscription).
• UPDATE_ROOT: Mutates the root context value, forcing every leaf to re-read (exercises lookup and re-rendering).
• UPDATE_PARTIAL: Mutates state on a mid-node (depth 5), affecting only its 32 descendant leaves (tests scoped updates).
• PARTIAL_UNMOUNT: Toggles a visible flag on a mid-node to drop its subtree (exercises per-block teardown).
• PARTIAL_REMOUNT: Flips the visible flag back on to reconstruct the subtree (exercises scoped mounting).
• UNMOUNT: Performs a full teardown via the framework's unmount API.

Ripple differs from React in several key architectural and syntactical ways:

• Control Flow: Instead of using wrapper components for logic, Ripple templates support inline directives like @if, @for, @switch, and @try.
• Reactivity: Uses built-in reactivity via track() and &[] (lazy destructuring) instead of the useState/useEffect pattern.
• Styling: Supports scoped CSS natively without requiring CSS-in-JS libraries.
• Rendering: Uses fine-grained reactivity instead of a Virtual DOM.

The TSRX MCP Endpoint is a deployment-neutral HTTP endpoint designed for remote MCP clients that support Streamable HTTP. It is mounted at /mcp and provides @tsrx/mcp functionality in a remote-safe mode.

Remote Mode Capabilities:

• Documentation
• Prompts
• Formatting
• Compilation
• Diagnostic analysis tools

Note: Remote mode omits local filesystem/project tools such as inspect-project, detect-target, and validate-tsrx-file.

To integrate with a custom HTTP runtime, you can import handleRequest from src/handler.js and adapt it to your environment.

Ripple shares some similarities with Solid but introduces specific features:

• Component Model: Components are ordinary functions that return TSRX.
• Collections: Includes built-in reactive collections such as RippleArray and RippleSet.
• Control Flow: Returned templates support directive-style control flow.

When using @tsrx/core, keep in mind the following non-goals:

• No runtime code emission: @tsrx/core does not emit runtime code; code generation is handled by framework-specific packages like @tsrx/ripple.
• No runtime: This package does not include reactivity, rendering, or DOM code.
• Format agnostic: It does not lock consumers to a specific output format, allowing multiple compile targets to share the same parser and analysis.