🥮 mooncakes.io
README

mizchi/luna/dom does not have a README file

#
AnimationEventHandler

source
type AnimationEventHandler = (
AnimationEvent) -> Unit

AnimationEventHandler[T] - Handler for CSS animation events T is the target element type The event provides animationName, elapsedTime, pseudoElement

#
ChangeEventHandler

source
type ChangeEventHandler = (
ChangeEvent) -> Unit

ChangeEventHandler[T] - Handler for change events on form elements T is the target element type (e.g., HTMLInputElement, HTMLSelectElement)

#
ChangeHandler

source
type ChangeHandler = (
ChangeEvent) -> Unit

Convenience alias: ChangeHandler = ChangeEventHandler[@js_dom.Element]

#
ClipboardEventHandler

source
type ClipboardEventHandler = (
ClipboardEvent) -> Unit

ClipboardEventHandler[T] - Handler for clipboard events (copy, cut, paste) T is the target element type The event provides clipboardData

#
DragEventHandler

source
type DragEventHandler = (
DragEvent) -> Unit

DragEventHandler[T] - Handler for drag and drop events T is the target element type The event provides dataTransfer for drag data

#
DragHandler

source
type DragHandler = (
DragEvent) -> Unit

Convenience alias: DragHandler = DragEventHandler[@js_dom.Element]

#
ElementRef

source
type ElementRef = (
Element) -> Unit

Convenience alias: ElementRef - RefCallback for generic Element Use when you don't need specific element type

#
FocusEventHandler

source
type FocusEventHandler = (
FocusEvent) -> Unit

FocusEventHandler[T] - Handler for focus/blur events T is the target element type The event provides relatedTarget for focus transitions

#
FocusHandler

source
type FocusHandler = (
FocusEvent) -> Unit

Convenience alias: FocusHandler = FocusEventHandler[@js_dom.Element]

#
FormEventHandler

source
type FormEventHandler = (
FormEvent) -> Unit

FormEventHandler[T] - Handler for form submission events T is typically HTMLFormElement Call preventDefault() to prevent default form submission

#
FormHandler

source
type FormHandler = (
FormEvent) -> Unit

Convenience alias: FormHandler = FormEventHandler[@js_dom.Element]

#
GenericEventHandler

source
type GenericEventHandler = (
Event) -> Unit

GenericEventHandler[T] - Handler for any DOM event T is the target element type Use when you need to handle an event type not covered above

#
Handler

source
type Handler = (
Any) -> Unit

Type alias for event handler

#
InputEventHandler

source
type InputEventHandler = (
InputEvent) -> Unit

InputEventHandler[T] - Handler for input events on form elements T is the target element type (e.g., HTMLInputElement, HTMLTextAreaElement) The event provides inputType, data, isComposing, etc.

#
InputHandler

source
type InputHandler = (
InputEvent) -> Unit

Convenience alias: InputHandler = InputEventHandler[@js_dom.Element]

#
KeyboardEventHandler

source
type KeyboardEventHandler = (
KeyboardEvent) -> Unit

KeyboardEventHandler[T] - Handler for keyboard events (keydown, keyup, keypress) T is the target element type (e.g., HTMLInputElement) The event provides key, code, ctrlKey, shiftKey, etc.

#
KeyboardHandler

source
type KeyboardHandler = (
KeyboardEvent) -> Unit

Convenience alias: KeyboardHandler = KeyboardEventHandler[@js_dom.Element]

#
MouseEventHandler

source
type MouseEventHandler = (
MouseEvent) -> Unit

MouseEventHandler[T] - Handler for mouse events (click, dblclick, mouseenter, etc.) T is the target element type (e.g., HTMLButtonElement, HTMLDivElement) The event provides clientX, clientY, button, ctrlKey, etc.

#
MouseHandler

source
type MouseHandler = (
MouseEvent) -> Unit

Convenience alias: MouseHandler = MouseEventHandler[@js_dom.Element]

#
PointerEventHandler

source
type PointerEventHandler = (
PointerEvent) -> Unit

PointerEventHandler[T] - Handler for pointer events (unified mouse/touch/pen) T is the target element type The event provides pointerId, pointerType, pressure, etc.

#
PointerHandler

source
type PointerHandler = (
PointerEvent) -> Unit

Convenience alias: PointerHandler = PointerEventHandler[@js_dom.Element]

#
RefCallback

