Fine-grained reactive UI library for Moonbit/JS
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.
// moon.mod.json
{
"deps": {
"mizchi/luna": "0.1.0"
}
}npm install @luna_ui/luna| Package | js | native | wasm | wasm-gc |
|---|---|---|---|---|
| mizchi/luna (core) | ✅ | ✅ | ✅ | ✅ |
| mizchi/luna/core/render | ✅ | ✅ | ✅ | ✅ |
| mizchi/luna/luna/dom | ✅ | - | - | - |
// 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: 2fn 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 => ()
}
}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")])
}),
])
}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)])
}),
])
}# 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 watchsrc/
├── 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| Trigger | Description |
|---|---|
| load | Hydrate immediately on page load |
| idle | Hydrate during browser idle time (requestIdleCallback) |
| visible | Hydrate when element becomes visible (IntersectionObserver) |
| media | Hydrate when media query matches |
| none | Manual hydration via __LN_HYDRATE__ |
just sol new myapptest {
let count = @signal.signal(0)
inspect(count.get(), content="0")
count.set(5)
inspect(count.get(), content="5")
}pub enum MyAction { Increment; Decrement } derive(Show)
@luna.h("button", [("onclick", action(Increment))], [...])test {
let a = @signal.signal(true)
let b = @signal.signal(true)
let c = @signal.signal(false)
let all_true = @signal.all([a, b, c])
inspect(all_true(), content="false")
c.set(true)
inspect(all_true(), content="true")
a.set(false)
inspect(all_true(), content="false")
}test {
let a = @signal.signal(false)
let b = @signal.signal(false)
let any_true = @signal.any([a, b])
inspect(any_true(), content="false")
a.set(true)
inspect(any_true(), content="true")
}test {
let count = @signal.signal(0)
let attr : @luna.Attr[Unit] = @luna.attr_dynamic(fn() {
"count-" + count.get().to_string()
})
guard attr is @luna.VDynamic(getter) else { fail("expected VDynamic") }
inspect(getter(), content="count-0")
count.set(5)
inspect(getter(), content="count-5")
}test {
let attr : @luna.Attr[Unit] = @luna.attr_static("my-class")
guard attr is @luna.VStatic(v) else { fail("expected VStatic") }
inspect(v, content="my-class")
}fn[T] batch(f : () -> T) -> Ttest {
let a = @signal.signal(0)
let b = @signal.signal(0)
let runs : Ref[Int] = { val: 0 }
let _ = @signal.render_effect(fn() {
let _ = a.get() + b.get()
runs.val = runs.val + 1
})
inspect(runs.val, content="1") // Initial run
@signal.batch(fn() {
a.set(1)
b.set(2)
})
// Only one additional run, not two
inspect(runs.val, content="2")
}test {
let first = @signal.signal("Hello")
let last = @signal.signal("World")
let full = @signal.combine2(first, last, fn(f, l) { f + " " + l })
inspect(full(), content="Hello World")
first.set("Hi")
inspect(full(), content="Hi World")
}test {
let node : @luna.Node[Unit] = @luna.component(fn() {
@luna.h("div", [], [@luna.text("Component")])
})
guard node is @luna.Component(render~) else { fail("expected Component") }
guard render() is @luna.Element(el) else { fail("expected Element") }
inspect(el.tag, content="div")
}fn[T] computed(compute : () -> T) -> (() -> T)test {
let count = @signal.signal(5)
let doubled = @signal.computed(fn() { count.get() * 2 })
inspect(doubled(), content="10")
count.set(7)
inspect(doubled(), content="14")
}fn[T] create_root(f : (() -> Unit) -> T) -> Ttest {
let count = @signal.signal(0)
let log : Array[Int] = []
let result = @signal.create_root(fn(dispose) {
let _ = @signal.render_effect(fn() { log.push(count.get()) })
dispose // Return dispose function
})
count.set(1)
result() // Dispose the root
count.set(2) // Won't trigger effect
inspect(log, content="[0, 1]")
}fn[T] create_root_with_dispose(f : () -> T) -> (T, () -> Unit)fn effect(fn_ : () -> Unit) -> (() -> Unit)// Note: effect() uses microtasks, so testing requires async handling
let count = @signal.signal(0)
let _ = @signal.effect(fn() {
println("count changed to: " + count.get().to_string())
})
count.set(1) // Effect will run after current task completesfn effect_once(fn_ : () -> Unit) -> Unittest {
let count = @signal.signal(0)
let runs : Ref[Int] = { val: 0 }
@signal.effect_once(fn() {
let _ = count.get()
runs.val = runs.val + 1
})
count.set(1)
count.set(2)
inspect(runs.val, content="2")
}fn effect_when(condition : () -> Bool, fn_ : () -> Unit) -> (() -> Unit)test {
let enabled = @signal.signal(false)
let count = @signal.signal(0)
let log : Array[Int] = []
let _ = @signal.effect_when(fn() { enabled.get() }, fn() {
log.push(count.get())
})
count.set(1) // Won't run, enabled is false
enabled.set(true)
count.set(2)
inspect(log, content="[1, 2]")
}error_boundary(
children=fn() { risky_component() },
fallback=fn(err, reset) {
h("div", [], [
text("Error: " + err.to_string()),
h("button", [("onclick", handler(fn(_) { reset() }))], [text("Retry")])
])
}
)test {
let inner1 = @signal.signal(10)
let inner2 = @signal.signal(20)
let outer = @signal.signal(inner1)
let flat = @signal.flatten(outer)
inspect(flat(), content="10")
outer.set(inner2)
inspect(flat(), content="20")
inner2.set(30)
inspect(flat(), content="30")
}test {
let items = @signal.signal(["a", "b", "c"])
let node : @luna.Node[Unit] = @luna.for_each(fn() {
items.get().map(fn(s) { @luna.text(s) })
})
guard node is @luna.For(render~) else { fail("expected For") }
inspect(render().length(), content="3")
}test {
let node : @luna.Node[Unit] = @luna.fragment([
@luna.text("Hello"),
@luna.text(" "),
@luna.text("World"),
])
guard node is @luna.Fragment(children) else { fail("expected Fragment") }
inspect(children.length(), content="3")
}test {
let node : @luna.Node[Unit] = @luna.h(
"div",
[("class", @luna.attr_static("container"))],
[@luna.text("Hello")],
)
guard node is @luna.Element(el) else { fail("expected Element") }
inspect(el.tag, content="div")
}test {
let h : @luna.EventHandler[Int] = @luna.handler(fn(x) {
let _ = x * 2
})
inspect(h.get_callback()(5), content="()")
}fn[E] internal_ref(url : String, state : String, trigger? : TriggerType, wc? : Bool, styles? : String, children? : Array[Node[E]]) -> Node[E]fn[E] island(id : String, url : String, state : String, children : Array[Node[E]], trigger? : TriggerType) -> Node[E]fn[T] memo(compute : () -> T) -> (() -> T)test {
let a = @signal.signal(2)
let b = @signal.signal(3)
let compute_count : Ref[Int] = { val: 0 }
let sum = @signal.memo(fn() {
compute_count.val = compute_count.val + 1
a.get() + b.get()
})
inspect(sum(), content="5")
inspect(sum(), content="5") // Cached, no recompute
inspect(compute_count.val, content="1")
a.set(10)
inspect(sum(), content="13") // Recomputes
inspect(compute_count.val, content="2")
}test {
let count = @signal.signal(0)
let values : Array[Int] = []
let unsub = @signal.on(count, fn(v) { values.push(v) })
count.set(1)
count.set(2)
unsub()
count.set(3) // This won't be captured
inspect(values, content="[1, 2]")
}fn on_cleanup(cleanup : () -> Unit) -> Unittest {
let count = @signal.signal(0)
let log : Array[String] = []
let dispose = @signal.render_effect(fn() {
let v = count.get()
log.push("run:" + v.to_string())
@signal.on_cleanup(fn() { log.push("cleanup:" + v.to_string()) })
})
count.set(1)
dispose()
inspect(
log,
content=(
#|["run:0", "cleanup:0", "run:1", "cleanup:1"]
),
)
}test {
let count = @signal.signal(10)
let values : Array[Int] = []
let unsub = @signal.on_immediate(count, fn(v) { values.push(v) })
count.set(20)
unsub()
// First value (10) was captured immediately, then 20 on update
inspect(values, content="[10, 20]")
}fn on_mount(fn_ : () -> Unit) -> Unittest {
let count = @signal.signal(0)
let runs : Ref[Int] = { val: 0 }
@signal.on_mount(fn() {
let _ = count.get() // This read won't create subscription
runs.val = runs.val + 1
})
count.set(1)
count.set(2)
// on_mount only ran once, signal changes don't trigger re-run
inspect(runs.val, content="1")
}test {
let count = @signal.signal(1)
let prev = @signal.previous(count)
inspect(prev(), content="None") // No previous value yet
count.set(2)
inspect(prev(), content="Some(1)")
count.set(3)
inspect(prev(), content="Some(2)")
}test {
let count = @signal.signal(10)
let prev = @signal.previous_with_initial(count, 0)
inspect(prev(), content="0") // Initial value
count.set(20)
inspect(prev(), content="10")
count.set(30)
inspect(prev(), content="20")
}let theme_ctx = create_context("light")
provide(theme_ctx, "dark", fn() {
// All components here will see "dark"
my_component()
})fn register_disposer(disposer : () -> Unit) -> Unitfn register_owner_cleanup(cleanup : () -> Unit) -> Unittest {
let items = @signal.signal(["a", "b", "c"])
let idx = @signal.signal(1)
let selected = @signal.select(items, idx)
inspect(
selected(),
content=(
#|Some("b")
),
)
idx.set(0)
inspect(
selected(),
content=(
#|Some("a")
),
)
idx.set(10) // Out of bounds
inspect(selected(), content="None")
}test {
let visible = @signal.signal(true)
let node : @luna.Node[Unit] = @luna.show(fn() { visible.get() }, fn() {
@luna.text("Visible!")
})
guard node is @luna.Show(condition~, ..) else { fail("expected Show") }
inspect(condition(), content="true")
}test {
let count = @signal.signal(100)
inspect(count.get(), content="100")
}switch_(
cases=[
match_case(when=fn() { state.get() == 1 }, render=fn() { text("One") }),
match_case(when=fn() { state.get() == 2 }, render=fn() { text("Two") }),
],
fallback=Some(fn() { text("Other") })
)test {
let node : @luna.Node[Unit] = @luna.text("Hello World")
guard node is @luna.Text(s) else { fail("expected Text") }
inspect(s, content="Hello World")
}test {
let count = @signal.signal(5)
let node : @luna.Node[Unit] = @luna.text_dyn(fn() { count.get().to_string() })
guard node is @luna.DynamicText(getter) else { fail("expected DynamicText") }
inspect(getter(), content="5")
count.set(10)
inspect(getter(), content="10")
}test {
let name = @signal.signal("Alice")
let node : @luna.Node[Unit] = @luna.text_of(name)
guard node is @luna.DynamicText(getter) else { fail("expected DynamicText") }
inspect(getter(), content="Alice")
name.set("Bob")
inspect(getter(), content="Bob")
}fn[T] untracked(f : () -> T) -> Ttest {
let count = @signal.signal(0)
let runs : Ref[Int] = { val: 0 }
let _ = @signal.render_effect(fn() {
@signal.untracked(fn() {
let _ = count.get() // Won't create dependency
runs.val = runs.val + 1
})
})
count.set(1)
count.set(2)
// Effect only ran once (initial), not on updates
inspect(runs.val, content="1")
}let theme = use_context(theme_ctx) // Returns "dark" or defaulttest {
let count = @signal.signal(0)
let changes : Array[(Int, Int)] = []
let dispose = @signal.watch(fn() { count.get() }, fn(new_val, old_val) {
changes.push((new_val, old_val))
})
count.set(1)
count.set(2)
count.set(2) // Same value, no callback
count.set(3)
dispose()
inspect(changes, content="[(1, 0), (2, 1), (3, 2)]")
}test {
let count = @signal.signal(5)
let log : Array[String] = []
let dispose = @signal.watch_immediate(fn() { count.get() }, fn(
new_val,
old_val,
) {
match old_val {
Some(old) => log.push(old.to_string() + "->" + new_val.to_string())
None => log.push("init:" + new_val.to_string())
}
})
count.set(10)
dispose()
inspect(
log,
content=(
#|["init:5", "5->10"]
),
)
}fn[E] wc_island(name : String, url : String, styles : String, state : String, children : Array[Node[E]], trigger? : TriggerType) -> Node[E]