- -

Lustre

A framework for building create web apps – powered by Gleam and React!

import gleam/int
-import lustre
-import lustre/element.{ button, div, p, text }
-import lustre/event.{ dispatch, on_click }
-
-pub fn main () {
-    let app = lustre.application(0, update, render)
-    lustre.start(app, "#app")
-}
-
-type Action {
-    Incr
-    Decr
-}
-
-fn update (state, action) {
-    case action {
-        Incr -> state + 1
-        Decr -> state - 1
-    }
-}
-
-fn render (state) {
-    div([], [
-        button([ on_click(dispatch(Decr)) ], [ text("-") ]),
-        p([], [ text(int.to_string(state)) ]),
-        button([ on_click(dispatch(Incr)) ], [ text("+") ])
-    ])
-}
-

❗️ This package relies on Gleam’s JavaScript FFI and is intended to be run in -the browser. It will not work if your are targetting Node.js or Erlang.

Installation

If available on Hex, this package can be added to your Gleam project:

gleam add lustre
-

and its documentation can be found at https://hexdocs.pm/lustre. You will also -need to install react and react-dom from npm:

npm i react react-dom
-

Development

First, make sure you have both Gleam and Node.js installed, then:

npm i
-npm start
-

This sets up chokidar to watch our gleam source code and runs the compiler -whenever we make a change. It also starts a server that will serve the examples -located in test/example/.

- - -