feat: add stdlib and browser examples
- 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>
This commit is contained in:
298
stdlib/html.lux
Normal file
298
stdlib/html.lux
Normal file
@@ -0,0 +1,298 @@
|
||||
// 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 []
|
||||
Reference in New Issue
Block a user