sketch/lustre

Types

Location to output the generated CSS. Every render or ssr call expect one or more containers, and dump the generated CSS inside. Containers can be created with document(), node() or shadow().

pub opaque type Container

Functions

pub fn node() -> Container

Create a container in the window document. Create a CSSStyleSheet and updates the content directly inside.
Because document is only accessible in the browser, that function cannot be called on Erlang target. Create a container in a Shadow Root. Create a CSSStyleSheet and updates the content directly inside.
Because document is only accessible in the browser, that function cannot be called on Erlang target. Create a container directly in the DOM. CSS will be put directly in the elements tree, in a <style> tag.

pub fn render(
  stylesheet stylesheet: StyleSheet,
  in outputs: List(Container),
  after view: fn() -> Element(a),
) -> lustre/internals/vdom.Element(a)

Use render as a view middleware. Like in Wisp, sketch_lustre adopts the middleware philosophy in Lustre, and allows you to call render directly in your view function, by using use. No need to wrap your view function.

import lustre
import sketch
import sketch/lustre as sketch_lustre
import sketch/lustre/element/html

pub fn main() {
  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Persistent)
  lustre.simple(init, update, view(_, stylesheet))
  |> lustre.start("#root", Nil)
}

fn view(model, stylesheet) {
  use <- skech_lustre.render(stylesheet, in: [sketch_lustre.node()])
  html.div([], [])
}
pub fn ssr(
  stylesheet: StyleSheet,
  view: fn() -> Element(a),
) -> lustre/internals/vdom.Element(a)

Use ssr as a view middleware. Like in Wisp, sketch_lustre adopts the middleware philosophy in Lustre, and allows you to call ssr directly in your view function, by using use. No need to wrap your view function.

import gleam/bytes_tree
import gleam/http/response
import lustre
import lustre/element
import mist
import sketch
import sketch/lustre as sketch_lustre
import sketch/lustre/element/html
import wisp

pub fn main() {
  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Persistent)
  let assert Ok(_) =
    fn(_) { greet(stylesheet) }
    |> mist.new()
    |> mist.port(1234)
    |> mist.start_http()
  process.sleep_forever()
}

pub fn greet(stylesheet: sketch.StyleSheet) -> wisp.Response {
  view(model, stylesheet)
  |> element.to_document_string
  |> bytes_tree.to_document_string
  |> mist.Bytes
  |> response.set_body(response.new(200), _)
}

fn view(model: model, stylesheet: sketch.StyleSheet) -> element.Element(msg) {
  use <- skech_lustre.ssr(stylesheet)
  html.div([], [])
}
Search Document