vendor

rabbita

README
T
Frame
T
JsValue
- ::elementMount::element
- ::handlesMount::handles
- ::snapshotMount::snapshot
- ::startMount::start
- ::subscribeMount::subscribe
- ::bumpStore::bump
- ::newStore::new
- ::snapshotStore::snapshot
- ::subscribeStore::subscribe
V
component_namespace_sep
V
excluded_tags
V
handler_count
V
handlers
V
handlers_with_init
V
host_contract_version
V
is_library_tag
V
js_null
V
map_event
V
map_tag
V
mount
V
mount_with_init
V
render_html
V
render_node
V
tag_table
V
unmapped_tag_count
V
unmapped_tag_names
V
unsupported_count

#HTML

The html package provides wrapper functions for all HTML elements. Basic usage:

///|
fn view(emit : Emit[Msg], model : Model) -> Html {
  div(id="counter", style=["border: 1px solid black"], [
    h1(id="title", "the count is \{model.count}"),
    button(class="...", on_click=emit(Inc), "+"),
    button(class="...", on_click=emit(Dec), "-"),
  ])
}

Frequently used attributes are exposed as optional arguments. To access any HTML attribute, see Attribute Builder. Most HTML wrappers accept a positional argument whose type is constrained by IsChildren, so you can pass an Array[Html] or a String. See Children for details.

There are also a few special helpers you will use frequently:

text()

To represent text in HTML, use the text function.

///|
let _ = p([text("hello world")])
let _ = p("hello world") // equivalent to above

nothing

It does not represent an actual HTML element. This is useful when handling multiple Option values in your model:

///|
fn bad(path : Path, tag : Tag?) {
  let path = foo(path)
  let tag = match tag {
    None => []
    Some(x) => [view(x)] // Yuck!
  }
  div([path] + tag) // Don't do this
}

///|
fn good(path : Path, tag : Tag?) {
  let path = foo(path)
  let tag = match tag {
    None => nothing
    Some(x) => view(x)
  }
  div([path, tag]) // Use @html.nothing
}

#Children

Almost every HTML element accepts a positional argument whose type is bounded by the IsChildren trait. This means you can pass any type that implements this trait as children to the HTML wrapper.

Currently it accepts the following types:

type	example
Array[Html]	div([html1, html2])
String	div("string here")
Html	div(p([...]))
Map[String,Html]	div({"k1": html1, "k2": html2})

#Keyed Children

When children are passed as Map[String, Html], Rabbita treats them as keyed children. Keys are used to match and reuse nodes across updates, which helps preserve DOM and Cell state when items are inserted, removed, or reordered.

Keys must be unique and stable (use a business ID, not an array index).
Changing a key means the old node is removed and a new one is created.

Example:

///|
let html : Html = ul({
  "todo-1": li("Buy milk"),
  "todo-2": li("Write docs"),
  "todo-3": li("Write code"),
})

#Event Handlers

Rabbita separates event callbacks from UI views to manage side effects and avoid stale state, keeping UI predictable as code grows.

HTML wrappers provide common events as optional arguments like on_click, on_mouseup, on_scroll, and on_submit. Each requires a Cmd binding to a Msg you define. When an event fires, the Msg (and any extra payload) is forwarded to the centralized state update function.

Registering the same event more than once composes the handlers in registration order. When a wrapper receives both an event in attrs and its matching named event argument, the attrs handler runs first and the named handler runs second. Non-event attributes and properties keep their usual last-write-wins behavior.

Example:

///|
#cfg(target="js")
fn update2(msg : Msg2, _ : Model2) -> Model2 {
  match msg {
    StartDraw(mouse) => println("start at \{mouse.offset_pos()}")
    EndDraw(mouse) => println("end at \{mouse.offset_pos()}")
  }
}

///|
fn view2(emit : Emit[Msg2], _ : Model2) -> Html {
  canvas(
    on_mousedown=m => emit(StartDraw(m)),
    on_mouseup=m => emit(EndDraw(m)),
    nothing,
  )
}

#Advanced Usage

#Attribute Builder

The attribute builder is a workaround for cases where the HTML wrapper does not expose a specific attribute or event. It is not the primary API and may be less ergonomic or less type-safe than the dedicated wrapper parameters. Prefer the wrapper options when available, and fall back to the builder only when needed.

Example:

///|
let html1 : Html = div(
  attrs=Attrs::build().class("card").styles(@style.Style::new().gap(12)).data("..."),
  [text("Hello")],
)

#Escape Hatch

The wrapper functions and properties provided here may not cover all possible use cases. If you encounter missing functionality, feel free to file an issue or use the node() function as a workaround. The node() function allows you to manually specify the tag name, attributes, and children for your HTML element, offering flexibility for advanced or uncommon scenarios.