source
type RefCallback[T] = (T) -> Unit

RefCallback[T] - Callback for accessing the DOM element after creation T is the target element type (e.g., HTMLButtonElement, HTMLInputElement) Called when the element is created, before it connects to the DOM

Usage: button(ref=fn(el) { myButtonRef = el }, children=[text("Click me")])

Note: The ref callback receives the raw @js_dom element, not DomElement wrapper

#
ScrollEventHandler

source
type ScrollEventHandler = (
ScrollEvent) -> Unit

ScrollEventHandler[T] - Handler for scroll events T is the target element type

#
TouchEventHandler

source
type TouchEventHandler = (
TouchEvent) -> Unit

TouchEventHandler[T] - Handler for touch events on touch devices T is the target element type The event provides touches, targetTouches, changedTouches arrays

#
TouchHandler

source
type TouchHandler = (
TouchEvent) -> Unit

Convenience alias: TouchHandler = TouchEventHandler[@js_dom.Element]

#
TransitionEventHandler

source
type TransitionEventHandler = (
TransitionEvent) -> Unit

TransitionEventHandler[T] - Handler for CSS transition events T is the target element type The event provides propertyName, elapsedTime, pseudoElement

#
WheelEventHandler

source
type WheelEventHandler = (
WheelEvent) -> Unit

WheelEventHandler[T] - Handler for wheel/scroll events T is the target element type The event provides deltaX, deltaY, deltaZ, deltaMode

#
WheelHandler

source
type WheelHandler = (
WheelEvent) -> Unit

Convenience alias: WheelHandler = WheelEventHandler[@js_dom.Element]

#
ToDomNode

source
pub trait ToDomNode {
  fn to_dom_node(Self) -> DomNode
}

ToDomNode trait - types that can be converted to DomNode
impl ToDomNode for String
impl ToDomNode for Node
impl ToDomNode for Text

#
ToNode

source
pub trait ToNode {
  fn to_node(Self) -> Node
}

ToNode trait - types that can be converted to Node
impl ToNode for String
impl ToNode for Element
impl ToNode for Node
impl ToNode for Text

#
AnyValue

source
#external
pub type AnyValue

Internal any value type

#
Attr

source
pub(all) enum Attr {
  AttrString(String)
  AttrNumber(Double)
  AttrInt(Int)
  AttrBool(Bool)
}

Attribute value type for attrs array Usage: Attr::AttrString("value"), Attr::AttrInt(42), etc.

#
Attr::to_attr_value

source
fn Attr::to_attr_value(self : Attr) -> AttrValue

Convert Attr to AttrValue

#
AttrValue

source
pub(all) enum AttrValue {
  Static(String)
  Dynamic(() -> String)
  Handler((
Any) -> Unit)
}

Reactive attribute value type

#
DomElement

source
pub struct DomElement {
  // private fields
}

DomElement wraps a DOM element (internal @js_dom.Element)

#
DomElement::from_dom

source

Create DomElement from @js_dom.Element

#
DomElement::to_dom

source

Get the inner @js_dom.Element

#
DomElement::to_node

source
fn DomElement::to_node(self : DomElement) -> DomNode

Convert DomElement to DomNode

#
DomNode

source

DomNode represents any DOM node for client-side rendering

Variants:
  • El(DomElement): Element managed by Luna (reconciled, hydrated)
  • Txt(@js_dom.Text): Text node managed by Luna (reconciled)
  • Raw(@js_dom.Node): External node included in reconciliation Use for external DOM that may change (e.g., third-party widgets)
  • Static(@js_dom.Node): Pre-rendered node skipped during reconciliation/hydration Use for content that never changes (e.g., SSR output, static SVG)

#
DomNode::to_dom

source

Get the inner @js_dom.Node

#
Element

source
pub struct Element {
  // private fields
}

Element wraps a DOM element (internal @js_dom.Element)
impl ToNode for Element

#
Element::from_dom

source

Create Element from @js_dom.Element

#
Element::to_dom

source

Get the inner @js_dom.Element

#
Element::to_node

source
fn Element::to_node(self : Element) -> Node

Convert Element to Node

#
HandlerMap

source
pub type HandlerMap

Event handlers collection - opaque JS object Internally stores { click?: fn, input?: fn, ... } (lowercase DOM event names) Note: Using opaque JS object instead of MoonBit struct to avoid code bloat

#
HandlerMap::blur

source

#
HandlerMap::change

