Embedding Gleam in my blog with Vite

Init

The initialization function is responsible for setting the initial state of the Lustre model.

In my shiny_counter it looks like this:

type Model =
  Int

fn init(_) -> Model {
  0
}

Here, I define the Model to be just an integer, and initialize that integer to 0.

Update

The update function takes a model and a message as arguments and returns an updated model based on the contents of that message.

In the case of shiny_counter I only need an increment and decrement message:Since the model of shiny_counter is an Integer, it’s signed, so if I send a Decrement message enough times, I will get a negative number. If I wanted a model where I couldn’t produce a negative number, I would want to add extra cases into my update function.

pub type Msg {
  Increment
  Decrement
}

fn update(model: Model, msg: Msg) -> Model {
  case msg {
    Increment -> model + 1
    Decrement -> model - 1
  }
}

View

The view function takes a model and returns a Lustre Element constructor that handles both communicating with the update function as well as rendering the contents of the view to HTML.

In the case of shiny_counter, I convert the current state of the model to a string, then I render that count as well as provide two buttons which send defined messages to update the model:

view(model: Model) -> Element(Msg) {
  let count = int.to_string(model)

  html.div(
    [],
    [
      html.p([], [element.text(count)]),
      html.p(
        [],
        [
          html.button([event.on_click(Decrement)], [element.text("-")]),
          html.button([event.on_click(Increment)], [element.text("+")]),
        ],
      ),
    ],
  )
}

From here, I can add styling to make it live up to its shiny_counter name. Here, I’ve added styling to center the text and added the all important ✨ emoji:

fn view(model: Model) -> Element(Msg) {
  let count = int.to_string(model)

  html.div(
    [],
    [
      html.p(
        [attribute.style([#("text-align", "center")])],
        [element.text(count <> " ✨")],
      ),
      html.p(
        [attribute.style([#("text-align", "center")])],
        [
          html.button([event.on_click(Decrement)], [element.text("-")]),
          html.button([event.on_click(Increment)], [element.text("+")]),
        ],
      ),
    ],
  )
}

Start the application

Now that I’ve defined the key parts of a simple Lustre application, I need to combine them into an application. I do that with lustre.simple in this case, since shiny_counter doesn’t have complex interactive behavior. Once I have the application, I can simply start it:

pub fn main() {
  let app = lustre.simple(init, update, view)
  let assert Ok(dispatch) = lustre.start(app, "[gleam_example]", Nil)

  dispatch
}

lustre.start starts an application anchored on an HTML element specified by a CSS selector. In this case [gleam_example] finds an element that has the gleam_example attribute:

<div gleam_example>
</div>

Lustre will replace the selected element entirely with the running application after it loads.When I initially tried Lustre, the example I borrowed from used "body" as the CSS selector, and completely wiped out the template of my blog, making it awfully hard to write this article.I could tell that I misconfigured Lustre, because my blog was briefly visible until the Javascript loaded. This blog post is about embedding Gleam in my blog, not replacing my blog with Gleam. In this case, I chose an attribute since it’s unlikely that I’ll have anything else on the page with that custom attribute.

Now that I have a Lustre application that does what I want, I need to embed it in my blog.

While Gleam does transpile to Javascript it generates a number of different modules that are tedious to use in my static site generator. Enter Vite as a way to bundle the Javascript into a single file: