3 files changed, 12 insertions, 11 deletions
diff --git a/examples/components/gleam.toml b/examples/components/gleam.toml
index 131d773..3cac691 100644
--- a/examples/components/gleam.toml
+++ b/examples/components/gleam.toml
@@ -4,4 +4,4 @@ target = "javascript"
 
 [dependencies]
 gleam_stdlib = "~> 0.34"
-lustre = { path = "../../" }
-\ No newline at end of file
+lustre = { path = "../../" }
diff --git a/examples/components/manifest.toml b/examples/components/manifest.toml
index 715dadc..1c72364 100644
--- a/examples/components/manifest.toml
+++ b/examples/components/manifest.toml
@@ -2,8 +2,12 @@
 # You typically do not need to edit this file
 
 packages = [
+  { name = "gleam_erlang", version = "0.24.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "26BDB52E61889F56A291CB34167315780EE4AA20961917314446542C90D1C1A0" },
+  { name = "gleam_json", version = "0.7.0", build_tools = ["gleam"], requirements = ["thoas", "gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "CB405BD93A8828BCD870463DE29375E7B2D252D9D124C109E5B618AAC00B86FC" },
+  { name = "gleam_otp", version = "0.9.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "5FADBBEC5ECF3F8B6BE91101D432758503192AE2ADBAD5602158977341489F71" },
   { 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 = "../.." },
+  { name = "lustre", version = "3.1.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], source = "local", path = "../.." },
+  { name = "thoas", version = "0.4.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "4918D50026C073C4AB1388437132C77A6F6F7C8AC43C60C13758CC0ADCE2134E" },
 ]
 
 [requirements]
diff --git a/examples/components/src/components.gleam b/examples/components/src/components.gleam
index 85fc583..03400bf 100644
--- a/examples/components/src/components.gleam
+++ b/examples/components/src/components.gleam
@@ -16,23 +16,20 @@ import lustre/event
 // MAIN ------------------------------------------------------------------------
 
 pub fn main() {
-  let assert Ok(_) =
+  let counter =
     lustre.component(
-      "custom-counter",
       counter_init,
       counter_update,
       counter_view,
       dict.from_list([
-        #(
-          "count",
-          fn(attr) {
-            dynamic.int(attr)
-            |> result.map(GotCount)
-          },
-        ),
+        #("count", fn(attr) {
+          dynamic.int(attr)
+          |> result.map(GotCount)
+        }),
       ]),
     )
 
+  let assert Ok(_) = lustre.register(counter, "custom-counter")
   // 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.