Sketch Lustre Experimental
In case you’re here and don’t know Sketch, take a look at
sketch
package!
Setup
If you’re here, it means you’re ready to test the future of Sketch Lustre! Be
careful, unexpected things can happen. sketch_lustre_experimental
exposes one
entrypoint, sketch/lustre/experimental
, containing everything needed to get
started.
// main.gleam
import lustre
import sketch
import sketch/lustre/experimental as sketch_lustre
pub fn main() {
// Initialise the cache. Two strategies can be used. Ephemeral caches are designed as throw-away caches.
let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Ephemeral)
// Generate the partial view function, compatible with Lustre's runtime.
lustre.simple(init, update, view(_, stylesheet))
// And voilà!
|> lustre.start("#app", Nil)
}
fn view(model, stylesheet) {
// Add the sketch CSS generation "view middleware".
use <- sketch_lustre.render(stylesheet, [sketch_lustre.node()])
// Run your actual view function.
my_view(model)
}
Usage
sketch_lustre_experimental
exposes two modules to help you build your site,
similarly to Lustre: sketch/lustre/experimental/element
and
sketch/lustre/experimental/element/html
. The first one let you use raw element
generation and exposes the Lustre Element(msg)
type. Every time you need
elements helpers, i.e. element
, fragment
, or even keyed
, use directly
lustre/element
module.
NB: all elements can be generated using the correct function, or using its “underscored” version. In the second case, Sketch Lustre behaves exactly like Lustre, and will not add another class. This is helpful when you want to use a simple node, without any class linked on it.
import sketch/css
import sketch/css/length.{px}
import sketch/lustre/experimental/element
import sketch/lustre/experimental/element/html
fn main_style() {
css.class([
css.background("red"),
css.font_size(px(16)),
])
}
fn view(model: Int) {
html.div(main_style(), [], [
html.div_([], [
html.text(int.to_string(model)),
]),
])
}
And you’re done! Enjoy your Lustre app, Sketch-enhanced!
Final notes
On Sketch Lustre Experimental Element
A Sketch Element(msg)
is a Lustre Element(msg)
, with class name directly
linked on it. You don’t need anything to do to get a
lustre/element.Element(msg)
. This also means you can use any Lustre
Element(msg)
function you already have.
Usage with Shadow DOM
In browser, Sketch can work with a Shadow DOM, in order to hide the compiled
styles from the rest of the application. With a proper shadow root (represented
as a Dynamic
in Gleam), you can use
sketch/lustre/experimental.shadow()
to render a stylesheet in the shadow root directly. In the same way you can
initialize the cache to render in document or in a style
node, you can use a
shadow root to paint styles in your application!