Feat/breaking changes

README.md

@@ -43,7 +43,7 @@ and let the magic happen in your browser. Heads up in the docs for more details.
 ## Example with Lustre
 
 ```gleam
-import sketch
+import sketch/lustre as sketch
 import sketch/options as sketch_options
 import gleam/int
 import lustre
@@ -52,10 +52,11 @@ import lustre/element/html.{div, button, p}
 import lustre/event.{on_click}
 
 pub fn main() {
-  let assert Ok(render) = sketch.setup(sketch_options.browser())
-  let app = lustre.simple(init, update, render(view))
-  let assert Ok(_) = lustre.start(app, "#app", Nil)
-  Nil
+  let assert Ok(cache) = sketch.setup(sketch_options.browser())
+  let assert Ok(app) =
+    lustre.simple(init, update, view)
+    |> sketch.wrap(cache)
+    |> lustre.start("#app", Nil)
 }
 
 fn init(_flags) {

src/errors.ffi.mjs

@@ -21,16 +21,17 @@ pub fn main() {
 const lustreSetup = `// main.gleam
 // If you're using lustre, initialize Sketch in your main().
 
-import sketch
+import sketch/lustre as sketch
 import sketch/options as sketch_options
 
 pub fn main() {
-  let assert Ok(render) =
+  let assert Ok(cache) =
     sketch_options.node()
     |> sketch.lustre_setup()
 
   let assert Ok(_) =
-    lustre.simple(init, update, render(view))
+    lustre.simple(init, update, view)
+    |> sketch.wrap(cache)
     |> lustre.start("#app", Nil)
 }
 `

src/sketch.ffi.mjs

@@ -97,3 +97,9 @@ export function memo(klass) {
 export function toString({ name }) {
   return name
 }
+
+export function updateLustre(application, viewMapper) {
+  return application.withFields({
+    view: viewMapper(application.view),
+  })
+}

src/sketch.gleam

@@ -268,9 +268,9 @@
 //// some access to underlying and internals, open an issue with your use case,
 //// I'd more than happy to help on that point and reduce side-effects.
 
+import gleam/float
 import gleam/int
 import gleam/list
-import gleam/result
 import gleam/string
 import lustre/attribute.{type Attribute}
 import sketch/error
@@ -545,8 +545,8 @@ pub fn object_position(object_position: String) {
   Property("object-position", object_position, False)
 }
 
-pub fn opacity(opacity: String) {
-  Property("opacity", opacity, False)
+pub fn opacity(opacity: Float) {
+  Property("opacity", float.to_string(opacity), False)
 }
 
 pub fn pointer_events(pointer_events: String) {
@@ -877,19 +877,39 @@ pub fn border_radius_(border_radius: String) {
   Property("border-radius", border_radius, False)
 }
 
-pub fn border_top_right_radius(border_top_right_radius: String) {
+pub fn border_top_right_radius(border_top_right_radius: Size) {
+  size.to_string(border_top_right_radius)
+  |> Property("border-top-right-radius", _, False)
+}
+
+pub fn border_top_left_radius(border_top_left_radius: Size) {
+  size.to_string(border_top_left_radius)
+  |> Property("border-top-left-radius", _, False)
+}
+
+pub fn border_bottom_right_radius(border_bottom_right_radius: Size) {
+  size.to_string(border_bottom_right_radius)
+  |> Property("border-bottom-right-radius", _, False)
+}
+
+pub fn border_bottom_left_radius(border_bottom_left_radius: Size) {
+  size.to_string(border_bottom_left_radius)
+  |> Property("border-bottom-left-radius", _, False)
+}
+
+pub fn border_top_right_radius_(border_top_right_radius: String) {
   Property("border-top-right-radius", border_top_right_radius, False)
 }
 
-pub fn border_top_left_radius(border_top_left_radius: String) {
+pub fn border_top_left_radius_(border_top_left_radius: String) {
   Property("border-top-left-radius", border_top_left_radius, False)
 }
 
-pub fn border_bottom_right_radius(border_bottom_right_radius: String) {
+pub fn border_bottom_right_radius_(border_bottom_right_radius: String) {
   Property("border-bottom-right-radius", border_bottom_right_radius, False)
 }
 
-pub fn border_bottom_left_radius(border_bottom_left_radius: String) {
+pub fn border_bottom_left_radius_(border_bottom_left_radius: String) {
   Property("border-bottom-left-radius", border_bottom_left_radius, False)
 }
 
@@ -1133,15 +1153,3 @@ pub fn to_lustre(class: Class) -> Attribute(a) {
   |> list.map(fn(value) { #(value, True) })
   |> attribute.classes()
 }
-
-pub fn lustre_setup(options: Options) {
-  use cache <- result.then(create_cache(options))
-  Ok(fn(view: fn(model) -> element) {
-    fn(model: model) {
-      prepare(cache)
-      let el = view(model)
-      render(cache)
-      el
-    }
-  })
-}

src/sketch/lustre.gleam

@@ -0,0 +1,23 @@
+import sketch.{type Cache}
+import sketch/options.{type Options}
+import lustre.{type App}
+
+@external(javascript, "../sketch.ffi.mjs", "updateLustre")
+fn update_lustre(
+  app: App(a, b, c),
+  view_mapper: fn(fn(model) -> element) -> fn(model) -> element,
+) -> App(a, b, c)
+
+pub fn setup(options: Options) {
+  sketch.create_cache(options)
+}
+
+pub fn wrap(app: App(a, b, c), cache: Cache) {
+  use view <- update_lustre(app)
+  fn(model) {
+    sketch.prepare(cache)
+    let el = view(model)
+    sketch.render(cache)
+    el
+  }
+}