Setup the StyleSheet to use across your application, and let you inject initial styling directly in your stylesheet. If you don’t need to add default styling, you can take a look at setup.

In sketch_lustre, there’s no notion of persistent or ephemeral stylesheets: all stylesheets will be persisted in the application.

pub fn main() {
  let assert Ok(stylesheet) =
    sketch_lustre.construct(fn (stylesheet) {
      stylesheet
      |> sketch.global(css.global("html", [...]))
      |> sketch.global(css.global("body", [...]))
      |> sketch.global(css.global(":root", [...]))
    })
  // The following code goes there.
}

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.

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 lustre/element
import sketch
import sketch/lustre as sketch_lustre
import sketch/lustre/element/html

pub fn main() {
  let assert Ok(stylesheet) = sketch_lustre.setup()
  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 the StyleSheet to use across your application. At least one stylesheet must be set in your entire application. setup should be called once for every stylesheet you’ll use.

In sketch_lustre, there’s no notion of persistent or ephemeral stylesheets: all stylesheets will be persisted in the application.

In case you need to add initial styling directly in your stylesheet, take a look at construct.

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

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_lustre.setup()
  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([], [])
}

Unref the StyleSheet to let it be garbaged by the runtime. Because stylesheets are memoized to guarantee performance and usability of Sketch Lustre, they should be dereferenced to ensure no memory leaks will happen in the application.

pub fn main() {
  let assert Ok(stylesheet) = sketch_lustre.setup()
  ...
  let assert Ok(_) = sketch_lustre.teardown(stylesheet)
}