Sketch Redraw

In case you’re here and don’t know Sketch, take a look at sketch package!

This readme is a carbon-copy of the Sketch Redraw section in sketch readme.

Setup

When you’re using Redraw, sketch_redraw covers you. sketch_redraw exposes one entrypoint, sketch/redraw, containing everything needed to get started.

// main.gleam
import redraw
import sketch
import sketch/redraw as sketch_redraw

pub fn main() {
  let root = client.create_root("root")
  client.render(root, redraw.strict_mode([
    // Initialise the cache. Sketch Redraw handles the details for you.
    sr.provider([
      // Here comes your components!
    ])
  ]))
}

Usage

sketch_redraw exposes one module to help you build your site, similarly to redraw: sketch/redraw/html. html is simply a supercharged component, accepting a sketch.Class as first argument, and applies that style to the node. Because it’s a simple component, sketch/redraw/html and redraw/html can be mixed in the same code without issue! Because of that property, sketch_redraw does not expose text and none function at that time.

import redraw/html as h
import sketch
import sketch/redraw/html
import sketch/size.{px}

fn main_style() {
  sketch.class([
    sketch.background("red"),
    sketch.font_size(px(16)),
  ])
}

fn view(model: Int) {
  html.div(main_style(), [], [
    h.div([], [
      h.text(int.to_string(model))
    ]),
  ])
}

And you’re done! Enjoy your Redraw app, Sketch-enhanced!

Final notes

Sketch Redraw tries to integrate nicely with React Devtools! In case you’re seeing something weird, signal the bug!