aboutsummaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/99-server-components/README.md0
-rw-r--r--examples/99-server-components/gleam.toml27
-rw-r--r--examples/99-server-components/manifest.toml41
-rw-r--r--examples/99-server-components/src/app.gleam164
-rw-r--r--examples/99-server-components/src/counter.gleam65
5 files changed, 297 insertions, 0 deletions
diff --git a/examples/99-server-components/README.md b/examples/99-server-components/README.md
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/examples/99-server-components/README.md
diff --git a/examples/99-server-components/gleam.toml b/examples/99-server-components/gleam.toml
new file mode 100644
index 0000000..9e98ea9
--- /dev/null
+++ b/examples/99-server-components/gleam.toml
@@ -0,0 +1,27 @@
+name = "app"
+version = "1.0.0"
+
+# Fill out these fields if you intend to generate HTML documentation or publish
+# your project to the Hex package manager.
+#
+# description = ""
+# licences = ["Apache-2.0"]
+# repository = { type = "github", user = "username", repo = "project" }
+# links = [{ title = "Website", href = "https://gleam.run" }]
+#
+# For a full reference of all the available options, you can have a look at
+# https://gleam.run/writing-gleam/gleam-toml/.
+
+[dependencies]
+gleam_stdlib = "~> 0.34 or ~> 1.0"
+lustre = { path = "../../" }
+mist = "~> 0.17"
+gleam_erlang = "~> 0.24"
+gleam_otp = "~> 0.10"
+gleam_http = "~> 3.6"
+lustre_ui = "~> 0.4"
+gleam_json = "~> 1.0"
+simplifile = "~> 1.5"
+
+[dev-dependencies]
+gleeunit = "~> 1.0"
diff --git a/examples/99-server-components/manifest.toml b/examples/99-server-components/manifest.toml
new file mode 100644
index 0000000..5630e8d
--- /dev/null
+++ b/examples/99-server-components/manifest.toml
@@ -0,0 +1,41 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+ { name = "argv", version = "1.0.1", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "A6E9009E50BBE863EB37D963E4315398D41A3D87D0075480FC244125808F964A" },
+ { name = "filepath", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "FC1B1B29438A5BA6C990F8047A011430BEC0C5BA638BFAA62718C4EAEFE00435" },
+ { name = "gleam_community_ansi", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib"], otp_app = "gleam_community_ansi", source = "hex", outer_checksum = "FE79E08BF97009729259B6357EC058315B6FBB916FAD1C2FF9355115FEB0D3A4" },
+ { name = "gleam_community_colour", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "A49A5E3AE8B637A5ACBA80ECB9B1AFE89FD3D5351FF6410A42B84F666D40D7D5" },
+ { name = "gleam_erlang", version = "0.24.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "26BDB52E61889F56A291CB34167315780EE4AA20961917314446542C90D1C1A0" },
+ { name = "gleam_http", version = "3.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "8C07DF9DF8CC7F054C650839A51C30A7D3C26482AC241C899C1CEA86B22DBE51" },
+ { name = "gleam_json", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "8B197DD5D578EA6AC2C0D4BDC634C71A5BCA8E7DB5F47091C263ECB411A60DF3" },
+ { name = "gleam_otp", version = "0.10.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "0B04FE915ACECE539B317F9652CAADBBC0F000184D586AAAF2D94C100945D72B" },
+ { name = "gleam_package_interface", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib"], otp_app = "gleam_package_interface", source = "hex", outer_checksum = "52A721BCA972C8099BB881195D821AAA64B9F2655BECC102165D5A1097731F01" },
+ { name = "gleam_stdlib", version = "0.36.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "C0D14D807FEC6F8A08A7C9EF8DFDE6AE5C10E40E21325B2B29365965D82EB3D4" },
+ { name = "glearray", version = "0.2.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "glearray", source = "hex", outer_checksum = "908154F695D330E06A37FAB2C04119E8F315D643206F8F32B6A6C14A8709FFF4" },
+ { name = "gleeunit", version = "1.0.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "D364C87AFEB26BDB4FB8A5ABDE67D635DC9FA52D6AB68416044C35B096C6882D" },
+ { name = "glint", version = "0.16.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_community_colour", "gleam_stdlib", "snag"], otp_app = "glint", source = "hex", outer_checksum = "61B7E85CBB0CCD2FD8A9C7AE06CA97A80BF6537716F34362A39DF9C74967BBBC" },
+ { name = "glisten", version = "0.11.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "glisten", source = "hex", outer_checksum = "73BC09C8487C2FFC0963BFAB33ED2F0D636FDFA43B966E65C1251CBAB8458099" },
+ { name = "justin", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "justin", source = "hex", outer_checksum = "7FA0C6DB78640C6DC5FBFD59BF3456009F3F8B485BF6825E97E1EB44E9A1E2CD" },
+ { name = "lustre", version = "4.0.0-rc.2", build_tools = ["gleam"], requirements = ["argv", "filepath", "gleam_community_ansi", "gleam_erlang", "gleam_json", "gleam_otp", "gleam_package_interface", "gleam_stdlib", "glint", "justin", "simplifile", "spinner", "tom"], source = "local", path = "../.." },
+ { name = "lustre_ui", version = "0.4.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_stdlib", "lustre"], otp_app = "lustre_ui", source = "hex", outer_checksum = "9FE07E26EABDB13F7CB29F90AD8763618040729BF16E5F451A6ED584C52AA093" },
+ { name = "mist", version = "0.17.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "glisten"], otp_app = "mist", source = "hex", outer_checksum = "DA8ACEE52C1E4892A75181B3166A4876D8CBC69D555E4770250BC84C80F75524" },
+ { name = "repeatedly", version = "2.1.1", build_tools = ["gleam"], requirements = [], otp_app = "repeatedly", source = "hex", outer_checksum = "38808C3EC382B0CD981336D5879C24ECB37FCB9C1D1BD128F7A80B0F74404D79" },
+ { name = "simplifile", version = "1.5.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "EB9AA8E65E5C1E3E0FDCFC81BC363FD433CB122D7D062750FFDF24DE4AC40116" },
+ { name = "snag", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "snag", source = "hex", outer_checksum = "54D32E16E33655346AA3E66CBA7E191DE0A8793D2C05284E3EFB90AD2CE92BCC" },
+ { name = "spinner", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_erlang", "gleam_stdlib", "glearray", "repeatedly"], otp_app = "spinner", source = "hex", outer_checksum = "200BA3D4A04D468898E63C0D316E23F526E02514BC46454091975CB5BAE41E8F" },
+ { name = "thoas", version = "0.4.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "4918D50026C073C4AB1388437132C77A6F6F7C8AC43C60C13758CC0ADCE2134E" },
+ { name = "tom", version = "0.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "tom", source = "hex", outer_checksum = "0831C73E45405A2153091226BF98FB485ED16376988602CC01A5FD086B82D577" },
+]
+
+[requirements]
+gleam_erlang = { version = "~> 0.24" }
+gleam_http = { version = "~> 3.6" }
+gleam_json = { version = "~> 1.0" }
+gleam_otp = { version = "~> 0.10" }
+gleam_stdlib = { version = "~> 0.34 or ~> 1.0" }
+gleeunit = { version = "~> 1.0" }
+lustre = { path = "../../" }
+lustre_ui = { version = "~> 0.4" }
+mist = { version = "~> 0.17" }
+simplifile = { version = "~> 1.5"}
diff --git a/examples/99-server-components/src/app.gleam b/examples/99-server-components/src/app.gleam
new file mode 100644
index 0000000..a08b637
--- /dev/null
+++ b/examples/99-server-components/src/app.gleam
@@ -0,0 +1,164 @@
+import counter
+import gleam/bytes_builder
+import gleam/erlang
+import gleam/erlang/process.{type Selector, type Subject}
+import gleam/http/request.{type Request}
+import gleam/http/response.{type Response}
+import gleam/json
+import gleam/option.{type Option, None}
+import gleam/otp/actor
+import gleam/result
+import lustre
+import lustre/attribute
+import lustre/element
+import lustre/element/html.{html}
+import lustre/server_component
+import mist.{
+ type Connection, type ResponseData, type WebsocketConnection,
+ type WebsocketMessage,
+}
+
+pub fn main() {
+ let assert Ok(_) =
+ fn(req: Request(Connection)) -> Response(ResponseData) {
+ case request.path_segments(req) {
+ // Set up the websocket connection to the client. This is how we send
+ // DOM updates to the browser and receive events from the client.
+ ["counter"] ->
+ mist.websocket(
+ request: req,
+ on_init: socket_init,
+ on_close: socket_close,
+ handler: socket_update,
+ )
+
+ // We need to serve the server component runtime. There's also a minified
+ // version of this script for production.
+ ["lustre-server-component.mjs"] -> {
+ let assert Ok(priv) = erlang.priv_directory("lustre")
+ let path = priv <> "/static/lustre-server-component.mjs"
+
+ mist.send_file(path, offset: 0, limit: None)
+ |> result.map(fn(script) {
+ response.new(200)
+ |> response.prepend_header("content-type", "application/javascript")
+ |> response.set_body(script)
+ })
+ |> result.lazy_unwrap(fn() {
+ response.new(404)
+ |> response.set_body(mist.Bytes(bytes_builder.new()))
+ })
+ }
+
+ // For all other requests we'll just serve some HTML that renders the
+ // server component.
+ _ ->
+ response.new(200)
+ |> response.prepend_header("content-type", "text/html")
+ |> response.set_body(
+ html([], [
+ html.head([], [
+ html.link([
+ attribute.rel("stylesheet"),
+ attribute.href(
+ "https://cdn.jsdelivr.net/gh/lustre-labs/ui/priv/styles.css",
+ ),
+ ]),
+ html.script(
+ [
+ attribute.type_("module"),
+ attribute.src("/lustre-server-component.mjs"),
+ ],
+ "",
+ ),
+ ]),
+ html.body([], [
+ server_component.component([server_component.route("/counter")]),
+ ]),
+ ])
+ |> element.to_document_string_builder
+ |> bytes_builder.from_string_builder
+ |> mist.Bytes,
+ )
+ }
+ }
+ |> mist.new
+ |> mist.port(3000)
+ |> mist.start_http
+
+ process.sleep_forever()
+}
+
+//
+
+type Counter =
+ Subject(lustre.Action(counter.Msg, lustre.ServerComponent))
+
+fn socket_init(
+ conn: WebsocketConnection,
+) -> #(Counter, Option(Selector(lustre.Patch(counter.Msg)))) {
+ let app = counter.app()
+ let assert Ok(counter) = lustre.start_actor(app, 0)
+
+ process.send(
+ counter,
+ server_component.subscribe(
+ // server components can have many connected clients, so we need a way to
+ // identify this client.
+ "ws",
+ // this callback is called whenever the server component has a new patch
+ // to send to the client. here we json encode that patch and send it to
+ // via the websocket connection.
+ //
+ // a more involved version would have us sending the patch to this socket's
+ // subject, and then it could be handled (perhaps with some other work) in
+ // the `mist.Custom` branch of `socket_update` below.
+ fn(patch) {
+ patch
+ |> server_component.encode_patch
+ |> json.to_string
+ |> mist.send_text_frame(conn, _)
+
+ Nil
+ },
+ ),
+ )
+
+ #(
+ // we store the server component's `Subject` as this socket's state so we
+ // can shut it down when the socket is closed.
+ counter,
+ // the `None` here means we aren't planning on receiving any messages from
+ // elsewhere and dont need a `Selector` to handle them.
+ None,
+ )
+}
+
+fn socket_update(
+ counter: Counter,
+ _conn: WebsocketConnection,
+ msg: WebsocketMessage(lustre.Patch(counter.Msg)),
+) {
+ case msg {
+ mist.Text(json) -> {
+ // we attempt to decode the incoming text as an action to send to our
+ // server component runtime.
+ let action = json.decode(json, server_component.decode_action)
+
+ case action {
+ Ok(action) -> process.send(counter, action)
+ Error(_) -> Nil
+ }
+
+ actor.continue(counter)
+ }
+
+ mist.Binary(_) -> actor.continue(counter)
+ mist.Custom(_) -> actor.continue(counter)
+ mist.Closed | mist.Shutdown -> actor.Stop(process.Normal)
+ }
+}
+
+fn socket_close(counter: Counter) {
+ process.send(counter, lustre.shutdown())
+}
diff --git a/examples/99-server-components/src/counter.gleam b/examples/99-server-components/src/counter.gleam
new file mode 100644
index 0000000..c1a4469
--- /dev/null
+++ b/examples/99-server-components/src/counter.gleam
@@ -0,0 +1,65 @@
+import gleam/int
+import lustre
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/event
+// These examples are written with `lustre/ui` in mind. They'll work regardless,
+// but to see what `lustre/ui` can do make sure to run each of these examples with
+// the `--use-lustre-ui` flag:
+//
+// $ gleam run -m lustre dev --use-lustre-ui
+//
+// In your own apps, make sure to add the `lustre/ui` dependency and include the
+// stylesheet somewhere.
+import lustre/ui
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn app() {
+ lustre.simple(init, update, view)
+}
+
+// MODEL -----------------------------------------------------------------------
+
+type Model =
+ Int
+
+fn init(initial_count: Int) -> Model {
+ case initial_count < 0 {
+ True -> 0
+ False -> initial_count
+ }
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub opaque type Msg {
+ Incr
+ Decr
+}
+
+fn update(model: Model, msg: Msg) -> Model {
+ case msg {
+ Incr -> model + 1
+ Decr -> model - 1
+ }
+}
+
+// VIEW ------------------------------------------------------------------------
+
+fn view(model: Model) -> Element(Msg) {
+ let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
+ let count = int.to_string(model)
+
+ ui.centre(
+ [attribute.style(styles)],
+ ui.stack([], [
+ ui.button([event.on_click(Incr)], [element.text("+")]),
+ html.p([attribute.style([#("text-align", "center")])], [
+ element.text(count),
+ ]),
+ ui.button([event.on_click(Decr)], [element.text("-")]),
+ ]),
+ )
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-18 17:15:57 +0000