:memo: Docs for the docs god.

1 files changed, 662 insertions, 249 deletions

diff --git a/src/lustre/element.gleam b/src/lustre/element.gleam
index d5b23bf..d9692e8 100644
--- a/src/lustre/element.gleam
+++ b/src/lustre/element.gleam
@@ -2,12 +2,13 @@
 
 // IMPORTS ---------------------------------------------------------------------
 
-import lustre/attribute.{ Attribute, attribute }
+import lustre/attribute.{Attribute, attribute}
 
 // TYPES -----------------------------------------------------------------------
 
+/// 
 ///
-pub external type Element(action)
+pub external type Element(msg)
 
 // CONSTRUCTORS ----------------------------------------------------------------
 
@@ -15,10 +16,14 @@ pub external type Element(action)
 /// tag name, a list of attributes (including event handlers), and a list of
 /// child elements.
 ///
-pub external fn node (tag: String, attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action)
-    = "../ffi.mjs" "node"
+pub external fn node(
+  tag: String,
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) =
+  "../ffi.mjs" "node"
 
-/// A stateful element is exactly what it sounds like: some element with local
+/// A stateful element is exactly what it sounds like: an element with local
 /// encapsulated state! The `render` function we must provide is called with the
 /// element's current state as well as a function to set a new state. Whenever
 /// that function is called, the element is re-rendered.