///|
let html2 : Html = node(
  "div",
  Attrs::build().class("card").styles(@style.Style::new().gap(12)).data("..."),
  [p("text1"), p("text2")],
)

#HTML

#Children

#Keyed Children

#Event Handlers

#Advanced Usage

#Attribute Builder

#Escape Hatch

#Keyboard

#Mouse

#Scroll

#IsChildren

#Attrs

#Attrs::abbr

#Attrs::accept

#Attrs::accept_charset

#Attrs::accesskey

#Attrs::action

#Attrs::align

#Attrs::allow

#Attrs::allowfullscreen

#Attrs::alpha

#Attrs::alt

#Attrs::anchor

#Attrs::aria_activedescendant

#Attrs::aria_atomic

#Attrs::aria_autocomplete

#Attrs::aria_braillelabel

#Attrs::aria_brailleroledescription

#Attrs::aria_busy

#Attrs::aria_checked

#Attrs::aria_colcount

#Attrs::aria_colindex

#Attrs::aria_colindextext

#Attrs::aria_colspan

#Attrs::aria_controls

#Attrs::aria_current

#Attrs::aria_describedby

#Attrs::aria_description

#Attrs::aria_details

#Attrs::aria_disabled

#Attrs::aria_dropeffect

#Attrs::aria_errormessage

#Attrs::aria_expanded

#Attrs::aria_flowto

#Attrs::aria_grabbed

#Attrs::aria_haspopup

#Attrs::aria_hidden

#Attrs::aria_invalid

#Attrs::aria_keyshortcuts

#Attrs::aria_label

#Attrs::aria_labelledby

#Attrs::aria_level

#Attrs::aria_live

#Attrs::aria_modal

#Attrs::aria_multiline

#Attrs::aria_multiselectable

#Attrs::aria_orientation

#Attrs::aria_owns

#Attrs::aria_placeholder

#Attrs::aria_posinset

#Attrs::aria_pressed

#Attrs::aria_readonly

#Attrs::aria_relevant

#Attrs::aria_required

#Attrs::aria_roledescription

#Attrs::aria_rowcount

#Attrs::aria_rowindex

#Attrs::aria_rowindextext

#Attrs::aria_rowspan

#Attrs::aria_selected

#Attrs::aria_setsize

#Attrs::aria_sort

#Attrs::aria_valuemax

#Attrs::aria_valuemin

#Attrs::aria_valuenow

#Attrs::aria_valuetext

#Attrs::as_

#Attrs::async_

#Attrs::autocapitalize

#Attrs::autocomplete

Keyboard

Mouse

Scroll

IsChildren

Attrs

Attrs::abbr

Attrs::accept

Attrs::accept_charset

Attrs::accesskey

Attrs::action

Attrs::align

Attrs::allow

Attrs::allowfullscreen

Attrs::alpha

Attrs::alt

Attrs::anchor

Attrs::aria_activedescendant

Attrs::aria_atomic

Attrs::aria_autocomplete

Attrs::aria_braillelabel

Attrs::aria_brailleroledescription

Attrs::aria_busy

Attrs::aria_checked

Attrs::aria_colcount

Attrs::aria_colindex

Attrs::aria_colindextext

Attrs::aria_colspan

Attrs::aria_controls

Attrs::aria_current

Attrs::aria_describedby

Attrs::aria_description

Attrs::aria_details

Attrs::aria_disabled

Attrs::aria_dropeffect

Attrs::aria_errormessage

Attrs::aria_expanded

Attrs::aria_flowto

Attrs::aria_grabbed

Attrs::aria_haspopup

Attrs::aria_hidden

Attrs::aria_invalid

Attrs::aria_keyshortcuts

Attrs::aria_label

Attrs::aria_labelledby

Attrs::aria_level

Attrs::aria_live

Attrs::aria_modal

Attrs::aria_multiline

Attrs::aria_multiselectable

Attrs::aria_orientation

Attrs::aria_owns

Attrs::aria_placeholder

Attrs::aria_posinset

Attrs::aria_pressed

Attrs::aria_readonly

Attrs::aria_relevant

Attrs::aria_required

Attrs::aria_roledescription

Attrs::aria_rowcount

Attrs::aria_rowindex

Attrs::aria_rowindextext

Attrs::aria_rowspan

Attrs::aria_selected

Attrs::aria_setsize

Attrs::aria_sort

Attrs::aria_valuemax

Attrs::aria_valuemin

Attrs::aria_valuenow

Attrs::aria_valuetext

Attrs::as_

Attrs::async_

Attrs::autocapitalize

Attrs::autocomplete

Attrs::autocorrect

Attrs::autofocus

Attrs::autoplay

Attrs::background

Attrs::bgcolor

Attrs::border

Attrs::build