README
U
Cmd
U
Dispatch
U
Html
- ::mountApp::mount
- ::with_initApp::with_init
- ::with_routeApp::with_route
- ::viewCell::view
V
attempt
V
batch
V
cell
V
cell_with_dispatch
V
delay
V
effect
V
new
V
none
V
perform
V
render_to_string
V
simple_cell
V
simple_cell_with_dispatch
V
static_cell

#DOM API

This package exposes low-level DOM bindings for the JavaScript backend. The API is intentionally thin and incomplete: it mirrors browser APIs, keeps nullability explicit, and avoids convenience layers. Most users should prefer the @html package and only drop to @dom for imperative interop.

Warning: This package is JS-backend only and not guaranteed to stay stable. Using it may reduce cross-platform compatibility.

#Quick examples

#Query and set attributes

///|
#cfg(target="js")
test {
  let doc = @dom.document()
  if doc.get_element_by_id("hero").to_option() is Some(el) {
    el.set_attribute("data-ready", "true")
  }
}

#Add an event listener

///|
#cfg(target="js")
test {
  if @dom.document().get_element_by_id("btn").to_option() is Some(el) {
    el.add_event_listener("click", event => {
      guard event.to_mouse_event() is Some(mouse) else { return }
      let _x = mouse.get_client_x()
      let _y = mouse.get_client_y()
    })
  }
}

#Canvas context

///|
test {
  let doc = @dom.document()
  if doc.get_element_by_id("canvas").to_option() is Some(el) &&
    el.to_html_canvas_element() is Some(canvas) &&
    canvas.get_context("2d").to0() {
    ctx.fill_rect(0, 0, 100, 60)
  }
}

#Nullability and optional parameters

Values that can be null use @js.Nullable[T]. Convert them with to_option() and pattern match on Some/None.
Optional JS parameters use @js.Optional[T] with default @js.Optional::undefined().

#Naming conventions and file structure

Each DOM type and its methods live in a corresponding file.
Types use CamelCase; methods use snake_case.
DOM properties are exposed as get_*/set_* methods.
Overloads are disambiguated with suffixes based on parameter shapes.
Union types use @js.UnionN[A, B, ...].
Conversions
- Upcasts return the target type directly, use as_<type>.
- Downcasts return T? and must be checked, use to_<type>.

#Type relationships (partial)

Event <- AnimationEvent
      <- BlobEvent
      <- BeforeUnloadEvent
      <- ClipboardEvent
      <- CloseEvent
      <- CompositionEvent
      <- CustomEvent
      <- UIEvent <- MouseEvent <- DragEvent
                 <- FocusEvent
                 <- InputEvent
                 <- KeyboardEvent
                 <- WheelEvent

EventTarget <- Window
            <- Node <- Document
                    <- DocumentFragment
                    <- Element <- HTMLElement <- HTMLCanvasElement
                                              <- HTMLInputElement
                                              <- HTMLDialogElement
                                              <- HTMLImageElement
                                              <- HTMLMediaElement <- HTMLVideoElement
                               <- SVGElement <- SVGGraphicsElement
                                             <- SVGImageElement

#Contribution

Contributions are welcome.

If you would like to contribute a patch, please follow these guidelines:

Keep APIs low-level and explicit about nullability.
Follow the naming conventions above.
Add an MDN link near new extern bindings.
Prefer small, focused PRs.

You can also contribute by reporting issues and bugs.

#DOM API

#Quick examples

#Query and set attributes

#Add an event listener

#Canvas context

#Nullability and optional parameters

#Naming conventions and file structure

#Type relationships (partial)

#Contribution

#ImageUnion

#Listener

#PredefinedColorSpace

#IsElement

#IsEvent

#IsEventTarget

#IsHTMLMediaElement

#IsHtmlElement

#IsMouseEvent

#IsNode

#IsSVGElement

#IsSVGGraphicsElement

#IsUIEvent

#AnimationEvent

#AnimationEvent::get_animation_name

#AnimationEvent::get_elapsed_time

#AnimationEvent::get_pseudo_element

#AudioTrackList

#BeforeUnloadEvent

#Blob

#BlobEvent

#BlobEvent::get_data

#BlobEvent::get_timecode

#BlobEvent::new

#CSSRule

#CSSStyleDeclaration

#CSSStyleDeclaration::get_css_float

#CSSStyleDeclaration::get_css_text

#CSSStyleDeclaration::get_length

#CSSStyleDeclaration::get_parent_rule

#CSSStyleDeclaration::get_property_priority

#CSSStyleDeclaration::get_property_value

#CSSStyleDeclaration::item

#CSSStyleDeclaration::op_get

#CSSStyleDeclaration::op_set

#CSSStyleDeclaration::remove_property

