lustre

Types

App

An App describes a Lustre application: what state it holds and what kind of actions get dispatched to update that state. The only useful thing you can do with an App is pass it to start.

You can construct an App from the two constructors exposed in this module: basic and application. Although you can’t do anything but start them, the constructors are separated in case you want to set up an application but defer starting it until some later point in time.

                                      ┌────────┐
                                      │        │
                                      │ update │
                                      │        │
                                      └──────┬─┘
                                        ▲    │
                                        │    │ #(State, Action)
                                 Action │    │
                                        │    │
                                        │    ▼
  ┌──────┐                    ┌─────────┴──────────────┐
  │      │  #(State, Action)  │                        │
  │ init ├───────────────────►│     Lustre Runtime     │
  │      │                    │                        │
  └──────┘                    └──────────────┬─────────┘
                                        ▲    │
                                        │    │ State
                                 Action │    │
                                        │    ▼
                                      ┌─┴──────┐
                                      │        │
                                      │ render │
                                      │        │
                                      └────────┘

Someone please PR the Gleam docs generator to fix the monospace font, thanks! 💖

pub opaque type App(state, action)

Error

</>

pub type Error {
  ElementNotFound
}

Constructors

```
ElementNotFound
```

Functions

application

</>

pub fn application(init: #(a, Cmd(b)), update: fn(a, b) ->
    #(a, Cmd(b)), render: fn(a) -> Element(b)) -> App(a, b)

Create a more complex application mimicing TEA – the Elm architecture. We start with some initial state, a function to update that state, and then a render function to derive our app’s view from that state.

Events produced by elements are passed a dispatch function that can be used to emit actions that trigger your update function to be called and trigger a rerender.

basic

</>

pub fn basic(element: Element(a)) -> App(Nil, a)

Create a basic lustre app that just renders some element on the page. Note that this doesn’t mean the content is static! With element.stateful you can still create components with local state.

Basic lustre apps don’t have any global application state and so the plumbing is a lot simpler. If you find yourself passing lot’s state of state around, you might want to consider using application instead.

start

</>

pub fn start(app: App(a, b), selector: String) -> Result(
  fn(b) -> Nil,
  Error,
)

Once you have created a app with either basic or application, you need to actually start it! This function will mount your app to the DOM node that matches the query selector you provide.

If everything mounted OK, we’ll get back a dispatch function that you can call to send actions to your app and trigger an update.