modem: a device that converts signals produced by one type of device (such as a computer) to a form compatible with another (such as a telephone) โ Merriam-Webster
Modem is a little library for Lustre that helps you manage navigation and URLs in the browser. It converts url requests into messages that you can handle in your app's update function. Modem isn't a router, but it can help you build one!
Getting started with modem is easy! Most application's can get by with pattern matching on a url's path: no complicated router setup required. Let's see what that looks like with modem:
gleam add lustre modem
import gleam/uri.{type Uri}
import lustre
import lustre/attribute
import lustre/element.{type Element}
import lustre/element/html
import lustre/effect.{type Effect}
import modem
pub fn main() {
lustre.application(init, update, view)
}
pub type Route {
Wibble
Wobble
}
fn init(_) -> #(Route, Effect(Msg)) {
#(Wibble, modem.init(on_url_change))
}
fn on_url_change(uri: Uri) -> Msg {
case uri.path_segments(uri.path) {
["wibble"] -> OnRouteChange(Wibble)
["wobble"] -> OnRouteChange(Wobble)
_ -> OnRouteChange(Wibble)
}
}
pub type Msg {
OnRouteChange(Route)
}
fn update(_, msg: Msg) -> #(Route, Effect(Msg)) {
case msg {
OnRouteChange(route) -> #(route, effect.none())
}
}
fn view(route: Route) -> Element(Msg) {
html.div([], [
html.nav([], [
html.a([attribute.href("/wibble")], [element.text("Go to wibble")]),
html.a([attribute.href("/wobble")], [element.text("Go to wobble")]),
]),
case route {
Wibble -> html.h1([], [element.text("You're on wibble")])
Wobble -> html.h1([], [element.text("You're on wobble")])
},
])
}
Here's a breakdown of what's happening:
-
We define a
Route
type that represents the page or route we're currently on. -
modem.init
is anEffect
that intercepts clicks to local links and browser back/forward navigation and lets you handle them. -
on_url_change
is a function we write that takes an incomingUri
and converts it to our app'sMsg
type. -
In our
view
we can just use normalhtml.a.
elements: no special link component necessary. Pattern matching on theRoute
type lets us render different content for each page.