@@ -26,28 +31,154 @@ pub external fn node (tag: String, attributes: List(Attribute(action)), children
 /// You might be wondering where the `stateless` version of this function is. 
 /// Those are just regular Gleam functions that return `Element`s!
 ///
-pub external fn stateful (init: state, render: fn (state, fn (state) -> Nil) -> Element(action)) -> Element(action)
-    = "../ffi.mjs" "stateful"
+/// We can implement a counter whose current value is stored locally like so:
+///
+/// ```gleam
+/// import gleam/int
+/// import lustre/attribute.{Attribute}
+/// import lustre/element.{Element}
+/// import lustre/event
+/// 
+/// pub fn counter() -> Element(msg) {
+///   use state, set_state = lustre.stateful(0)
+/// 
+///   let decr = event.on("click", fn(_, _) { set_state(state - 1) })
+///   let incr = event.on("click", fn(_, _) { set_state(state + 1) })
+/// 
+///   element.div([], [
+///     element.button([decr], [element.text("-")]),
+///     element.text(int.to_string(state)),
+///     element.button([incr], [element.text("+")]),
+///   ])
+/// }
+/// ```
+///
+/// We can use this `counter` element anywhere in our app, we don't have to worry
+/// about passing state around or managing it in a parent component.
+///
+/// When attaching event handlers to stateful elements, you'll typically have to
+/// use the generic `event.on` function rather than the more specific helpders.
+/// The helpers are designed to emit messages for your application, but stateful
+/// elements don't necessarily produce messages: calling `set_state` is a side
+/// effect.
+///
+pub external fn stateful(
+  init: state,
+  render: fn(state, fn(state) -> Nil) -> Element(msg),
+) -> Element(msg) =
+  "../ffi.mjs" "stateful"
 
 /// A fragment doesn't appear in the DOM, but allows us to treat a list of elements
 /// as if it were a single one. 
 ///
-pub external fn fragment (children: List(Element(action))) -> Element(action)
-    = "../ffi.mjs" "fragment"
+pub external fn fragment(children: List(Element(msg))) -> Element(msg) =
+  "../ffi.mjs" "fragment"
 
 /// Render a Gleam string as an HTML text node.
 ///
-pub external fn text (content: String) -> Element(action)
-    = "../ffi.mjs" "text"
-
+pub external fn text(content: String) -> Element(msg) =
+  "../ffi.mjs" "text"
 
 // MANIPULATIONS ---------------------------------------------------------------
 
-/// Transforms the actions produced by some element.
-///
-pub external fn map (element: Element(a), f: fn (a) -> b) -> Element(b)
-    = "../ffi.mjs" "map"
-
+/// Transforms the actions produced by an element. Our Lustre applications have
+/// a single top-level `Msg` type and `update` function, and ultimately all
+/// elements we create must produce actions of that type (or not produce any at
+/// all).
+///
+/// To save us having a monolothic `Msg` type with many constructors, we can crete
+/// child types and then use `map` to wrap them up in the parent type. A simple
+/// counter with its own message type my look like this:
+///
+/// ```gleam
+/// import gleam/int
+/// import lustre/element.{Element}
+/// import lustre/event
+/// 
+/// type Msg {
+///   Decr
+///   Incr
+/// }
+/// 
+/// pub fn update(count: Int, msg: CounterMsg) -> Int {
+///   case msg {
+///     Decr -> count - 1
+///     Incr -> count + 1
+///   }
+/// }
+/// 
+/// pub fn render(count: Int) -> Element(CounterMsg) {
+///   element.div([], [
+///     element.button([event.on_click(Decr)], [element.text("-")]),
+///     element.text(int.to_string(count)),
+///     element.button([event.on_click(Incr)], [element.text("+")]),
+///   ])
+/// }
+/// ```
+///
+/// To integrate this into a large Lustre application, we need to do some plumbing.
+/// Here's how we might have a parent application that renders multiple counters:
+///
+/// ```gleam
+/// import counter.{Msg as CounterMsg}
+/// import gleam/list
+/// import gleam/map.{Map}
+/// import gleam/result
+/// import lustre
+/// import lustre/element.{Element}
+/// import lustre/event
+/// 
+/// pub fn main() {
+///   let app = lustre.simple(init(), update, render)
+///   assert Ok(_) = lustre.start(app, "#root")
+/// }
+/// 
+/// type Model = Map(Int, Int)
+/// 
+/// fn init() -> Model {
+///   map.from_list([
+///     #(0, 0),
+///     #(1, 0),
+///     #(2, 0),
+///   ])
+/// }
+/// 
+/// type Msg {
+///   UpdateCounter(Int, CounterMsg)
+/// }
+/// 
+/// pub fn update(model: Model, msg: Msg) -> Model {
+///   case msg {
+///     UpdateCounter(id, counter_msg) -> {
+///       map.get(model, id)
+///       // Call the counter's update function with the `counter_msg`. This will
+///       // either be `counter.Decr` or `counter.Incr`.
+///       |> result.map(counter.update(_, counter_msg))
+///       |> result.map(map.insert(model, id, _))
+///       |> result.unwrap(model)
+///     }
+///   }
+/// }
+/// 
+/// pub fn render(model: Model) -> Element(Msg) {
+///   let counters = {
+///     use els, id, count <- map.fold(model, [])
+///     let counter = counter.render(counr)
+/// 
+///     // Right now `counter` produces messages of type `counter.Msg`. Here we're
+///     // calling `element.map` to wrap that message in our main app's `Msg` type.
+///     [element.map(counter, UpdateCounter(id, _)), ...els]
+///   }
+/// 
+///   element.div([], list.reverse(counters))
+/// }
+/// ```
+///
+/// If this feels like a lt of work... sometimes it is! Take a look at the docs
+/// for [`stateful`](#stateful) elements to see how all this can be encapsulated.
+///
+pub external fn map(element: Element(a), f: fn(a) -> b) -> Element(b) =
+  "../ffi.mjs" "map"
 
 // CONSTRUCTING NODES ----------------------------------------------------------
 // This list and grouping of nodes has been taken from the MDN reference at:
@@ -56,591 +187,873 @@ pub external fn map (element: Element(a), f: fn (a) -> b) -> Element(b)
 // MAIN ROOT -------------------------------------------------------------------
 
 ///
-pub fn html (attributes: List(Attribute(action)), head: Element(action), body: Element(action)) -> Element(action) {
-    node("html", attributes, [ head, body ])
+pub fn html(
+  attrs: List(Attribute(msg)),
+  head: Element(msg),
+  body: Element(msg),
+) -> Element(msg) {
+  node("html", attrs, [head, body])
 }
 
-
 // DOCUMENT METADATA -----------------------------------------------------------
 
 ///
-pub fn base (attributes: List(Attribute(action))) -> Element(action) {
-    node("base", attributes, [])
+pub fn base(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("base", attrs, [])
 }
 
 ///
-pub fn head (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("head", attributes, children)
+pub fn head(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("head", attrs, children)
 }
 
 ///
-pub fn meta (attributes: List(Attribute(action))) -> Element(action) {
-    node("meta", attributes, [])
+pub fn meta(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("meta", attrs, [])
 }
 
 ///
-pub fn style (attributes: List(Attribute(action)), css: String) -> Element(action) {
-    node("style", attributes, [ text(css) ])
+pub fn style(attrs: List(Attribute(msg)), css: String) -> Element(msg) {
+  node("style", attrs, [text(css)])
 }
 
 ///
-pub fn title (attributes: List(Attribute(action)), name: String) -> Element(action) {
-    node("title", attributes, [ text(name) ])
+pub fn title(attrs: List(Attribute(msg)), name: String) -> Element(msg) {
+  node("title", attrs, [text(name)])
 }
 
 // SECTIONING ROOT -------------------------------------------------------------
 
 ///
-pub fn body (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("body", attributes, children)
+pub fn body(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("body", attrs, children)
 }
 
-
 // CONTENT SECTIONING ----------------------------------------------------------
 
 ///
-pub fn address (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("address", attributes, children)
+pub fn address(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("address", attrs, children)
 }
 
 ///
-pub fn article (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("article", attributes, children)
+pub fn article(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("article", attrs, children)
 }
 
 ///
-pub fn aside (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("aside", attributes, children)
+pub fn aside(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("aside", attrs, children)
 }
 
 ///
-pub fn footer (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("footer", attributes, children)
+pub fn footer(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("footer", attrs, children)
 }
 
 ///
-pub fn header (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("header", attributes, children)
+pub fn header(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("header", attrs, children)
 }
 
 ///
-pub fn h1 (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("h1", attributes, children)
+pub fn h1(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("h1", attrs, children)
 }
 
 ///
-pub fn h2 (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("h2", attributes, children)
+pub fn h2(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("h2", attrs, children)
 }
 
 ///
-pub fn h3 (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("h3", attributes, children)
+pub fn h3(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("h3", attrs, children)
 }
 
 ///
-pub fn h4 (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("h4", attributes, children)
+pub fn h4(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("h4", attrs, children)
 }
 
 ///
-pub fn h5 (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("h5", attributes, children)
+pub fn h5(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("h5", attrs, children)
 }
 
 ///
-pub fn h6 (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("h6", attributes, children)
+pub fn h6(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("h6", attrs, children)
 }
 
 ///
-pub fn main (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("main", attributes, children)
+pub fn main(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("main", attrs, children)
 }
 
 ///
-pub fn nav (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("nav", attributes, children)
+pub fn nav(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("nav", attrs, children)
 }
 
 ///
-pub fn section (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("section", attributes, children)
+pub fn section(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("section", attrs, children)
 }
 
-
 // TEXT CONTENT ----------------------------------------------------------------
 
 ///
-pub fn blockquote (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("blockquote", attributes, children)
+pub fn blockquote(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("blockquote", attrs, children)
 }
 
 ///
-pub fn dd (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("dd", attributes, children)
+pub fn dd(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("dd", attrs, children)
 }
 
 ///
-pub fn div (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("div", attributes, children)
+pub fn div(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("div", attrs, children)
 }
 
 ///
-pub fn dl (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("dl", attributes, children)
+pub fn dl(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("dl", attrs, children)
 }
 
 ///
-pub fn dt (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("dt", attributes, children)
+pub fn dt(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("dt", attrs, children)
 }
 
 ///
-pub fn figcaption (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("figcaption", attributes, children)
+pub fn figcaption(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("figcaption", attrs, children)
 }
 
 ///
-pub fn figure (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("figure", attributes, children)
+pub fn figure(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("figure", attrs, children)
 }
 
 ///
-pub fn hr (attributes: List(Attribute(action))) -> Element(action) {
-    node("hr", attributes, [])
+pub fn hr(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("hr", attrs, [])
 }
 
 ///
-pub fn li (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("li", attributes, children)
+pub fn li(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("li", attrs, children)
 }
 
 ///
-pub fn menu (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("menu", attributes, children)
+pub fn menu(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("menu", attrs, children)
 }
 
 ///
-pub fn ol (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("ol", attributes, children)
+pub fn ol(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("ol", attrs, children)
 }
 
 ///
-pub fn p (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("p", attributes, children)
+pub fn p(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("p", attrs, children)
 }
 
 ///
-pub fn pre (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("pre", attributes, children)
+pub fn pre(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("pre", attrs, children)
 }
 
 ///
-pub fn ul (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("ul", attributes, children)
+pub fn ul(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("ul", attrs, children)
 }
 
-
 // INLINE TEXT SEMANTICS -------------------------------------------------------
 
 ///
-pub fn a (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("a", attributes, children)
+pub fn a(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("a", attrs, children)
 }
 
 ///
-pub fn abbr (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("abbr", attributes, children)
+pub fn abbr(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("abbr", attrs, children)
 }
 
 ///
-pub fn b (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("b", attributes, children)
+pub fn b(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("b", attrs, children)
 }
 
 ///
-pub fn bdi (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("bdi", attributes, children)
+pub fn bdi(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("bdi", attrs, children)
 }
 
 ///
-pub fn bdo (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("bdo", attributes, children)
+pub fn bdo(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("bdo", attrs, children)
 }
 
 ///
-pub fn br (attributes: List(Attribute(action))) -> Element(action) {
-    node("br", attributes, [])
+pub fn br(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("br", attrs, [])
 }
 
 ///
-pub fn cite (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("cite", attributes, children)
+pub fn cite(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("cite", attrs, children)
 }
 
 ///
-pub fn code (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("code", attributes, children)
+pub fn code(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("code", attrs, children)
 }
 
 ///
-pub fn dfn (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("dfn", attributes, children)
+pub fn dfn(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("dfn", attrs, children)
 }
 
 ///
-pub fn em (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("em", attributes, children)
+pub fn em(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("em", attrs, children)
 }
 
 ///
-pub fn i (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("i", attributes, children)
+pub fn i(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("i", attrs, children)
 }
 
 ///
-pub fn kbd (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("kbd", attributes, children)
+pub fn kbd(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("kbd", attrs, children)
 }
 
 ///
-pub fn mark (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("mark", attributes, children)
+pub fn mark(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("mark", attrs, children)
 }
 
 ///
-pub fn rp (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("rp", attributes, children)
+pub fn rp(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("rp", attrs, children)
 }
 
 ///
-pub fn rt (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("rt", attributes, children)
+pub fn rt(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("rt", attrs, children)
 }
 
 ///
-pub fn ruby (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("ruby", attributes, children)
+pub fn ruby(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("ruby", attrs, children)
 }
 
 ///
-pub fn s (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("s", attributes, children)
+pub fn s(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("s", attrs, children)
 }
 
 ///
-pub fn samp (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("samp", attributes, children)
+pub fn samp(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("samp", attrs, children)
 }
 
 ///
-pub fn small (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("small", attributes, children)
+pub fn small(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("small", attrs, children)
 }
 
 ///
-pub fn span (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("span", attributes, children)
+pub fn span(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("span", attrs, children)
 }
 
 ///
-pub fn strong (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("strong", attributes, children)
+pub fn strong(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("strong", attrs, children)
 }
 
 ///
-pub fn sub (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("sub", attributes, children)
+pub fn sub(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("sub", attrs, children)
 }
 
 ///
-pub fn sup (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("sup", attributes, children)
+pub fn sup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("sup", attrs, children)
 }
 
 ///
-pub fn time (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("time", attributes, children)
+pub fn time(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("time", attrs, children)
 }
 
 ///
-pub fn u (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("u", attributes, children)
+pub fn u(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("u", attrs, children)
 }
 
 ///
-pub fn var_ (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("var", attributes, children)
+pub fn var_(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("var", attrs, children)
 }
 
 ///
-pub fn wbr (attributes: List(Attribute(action))) -> Element(action) {
-    node("wbr", attributes, [])
+pub fn wbr(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("wbr", attrs, [])
 }
 
-
 // IMAGE AND MULTIMEDIA --------------------------------------------------------
 
 ///
-pub fn area (attributes: List(Attribute(action))) -> Element(action) {
-    node("area", attributes, [])
+pub fn area(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("area", attrs, [])
 }
 
 ///
-pub fn audio (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("audio", attributes, children)
+pub fn audio(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("audio", attrs, children)
 }
 
 ///
-pub fn img (attributes: List(Attribute(action))) -> Element(action) {
-    node("img", attributes, [])
+pub fn img(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("img", attrs, [])
 }
 
 ///
-pub fn map_ (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("map", attributes, children)
+pub fn map_(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("map", attrs, children)
 }
 
 ///
-pub fn track (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("track", attributes, children)
+pub fn track(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("track", attrs, children)
 }
 
 ///
-pub fn video (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("video", attributes, children)
+pub fn video(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("video", attrs, children)
 }
 
-
 // EMBEDDED CONTENT ------------------------------------------------------------
 
 ///
-pub fn embed (attributes: List(Attribute(action))) -> Element(action) {
-    node("embed", attributes, [])
+pub fn embed(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("embed", attrs, [])
 }
 
 ///
-pub fn iframe (attributes: List(Attribute(action))) -> Element(action) {
-    node("iframe", attributes, [])
+pub fn iframe(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("iframe", attrs, [])
 }
 
 ///
-pub fn object (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("object", attributes, children)
+pub fn object(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("object", attrs, children)
 }
 
 ///
-pub fn param (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("param", attributes, children)
+pub fn param(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("param", attrs, children)
 }
 
 ///
-pub fn picture (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("picture", attributes, children)
+pub fn picture(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("picture", attrs, children)
 }
 
 ///
-pub fn portal (attributes: List(Attribute(action))) -> Element(action) {
-    node("portal", attributes, [])
+pub fn portal(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("portal", attrs, [])
 }
 
 ///
-pub fn source (attributes: List(Attribute(action))) -> Element(action) {
-    node("source", attributes, [])
+pub fn source(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("source", attrs, [])
 }
 
-
 // SVG AND MATHML --------------------------------------------------------------
 
 ///
-pub fn svg (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("svg", [attribute("xmlns", "http://www.w3.org/2000/svg"), ..attributes], children)
+pub fn svg(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node(
+    "svg",
+    [attribute("xmlns", "http://www.w3.org/2000/svg"), ..attrs],
+    children,
+  )
 }
 
 ///
-pub fn mathml (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("mathml", [attribute("xmlns", "http://www.w3.org/1998/Math/MathML"), ..attributes], children)
+pub fn mathml(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node(
+    "mathml",
+    [attribute("xmlns", "http://www.w3.org/1998/Math/MathML"), ..attrs],
+    children,
+  )
 }
 
 // SCRIPTING -------------------------------------------------------------------
 
 ///
-pub fn canvas (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("canvas", attributes, children)
+pub fn canvas(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("canvas", attrs, children)
 }
 
 ///
-pub fn noscript (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("noscript", attributes, children)
+pub fn noscript(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("noscript", attrs, children)
 }
 
-
 // DEMARCATING EDITS -----------------------------------------------------------
 
 ///
-pub fn del (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("del", attributes, children)
+pub fn del(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("del", attrs, children)
 }
 
 ///
-pub fn ins (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("ins", attributes, children)
+pub fn ins(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("ins", attrs, children)
 }
 
-
 // TABLE CONTENT ---------------------------------------------------------------
 
 ///
-pub fn caption (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("caption", attributes, children)
+pub fn caption(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("caption", attrs, children)
 }
 
 ///
-pub fn col (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("col", attributes, children)
+pub fn col(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("col", attrs, children)
 }
 
 ///
-pub fn colgroup (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("colgroup", attributes, children)
+pub fn colgroup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("colgroup", attrs, children)
 }
 
 ///
-pub fn table (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("table", attributes, children)
+pub fn table(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("table", attrs, children)
 }
 
 ///
-pub fn tbody (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("tbody", attributes, children)
+pub fn tbody(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("tbody", attrs, children)
 }
 
 ///
-pub fn td (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("td", attributes, children)
+pub fn td(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("td", attrs, children)
 }
 
 ///
-pub fn tfoot (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("tfoot", attributes, children)
+pub fn tfoot(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("tfoot", attrs, children)
 }
 
 ///
-pub fn th (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("th", attributes, children)
+pub fn th(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("th", attrs, children)
 }
 
 ///
-pub fn thead (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("thead", attributes, children)
+pub fn thead(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("thead", attrs, children)
 }
 
 ///
-pub fn tr (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("tr", attributes, children)
+pub fn tr(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("tr", attrs, children)
 }
 
-
 // FORMS -----------------------------------------------------------------------
 
 ///
-pub fn button (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("button", attributes, children)
+pub fn button(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("button", attrs, children)
 }
 
 ///
-pub fn datalist (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("datalist", attributes, children)
+pub fn datalist(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("datalist", attrs, children)
 }
 
 ///
-pub fn fieldset (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("fieldset", attributes, children)
+pub fn fieldset(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("fieldset", attrs, children)
 }
 
 ///
-pub fn form (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("form", attributes, children)
+pub fn form(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("form", attrs, children)
 }
 
 ///
-pub fn input (attributes: List(Attribute(action))) -> Element(action) {
-    node("input", attributes, [])
+pub fn input(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("input", attrs, [])
 }
 
 ///
-pub fn label (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("label", attributes, children)
+pub fn label(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("label", attrs, children)
 }
 
 ///
-pub fn legend (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("legend", attributes, children)
+pub fn legend(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("legend", attrs, children)
 }
 
 ///
-pub fn meter (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("meter", attributes, children)
+pub fn meter(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("meter", attrs, children)
 }
 
 ///
-pub fn optgroup (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("optgroup", attributes, children)
+pub fn optgroup(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("optgroup", attrs, children)
 }
 
 ///
-pub fn option (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("option", attributes, children)
+pub fn option(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("option", attrs, children)
 }
 
 ///
-pub fn output (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("output", attributes, children)
+pub fn output(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("output", attrs, children)
 }
 
 ///
-pub fn progress (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("progress", attributes, children)
+pub fn progress(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("progress", attrs, children)
 }
 
 ///
-pub fn select (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("select", attributes, children)
+pub fn select(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("select", attrs, children)
 }
 
 ///
-pub fn textarea (attributes: List(Attribute(action))) -> Element(action) {
-    node("textarea", attributes, [])
+pub fn textarea(attrs: List(Attribute(msg))) -> Element(msg) {
+  node("textarea", attrs, [])
 }
 
-
 // INTERACTIVE ELEMENTS --------------------------------------------------------
 
 ///
-pub fn details (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("details", attributes, children)
+pub fn details(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("details", attrs, children)
 }
 
 ///
-pub fn dialog (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("dialog", attributes, children)
+pub fn dialog(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("dialog", attrs, children)
 }
 
 ///
-pub fn summary (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("summary", attributes, children)
+pub fn summary(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("summary", attrs, children)
 }
 
-
 // WEB COMPONENTS --------------------------------------------------------------
 
 ///
-pub fn slot (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("slot", attributes, children)
+pub fn slot(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("slot", attrs, children)
 }
 
 ///
-pub fn template (attributes: List(Attribute(action)), children: List(Element(action))) -> Element(action) {
-    node("template", attributes, children)
+pub fn template(
+  attrs: List(Attribute(msg)),
+  children: List(Element(msg)),
+) -> Element(msg) {
+  node("template", attrs, children)
 }