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