:recycle: Update examples for new html API.

3 files changed, 31 insertions, 38 deletions

diff --git a/test/counter.gleam b/test/counter.gleam
index d24500b..126aecc 100644
--- a/test/counter.gleam
+++ b/test/counter.gleam
@@ -2,7 +2,8 @@
 
 import gleam/int
 import lustre
-import lustre/element.{Element, button, div, p, text}
+import lustre/element.{Element, t}
+import lustre/html.{button, div, p}
 import lustre/event
 
 // MAIN ------------------------------------------------------------------------
@@ -12,11 +13,7 @@ pub fn main() {
   // start with if you're just getting started with lustre or you know you don't
   // need the runtime to manage any side effects.
   let app = lustre.simple(init, update, render)
-  let assert Ok(dispatch) = lustre.start(app, "body")
-
-  dispatch(Incr)
-  dispatch(Incr)
-  dispatch(Incr)
+  let assert Ok(_) = lustre.start(app, "body")
 }
 
 // MODEL -----------------------------------------------------------------------
@@ -50,10 +47,10 @@ pub fn render(model: Model) -> Element(Msg) {
   div(
     [],
     [
-      button([event.on_click(Incr)], [text("+")]),
-      button([event.on_click(Decr)], [text("-")]),
-      button([event.on_click(Reset)], [text("Reset")]),
-      p([], [text(int.to_string(model))]),
+      button([event.on_click(Incr)], [t("+")]),
+      button([event.on_click(Decr)], [t("-")]),
+      button([event.on_click(Reset)], [t("Reset")]),
+      p([], [t(int.to_string(model))]),
     ],
   )
 }
diff --git a/test/input.gleam b/test/input.gleam
index 61ce562..b2e85a9 100644
--- a/test/input.gleam
+++ b/test/input.gleam
@@ -4,8 +4,9 @@ import gleam/dynamic
 import gleam/string
 import lustre
 import lustre/attribute.{attribute}
-import lustre/element.{Element}
+import lustre/element.{Element, t}
 import lustre/event
+import lustre/html.{div, input, label, pre}
 
 // MAIN ------------------------------------------------------------------------
 
@@ -56,24 +57,21 @@ fn update(model: Model, msg: Msg) -> Model {
 // RENDER ----------------------------------------------------------------------
 
 fn render(model: Model) -> Element(Msg) {
-  element.div(
+  div(
     [attribute.class("container")],
     [
       card([
         email_input(model.email),
         password_input(model.password),
         remember_checkbox(model.remember_me),
-        element.pre(
-          [attribute.class("debug")],
-          [element.text(string.inspect(model))],
-        ),
+        pre([attribute.class("debug")], [t(string.inspect(model))]),
       ]),
     ],
   )
 }
 
 fn card(content: List(Element(a))) -> Element(a) {
-  element.div([attribute.class("card")], [element.div([], content)])
+  div([attribute.class("card")], [div([], content)])
 }
 
 fn email_input(value: String) -> Element(Msg) {
@@ -89,13 +87,13 @@ fn render_input(
   type_: String,
   id: String,
   value: String,
-  label: String,
+  text: String,
 ) -> Element(Msg) {
-  element.div(
+  div(
     [attribute.class("input")],
     [
-      element.label([attribute.for(id)], [element.text(label)]),
-      element.input([
+      label([attribute.for(id)], [t(text)]),
+      input([
         attribute.id(id),
         attribute.name(id),
         attribute.type_(type_),
@@ -108,10 +106,10 @@ fn render_input(
 }
 
 fn remember_checkbox(checked: Bool) -> Element(Msg) {
-  element.div(
+  div(
     [attribute.class("flex items-center")],
     [
-      element.input([
+      input([
         attribute.id("remember-me"),
         attribute.name("remember-me"),
         attribute.type_("checkbox"),
@@ -119,10 +117,7 @@ fn remember_checkbox(checked: Bool) -> Element(Msg) {
         attribute.class("checkbox"),
         event.on_click(Toggled(RememberMe, !checked)),
       ]),
-      element.label(
-        [attribute.for("remember-me")],
-        [element.text("Remember me")],
-      ),
+      label([attribute.for("remember-me")], [t("Remember me")]),
     ],
   )
 }
diff --git a/test/nested.gleam b/test/nested.gleam
index 8be6891..b32a5a3 100644
--- a/test/nested.gleam
+++ b/test/nested.gleam
@@ -3,8 +3,10 @@
 import counter
 import gleam/list
 import gleam/map.{Map}
+import gleam/pair
 import lustre
-import lustre/element.{Element, div}
+import lustre/element.{Element}
+import lustre/html.{div}
 
 // MAIN ------------------------------------------------------------------------
 
@@ -13,7 +15,7 @@ pub fn main() {
   // start with if you're just getting started with lustre or you know you don't
   // need the runtime to manage any side effects.
   let app = lustre.simple(init, update, render)
-  let assert Ok(dispatch) = lustre.start(app, "body")
+  let assert Ok(_) = lustre.start(app, "body")
 
   Nil
 }
@@ -44,13 +46,12 @@ fn update(model: Model, msg: Msg) -> Model {
 // RENDER ----------------------------------------------------------------------
 
 fn render(model: Model) -> Element(Msg) {
-  div(
-    [],
-    {
-      use #(id, counter) <- list.map(map.to_list(model))
-      let tagger = fn(msg) { #(id, msg) }
-
-      element.map(counter.render(counter), tagger)
-    },
-  )
+  let counters = {
+    use rest, id, counter <- map.fold(model, [])
+    let el = element.map(counter.render(counter), pair.new(id, _))
+
+    [el, ..rest]
+  }
+
+  div([], counters)
 }