3 files changed, 102 insertions, 21 deletions

diff --git a/test/example/application/README.md b/test/example/application/README.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/test/example/application/README.md
diff --git a/test/example/application/counter.gleam b/test/example/application/counter.gleam
new file mode 100644
index 0000000..0433c1e
--- /dev/null
+++ b/test/example/application/counter.gleam
@@ -0,0 +1,57 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/int
+import lustre
+import lustre/attribute.{ style }
+import lustre/element.{ button, div, p, text }
+import lustre/event.{ dispatch, on_click }
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main () -> Nil {
+    let selector = "[data-lustre-container]"
+    let program  = lustre.application(init(), update, render)
+
+    // `lustre.start` can return an `Error` if no DOM element is found that matches
+    // the selector. This is a fatal error for our examples, so we panic if that 
+    // happens.
+    assert Ok(_) = lustre.start(program, selector)
+
+    Nil
+}
+
+// STATE -----------------------------------------------------------------------
+
+pub type State 
+    = Int
+
+pub fn init () -> State {
+    0
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub type Action {
+    Incr
+    Decr
+}
+
+pub fn update (state, action) {
+    case action {
+        Incr ->
+            state + 1
+
+        Decr ->
+            state - 1
+    }
+}
+
+// RENDER ----------------------------------------------------------------------
+
+pub fn render (state) {
+    div([ style([ #("display", "flex") ]) ], [
+        button([ on_click(dispatch(Decr)) ], [ text("-") ]),
+        p([], [ int.to_string(state) |> text ]),
+        button([ on_click(dispatch(Incr)) ], [ text("+") ])
+    ])
+}
diff --git a/test/example/main.gleam b/test/example/main.gleam
index cd9a71e..f08997a 100644
--- a/test/example/main.gleam
+++ b/test/example/main.gleam
@@ -1,35 +1,59 @@
-import gleam/int
-import lustre
-import lustre/attribute.{ style }
-import lustre/element.{ button, div, p, text }
-import lustre/event.{ dispatch, on_click }
+// IMPORTS ---------------------------------------------------------------------
 
-pub fn main () {
+import lustre.{ Element }
+import lustre/element
+
+import example/application/counter
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main () -> Nil {
     let selector = "[data-lustre-container]"
-    let program  = lustre.application(0, update, render)
+    let program  = lustre.application(init(), update, render)
+
+    // `lustre.start` can return an `Error` if no DOM element is found that matches
+    // the selector. This is a fatal error for our examples, so we panic if that 
+    // happens.
+    assert Ok(_) = lustre.start(program, selector)
+
+    Nil
+}
 
-    lustre.start(program, selector)
+// STATE -----------------------------------------------------------------------
+
+type State {
+    State(
+        counter: counter.State
+    )
+}
+
+fn init () -> State {
+    State(
+        counter: counter.init()
+    )
 }
 
+// UPDATE ----------------------------------------------------------------------
+
 type Action {
-    Incr
-    Decr
+    Counter(counter.Action)
 }
 
-fn update (state, action) {
+fn update (state: State, action: Action) -> State {
     case action {
-        Incr ->
-            state + 1
-
-        Decr ->
-            state - 1
+        Counter(counter_action) ->
+            State(counter: counter.update(state.counter, counter_action))
     }
 }
 
-fn render (state) {
-    div([ style([ #("display", "flex") ]) ], [
-        button([ on_click(dispatch(Decr)) ], [ text("-") ]),
-        p([], [ int.to_string(state) |> text ]),
-        button([ on_click(dispatch(Incr)) ], [ text("+") ])
+// RENDER ----------------------------------------------------------------------
+
+fn render (state: State) -> Element(Action) {
+    element.div([], [
+        element.details([], [
+            element.summary([], [ element.text("Counter") ]),
+            counter.render(state.counter) 
+                |> element.map(Counter)
+        ])
     ])
 }