experimental

Types

Container

opaque </>

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

node

</>

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.

render

</>

pub fn render(
  stylesheet stylesheet: StyleSheet,
  in outputs: List(Container),
  after view: fn() -> Element(a),
) -> Element(a)

Use render as a view middleware. Like in Wisp, sketch_lustre_experimental 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 lustre/element
import sketch
import sketch/lustre/experimental as sketch_lustre
import sketch/lustre/experimental/element/html

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

fn view(model: model, stylesheet: sketch.StyleSheet) -> element.Element(msg) {
  use <- skech_lustre.render(stylesheet, in: [sketch_lustre.node()])
  html.div([], [])
}

setup

</>

pub fn setup(stylesheet: StyleSheet) -> Result(StyleSheet, Nil)

Setup the StyleSheet to use across your application. One stylesheet must be set in your entire application. setup should be called once at startup. You can call setup any time you want to reset your stylesheet.
Because of performance reasons and race conditions, non-persistent stylesheets will fail to initialize the package. Always use a Persistent stylesheet with sketch_lustre_experimental.

pub fn main() {
  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Persistent)
  let assert Ok(_) = sketch_lustre.setup(stylesheet)
  // The following code goes there.
}

ssr

</>

pub fn ssr(
  stylesheet: StyleSheet,
  view: fn() -> Element(a),
) -> Element(a)

Use ssr as a view middleware. Like in Wisp, sketch_lustre_experimental 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/experimental as sketch_lustre
import sketch/lustre/experimental/element/html
import wisp

pub fn main() {
  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Persistent)
  let assert Ok(_) = sketch_lustre.setup(stylesheet)
  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([], [])
}