3 files changed, 64 insertions, 16 deletions

diff --git a/test/example/application/counter.gleam b/test/example/application/counter.gleam
index 0433c1e..40c93e3 100644
--- a/test/example/application/counter.gleam
+++ b/test/example/application/counter.gleam
@@ -3,6 +3,7 @@
 import gleam/int
 import lustre
 import lustre/attribute.{ style }
+import lustre/cmd.{ Cmd }
 import lustre/element.{ button, div, p, text }
 import lustre/event.{ dispatch, on_click }
 
@@ -22,11 +23,16 @@ pub fn main () -> Nil {
 
 // STATE -----------------------------------------------------------------------
 
-pub type State 
-    = Int
+pub type State {
+    State(
+        count: Int,
+        clock: Bool,
+        timer_id: Int
+    )
+}
 
-pub fn init () -> State {
-    0
+pub fn init () -> #(State, Cmd(Action)) {
+    #(State(0, True, 0), tick())
 }
 
 // UPDATE ----------------------------------------------------------------------
@@ -34,24 +40,47 @@ pub fn init () -> State {
 pub type Action {
     Incr
     Decr
+    Tick
 }
 
 pub fn update (state, action) {
     case action {
         Incr ->
-            state + 1
+            #(State(..state, count: state.count + 1), cmd.none())
 
         Decr ->
-            state - 1
+            #(State(..state, count: state.count - 1), cmd.none())
+
+        Tick ->
+            #(State(..state, count: state.count + 1), 
+                case state.clock {
+                    True -> 
+                        tick()
+
+                    False ->
+                        cmd.none()        
+                }
+            )
     }
 }
 
+external fn after (f: fn () -> any, delay: Int) -> Nil
+    = "" "window.setTimeout"
+
+fn tick () -> Cmd(Action) {
+    cmd.from(fn (dispatch) {
+        after(fn () {
+            dispatch(Tick)
+        }, 1000)
+    })
+}
+
 // RENDER ----------------------------------------------------------------------
 
 pub fn render (state) {
     div([ style([ #("display", "flex") ]) ], [
         button([ on_click(dispatch(Decr)) ], [ text("-") ]),
-        p([], [ int.to_string(state) |> text ]),
+        p([], [ int.to_string(state.count) |> text ]),
         button([ on_click(dispatch(Incr)) ], [ text("+") ])
     ])
 }
diff --git a/test/example/main.gleam b/test/example/main.gleam
index f08997a..7d9c063 100644
--- a/test/example/main.gleam
+++ b/test/example/main.gleam
@@ -1,7 +1,8 @@
 // IMPORTS ---------------------------------------------------------------------
 
-import lustre.{ Element }
-import lustre/element
+import lustre
+import lustre/cmd.{ Cmd }
+import lustre/element.{ Element }
 
 import example/application/counter
 
@@ -14,7 +15,11 @@ pub fn main () -> Nil {
     // `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)
+    assert Ok(dispatch) = lustre.start(program, selector)
+
+    dispatch(Counter(counter.Incr))
+    dispatch(Counter(counter.Incr))
+    dispatch(Counter(counter.Incr))
 
     Nil
 }
@@ -27,10 +32,13 @@ type State {
     )
 }
 
-fn init () -> State {
-    State(
-        counter: counter.init()
+fn init () -> #(State, Cmd(Action)) {
+    let #(counter, counter_cmds) = counter.init()
+    let state = State(
+        counter
     )
+
+    #(state, cmd.map(counter_cmds, Counter))
 }
 
 // UPDATE ----------------------------------------------------------------------
@@ -39,10 +47,16 @@ type Action {
     Counter(counter.Action)
 }
 
-fn update (state: State, action: Action) -> State {
+fn update (state: State, action: Action) -> #(State, Cmd(Action)) {
     case action {
-        Counter(counter_action) ->
-            State(counter: counter.update(state.counter, counter_action))
+        Counter(counter_action) -> {
+            let #(counter, counter_cmds) = counter.update(state.counter, counter_action)
+            let state = State(
+                counter
+            )
+
+            #(state, cmd.map(counter_cmds, Counter))
+        }
     }
 }
 
diff --git a/test/test_ffi.mjs b/test/test_ffi.mjs
new file mode 100644
index 0000000..e4fc06a
--- /dev/null
+++ b/test/test_ffi.mjs
@@ -0,0 +1,5 @@
+export const after = (f, delay) => {
+    const id = window.setTimeout(() => {
+        f(id)
+    }, delay)
+}