source

#
HandlerMap::click

source

#
HandlerMap::compositionend

source
fn HandlerMap::compositionend(self : HandlerMap, handler : (
Any) -> Unit) -> HandlerMap

Composition end event (for IME input)

#
HandlerMap::compositionstart

source
fn HandlerMap::compositionstart(self : HandlerMap, handler : (
Any) -> Unit) -> HandlerMap

Composition start event (for IME input)

#
HandlerMap::contextmenu

source
fn HandlerMap::contextmenu(self : HandlerMap, handler : (
MouseEvent) -> Unit) -> HandlerMap

Context menu event (right-click)

#
HandlerMap::dblclick

source

#
HandlerMap::drag

source

Drag event (during drag)

#
HandlerMap::dragend

source

Drag end event

#
HandlerMap::dragenter

source
fn HandlerMap::dragenter(self : HandlerMap, handler : (
DragEvent) -> Unit) -> HandlerMap

Drag enter event (enters drop zone)

#
HandlerMap::dragleave

source
fn HandlerMap::dragleave(self : HandlerMap, handler : (
DragEvent) -> Unit) -> HandlerMap

Drag leave event (leaves drop zone)

#
HandlerMap::dragover

source
fn HandlerMap::dragover(self : HandlerMap, handler : (
DragEvent) -> Unit) -> HandlerMap

Drag over event (over drop zone)

#
HandlerMap::dragstart

source
fn HandlerMap::dragstart(self : HandlerMap, handler : (
DragEvent) -> Unit) -> HandlerMap

Drag start event

#
HandlerMap::drop

source

Drop event

#
HandlerMap::focus

source

#
HandlerMap::input

source

#
HandlerMap::keydown

source

#
HandlerMap::keypress

source

#
HandlerMap::keyup

source

#
HandlerMap::mousedown

source
fn HandlerMap::mousedown(self : HandlerMap, handler : (
MouseEvent) -> Unit) -> HandlerMap

#
HandlerMap::mouseenter

source
fn HandlerMap::mouseenter(self : HandlerMap, handler : (
MouseEvent) -> Unit) -> HandlerMap

#
HandlerMap::mouseleave

source
fn HandlerMap::mouseleave(self : HandlerMap, handler : (
MouseEvent) -> Unit) -> HandlerMap

#
HandlerMap::mousemove

source
fn HandlerMap::mousemove(self : HandlerMap, handler : (
MouseEvent) -> Unit) -> HandlerMap

Mouse move event (for drag, hover tracking)

#
HandlerMap::mouseout

source

#
HandlerMap::mouseover

source
fn HandlerMap::mouseover(self : HandlerMap, handler : (
MouseEvent) -> Unit) -> HandlerMap

#
HandlerMap::mouseup

source

#
HandlerMap::pointercancel

source
fn HandlerMap::pointercancel(self : HandlerMap, handler : (
PointerEvent) -> Unit) -> HandlerMap

Pointer cancel event

#
HandlerMap::pointerdown

source

Pointer down event (unified mouse/touch/pen)

#
HandlerMap::pointerenter

source
fn HandlerMap::pointerenter(self : HandlerMap, handler : (
PointerEvent) -> Unit) -> HandlerMap

Pointer enter event

#
HandlerMap::pointerleave

source
fn HandlerMap::pointerleave(self : HandlerMap, handler : (
PointerEvent) -> Unit) -> HandlerMap

Pointer leave event

#
HandlerMap::pointermove

source

Pointer move event

#
HandlerMap::pointerup

source

Pointer up event

#
HandlerMap::resize

source
fn HandlerMap::resize(self : HandlerMap, handler : (
Any) -> Unit) -> HandlerMap

Resize event (for window/element resize)

#
HandlerMap::scroll

source
fn HandlerMap::scroll(self : HandlerMap, handler : (
Any) -> Unit) -> HandlerMap

Scroll event

#
HandlerMap::submit

source

#
HandlerMap::touchcancel

source
fn HandlerMap::touchcancel(self : HandlerMap, handler : (
TouchEvent) -> Unit) -> HandlerMap

Touch cancel event

#
HandlerMap::touchend

source

Touch end event

#
HandlerMap::touchmove

source
fn HandlerMap::touchmove(self : HandlerMap, handler : (
TouchEvent) -> Unit) -> HandlerMap

Touch move event

#
HandlerMap::touchstart