#CSSStyleDeclaration::set_css_float

#CSSStyleDeclaration::set_css_text

#CSSStyleDeclaration::set_property

#CSSStyleDeclaration::set_property_with_priority

#CanvasGradient

#CanvasGradient::add_color_stop

#CanvasLineCap

#CanvasLineJoin

#CanvasPattern

#CanvasPattern::set_transform

#CanvasRenderingContext2D

#CanvasRenderingContext2D::arc

#CanvasRenderingContext2D::arc_to

#CanvasRenderingContext2D::begin_path

#CanvasRenderingContext2D::bezier_curve_to

#CanvasRenderingContext2D::clear_rect

#CanvasRenderingContext2D::clip

#CanvasRenderingContext2D::clip_with_path

#CanvasRenderingContext2D::close_path

#CanvasRenderingContext2D::create_image_data

#CanvasRenderingContext2D::create_image_data_with_data

#CanvasRenderingContext2D::create_linear_gradient

#CanvasRenderingContext2D::create_pattern

#CanvasRenderingContext2D::create_radial_gradient

#CanvasRenderingContext2D::draw_image

#CanvasRenderingContext2D::draw_image_with_size

#CanvasRenderingContext2D::draw_image_with_src_and_dst_size

#CanvasRenderingContext2D::ellipse

#CanvasRenderingContext2D::fill

#CanvasRenderingContext2D::fill_path

#CanvasRenderingContext2D::fill_rect

#CanvasRenderingContext2D::fill_text

#CanvasRenderingContext2D::get_fill_style

#CanvasRenderingContext2D::get_font

#CanvasRenderingContext2D::get_image_data

ImageUnion

Listener

PredefinedColorSpace

IsElement

IsEvent

IsEventTarget

IsHTMLMediaElement

IsHtmlElement

IsMouseEvent

IsNode

IsSVGElement

IsSVGGraphicsElement

IsUIEvent

AnimationEvent

AnimationEvent::get_animation_name

AnimationEvent::get_elapsed_time

AnimationEvent::get_pseudo_element

AudioTrackList

BeforeUnloadEvent

Blob

BlobEvent

BlobEvent::get_data

BlobEvent::get_timecode

BlobEvent::new

CSSRule

CSSStyleDeclaration

CSSStyleDeclaration::get_css_float

CSSStyleDeclaration::get_css_text

CSSStyleDeclaration::get_length

CSSStyleDeclaration::get_parent_rule

CSSStyleDeclaration::get_property_priority

CSSStyleDeclaration::get_property_value

CSSStyleDeclaration::item

CSSStyleDeclaration::op_get

CSSStyleDeclaration::op_set

CSSStyleDeclaration::remove_property

CSSStyleDeclaration::set_css_float

CSSStyleDeclaration::set_css_text

CSSStyleDeclaration::set_property

CSSStyleDeclaration::set_property_with_priority

CanvasGradient

CanvasGradient::add_color_stop

CanvasLineCap

CanvasLineJoin

CanvasPattern

CanvasPattern::set_transform

CanvasRenderingContext2D

CanvasRenderingContext2D::arc

CanvasRenderingContext2D::arc_to

CanvasRenderingContext2D::begin_path

CanvasRenderingContext2D::bezier_curve_to

CanvasRenderingContext2D::clear_rect

CanvasRenderingContext2D::clip

CanvasRenderingContext2D::clip_with_path

CanvasRenderingContext2D::close_path

CanvasRenderingContext2D::create_image_data

CanvasRenderingContext2D::create_image_data_with_data

CanvasRenderingContext2D::create_linear_gradient

CanvasRenderingContext2D::create_pattern

CanvasRenderingContext2D::create_radial_gradient

CanvasRenderingContext2D::draw_image

CanvasRenderingContext2D::draw_image_with_size

CanvasRenderingContext2D::draw_image_with_src_and_dst_size

CanvasRenderingContext2D::ellipse

CanvasRenderingContext2D::fill

CanvasRenderingContext2D::fill_path

CanvasRenderingContext2D::fill_rect

CanvasRenderingContext2D::fill_text

CanvasRenderingContext2D::get_fill_style

CanvasRenderingContext2D::get_font

CanvasRenderingContext2D::get_image_data

CanvasRenderingContext2D::get_image_smoothing_quality

CanvasRenderingContext2D::get_line_cap

CanvasRenderingContext2D::get_line_join

CanvasRenderingContext2D::get_line_with

CanvasRenderingContext2D::get_stroke_style

CanvasRenderingContext2D::image_smoothing_enabled

CanvasRenderingContext2D::is_context_lost

CanvasRenderingContext2D::is_point_in_path

CanvasRenderingContext2D::is_point_in_path_with_path