:recycle: Refactor example apps to use lustre/try instead of vite.

3 files changed, 112 insertions, 0 deletions

diff --git a/examples/components/gleam.toml b/examples/components/gleam.toml
new file mode 100644
index 0000000..131d773
--- /dev/null
+++ b/examples/components/gleam.toml
@@ -0,0 +1,7 @@
+name = "components"
+version = "1.0.0"
+target = "javascript"
+
+[dependencies]
+gleam_stdlib = "~> 0.34"
+lustre = { path = "../../" }
\ No newline at end of file
diff --git a/examples/components/manifest.toml b/examples/components/manifest.toml
new file mode 100644
index 0000000..715dadc
--- /dev/null
+++ b/examples/components/manifest.toml
@@ -0,0 +1,11 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" },
+  { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." },
+]
+
+[requirements]
+gleam_stdlib = { version = "~> 0.34" }
+lustre = { path = "../../" }
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([]),
+  ])
+}