Update grille_pain for Sketch 4.0.0

Author: ghivert

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "proseWrap": "always"
+}

e2e/demo/gleam.toml

@@ -14,13 +14,12 @@ version = "1.0.0"
 # https://gleam.run/writing-gleam/gleam-toml/.
 
 [dependencies]
-gleam_stdlib = ">= 0.34.0 and < 2.0.0"
+gleam_stdlib = ">= 0.54.0 and < 1.0.0"
 grille_pain = {path = "../.."}
-lustre = ">= 4.4.3 and < 5.0.0"
-sketch = ">= 3.0.2 and < 4.0.0"
-sketch_lustre = ">= 1.0.1 and < 2.0.0"
-pprint = ">= 1.0.3 and < 2.0.0"
+lustre = ">= 4.6.3 and < 5.0.0"
+sketch = ">= 4.0.0 and < 5.0.0"
+sketch_lustre = ">= 2.0.0 and < 3.0.0"
 
 [dev-dependencies]
-gleeunit = ">= 1.0.0 and < 2.0.0"
-lustre_dev_tools = ">= 1.5.4 and < 2.0.0"
+gleeunit = ">= 1.3.0 and < 2.0.0"
+lustre_dev_tools = ">= 1.6.5 and < 2.0.0"

e2e/demo/manifest.toml

@@ -3,7 +3,7 @@ import gleam/list
 import gleam/pair
 import gleam/result
 import grille_pain
-import grille_pain/internals/view/colors
+import grille_pain/internals/view/theme
 import grille_pain/lustre/toast
 import grille_pain/toast/level
 import layout
