Use new Sketch and remove deprecated API

Author: ghivert

.github/workflows/test.yml

@@ -14,9 +14,9 @@ jobs:
       - uses: actions/checkout@v3
       - uses: erlef/setup-beam@v1
         with:
-          otp-version: "26.0.2"
-          gleam-version: "1.1.0"
-          rebar3-version: "3"
+          otp-version: '26.0.2'
+          gleam-version: '1.4.0'
+          rebar3-version: '3'
           # elixir-version: "1.15.4"
       - run: gleam deps download
       - run: gleam test

gleam.toml

@@ -2,7 +2,9 @@
 # https://gleam.run/writing-gleam/gleam-toml/.
 name = "tardis"
 target = "javascript"
-version = "0.1.0"
+version = "0.2.0"
+
+gleam = ">= 1.4.0"
 
 description = "Time traveller debugger, tailor-made for Lustre"
 internal_modules = ["tardis/internals", "tardis/internals/*"]
@@ -11,10 +13,11 @@ links = [{title = "Sponsor", href = "https://github.com/sponsors/ghivert"}]
 repository = {type = "github", user = "ghivert", repo = "tardis"}
 
 [dependencies]
-gleam_stdlib = ">= 0.36.0 and < 1.0.0"
-lustre = ">= 4.2.0 and < 5.0.0"
-plinth = ">= 0.2.0 and < 1.0.0"
-sketch = ">= 2.0.0 and < 3.0.0"
+gleam_stdlib = ">= 0.40.0 and < 1.0.0"
+lustre = ">= 4.3.1 and < 5.0.0"
+plinth = ">= 0.4.14 and < 1.0.0"
+sketch = ">= 3.1.0 and < 4.0.0"
+sketch_lustre = ">= 1.0.1 and < 2.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.1.2 and < 2.0.0"

manifest.toml

