Use indirection to properly resolve current stylesheet

Author: ghivert

e2e/server_components/src/server_components.gleam

@@ -23,11 +23,6 @@ import sketch/lustre/experimental as sketch_lustre
 // MAIN ------------------------------------------------------------------------
 
 pub fn main() {
-  let assert Ok(stylesheet) = sketch.stylesheet(sketch.Persistent)
-  let assert Ok(_) =
-    stylesheet
-    |> sketch.global(host_class())
-    |> sketch_lustre.setup
   let assert Ok(_) =
     fn(request: Request(Connection)) -> Response(ResponseData) {
       // In order to get started with server components, we'll need to handle at
@@ -159,7 +154,12 @@ type CounterSocketInit =
   #(CounterSocket, Option(Selector(CounterSocketMessage)))
 
 fn init_counter_socket(_) -> CounterSocketInit {
-  let counter = shared_view.app()
+  let assert Ok(stylesheet) = sketch.stylesheet(sketch.Persistent)
+  let assert Ok(_) =
+    stylesheet
+    |> sketch.global(host_class())
+    |> sketch_lustre.setup
+  let counter = shared_view.app(stylesheet)
   // Rather than calling `lustre.start` as we do in the client, we construct the
   // Lustre runtime by calling `lustre.start_server_component`. This is the same
   // `Runtime` type we get from `lustre.start` but this function doesn't need a

e2e/shared_view/src/shared_view.gleam

@@ -3,6 +3,7 @@ import gleam/int
 import lustre
 import lustre/attribute as a
 import lustre/event as e
+import sketch
 import sketch/lustre/experimental as sketch_lustre
 import sketch/lustre/experimental/element/html as h
 import styles
@@ -16,17 +17,17 @@ pub type Msg {
 }
 
 /// Defines the standard app, used everywhere in Lustre applications.
-pub fn app() {
+pub fn app(stylesheet: sketch.StyleSheet) {
   use model <- lustre.simple(init, update)
-  use <- sketch_lustre.render(in: [sketch_lustre.node()])
+  use <- sketch_lustre.render(stylesheet:, in: [sketch_lustre.node()])
   view(model)
 }
 
 /// Function used specifically in SSR, in order to send the correct HTML
 /// before hydrating it. It can also be an example of HTML server-side
 /// generation, Sketch improved.
-pub fn ssr(model: Model) {
-  use <- sketch_lustre.render([sketch_lustre.node()])
+pub fn ssr(model: Model, stylesheet: sketch.StyleSheet) {
+  use <- sketch_lustre.render(stylesheet:, in: [sketch_lustre.node()])
   h.html([], [
     h.head([], [
       h.link([a.rel("stylesheet"), a.href(styles.fonts)]),

e2e/ssr/src/ssr.gleam

@@ -11,15 +11,15 @@ pub fn main() {
   let assert Ok(stylesheet) = sketch.stylesheet(sketch.Persistent)
   let assert Ok(_) = sketch_lustre.setup(stylesheet)
   let assert Ok(_) =
-    fn(_) { greet() }
+    fn(_) { greet(stylesheet) }
     |> mist.new()
     |> mist.port(1234)
     |> mist.start_http()
   process.sleep_forever()
 }
 
-fn greet() -> Response(ResponseData) {
-  shared_view.ssr(0)
+fn greet(stylesheet: sketch.StyleSheet) -> Response(ResponseData) {
+  shared_view.ssr(0, stylesheet)
   |> element.to_document_string()
   |> bytes_tree.from_string()
   |> mist.Bytes()

e2e/web_application/src/web_application.gleam

@@ -6,6 +6,6 @@ import sketch/lustre/experimental as sketch_lustre
 pub fn main() {
   let assert Ok(stylesheet) = sketch.stylesheet(sketch.Persistent)
   let assert Ok(_) = sketch_lustre.setup(stylesheet)
-  shared_view.app()
+  shared_view.app(stylesheet)
   |> lustre.start("#app", Nil)
 }

sketch/src/sketch.ffi.mjs

@@ -0,0 +1,4 @@
+let id = 0
+export function uniqueId() {
+  return id++
+}

sketch/src/sketch.gleam

@@ -1,6 +1,6 @@
 @target(erlang)
 import gleam/result
-import sketch/css.{type AtRule, type Class, type Global}
+import sketch/css.{type AtRule, type Class}
 import sketch/error
 @target(erlang)
 import sketch/internals/cache/actor
@@ -10,12 +10,12 @@ import sketch/internals/cache/cache
 @target(javascript)
 /// Manages the styles. Can be instanciated with [`stylesheet`](#stylesheet).
 pub opaque type StyleSheet {
-  StyleSheet(cache: cache.Cache, is_persistent: Bool)
+  StyleSheet(cache: cache.Cache, id: Int, is_persistent: Bool)
 }
 
 @target(erlang)
 pub opaque type StyleSheet {
-  StyleSheet(cache: actor.Cache)
+  StyleSheet(cache: actor.Cache, id: Int)
 }
 
 @target(javascript)
@@ -41,62 +41,35 @@ pub fn class_name(class: Class, stylesheet: StyleSheet) -> #(StyleSheet, String)
 @target(erlang)
 pub fn class_name(class: Class, stylesheet: StyleSheet) -> #(StyleSheet, String) {
   let #(cache, class_name) = actor.class_name(class, stylesheet.cache)
-  #(StyleSheet(cache:), class_name)
+  #(StyleSheet(..stylesheet, cache:), class_name)
 }
 
 @target(javascript)
 /// Pushes an `@rule` in the StyleSheet, to get it bundled in the outputted CSS.
 /// It returns the StyleSheet with the rule added.
-@deprecated("Use `at_rule_` instead. `at_rule` will be replaced in the next version.")
 pub fn at_rule(rule: AtRule, stylesheet: StyleSheet) -> StyleSheet {
   let cache = cache.at_rule(rule, stylesheet.cache)
   StyleSheet(..stylesheet, cache:)
 }
 
 @target(erlang)
-@deprecated("Use `at_rule_` instead. `at_rule` will be replaced in the next version.")
 pub fn at_rule(rule: AtRule, stylesheet: StyleSheet) -> StyleSheet {
   let cache = actor.at_rule(rule, stylesheet.cache)
-  StyleSheet(cache:)
+  StyleSheet(..stylesheet, cache:)
 }
 
 @target(javascript)
 /// Pushes an `@rule` in the StyleSheet, to get it bundled in the outputted CSS.
 /// It returns the StyleSheet with the rule added.
-pub fn at_rule_(stylesheet: StyleSheet, rule: AtRule) -> StyleSheet {
-  let cache = cache.at_rule(rule, stylesheet.cache)
-  StyleSheet(..stylesheet, cache:)
-}
-
-@target(erlang)
-pub fn at_rule_(stylesheet: StyleSheet, rule: AtRule) -> StyleSheet {
-  let cache = actor.at_rule(rule, stylesheet.cache)
-  StyleSheet(cache:)
-}
-
-@target(javascript)
-/// Injects a `Global` class in the StyleSheet. Use it to apply some style on
-/// `body` for example.
-///
-/// ```gleam
-/// let assert Ok(stylesheet) = sketch.stylesheet(sketch.Persistent)
-/// stylesheet
-/// |> sketch.global({
-///   css.global("body", [
-///     css.margin(px(0)),
-///     css.backkground("red"),
-///   ])
-/// })
-/// ```
-pub fn global(stylesheet: StyleSheet, global: Global) -> StyleSheet {
+pub fn global(stylesheet: StyleSheet, global: css.Global) -> StyleSheet {
   let #(cache, _) = cache.class_name(global.class, stylesheet.cache)
   StyleSheet(..stylesheet, cache:)
 }
 
 @target(erlang)
-pub fn global(stylesheet: StyleSheet, global: Global) -> StyleSheet {
+pub fn global(stylesheet: StyleSheet, global: css.Global) -> StyleSheet {
   let #(cache, _) = actor.class_name(global.class, stylesheet.cache)
-  StyleSheet(cache:)
+  StyleSheet(..stylesheet, cache:)
 }
 
 /// Strategy for the StyleSheet. Two strategies are available as of now: ephemeral
@@ -118,19 +91,25 @@ pub type Strategy {
 pub fn stylesheet(
   strategy strategy: Strategy,
 ) -> Result(StyleSheet, error.SketchError) {
+  let id = unique_id()
   Ok(case strategy {
-    Ephemeral -> StyleSheet(cache: cache.new(), is_persistent: False)
-    Persistent -> StyleSheet(cache: cache.new(), is_persistent: True)
+    Ephemeral -> StyleSheet(cache: cache.new(), id:, is_persistent: False)
+    Persistent -> StyleSheet(cache: cache.new(), id:, is_persistent: True)
   })
 }
 
 @target(erlang)
 pub fn stylesheet(
   strategy strategy: Strategy,
 ) -> Result(StyleSheet, error.SketchError) {
-  case strategy {
+  let id = unique_id()
+  use cache <- result.map(case strategy {
     Ephemeral -> Ok(actor.ephemeral())
     Persistent -> actor.persistent()
-  }
-  |> result.map(StyleSheet)
+  })
+  StyleSheet(cache:, id:)
 }
+
+@external(erlang, "erlang", "unique_integer")
+@external(javascript, "./sketch.ffi.mjs", "uniqueId")
+fn unique_id() -> Int

sketch_lustre_experimental/src/sketch/lustre/experimental.gleam

@@ -61,9 +61,11 @@ pub fn setup(stylesheet: sketch.StyleSheet) -> Result(sketch.StyleSheet, Nil) {
 /// }
 /// ```
 pub fn render(
+  stylesheet stylesheet: sketch.StyleSheet,
   in outputs: List(Container),
   after view: fn() -> el.Element(msg),
 ) -> el.Element(msg) {
+  let assert Ok(_) = global.set_current_stylesheet(stylesheet)
   let new_view = view()
   case global.get_stylesheet() {
     Error(_) -> new_view

sketch_lustre_experimental/src/sketch/lustre/experimental/element.gleam

@@ -32,10 +32,8 @@ pub fn element(
   attributes attributes: List(Attribute(msg)),
   children children: List(el.Element(msg)),
 ) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   el.element(tag, attributes, children)
 }
 
@@ -56,10 +54,8 @@ pub fn namespaced(
   attributes attributes: List(Attribute(msg)),
   children children: List(el.Element(msg)),
 ) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   el.namespaced(tag, namespace, attributes, children)
 }
 
@@ -77,16 +73,13 @@ const error_msg = "Stylesheet is not initialized in your application. Please, in
 
 /// Generate a class name from a `Class`, using the `StyleSheet` injected
 /// in the environment.
-pub fn class_name(class: css.Class) -> Result(String, Nil) {
+pub fn class_name(class: css.Class) -> String {
   case global.get_stylesheet() {
-    Error(_) -> {
-      io.println(error_msg)
-      Error(Nil)
-    }
+    Error(_) -> panic as error_msg
     Ok(stylesheet) -> {
       let #(stylesheet, class_name) = sketch.class_name(class, stylesheet)
       let _ = global.set_stylesheet(stylesheet)
-      Ok(class_name)
+      class_name
     }
   }
 }

sketch_lustre_experimental/src/sketch/lustre/experimental/element/keyed.gleam

@@ -14,10 +14,8 @@ pub fn element(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.element(tag, attributes, children)
 }
 
@@ -38,10 +36,8 @@ pub fn namespaced(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.namespaced(namespace, tag, attributes, children)
 }
 
@@ -64,10 +60,8 @@ pub fn ul(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.element("ul", attributes, children)
 }
 
@@ -85,10 +79,8 @@ pub fn ol(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.element("ol", attributes, children)
 }
 
@@ -106,10 +98,8 @@ pub fn div(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.element("div", attributes, children)
 }
 
@@ -127,10 +117,8 @@ pub fn tbody(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.element("tbody", attributes, children)
 }
 
@@ -148,10 +136,8 @@ pub fn dl(
   attributes: List(Attribute(msg)),
   children: List(#(String, Element(msg))),
 ) -> Element(msg) {
-  let attributes = case class_name(class) {
-    Ok(class_name) -> [attribute.class(class_name), ..attributes]
-    Error(_) -> attributes
-  }
+  let class_name = class_name(class)
+  let attributes = [attribute.class(class_name), ..attributes]
   keyed.element("dl", attributes, children)
 }
 

sketch_lustre_experimental/src/sketch/lustre/experimental/internals/global.ffi.mjs

@@ -1,13 +1,20 @@
 import * as gleam from '../../../../gleam.mjs'
 
-let _stylesheet = null
+let currentStylesheet = null
+const stylesheets = {}
 
 export function setStyleSheet(stylesheet) {
-  _stylesheet = stylesheet
+  stylesheets[stylesheet.id] = stylesheet
+  return new gleam.Ok(stylesheet)
+}
+
+export function setCurrentStylesheet(stylesheet) {
+  currentStylesheet = stylesheet.id
   return new gleam.Ok(stylesheet)
 }
 
 export function getStyleSheet() {
-  if (!_stylesheet) return new gleam.Error()
-  return new gleam.Ok(_stylesheet)
+  const stylesheet = stylesheets[currentStylesheet]
+  if (!stylesheet) return new gleam.Error()
+  return new gleam.Ok(stylesheet)
 }