#mizchi/js_browser/dom

#Status

#Installation

{
  "import": [
    "mizchi/js",
    "mizchi/js_browser/dom"
  ]
}

#Usage Examples

#Creating Elements

let doc = @dom.document()
let div = doc.createElement("div")
div.set_attribute("id", "app")
div.set_attribute("class", "container")

let text = doc.createTextNode("Hello, World!")
div.append_child(text.as_element()) |> ignore

#Element Manipulation

// Property access
div.set("innerHTML", "Hello World")
let content = div._get("innerHTML")

// Attributes
div.set_attribute("data-value", "123")
let value = div.getAttribute("data-value") // Some("123")
div.removeAttribute("data-value")

// Class manipulation
div.addClass("active")
div.removeClass("inactive")
div.toggleClass("hidden")
inspect(div.containsClass("active")) // true

// DOM properties
div.setId("main")
div.setClassName("app container")
div.setInnerHTML("<span>Content</span>")

#DOM Traversal

let parent = element.parent_element()
let children = element.children()
let first = element.first_child()
let last = element.last_child()
let next = element.next_sibling()
let prev = element.previous_sibling()

// Element-only traversal (skips text nodes)
let first_elem = element.first_element_child()
let next_elem = element.next_element_sibling()

#Query Selectors

let doc = @dom.document()

// Single element
let el = doc.query_selector("#app")
match el {
  Some(element) => element.set_text_content("Found!")
  None => ()
}

// By ID
let element = doc.get_element_by_id("main")

// Multiple elements
let elements = doc.query_selector_all(".item")
let by_tag = doc.get_elements_by_tag_name("div")
let by_class = doc.get_elements_by_class_name("container")

#Event Handling

fn handle_click(event : @dom.Event) -> Unit {
  event.prevent_default()
  event.stop_propagation()
  let target = event.target()
  target.set_text_content("Clicked!")
}

element.addEventListener("click", handle_click)

// Remove listener
element.removeEventListener("click", handle_click)

#Mouse Events

fn handle_mouse(event : @dom.MouseEvent) -> Unit {
  let x = event.client_x()
  let y = event.client_y()
  let button = event.button()

  if event.ctrl_key() {
    // Handle Ctrl+Click
  }
}

element.addEventListener("click", fn(e) {
  handle_mouse(e.cast())
})

#Keyboard Events

fn handle_keydown(event : @dom.KeyboardEvent) -> Unit {
  let key = event.key()
  let code = event.code()

  if event.ctrl_key() && key == "s" {
    event.prevent_default()
    // Handle Ctrl+S
  }
}

#Style Manipulation

// Inline styles
div.set_display("block")
div.set_color("red")
div.set_width("100px")
div.set_height("50px")
div.set_opacity(0.5)

// CSS properties
div.set_style_property("background-color", "blue")
div.set_style_property("border-radius", "5px")

// Get computed style
let computed = @dom.get_computed_style(div)
let color = computed._get("color")

#Flexbox & Grid

container.set_display("flex")
container.set_flex_direction("row")
container.set_justify_content("center")
container.set_align_items("center")
container.set_gap("10px")

// Grid
grid.set_display("grid")
grid.set_grid_template_columns("1fr 2fr 1fr")
grid.set_grid_template_rows("auto")

#Storage (localStorage/sessionStorage)

let storage = @dom.get_local_storage()

// Set and get
storage.set_item("user", "Alice")
let user = storage.get_item("user") // Some("Alice")

// Remove
storage.remove_item("user")

// Check existence
if storage.has_item("token") {
  // ...
}

// Iterate
let keys = storage.keys()
let values = storage.values()
let entries = storage.entries()

// Clear all
storage.clear()

#Navigator

let nav = @dom.navigator()
let ua = nav.user_agent()
let lang = nav.language()
let online = nav.on_line()
let platform = nav.platform()
let cores = nav.hardware_concurrency()

#Document Operations

let doc = @dom.document()

// Document properties
let title = doc.title()
doc.set_title("New Title")
let url = doc.url()
let domain = doc.domain()

// Body and head
let body = doc.body()
let head = doc.head()

// Create fragment
let fragment = doc.create_document_fragment()

#Geometry

// Client dimensions
let width = element.client_width()
let height = element.client_height()

// Scroll dimensions
let scroll_width = element.scroll_width()
let scroll_height = element.scroll_height()

// Scroll position
let scroll_top = element.scroll_top()
element.set_scroll_top(100.0)

// Bounding rect
let rect = element.get_bounding_client_rect()

#Node Operations

// Clone node
let clone = element.clone_node(true) // deep clone

// Check containment
if parent.contains(child) {
  // parent contains child
}

// Compare nodes
if node1.is_equal_node(node2) {
  // nodes are equal
}

// Text content
element.set_text_content("New text")
let text = element.text_content()

#Testing with JSDOM

// Setup JSDOM
extern "js" fn require(module_name : String) -> @js.Val =
  #| (moduleName) => require(moduleName)

fn setup_jsdom() -> Unit {
  let jsdom = require("global-jsdom")
  jsdom._call("register", []) |> ignore
}

// Run tests
test "basic DOM operations" {
  setup_jsdom()
  let doc = @dom.document()
  let div = doc.create_element("div")
  div.set_attribute("id", "test")
  inspect(div.get_attribute("id"), content="Some(\"test\")")
}

#Generated Inheritance Methods

#Before (Manual Casting)

let div = doc.createElement("div")
div.as_node().appendChild(child.as_node())
div.as_element().setAttribute("class", "container")
div.as_html_element().innerHTML()

#After (Direct Access)

let div = doc.createElement("div")
div.appendChild(child.as_node())
div.setAttribute("class", "container")
div.innerHTML()

#Regenerating Files

pnpm generate:dom
# or
deno run --allow-read --allow-write scripts/generate_dom_inheritance.ts

#Inheritance Hierarchy

EventTarget
└── Node (appendChild, removeChild, textContent, etc.)
    ├── Element (querySelector, setAttribute, etc.)
    │   ├── HTMLElement (innerHTML, innerText, etc.)
    │   │   └── HTMLDivElement, HTMLSpanElement, etc.
    │   └── SVGElement
    │       └── SVGCircleElement, SVGRectElement, etc.
    └── Document

#Type Safety

• Element: DOM elements
• Document: Document object
• Event, MouseEvent, KeyboardEvent, etc.: Event types
• Navigator: Browser navigator
• Storage: Web Storage
• TextNode: Text nodes

match element.parent_element() {
  Some(parent) => // Handle parent
  None => // No parent
}

#API Documentation

• Type signatures
• MDN documentation links
• Usage examples
• Safety notes where applicable

• element.mbt - Element operations
• document.mbt - Document operations
• event.mbt - Event types and handlers
• node.mbt - Node interface
• style.mbt - CSS styling
• storage.mbt - Web Storage
• navigator.mbt - Browser information

#Future Work

• Additional event types and APIs
• Type system enhancements
• Browser-specific testing
• More comprehensive examples

#Related Packages

• mizchi/js - Core JavaScript FFI
• mizchi/js/console - Console logging