@@ -2,21 +2,25 @@
 # You typically do not need to edit this file
 
 packages = [
-  { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" },
-  { name = "gleam_javascript", version = "0.8.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "14D5B7E1A70681E0776BF0A0357F575B822167960C844D3D3FA114D3A75F05A8" },
+  { name = "conversation", version = "1.4.3", build_tools = ["gleam"], requirements = ["gleam_http", "gleam_javascript", "gleam_stdlib"], otp_app = "conversation", source = "hex", outer_checksum = "908B46F60444442785A495197D482558AD8B849C3714A38FAA1940358CC8CCCD" },
+  { name = "gleam_erlang", version = "0.27.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "DE468F676D71B313C6C8C5334425CFCF827837333F8AB47B64D8A6D7AA40185D" },
+  { name = "gleam_http", version = "3.7.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "EA66440C2269F7CED0F6845E5BD0DB68095775D627FA709A841CA78A398D6D56" },
+  { name = "gleam_javascript", version = "0.13.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "F98328FCF573DA6F3A35D7F6CB3F9FF19FD5224CCBA9151FCBEAA0B983AF2F58" },
   { name = "gleam_json", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "thoas"], otp_app = "gleam_json", source = "hex", outer_checksum = "9063D14D25406326C0255BDA0021541E797D8A7A12573D849462CAFED459F6EB" },
-  { name = "gleam_otp", version = "0.10.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "0B04FE915ACECE539B317F9652CAADBBC0F000184D586AAAF2D94C100945D72B" },
-  { name = "gleam_stdlib", version = "0.37.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "5398BD6C2ABA17338F676F42F404B9B7BABE1C8DC7380031ACB05BBE1BCF3742" },
-  { name = "gleeunit", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "72CDC3D3F719478F26C4E2C5FED3E657AC81EC14A47D2D2DEBB8693CA3220C3B" },
-  { name = "lustre", version = "4.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "258F876CD7AB12C2C773F1A30F76DFC0A0ED989B720070DF32FC0717A6A0E60C" },
-  { name = "plinth", version = "0.2.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "83211E672D83F3CE14681D0ECD3AD883EE7588E423E7C9DDDB460014AD60AC24" },
-  { name = "sketch", version = "2.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "lustre", "plinth"], otp_app = "sketch", source = "hex", outer_checksum = "47175BD019A00CFEAAF2851830825544E24ABA58168083A1D219FA8E06EF6713" },
-  { name = "thoas", version = "1.2.0", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "540C8CB7D9257F2AD0A14145DC23560F91ACDCA995F0CCBA779EB33AF5D859D1" },
+  { name = "gleam_otp", version = "0.12.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BFACC1513410DF5A1617169A9CD7EA334973AC71D860A17574BA7B2EADD89A6F" },
+  { name = "gleam_stdlib", version = "0.40.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86606B75A600BBD05E539EB59FABC6E307EEEA7B1E5865AFB6D980A93BCB2181" },
+  { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
+  { name = "lustre", version = "4.5.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "15C0597E97FBC4D095B6DDFAB849740EB9062828D55A071990A957C6564ADEF3" },
+  { name = "plinth", version = "0.4.14", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "1954376A2E19735B251F73B33C5D119AEB838BD589475884710B224E402F1546" },
+  { name = "sketch", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "F162070BCCF8BEF28C9520E80501565403E681D9E3F80844EC5ED307A2E4ADDF" },
+  { name = "sketch_lustre", version = "1.0.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "sketch_lustre", source = "hex", outer_checksum = "9F3952F3574EE3D3269287D010AC9B131E48C8F2933AA6179D58851A866FEA3D" },
+  { name = "thoas", version = "1.2.1", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "E38697EDFFD6E91BD12CEA41B155115282630075C2A727E7A6B2947F5408B86A" },
 ]
 
 [requirements]
-gleam_stdlib = { version = ">= 0.36.0 and < 1.0.0" }
+gleam_stdlib = { version = ">= 0.40.0 and < 1.0.0" }
 gleeunit = { version = ">= 1.1.2 and < 2.0.0" }
-lustre = { version = ">= 4.2.0 and < 5.0.0" }
-plinth = { version = ">= 0.2.0 and < 1.0.0" }
-sketch = { version = ">= 2.0.0 and < 3.0.0" }
+lustre = { version = ">= 4.3.1 and < 5.0.0" }
+plinth = { version = ">= 0.4.14 and < 1.0.0" }
+sketch = { version = ">= 3.1.0 and < 4.0.0" }
+sketch_lustre = { version = ">= 1.0.1 and < 2.0.0" }

src/tardis.ffi.mjs

@@ -73,7 +73,7 @@ function inspectCustomType(record) {
       return isNaN(parseInt(label))
         ? [new Some(label + ': '), value]
         : [new None(), value]
-    })
+    }),
   )
   return new DataCustomType(record.constructor.name, props)
 }
@@ -88,7 +88,7 @@ export function inspectBitArray(bits) {
 
 export function inspectUtfCodepoint(codepoint) {
   return new DataUtfCodepoint(
-    `//utfcodepoint(${String.fromCodePoint(codepoint.value)})`
+    `//utfcodepoint(${String.fromCodePoint(codepoint.value)})`,
   )
 }
 
@@ -200,3 +200,7 @@ export function updateLustre(application, initMapper, updateMapper) {
     init: initMapper(application.init),
   })
 }
+
+export function coerce(a) {
+  return a
+}

src/tardis.gleam

@@ -39,7 +39,6 @@
 //// ```
 
 import gleam/dynamic.{type Dynamic}
-import gleam/function
 import gleam/int
 import gleam/io
 import gleam/list
@@ -49,11 +48,11 @@ import gleam/result
 import lustre.{type Action, type App}
 import lustre/attribute as a
 import lustre/effect
-import lustre/element as el
-import lustre/element/html as h
 import lustre/event
-import sketch/lustre as sketch
-import sketch/options as sketch_options
+import sketch
+import sketch/lustre as sl
+import sketch/lustre/element as el
+import sketch/lustre/element/html as h
 import tardis/error
 import tardis/internals/data/colors
 import tardis/internals/data/debugger as debugger_
@@ -124,21 +123,13 @@ fn start_lustre(lustre_root, application) {
   |> result.map_error(error.LustreError)
 }
 
-fn start_sketch(root) {
-  // Attach the StyleSheet to the Shadow DOM.
-  let setup = sketch.setup(sketch_options.shadow(root))
-  use error <- result.map_error(setup)
-  io.debug("Unable to start sketch. Check your configuration.")
-  io.debug(error)
-  error.SketchError(error)
-}
-
 /// Creates the tardis. Should be run once, at the start of the application.
 /// It can be skipped when using [`single`](#single).
 pub fn setup() {
   let #(shadow_root, lustre_root) = setup.mount_shadow_node()
-  start_sketch(shadow_root)
-  |> result.map(sketch.compose(view, _))
+
+  sketch.cache(strategy: sketch.Ephemeral)
+  |> result.map(sl.compose(sl.shadow(shadow_root), view, _))
   |> result.map(lustre.application(init, update, _))
   |> result.try(start_lustre(lustre_root, _))
   |> result.map(fn(dispatch) { Tardis(dispatch) })
@@ -184,7 +175,7 @@ fn update(model: Model, msg: Msg) {
           let fst_step = list.first(d.steps)
           use step <- result.try(fst_step)
           d.dispatcher
-          |> option.map(function.apply1(_, step.model))
+          |> option.map(fn(d) { d(step.model) })
           |> option.to_result(Nil)
         })
         |> effect.batch()
@@ -212,7 +203,7 @@ fn update(model: Model, msg: Msg) {
         |> debugger_.get(debugger_)
         |> result.try(fn(d) {
           d.dispatcher
-          |> option.map(function.apply1(_, item.model))
+          |> option.map(fn(d) { d(item.model) })
           |> option.to_result(Nil)
         })
         |> result.unwrap(effect.none())
@@ -262,19 +253,19 @@ fn color_scheme_selector(model: Model) {
   case model.opened {
     False -> el.none()
     True ->
-      h.select([event.on_input(on_cs_input), s.select_cs()], {
+      h.select(s.select_cs(), [event.on_input(on_cs_input)], {
         use item <- list.map(colors.themes())
         let as_s = colors.cs_to_string(item)
         let selected = model.color_scheme == item
-        h.option([a.value(as_s), a.selected(selected)], as_s)
+        h.option_([a.value(as_s), a.selected(selected)], [h.text(as_s)])
       })
   }
 }
 
 fn restart_button(model: Model) {
   case model.frozen, model.selected_debugger {
     True, Some(debugger_) ->
-      h.button([s.select_cs(), event.on_click(msg.Restart(debugger_))], [
+      h.button(s.select_cs(), [event.on_click(msg.Restart(debugger_))], [
         h.text("Restart"),
       ])
     _, _ -> el.none()
@@ -286,31 +277,41 @@ fn view(model: Model) {
   let #(panel, header, button_txt) = select_panel_options(model.opened)
   let frozen_panel = case model.frozen {
     True -> s.frozen_panel()
-    False -> a.none()
+    False -> sketch.class([])
   }
   let debugger_ =
     model.selected_debugger
     |> option.unwrap("")
     |> debugger_.get(model.debuggers, _)
-  h.div([a.class("debugger_"), color_scheme_class, frozen_panel], [
-    h.div([panel], [
-      h.div([header], [
-        h.div([s.flex(), s.debugger_title()], [
-          h.div([], [h.text("Debugger")]),
+  let panel_class =
+    [color_scheme_class, frozen_panel]
+    |> list.map(sketch.compose)
+    |> sketch.class
+  let title_class =
+    [s.flex(), s.debugger_title()]
+    |> list.map(sketch.compose)
+    |> sketch.class
+  h.div(panel_class, [a.class("debugger_")], [
+    h.div(panel, [], [
+      h.div(header, [], [
+        h.div(title_class, [], [
+          h.div_([], [h.text("Debugger")]),
           color_scheme_selector(model),
           restart_button(model),
         ]),
         case debugger_ {
           Error(_) -> el.none()
           Ok(debugger_) ->
-            h.div([s.actions_section()], [
-              h.select([event.on_input(on_debugger_input), s.select_cs()], {
+            h.div(s.actions_section(), [], [
+              h.select(s.select_cs(), [event.on_input(on_debugger_input)], {
                 use #(item, _) <- list.map(model.keep_active_debuggers(model))
                 let selected = model.selected_debugger == Some(item)
-                h.option([a.value(item), a.selected(selected)], item)
+                h.option_([a.value(item), a.selected(selected)], [h.text(item)])
               }),
-              h.div([], [h.text(int.to_string(debugger_.count - 1) <> " Steps")]),
-              h.button([s.toggle_button(), event.on_click(msg.ToggleOpen)], [
+              h.div_([], [
+                h.text(int.to_string(debugger_.count - 1) <> " Steps"),
+              ]),
+              h.button(s.toggle_button(), [event.on_click(msg.ToggleOpen)], [
                 h.text(button_txt),
               ]),
             ])

src/tardis/internals/data/colors.gleam

@@ -194,7 +194,6 @@ pub fn ayu_dark_class() {
     sketch.property("--regex", ayu_dark.regex),
     sketch.property("--date", ayu_dark.date),
   ])
-  |> sketch.to_lustre()
 }
 
 pub fn ayu_light_class() {
@@ -219,7 +218,6 @@ pub fn ayu_light_class() {
     sketch.property("--regex", ayu_light.regex),
     sketch.property("--date", ayu_light.date),
   ])
-  |> sketch.to_lustre()
 }
 
 pub fn catpuccin_light_class() {
@@ -244,7 +242,6 @@ pub fn catpuccin_light_class() {
     sketch.property("--regex", catpuccin_light.regex),
     sketch.property("--date", catpuccin_light.date),
   ])
-  |> sketch.to_lustre()
 }
 
 pub fn catpuccin_frappe_class() {
@@ -269,7 +266,6 @@ pub fn catpuccin_frappe_class() {
     sketch.property("--regex", catpuccin_frappe.regex),
     sketch.property("--date", catpuccin_frappe.date),
   ])
-  |> sketch.to_lustre()
 }
 
 pub fn gleam_class() {
@@ -294,7 +290,6 @@ pub fn gleam_class() {
     sketch.property("--regex", gleam.regex),
     sketch.property("--date", gleam.date),
   ])
-  |> sketch.to_lustre()
 }
 
 pub fn choose_color_scheme() {

src/tardis/internals/setup.gleam

@@ -15,6 +15,9 @@ pub type Middleware =
 @external(javascript, "../../tardis.ffi.mjs", "addCustomStyles")
 fn add_custom_styles(content: String) -> Nil
 
+@external(javascript, "../../tardis.ffi.mjs", "coerce")
+fn coerce(content: Dynamic) -> a
+
 pub fn instanciate_shadow_root(element: Element) {
   // Instanciate the Shadow DOM wrapper.
   let div = document.create_element("div")
@@ -39,7 +42,7 @@ pub fn mount_shadow_node() {
   let shadow_root = instanciate_shadow_root(lustre_root_)
   // Trick to fool lustre application.
   // Please children, don't do this at home.
-  let lustre_root: String = dynamic.unsafe_coerce(dynamic.from(lustre_root_))
+  let lustre_root: String = coerce(dynamic.from(lustre_root_))
   #(shadow_root, lustre_root)
 }
 
@@ -84,17 +87,14 @@ pub fn create_model_updater(
 ) {
   fn(dispatcher: Dynamic) {
     fn(model: Dynamic) -> Effect(Msg) {
-      effect.from(fn(_) {
-        model
-        |> dynamic.from()
-        |> runtime.ForceModel()
-        |> runtime.Debug()
-        |> dynamic.unsafe_coerce(dispatcher)
-      })
+      use _ <- effect.from
+      let model = dynamic.from(model)
+      let msg = runtime.Debug(runtime.ForceModel(model))
+      coerce(dispatcher)(msg)
     }
     |> msg.AddApplication(application, _)
-    |> lustre.dispatch()
-    |> dispatch()
+    |> lustre.dispatch
+    |> dispatch
   }
 }
 
@@ -103,8 +103,7 @@ pub fn step_adder(
   name: String,
 ) {
   fn(model, msg) {
-    model
-    |> msg.AddStep(name, _, msg)
+    msg.AddStep(name, model, msg)
     |> lustre.dispatch()
     |> dispatch()
   }