@@ -35,10 +35,9 @@ pub type Msg {
 pub fn main() {
   let init = fn(_) { #(Model(timeout: 0, stickys: []), effect.none()) }
   let assert Ok(_) = grille_pain.simple()
-  let assert Ok(cache) = sketch.cache(strategy: sketch.Ephemeral)
+  let assert Ok(stylesheet) = sketch.stylesheet(strategy: sketch.Ephemeral)
   let assert Ok(_) =
-    view
-    |> sketch_lustre.compose(sketch_lustre.node(), _, cache)
+    view(_, stylesheet)
     |> lustre.application(init, update, _)
     |> lustre.start("#app", Nil)
 }
@@ -101,31 +100,31 @@ fn simple_toasts() {
     ]),
     layout.actions_wrapper([], [
       layout.toast_button(
-        colors.light,
+        theme.light,
         layout.palette.black,
         [event.on_click(DisplayBasicToast("Toast", toast.toast))],
         [html.text("Toast")],
       ),
       layout.toast_button(
-        colors.success,
+        theme.success,
         layout.palette.white,
         [event.on_click(DisplayBasicToast("Success", toast.success))],
         [html.text("Success")],
       ),
       layout.toast_button(
-        colors.info,
+        theme.info,
         layout.palette.white,
         [event.on_click(DisplayBasicToast("Info", toast.info))],
         [html.text("Info")],
       ),
       layout.toast_button(
-        colors.warning,
+        theme.warning,
         layout.palette.white,
         [event.on_click(DisplayBasicToast("Warning", toast.warning))],
         [html.text("Warning")],
       ),
       layout.toast_button(
-        colors.error,
+        theme.error,
         layout.palette.white,
         [event.on_click(DisplayBasicToast("Error", toast.error))],
         [html.text("Error")],
@@ -157,31 +156,31 @@ fn custom_toasts(model: Model) {
     ]),
     layout.actions_wrapper([], [
       layout.toast_button(
-        colors.light,
+        theme.light,
         layout.palette.black,
         [event.on_click(DisplayCustomToast(level.Standard))],
         [html.text("Toast")],
       ),
       layout.toast_button(
-        colors.success,
+        theme.success,
         layout.palette.white,
         [event.on_click(DisplayCustomToast(level.Success))],
         [html.text("Success")],
       ),
       layout.toast_button(
-        colors.info,
+        theme.info,
         layout.palette.white,
         [event.on_click(DisplayCustomToast(level.Info))],
         [html.text("Info")],
       ),
       layout.toast_button(
-        colors.warning,
+        theme.warning,
         layout.palette.white,
         [event.on_click(DisplayCustomToast(level.Warning))],
         [html.text("Warning")],
       ),
       layout.toast_button(
-        colors.error,
+        theme.error,
         layout.palette.white,
         [event.on_click(DisplayCustomToast(level.Error))],
         [html.text("Error")],
@@ -200,31 +199,31 @@ fn sticky_toasts() {
     ]),
     layout.actions_wrapper([], [
       layout.toast_button(
-        colors.light,
+        theme.light,
         layout.palette.black,
         [event.on_click(DisplayStickyToast(level.Standard))],
         [html.text("Toast")],
       ),
       layout.toast_button(
-        colors.success,
+        theme.success,
         layout.palette.white,
         [event.on_click(DisplayStickyToast(level.Success))],
         [html.text("Success")],
       ),
       layout.toast_button(
-        colors.info,
+        theme.info,
         layout.palette.white,
         [event.on_click(DisplayStickyToast(level.Info))],
         [html.text("Info")],
       ),
       layout.toast_button(
-        colors.warning,
+        theme.warning,
         layout.palette.white,
         [event.on_click(DisplayStickyToast(level.Warning))],
         [html.text("Warning")],
       ),
       layout.toast_button(
-        colors.error,
+        theme.error,
         layout.palette.white,
         [event.on_click(DisplayStickyToast(level.Error))],
         [html.text("Error")],
@@ -233,7 +232,7 @@ fn sticky_toasts() {
     html.br_([]),
     layout.actions_wrapper([], [
       layout.toast_button(
-        colors.error,
+        theme.error,
         layout.palette.white,
         [event.on_click(HideStickyToasts)],
         [html.text("Hide sticky toasts")],
@@ -242,7 +241,8 @@ fn sticky_toasts() {
   ])
 }
 
-fn view(model: Model) {
+fn view(model: Model, stylesheet: sketch.StyleSheet) {
+  use <- sketch_lustre.render(stylesheet, in: [sketch_lustre.node()])
   layout.body([], [
     layout.main([], [
       header(),

e2e/demo/src/demo.gleam

@@ -1,6 +1,6 @@
-import sketch as s
+import sketch/css
+import sketch/css/length.{px, vh}
 import sketch/lustre/element/html
-import sketch/size.{px, vh}
 
 pub type Palette {
   Palette(
@@ -35,85 +35,86 @@ pub const palette = Palette(
 pub fn body(attributes, children) {
   let font_family =
     "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif"
-  s.class([
-    s.color(palette.black),
-    s.font_family(font_family),
-    s.min_height(vh(100)),
-    s.margin(px(-10)),
-    s.background(palette.aged_plastic_yellow),
-    s.display("flex"),
-    s.flex_direction("column"),
-    s.justify_content("center"),
+  css.class([
+    css.color(palette.black),
+    css.font_family(font_family),
+    css.min_height(vh(100)),
+    css.margin(px(-10)),
+    css.background(palette.aged_plastic_yellow),
+    css.display("flex"),
+    css.flex_direction("column"),
+    css.justify_content("center"),
   ])
   |> html.div(attributes, children)
 }
 
 pub fn main(attributes, children) {
-  s.class([
-    s.padding(px(24)),
-    s.max_width(px(700)),
-    s.margin_("0 auto"),
-    s.display("flex"),
-    s.flex_direction("column"),
-    s.gap(px(48)),
+  css.class([
+    css.padding(px(24)),
+    css.max_width(px(700)),
+    css.margin_("0 auto"),
+    css.display("flex"),
+    css.flex_direction("column"),
+    css.gap(px(48)),
   ])
   |> html.main(attributes, children)
 }
 
 pub fn lucy(attributes) {
-  html.img(s.class([s.width(px(60))]), attributes)
+  html.img(css.class([css.width(px(60))]), attributes)
 }
 
 pub fn header_wrapper(attributes, children) {
-  s.class([s.display("flex"), s.gap(px(12)), s.align_items("center")])
+  css.class([css.display("flex"), css.gap(px(12)), css.align_items("center")])
   |> html.div(attributes, children)
 }
 
 pub fn title_wrapper(attributes, children) {
-  s.class([s.display("flex"), s.flex_direction("column"), s.gap(px(6))])
+  css.class([css.display("flex"), css.flex_direction("column"), css.gap(px(6))])
   |> html.div(attributes, children)
 }
 
 pub fn title(attributes, children) {
-  s.class([s.font_weight("600"), s.font_size(px(24))])
+  css.class([css.font_weight("600"), css.font_size(px(24))])
   |> html.div(attributes, children)
 }
 
 pub fn subtitle(attributes, children) {
-  s.class([s.font_weight("500"), s.color(palette.underwater_blue)])
+  css.class([css.font_weight("500"), css.color(palette.underwater_blue)])
   |> html.div(attributes, children)
 }
 
 pub fn actions_wrapper(attributes, children) {
-  html.div(s.class([s.display("flex"), s.gap(px(12))]), attributes, children)
+  css.class([css.display("flex"), css.gap(px(12))])
+  |> html.div(attributes, children)
 }
 
 pub fn toast_button(background, color, attributes, children) {
-  s.class([
-    s.font_family("inherit"),
-    s.cursor("pointer"),
-    s.appearance("none"),
-    s.background(background),
-    s.border("none"),
-    s.color(color),
-    s.font_size(px(20)),
-    s.padding_("12px 24px"),
-    s.border_radius(px(10)),
-    s.font_weight("600"),
-    s.box_shadow("2px 2px 2px 1px #bbb"),
-    s.transition(".3s box-shadow"),
-    s.active([s.box_shadow("inset 2px 2px 5px 1px #aaa")]),
+  css.class([
+    css.font_family("inherit"),
+    css.cursor("pointer"),
+    css.appearance("none"),
+    css.background(background),
+    css.border("none"),
+    css.color(color),
+    css.font_size(px(20)),
+    css.padding_("12px 24px"),
+    css.border_radius(px(10)),
+    css.font_weight("600"),
+    css.box_shadow("2px 2px 2px 1px #bbb"),
+    css.transition(".3s box-shadow"),
+    css.active([css.box_shadow("inset 2px 2px 5px 1px #aaa")]),
   ])
   |> html.button(attributes, children)
 }
 
 pub fn section(attributes, children) {
-  s.class([s.display("flex"), s.flex_direction("column"), s.gap(px(12))])
+  css.class([css.display("flex"), css.flex_direction("column"), css.gap(px(12))])
   |> html.section(attributes, children)
 }
 
 pub fn section_title(attributes, children) {
-  s.class([s.font_size(size.rem(1.05)), s.font_weight("600")])
+  css.class([css.font_size(length.rem(1.05)), css.font_weight("600")])
   |> html.h2(attributes, children)
 }
 

e2e/demo/src/layout.gleam

@@ -2,19 +2,20 @@ name = "grille_pain"
 target = "javascript"
 version = "1.1.0"
 
+gleam = ">= 1.8.0"
+
 description = "Toaster, made in lustre, for gleam"
 internal_modules = ["grille_pain/internals", "grille_pain/internals/*"]
 licences = ["MIT"]
 links = [{title = "Sponsor", href = "https://github.com/sponsors/ghivert"}]
 repository = {type = "github", user = "ghivert", repo = "grille-pain"}
 
 [dependencies]
-birl = ">= 1.6.1 and < 2.0.0"
-gleam_stdlib = ">= 0.36.0 and < 1.0.0"
-lustre = ">= 4.4.4 and < 5.0.0"
-sketch = ">= 3.0.2 and < 4.0.0"
-sketch_lustre = ">= 1.0.0 and < 2.0.0"
-plinth = ">= 0.4.12 and < 1.0.0"
+birl = ">= 1.8.0 and < 2.0.0"
+gleam_stdlib = ">= 0.54.0 and < 1.0.0"
+lustre = ">= 4.6.3 and < 5.0.0"
+sketch = ">= 4.0.0 and < 5.0.0"
+sketch_lustre = ">= 2.0.0 and < 3.0.0"
 
 [dev-dependencies]
 gleeunit = ">= 1.1.2 and < 2.0.0"

gleam.toml

@@ -2,27 +2,24 @@
 # You typically do not need to edit this file
 
 packages = [
-  { name = "birl", version = "1.7.1", build_tools = ["gleam"], requirements = ["gleam_stdlib", "ranger"], otp_app = "birl", source = "hex", outer_checksum = "5C66647D62BCB11FE327E7A6024907C4A17954EF22865FE0940B54A852446D01" },
-  { 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.28.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "BE551521F708DCE5CB954AFBBDF08519C1C44986521FD40753608825F48FFA9E" },
-  { 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 = "2.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "CB10B0E7BF44282FB25162F1A24C1A025F6B93E777CCF238C4017E4EEF2CDE97" },
-  { name = "gleam_otp", version = "0.13.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "F7EA44C81679B2A6032FF1B3851F0EFB43F4F1F1CAC616CB7F4A18497F39FAB9" },
-  { name = "gleam_stdlib", version = "0.41.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1B2F80CB1B66B027E3198A2FF71EF3F2F31DF89ED97AD606F25FD387A4C3C1EF" },
-  { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
-  { name = "lustre", version = "4.6.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "486C3CFBD126939CAD2CA8B92A979A2DAADA5BABAA62BF2B163CD21E257BD4A1" },
-  { name = "plinth", version = "0.5.0", build_tools = ["gleam"], requirements = ["conversation", "gleam_javascript", "gleam_json", "gleam_stdlib"], otp_app = "plinth", source = "hex", outer_checksum = "9B0ECC110316F55432DC544847B7F4E98B73D3F598CB3EE844570FB1EFB3F8BE" },
-  { name = "ranger", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "ranger", source = "hex", outer_checksum = "1566C272B1D141B3BBA38B25CB761EF56E312E79EC0E2DFD4D3C19FB0CC1F98C" },
-  { name = "sketch", version = "3.1.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "6CBFAAA92C37F1F44FC552FD9E9DAC34598BDEB5F873B6191C696DC67D85AD00" },
-  { name = "sketch_lustre", version = "1.0.3", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "plinth", "sketch"], otp_app = "sketch_lustre", source = "hex", outer_checksum = "DD5437B10D4BB8AB45A19820B17883188B8568B6ED7885D7D073A983F4984E79" },
+  { name = "birl", version = "1.8.0", build_tools = ["gleam"], requirements = ["gleam_regexp", "gleam_stdlib", "ranger"], otp_app = "birl", source = "hex", outer_checksum = "2AC7BA26F998E3DFADDB657148BD5DDFE966958AD4D6D6957DD0D22E5B56C400" },
+  { name = "gleam_erlang", version = "0.34.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "0C38F2A128BAA0CEF17C3000BD2097EB80634E239CE31A86400C4416A5D0FDCC" },
+  { name = "gleam_json", version = "2.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "C55C5C2B318533A8072D221C5E06E5A75711C129E420DD1CE463342106012E5D" },
+  { name = "gleam_otp", version = "0.16.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "50DA1539FC8E8FA09924EB36A67A2BBB0AD6B27BCDED5A7EF627057CF69D035E" },
+  { name = "gleam_regexp", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_regexp", source = "hex", outer_checksum = "7F5E0C0BBEB3C58E57C9CB05FA9002F970C85AD4A63BA1E55CBCB35C15809179" },
+  { name = "gleam_stdlib", version = "0.54.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "723BA61A2BAE8D67406E59DD88CEA1B3C3F266FC8D70F64BE9FEC81B4505B927" },
+  { name = "gleam_yielder", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_yielder", source = "hex", outer_checksum = "8E4E4ECFA7982859F430C57F549200C7749823C106759F4A19A78AEA6687717A" },
+  { name = "gleeunit", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "0E6C83834BA65EDCAAF4FE4FB94AC697D9262D83E6F58A750D63C9F6C8A9D9FF" },
+  { name = "lustre", version = "4.6.3", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], otp_app = "lustre", source = "hex", outer_checksum = "BDF833368F6C8F152F948D5B6A79866E9881CB80CB66C0685B3327E7DCBFB12F" },
+  { name = "ranger", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "gleam_yielder"], otp_app = "ranger", source = "hex", outer_checksum = "C8988E8F8CDBD3E7F4D8F2E663EF76490390899C2B2885A6432E942495B3E854" },
+  { name = "sketch", version = "4.0.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "sketch", source = "hex", outer_checksum = "AF090E77F6FD02467DABD8F0EDC1C329482853698FE6DB33B86D7D05C1BE32F4" },
+  { name = "sketch_lustre", version = "2.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "lustre", "sketch"], otp_app = "sketch_lustre", source = "hex", outer_checksum = "7F8CE798F2D3989D45DA4D4EDF0ABCE7EB84F5E6236A7C2F5A3AE8095FC9DDFF" },
 ]
 
 [requirements]
-birl = { version = ">= 1.6.1 and < 2.0.0" }
-gleam_stdlib = { version = ">= 0.36.0 and < 1.0.0" }
+birl = { version = ">= 1.8.0 and < 2.0.0" }
+gleam_stdlib = { version = ">= 0.54.0 and < 1.0.0" }
 gleeunit = { version = ">= 1.1.2 and < 2.0.0" }
-lustre = { version = ">= 4.4.4 and < 5.0.0" }
-plinth = { version = ">= 0.4.12 and < 1.0.0" }
-sketch = { version = ">= 3.0.2 and < 4.0.0" }
-sketch_lustre = { version = ">= 1.0.0 and < 2.0.0" }
+lustre = { version = ">= 4.6.3 and < 5.0.0" }
+sketch = { version = ">= 4.0.0 and < 5.0.0" }
+sketch_lustre = { version = ">= 2.0.0 and < 3.0.0" }