Brandon Lucas
634f665b1b
- stdlib/html.lux: Type-safe HTML construction - stdlib/browser.lux: Browser utilities - examples/web/: Counter app with DOM manipulation - examples/counter.lux: Simple counter example Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
299 lines
9.0 KiB
Plaintext
299 lines
9.0 KiB
Plaintext
// Html Module - DSL for building HTML/DOM structures
|
|
//
|
|
// This module provides a type-safe way to describe HTML elements that can be
|
|
// compiled to efficient JavaScript for browser rendering.
|
|
//
|
|
// Example usage:
|
|
// let myView = div([class("container")], [
|
|
// h1([id("title")], [text("Hello!")]),
|
|
// button([onClick(Increment)], [text("+")])
|
|
// ])
|
|
|
|
// Html type represents a DOM structure
|
|
// Parameterized by Msg - the type of messages emitted by event handlers
|
|
type Html<M> =
|
|
| Element(String, List<Attr<M>>, List<Html<M>>)
|
|
| Text(String)
|
|
| Empty
|
|
|
|
// Attributes that can be applied to elements
|
|
type Attr<M> =
|
|
| Class(String)
|
|
| Id(String)
|
|
| Style(String, String)
|
|
| Href(String)
|
|
| Src(String)
|
|
| Alt(String)
|
|
| Type(String)
|
|
| Value(String)
|
|
| Placeholder(String)
|
|
| Disabled(Bool)
|
|
| Checked(Bool)
|
|
| Name(String)
|
|
| OnClick(M)
|
|
| OnInput(fn(String): M)
|
|
| OnSubmit(M)
|
|
| OnChange(fn(String): M)
|
|
| OnMouseEnter(M)
|
|
| OnMouseLeave(M)
|
|
| OnFocus(M)
|
|
| OnBlur(M)
|
|
| OnKeyDown(fn(String): M)
|
|
| OnKeyUp(fn(String): M)
|
|
| DataAttr(String, String)
|
|
|
|
// ============================================================================
|
|
// Element builders - Container elements
|
|
// ============================================================================
|
|
|
|
fn div<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("div", attrs, children)
|
|
|
|
fn span<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("span", attrs, children)
|
|
|
|
fn section<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("section", attrs, children)
|
|
|
|
fn article<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("article", attrs, children)
|
|
|
|
fn header<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("header", attrs, children)
|
|
|
|
fn footer<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("footer", attrs, children)
|
|
|
|
fn nav<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("nav", attrs, children)
|
|
|
|
fn main<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("main", attrs, children)
|
|
|
|
fn aside<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("aside", attrs, children)
|
|
|
|
// ============================================================================
|
|
// Element builders - Text elements
|
|
// ============================================================================
|
|
|
|
fn h1<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("h1", attrs, children)
|
|
|
|
fn h2<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("h2", attrs, children)
|
|
|
|
fn h3<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("h3", attrs, children)
|
|
|
|
fn h4<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("h4", attrs, children)
|
|
|
|
fn h5<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("h5", attrs, children)
|
|
|
|
fn h6<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("h6", attrs, children)
|
|
|
|
fn p<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("p", attrs, children)
|
|
|
|
fn pre<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("pre", attrs, children)
|
|
|
|
fn code<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("code", attrs, children)
|
|
|
|
fn blockquote<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("blockquote", attrs, children)
|
|
|
|
// ============================================================================
|
|
// Element builders - Inline elements
|
|
// ============================================================================
|
|
|
|
fn a<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("a", attrs, children)
|
|
|
|
fn strong<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("strong", attrs, children)
|
|
|
|
fn em<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("em", attrs, children)
|
|
|
|
fn small<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("small", attrs, children)
|
|
|
|
fn br<M>(): Html<M> =
|
|
Element("br", [], [])
|
|
|
|
fn hr<M>(): Html<M> =
|
|
Element("hr", [], [])
|
|
|
|
// ============================================================================
|
|
// Element builders - Lists
|
|
// ============================================================================
|
|
|
|
fn ul<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("ul", attrs, children)
|
|
|
|
fn ol<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("ol", attrs, children)
|
|
|
|
fn li<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("li", attrs, children)
|
|
|
|
// ============================================================================
|
|
// Element builders - Forms
|
|
// ============================================================================
|
|
|
|
fn form<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("form", attrs, children)
|
|
|
|
fn input<M>(attrs: List<Attr<M>>): Html<M> =
|
|
Element("input", attrs, [])
|
|
|
|
fn textarea<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("textarea", attrs, children)
|
|
|
|
fn button<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("button", attrs, children)
|
|
|
|
fn label<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("label", attrs, children)
|
|
|
|
fn select<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("select", attrs, children)
|
|
|
|
fn option<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("option", attrs, children)
|
|
|
|
// ============================================================================
|
|
// Element builders - Media
|
|
// ============================================================================
|
|
|
|
fn img<M>(attrs: List<Attr<M>>): Html<M> =
|
|
Element("img", attrs, [])
|
|
|
|
fn video<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("video", attrs, children)
|
|
|
|
fn audio<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("audio", attrs, children)
|
|
|
|
// ============================================================================
|
|
// Element builders - Tables
|
|
// ============================================================================
|
|
|
|
fn table<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("table", attrs, children)
|
|
|
|
fn thead<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("thead", attrs, children)
|
|
|
|
fn tbody<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("tbody", attrs, children)
|
|
|
|
fn tr<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("tr", attrs, children)
|
|
|
|
fn th<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("th", attrs, children)
|
|
|
|
fn td<M>(attrs: List<Attr<M>>, children: List<Html<M>>): Html<M> =
|
|
Element("td", attrs, children)
|
|
|
|
// ============================================================================
|
|
// Text and empty nodes
|
|
// ============================================================================
|
|
|
|
fn text<M>(content: String): Html<M> =
|
|
Text(content)
|
|
|
|
fn empty<M>(): Html<M> =
|
|
Empty
|
|
|
|
// ============================================================================
|
|
// Attribute helpers
|
|
// ============================================================================
|
|
|
|
fn class<M>(name: String): Attr<M> =
|
|
Class(name)
|
|
|
|
fn id<M>(name: String): Attr<M> =
|
|
Id(name)
|
|
|
|
fn style<M>(property: String, value: String): Attr<M> =
|
|
Style(property, value)
|
|
|
|
fn href<M>(url: String): Attr<M> =
|
|
Href(url)
|
|
|
|
fn src<M>(url: String): Attr<M> =
|
|
Src(url)
|
|
|
|
fn alt<M>(description: String): Attr<M> =
|
|
Alt(description)
|
|
|
|
fn inputType<M>(t: String): Attr<M> =
|
|
Type(t)
|
|
|
|
fn value<M>(v: String): Attr<M> =
|
|
Value(v)
|
|
|
|
fn placeholder<M>(p: String): Attr<M> =
|
|
Placeholder(p)
|
|
|
|
fn disabled<M>(d: Bool): Attr<M> =
|
|
Disabled(d)
|
|
|
|
fn checked<M>(c: Bool): Attr<M> =
|
|
Checked(c)
|
|
|
|
fn name<M>(n: String): Attr<M> =
|
|
Name(n)
|
|
|
|
fn onClick<M>(msg: M): Attr<M> =
|
|
OnClick(msg)
|
|
|
|
fn onInput<M>(h: fn(String): M): Attr<M> =
|
|
OnInput(h)
|
|
|
|
fn onSubmit<M>(msg: M): Attr<M> =
|
|
OnSubmit(msg)
|
|
|
|
fn onChange<M>(h: fn(String): M): Attr<M> =
|
|
OnChange(h)
|
|
|
|
fn onMouseEnter<M>(msg: M): Attr<M> =
|
|
OnMouseEnter(msg)
|
|
|
|
fn onMouseLeave<M>(msg: M): Attr<M> =
|
|
OnMouseLeave(msg)
|
|
|
|
fn onFocus<M>(msg: M): Attr<M> =
|
|
OnFocus(msg)
|
|
|
|
fn onBlur<M>(msg: M): Attr<M> =
|
|
OnBlur(msg)
|
|
|
|
fn onKeyDown<M>(h: fn(String): M): Attr<M> =
|
|
OnKeyDown(h)
|
|
|
|
fn onKeyUp<M>(h: fn(String): M): Attr<M> =
|
|
OnKeyUp(h)
|
|
|
|
fn data<M>(name: String, value: String): Attr<M> =
|
|
DataAttr(name, value)
|
|
|
|
// ============================================================================
|
|
// Utility functions
|
|
// ============================================================================
|
|
|
|
// Conditionally include an element
|
|
fn when<M>(condition: Bool, element: Html<M>): Html<M> =
|
|
if condition then element else Empty
|
|
|
|
// Conditionally apply attributes
|
|
fn attrIf<M>(condition: Bool, attr: Attr<M>): List<Attr<M>> =
|
|
if condition then [attr] else []
|