Warning: This is a Proof of Concept (PoC)

This project is experimental and under active development. APIs may change without notice. Not recommended for production use.

#Luna UI

• Client-side: Compiles to JavaScript for browser DOM rendering and hydration
• Server-side: Runs on native backend for high-performance SSR
• JavaScript API: Use from JavaScript/TypeScript via @luna_ui/luna npm package

#Features

• Fine-Grained Reactivity - Signal-based reactive primitives (Signal, effect, memo) with automatic dependency tracking
• Island Architecture - Partial hydration with selective component loading
• SSR (Server-Side Rendering) - Render to HTML string with streaming support
• Hydration - Restore interactivity on SSR-rendered content with multiple trigger strategies (load, idle, visible, media)
• JSX/TSX Support - Use familiar JSX syntax via @luna_ui/luna npm package
• Multi-target Support - Core signals work on js, native, wasm, wasm-gc

#Installation

#MoonBit

// moon.mod.json
{
  "deps": {
    "mizchi/luna": "0.1.0"
  }
}

#npm (for JSX/TSX)

npm install @luna_ui/luna

#Target Support

• Core (mizchi/luna): Signals, VNode, reactive primitives - works on all targets
• Render (mizchi/luna/core/render): HTML string rendering - works on all targets
• DOM (mizchi/luna/dom): Browser DOM rendering and hydration - JavaScript only

#Usage

#Signals - Reactive Primitives

// Create a signal
let count = @signal.signal(0)

// Create a computed value (memo)
let doubled = @signal.memo(fn() { count.get() * 2 })

// Create an effect that auto-tracks dependencies
let _ = @signal.effect(fn() {
  println("Count: " + count.get().to_string())
  @signal.on_cleanup(fn() { println("Cleaning up") })
})

// Update triggers the effect
count.set(1)       // prints: Count: 1
count.update(fn(n) { n + 1 })  // prints: Count: 2

#DOM Rendering (JavaScript target)

fn counter_component() -> @luna_dom.DomNode {
  let count = @signal.signal(0)
  let doubled = @signal.memo(fn() { count.get() * 2 })

  @luna_dom.div(class="counter", [
    @luna_dom.h2([@luna_dom.text("Counter")]),
    // Dynamic text updates automatically
    @luna_dom.p([@luna_dom.text_dyn(fn() { "Count: " + count.get().to_string() })]),
    @luna_dom.p([@luna_dom.text_dyn(fn() { "Doubled: " + doubled().to_string() })]),
    @luna_dom.div(class="buttons", [
      @luna_dom.button(
        on=@luna_dom.events().click(fn(_) { count.update(fn(n) { n - 1 }) }),
        [@luna_dom.text("-")],
      ),
      @luna_dom.button(
        on=@luna_dom.events().click(fn(_) { count.update(fn(n) { n + 1 }) }),
        [@luna_dom.text("+")],
      ),
      @luna_dom.button(
        on=@luna_dom.events().click(fn(_) { count.set(0) }),
        [@luna_dom.text("Reset")],
      ),
    ]),
  ])
}

fn main {
  let doc = @dom.document()
  match doc.getElementById("app") {
    Some(el) => {
      let app = counter_component()
      @luna_dom.render(el |> @luna_dom.DomElement::from_dom, app)
    }
    None => ()
  }
}

#Conditional Rendering

fn conditional_example() -> @luna_dom.DomNode {
  let show = @signal.signal(true)

  @luna_dom.div([
    @luna_dom.button(
      on=@luna_dom.events().click(fn(_) { show.update(fn(b) { not(b) }) }),
      [@luna_dom.text_dyn(fn() { if show.get() { "Hide" } else { "Show" } })],
    ),
    @luna_dom.show(fn() { show.get() }, fn() {
      @luna_dom.div([@luna_dom.text("Conditionally rendered content")])
    }),
  ])
}

#List Rendering

fn list_example() -> @luna_dom.DomNode {
  let items : @signal.Signal[Array[String]] = @signal.signal(["A", "B", "C"])

  @luna_dom.ul([
    @luna_dom.for_each(fn() { items.get() }, fn(item, index) {
      @luna_dom.li([@luna_dom.text(item)])
    }),
  ])
}

#Development

# Install dependencies
pnpm install

# Run all CI checks (recommended before PR)
just ci

# Type check
just check

# Run all tests
just test

# Run MoonBit tests only
just test-moonbit

# Run browser tests
just test-browser

# Run E2E tests
just test-e2e

# Build
just build

# Format code
just fmt

# Show bundle sizes
just size

# Watch mode
just watch

#Project Structure

src/
├── core/                      # Target-independent
│   ├── signal/                # Signal primitives
│   ├── vnode.mbt              # VNode definition
│   ├── render/                # HTML string rendering
│   ├── routes/                # Route matching
│   └── serialize/             # State serialization
├── platform/                  # Platform-specific
│   ├── dom/                   # Browser DOM API
│   │   ├── element/           # Low-level DOM operations (render, diff, reconcile)
│   │   └── router/            # Client-side router
│   ├── js/                    # JS-specific
│   │   └── api/               # Public API for JS (@luna_ui/luna)
│   └── server_dom/            # Server-side SSR helpers
├── stella/                    # Shard/Island embedding
├── sol/                       # SSR framework (CLI + runtime)
├── examples/                  # Example applications
└── tests/                     # Test fixtures

js/
├── luna/                      # npm package (@luna_ui/luna)
└── loader/                    # Island hydration loader (@luna_ui/luna-loader)

e2e/                           # Playwright E2E tests

#Island Architecture

#Sol - SSR Framework

just sol new myapp

#License

#Luna Core

#Module Structure

#VNode

pub enum Node[E] {
  Element(VElement[E])      // HTML element
  Text(String)              // Static text
  DynamicText(() -> String) // Dynamic text
  Fragment(Array[Node[E]])  // Fragment
  Show(...)                 // Conditional rendering
  For(...)                  // List rendering
  Island(VIsland[E])        // Hydration boundary
  WcIsland(VWcIsland[E])    // Web Components Island
  Async(VAsync[E])          // Async node
  // ...
}

#Signal

let count = @signal.signal(0)
count.get()        // 0
count.set(1)       // Set value
count.update(fn(n) { n + 1 })  // Update function

// Derived value
let doubled = @signal.computed(fn() { count.get() * 2 })

// Side effects
@signal.effect(fn() {
  println(count.get())
})

#Attr

pub enum Attr[E] {
  VStatic(String)           // Static value
  VDynamic(() -> String)    // Signal-linked
  VHandler(EventHandler[E]) // Event handler
  VAction(String)           // Declarative action
}

#TriggerType

pub enum TriggerType {
  Load      // On page load
  Idle      // On requestIdleCallback
  Visible   // On IntersectionObserver detection
  Media(String)  // On media query match
  None      // Manual trigger
}

#References

• Signal Implementation - Reactive system details
• Routes Implementation - Routing details