source
fn HandlerMap::touchstart(self : HandlerMap, handler : (
TouchEvent) -> Unit) -> HandlerMap

Touch start event

#
HandlerMap::wheel

source

Wheel event (for scroll/zoom)

#
ItemEntry

source
pub(all) struct ItemEntry[T] {
  item : T
  dom : 
Node
  last : 
Node
  nodes : Array[
Node]
  dispose : () -> Unit
}

Item-DOM mapping entry Stores the association between an item reference and its DOM nodes Also stores a dispose function for cleanup when item is removed

#
ItemEntry::new

source
fn[T] ItemEntry::new(item : T, dom : 
Node) -> ItemEntry[T]

Create a new ItemEntry

#
ItemEntry::new_with_dispose

source
fn[T] ItemEntry::new_with_dispose(item : T, dom : 
Node, dispose : () -> Unit) -> ItemEntry[T]

Create a new ItemEntry with dispose function

#
ItemEntry::new_with_nodes_and_dispose

source
fn[T] ItemEntry::new_with_nodes_and_dispose(item : T, nodes : Array[
Node], dispose : () -> Unit) -> ItemEntry[T]

Create ItemEntry from multiple DOM nodes

#
Node

source

Node represents any DOM node
impl ToNode for Node

#
Node::to_dom

source

