1 files changed, 94 insertions, 0 deletions
diff --git a/examples/components/src/components.gleam b/examples/components/src/components.gleam
new file mode 100644
index 0000000..85fc583
--- /dev/null
+++ b/examples/components/src/components.gleam
@@ -0,0 +1,94 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/dynamic
+import gleam/function
+import gleam/int
+import gleam/list
+import gleam/dict
+import gleam/result
+import lustre
+import lustre/attribute
+import lustre/effect
+import lustre/element.{element, text}
+import lustre/element/html.{button, div, li, ol, p, slot}
+import lustre/event
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main() {
+  let assert Ok(_) =
+    lustre.component(
+      "custom-counter",
+      counter_init,
+      counter_update,
+      counter_view,
+      dict.from_list([
+        #(
+          "count",
+          fn(attr) {
+            dynamic.int(attr)
+            |> result.map(GotCount)
+          },
+        ),
+      ]),
+    )
+
+  // A `simple` lustre application doesn't produce `Effect`s. These are best to 
+  // 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, view)
+  let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil)
+
+  Nil
+}
+
+fn init(_) {
+  []
+}
+
+fn update(history, msg) {
+  case msg {
+    "reset" -> []
+    _ -> [msg, ..history]
+  }
+}
+
+fn view(history) {
+  let on_custom_click = event.on("custom-click", function.constant(Ok("click")))
+
+  div([], [
+    button([event.on_click("reset")], [text("Reset")]),
+    ol([], list.map(history, fn(msg) { li([], [text(msg)]) })),
+    element(
+      "custom-counter",
+      [on_custom_click, attribute.property("count", list.length(history))],
+      [ol([], list.map(history, fn(msg) { li([], [text(msg)]) }))],
+    ),
+  ])
+}
+
+// COUNTER ---------------------------------------------------------------------
+
+fn counter_init() {
+  #(0, effect.none())
+}
+
+type CounterMsg {
+  GotCount(Int)
+  Clicked
+}
+
+fn counter_update(count, msg) {
+  case msg {
+    GotCount(count) -> #(count, effect.none())
+    Clicked -> #(count, event.emit("custom-click", Nil))
+  }
+}
+
+fn counter_view(count) {
+  div([], [
+    button([event.on_click(Clicked)], [text("Click me!")]),
+    p([], [text("Count: "), text(int.to_string(count))]),
+    slot([]),
+  ])
+}