Get the inner @js_dom.Node
fn a(href? : String, target? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an anchor element

#
article

source
fn article(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an article element

#
aside

source
fn aside(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an aside element

#
attr_dynamic

source
fn attr_dynamic(getter : () -> String) -> AttrValue

Create a dynamic attribute value

#
attr_dynamic_style

source
fn attr_dynamic_style(getter : () -> String) -> AttrValue

Create a dynamic style attribute

#
attr_handler

source
fn attr_handler(handler : (
Any) -> Unit) -> AttrValue

Create an event handler attribute

#
attr_static

source
fn attr_static(value : String) -> AttrValue

Create a static attribute value

#
attr_style

source
fn attr_style(style : String) -> AttrValue

Create a static style attribute (string form, e.g. "color: red; margin: 10px")
fn br(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create br element

#
button

source
fn button(disabled? : Bool, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, dyn_disabled? : () -> Bool, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a button element

#
children

source
fn[T : ToNode] children(items : Array[T]) -> Array[Node]

Collect children with ToNode conversion

#
clear

source
fn clear(container : DomElement) -> Unit

Clear a container

#
clear_jsdom

source
fn clear_jsdom(container : 
Element) -> Unit

Clear a jsdom container (for tests)

#
code

source
fn code(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create code element

#
create_element

source
fn create_element(tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an element with reactive attributes (returns Node for easy composition)

#
create_element_ns

source
fn create_element_ns(ns : String, tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an element with namespace (for SVG, MathML, etc.) Use this for SVG elements since they require the SVG namespace.

Example:
// Create an SVG rectangle
let rect = create_element_ns(
  svg_ns,
  "rect",
  [
    ("x", Static("10")),
    ("y", Static("10")),
    ("width", Static("100")),
    ("height", Static("50")),
    ("fill", Static("blue")),
  ],
  [],
)

#
debounced

source
fn[T] debounced(sig : 
Signal[T], delay_ms : Int) -> 
Signal[T]

Debounce signal updates using setTimeout

#
div

source
fn div(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a div element

#
dom_children

source
fn[T : ToDomNode] dom_children(items : Array[T]) -> Array[DomNode]

Collect children with ToDomNode conversion

#
dom_node

source
fn[T : ToDomNode] dom_node(value : T) -> DomNode

Convert any ToDomNode value to DomNode

Supported types:
  • @js_dom.Node -> Raw node (included in reconciliation)
  • @js_dom.Element -> Element node (wrapped as El)
  • @js_dom.Text -> Text node
  • String -> Text node (creates new text node)
  • DomNode -> Identity (returns as-is)

Use this function to integrate external DOM nodes (e.g., SVG created with createElementNS) into Luna's DOM tree.

Example - integrating SVG created with createElementNS:
// Create SVG with namespace
let svg = create_element_ns(svg_ns, "svg", [
  ("width", Static("200")),
  ("height", Static("200")),
], [
  create_element_ns(svg_ns, "circle", [
    ("cx", Static("100")),
    ("cy", Static("100")),
    ("r", Static("50")),
    ("fill", Static("blue")),
  ], [])
])

// Use in a div
div(children=[svg])

Example - integrating raw @js_dom.Node:
// Get external node from JS
let external_node : @js_dom.Node = ...
// Wrap and use in Luna tree
div(children=[dom_node(external_node)])
fn em(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create em element

#
events

source
fn events() -> HandlerMap

Create an empty HandlerMap, then chain event handlers Example: events().click(fn(_) { ... }).input(fn(e) { ... })

Each handler receives the appropriate typed event:
  • click, dblclick, mouseenter, etc. -> MouseHandler (@js_dom.MouseEvent)
  • keydown, keyup, keypress -> KeyboardHandler (@js_dom.KeyboardEvent)
  • input -> InputHandler (@js_dom.InputEvent)
  • change -> ChangeHandler (@js_dom.ChangeEvent)
  • submit -> FormHandler (@js_dom.FormEvent)
  • focus, blur -> FocusHandler (@js_dom.FocusEvent)

#
footer_

source
fn footer_(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a footer element

#
for_each

source
fn[T] for_each(items : () -> Array[T], render_item : (T, Int) -> DomNode) -> DomNode

List rendering with reference-based DOM reuse (Solid-style)

Items are tracked by reference equality (JavaScript ===). When items are reordered, their DOM nodes are moved rather than recreated. Each item gets its own owner scope for proper cleanup when removed.

#
form

source
fn form(action? : String, http_method? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a form element

#
fragment

source
fn fragment(children : Array[DomNode]) -> DomNode

JSX runtime: Fragment (returns children as a DocumentFragment)
fn h1(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create h1 element
fn h2(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create h2 element
fn h3(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create h3 element
fn h4(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create h4 element
fn h5(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create h5 element
fn h6(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create h6 element

#
header_

source
fn header_(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a header element
fn hr(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create hr element

#
img

source
fn img(src? : String, alt? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create img element

#
index_each

source
fn[T] index_each(items : () -> Array[T], render_item : (() -> T, Int) -> DomNode) -> DomNode

Index-based list rendering - optimized for lists where items are identified by index Unlike for_each which tracks by reference, index_each tracks by index position. When items change at an index, only that element is re-rendered.

Best used when:
  • Items are primitives (strings, numbers)
  • Item identity is by position, not by value
  • Lists are frequently mutated by index

Example:
index_each(
  fn() { items.get() },
  fn(item_getter, index) {
    div(children=[
      // item_getter() returns current item at this index
      text_node(fn() { item_getter().to_string() })
    ])
  }
)

#
input

source
fn input(type_? : String, name? : String, value? : String, placeholder? : String, disabled? : Bool, readonly_? : Bool, required? : Bool, checked? : Bool, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, dyn_value? : () -> String, dyn_disabled? : () -> Bool, dyn_checked? : () -> Bool, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an input element

#
is_move_before_supported

source
fn is_move_before_supported() -> Bool

Check if moveBefore is supported in the current environment

#
jsx

source
fn jsx(tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

JSX runtime: jsx function (maps directly to create_element) Usage in TSX: children

#
jsxs

source
fn jsxs(tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

JSX runtime: jsxs function (same as jsx, for static children)

#
label

source
fn label(for_? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a label element
fn li(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create li element

#
loading

source
fn loading(when~ : () -> Bool, fallback~ : () -> DomNode, render_fn : () -> DomNode) -> DomNode

Loading component - shows fallback during initial load, then maintains stale content during refetch (inspired by SolidJS v2 ).

State machine: NeverLoaded + pending=true → show fallback NeverLoaded + pending=false → show content, transition to Loaded Loaded + pending=true → keep showing content (stale) Loaded + pending=false → show content (fresh)

#
main_

source
fn main_(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a main element

#
mathml_ns

source
let mathml_ns : String

MathML namespace constant

#
mount

source
fn mount(container : DomElement, n : DomNode) -> Unit

Mount a node to a container

#
mount_to

source
fn mount_to(container : 
Element, n : DomNode) -> Unit

Mount to a jsdom container (for tests)

#
move_before

source

Move a node before a reference node, preserving state (animations, focus, etc.) Falls back to insertBefore if moveBefore is not supported.

Parameters:
  • parent: The parent node to move the child within
  • node: The node to move
  • ref_node: The reference node (node will be inserted before this), or None for end

Returns the moved node

#
move_before_strict

source

Force use of moveBefore (throws if not supported)
fn nav(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a nav element

#
node

source
fn[T : ToNode] node(value : T) -> Node

Helper to convert any ToNode to Node
fn ol(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create ol element
fn p(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a p element

#
portal

source
fn portal(target~ : 
Element, children~ : Array[DomNode]) -> DomNode

Portal - renders content into a different DOM container Similar to Solid.js

Use cases:
  • Modals that need to render at body level to avoid z-index issues
  • Dropdowns/tooltips that need to escape overflow: hidden
  • Full-screen overlays

Example:
portal(
  target=@js_dom.document().body_(),
  children=[modal_content()]
)

Note: For SSR, portals should be handled separately or use a placeholder. The portal content won't appear in the SSR output at the original location.

#
portal_to

source
fn portal_to(selector : String, children : Array[DomNode]) -> DomNode

Portal to a selector - find element by CSS selector and portal to it

#
portal_to_body

source
fn portal_to_body(children : Array[DomNode]) -> DomNode

Portal to body - convenience function for rendering to document.body

#
pre

source
fn pre(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create pre element

#
reconcile_for_each

source
fn[T] reconcile_for_each(entries_ref : 
Ref[Array[ItemEntry[T]]], placeholder : 
Node, new_items : Array[T], render_item : (T, Int) -> 
Node) -> Unit

Simplified reconciliation for render.mbt's for_each Uses a DocumentFragment as container with a placeholder comment

#
reconcile_for_each_with_dispose

source
fn[T] reconcile_for_each_with_dispose(entries_ref : 
Ref[Array[ItemEntry[T]]], placeholder : 
Node, new_items : Array[T], render_item : (T, Int) -> (
Node, () -> Unit)) -> Unit

Reconciliation with dispose function support render_item returns both the DOM node and a dispose function for cleanup

#
reconcile_items

source
fn[T] reconcile_items(parent : 
Node, old_entries : Array[ItemEntry[T]], new_items : Array[T], render_item : (T, Int) -> 
Node, end_marker : 
Node) -> Array[ItemEntry[T]]

Reconcile items with DOM nodes using reference equality

Algorithm:
  1. Build a lookup from old entries (item -> entry) using reference equality
  2. Process new items in order:
    • If same reference exists in old entries → reuse DOM, use moveBefore
    • If not found → create new DOM with render_item
  3. Remove DOM nodes for items no longer present
  4. Return new ItemEntry array

Parameters:
  • parent: The parent DOM node containing the items
  • old_entries: Previous item-DOM mappings
  • new_items: New items array
  • render_item: Function to render a new item to DOM
  • end_marker: Comment node marking the end of the For region

Returns: New ItemEntry array reflecting current items

#
reconcile_items_with_dispose

source
fn[T] reconcile_items_with_dispose(parent : 
Node, old_entries : Array[ItemEntry[T]], new_items : Array[T], render_item : (T, Int) -> (
Node, () -> Unit), end_marker : 
Node) -> Array[ItemEntry[T]]

Reconcile items with dispose support Similar to reconcile_items but render_item returns (Node, dispose)

#
ref_equal

source
fn[T] ref_equal(a : T, b : T) -> Bool

Check if two values are the same reference (type-safe wrapper)

#
render

source
fn render(container : DomElement, n : DomNode) -> Unit

Render to a container (clear and mount)

#
render_to

source
fn render_to(container : 
Element, n : DomNode) -> Unit

Render to a jsdom container (for tests)

#
section

source
fn section(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a section element

#
show

source
fn show(when : () -> Bool, render_fn : () -> DomNode) -> DomNode

Conditional rendering - shows content when condition is true Creates a child owner for proper cleanup when content is hidden

#
span

source
fn span(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a span element

#
static_node

source
fn static_node(node : 
Node) -> DomNode

Create a Static DomNode from a @js_dom.Node Static nodes are skipped during reconciliation and hydration

#
strong

source
fn strong(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create strong element

#
svg

source
fn svg(width? : String, height? : String, viewBox? : String, xmlns? : String, fill? : String, stroke? : String, role? : String, aria_label? : String, aria_labelledby? : String, aria_describedby? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG element

#
svg_animate

source
fn svg_animate(attributeName? : String, from? : String, to? : String, dur? : String, repeatCount? : String, fill_anim? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG animate element

#
svg_animate_transform

source
fn svg_animate_transform(attributeName? : String, type_? : String, from? : String, to? : String, dur? : String, repeatCount? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG animateTransform element

#
svg_circle

source
fn svg_circle(cx? : String, cy? : String, r? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG circle element

#
svg_clip_path

source
fn svg_clip_path(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG clipPath element

#
svg_defs

source
fn svg_defs(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG defs element

#
svg_desc

source
fn svg_desc(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG desc element for accessibility

#
svg_ellipse

source
fn svg_ellipse(cx? : String, cy? : String, rx? : String, ry? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG ellipse element

#
svg_filter

source
fn svg_filter(x? : String, y? : String, width? : String, height? : String, filterUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG filter element

#
svg_foreign_object

source
fn svg_foreign_object(x? : String, y? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG foreignObject element for embedding HTML

#
svg_g

source
fn svg_g(transform? : String, fill? : String, stroke? : String, opacity? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG group element

#
svg_image

source
fn svg_image(href? : String, x? : String, y? : String, width? : String, height? : String, preserveAspectRatio? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG image element

#
svg_line

source
fn svg_line(x1? : String, y1? : String, x2? : String, y2? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG line element

#
svg_linear_gradient

source
fn svg_linear_gradient(x1? : String, y1? : String, x2? : String, y2? : String, gradientUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG linearGradient element

#
svg_mask

source
fn svg_mask(x? : String, y? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG mask element

#
svg_ns

source
let svg_ns : String

SVG namespace constant

#
svg_path

source
fn svg_path(d? : String, fill? : String, stroke? : String, stroke_width? : String, stroke_linecap? : String, stroke_linejoin? : String, fill_rule? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG path element

#
svg_pattern

source
fn svg_pattern(x? : String, y? : String, width? : String, height? : String, patternUnits? : String, patternContentUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG pattern element

#
svg_polygon

source
fn svg_polygon(points? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG polygon element

#
svg_polyline

source
fn svg_polyline(points? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG polyline element

#
svg_radial_gradient

source
fn svg_radial_gradient(cx? : String, cy? : String, r? : String, fx? : String, fy? : String, gradientUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG radialGradient element

#
svg_rect

source
fn svg_rect(x? : String, y? : String, width? : String, height? : String, rx? : String, ry? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG rect element

#
svg_stop

source
fn svg_stop(offset? : String, stop_color? : String, stop_opacity? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG stop element for gradients

#
svg_symbol

source
fn svg_symbol(viewBox? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG symbol element

#
svg_text

source
fn svg_text(x? : String, y? : String, dx? : String, dy? : String, text_anchor? : String, dominant_baseline? : String, fill? : String, font_size? : String, font_family? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG text element

#
svg_title

source
fn svg_title(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG title element for accessibility

#
svg_tspan

source
fn svg_tspan(x? : String, y? : String, dx? : String, dy? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create an SVG tspan element

#
svg_use

source
fn svg_use(href? : String, x? : String, y? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

Create an SVG use element

#
text

source
fn text(content : String) -> DomNode

Create a static text node

#
text_dyn

source
fn text_dyn(content : () -> String) -> DomNode

Create a reactive text node from a getter function

#
text_from_signal

source
fn[T : Show] text_from_signal(sig : 
Signal[T]) -> DomNode

Create a reactive text node from a signal

#
text_node

source
fn text_node(content : () -> String) -> DomNode

Create a reactive text node that updates when the content changes

#
text_of

source
fn[T : Show] text_of(sig : 
Signal[T]) -> DomNode

Create a reactive text node from a signal (alias for text_sig)

#
text_sig

source
fn[T : Show] text_sig(sig : 
Signal[T]) -> DomNode

Create a reactive text node from a signal

#
textarea

source
fn textarea(name? : String, placeholder? : String, disabled? : Bool, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create a textarea element
fn ul(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
Element) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

Create ul element

#
use_style

source
fn use_style(css : String, root : 
Element) -> Unit

Inject CSS into the ShadowRoot containing the element, or document.head

  • Uses getRootNode() to find the ShadowRoot that contains the element
  • If element is inside a ShadowRoot, injects into that ShadowRoot
  • Otherwise, injects into document.head
  • Uses CSS hash as ID to prevent duplicate injection

Usage: use_style(css, element) // element can be any element inside a ShadowRoot

Source Files

Powered by MoonBit

Site sourceReport issuePackagesBuild queueSkillsStatistics

© 2026 mooncakes.io