From 8cf74e58b10a551603dfb0aeb108e79faa9b74fa Mon Sep 17 00:00:00 2001
From: Guillaume Hivert <hivert.is.coming@gmail.com>
Date: Wed, 6 Nov 2024 18:13:34 +0100
Subject: [PATCH] Remove Fragment from sketch_lustre

---
 sketch_lustre/src/sketch/internals/ffi.gleam  | 20 +++++++++++++++-
 sketch_lustre/src/sketch/lustre.gleam         | 20 ++++------------
 sketch_lustre/src/sketch/lustre/element.gleam | 24 ++-----------------
 3 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/sketch_lustre/src/sketch/internals/ffi.gleam b/sketch_lustre/src/sketch/internals/ffi.gleam
index ff64f28..fe38df6 100644
--- a/sketch_lustre/src/sketch/internals/ffi.gleam
+++ b/sketch_lustre/src/sketch/internals/ffi.gleam
@@ -1,3 +1,6 @@
+import gleam/dynamic.{type Dynamic}
+import plinth/browser/shadow.{type ShadowRoot}
+
 pub opaque type Mutable(a) {
   Mutable(value: a)
 }
@@ -8,7 +11,7 @@ pub fn wrap(value: a) -> Mutable(a) {
 }
 
 @external(javascript, "../../sketch_lustre.ffi.mjs", "set")
-pub fn set(variable: Mutable(a), value: a) -> Mutable(a) {
+pub fn set(_variable: Mutable(a), value: a) -> Mutable(a) {
   Mutable(value: value)
 }
 
@@ -16,3 +19,18 @@ pub fn set(variable: Mutable(a), value: a) -> Mutable(a) {
 pub fn get(variable: Mutable(a)) -> a {
   variable.value
 }
+
+@external(javascript, "../../sketch_lustre.ffi.mjs", "createCssStyleSheet")
+pub fn create_document_stylesheet() -> Dynamic {
+  dynamic.from(0)
+}
+
+@external(javascript, "../../sketch_lustre.ffi.mjs", "createCssStyleSheet")
+pub fn create_shadow_root_stylesheet(_root: ShadowRoot) -> Dynamic {
+  dynamic.from(0)
+}
+
+@external(javascript, "../../sketch_lustre.ffi.mjs", "setStylesheet")
+pub fn set_stylesheet(_content: String, _stylesheet: Dynamic) -> Nil {
+  Nil
+}
diff --git a/sketch_lustre/src/sketch/lustre.gleam b/sketch_lustre/src/sketch/lustre.gleam
index f790afa..8d7e2c4 100644
--- a/sketch_lustre/src/sketch/lustre.gleam
+++ b/sketch_lustre/src/sketch/lustre.gleam
@@ -8,17 +8,6 @@ import sketch.{type Cache}
 import sketch/internals/ffi
 import sketch/lustre/element
 
-@external(javascript, "../sketch_lustre.ffi.mjs", "createCssStyleSheet")
-fn create_document_stylesheet() -> Dynamic
-
-@external(javascript, "../sketch_lustre.ffi.mjs", "createCssStyleSheet")
-fn create_shadow_root_stylesheet(root: ShadowRoot) -> Dynamic
-
-@external(javascript, "../sketch_lustre.ffi.mjs", "setStylesheet")
-fn set_stylesheet(content: String, stylesheet: Dynamic) -> Nil {
-  Nil
-}
-
 type StyleSheetOption {
   Node
   Document
@@ -57,7 +46,7 @@ pub fn compose(
 }
 
 @target(erlang)
-fn to_stylesheet(options) {
+fn to_stylesheet(_options) {
   NodeStyleSheet
 }
 
@@ -65,8 +54,9 @@ fn to_stylesheet(options) {
 fn to_stylesheet(options) {
   case options {
     Options(Node) -> NodeStyleSheet
-    Options(Document) -> CssStyleSheet(create_document_stylesheet())
-    Options(Shadow(root)) -> CssStyleSheet(create_shadow_root_stylesheet(root))
+    Options(Document) -> CssStyleSheet(ffi.create_document_stylesheet())
+    Options(Shadow(root)) ->
+      CssStyleSheet(ffi.create_shadow_root_stylesheet(root))
   }
 }
 
@@ -81,7 +71,7 @@ fn render_stylesheet(content, node, stylesheet) {
       }
     }
     CssStyleSheet(stylesheet) -> {
-      set_stylesheet(content, stylesheet)
+      ffi.set_stylesheet(content, stylesheet)
       node
     }
   }
diff --git a/sketch_lustre/src/sketch/lustre/element.gleam b/sketch_lustre/src/sketch/lustre/element.gleam
index 6561fcc..cf93ae7 100644
--- a/sketch_lustre/src/sketch/lustre/element.gleam
+++ b/sketch_lustre/src/sketch/lustre/element.gleam
@@ -1,4 +1,3 @@
-import gleam/int
 import gleam/list
 import gleam/option
 import gleam/pair
@@ -10,7 +9,6 @@ import sketch.{type Cache}
 pub opaque type Element(msg) {
   Nothing
   Text(content: String)
-  Fragment(key: String, children: List(Element(msg)))
   Map(subtree: fn() -> Element(msg))
   Element(
     key: String,
@@ -69,7 +67,8 @@ pub fn namespaced_(
 }
 
 pub fn fragment(children: List(Element(msg))) {
-  Fragment("", children)
+  let attrs = [attribute.style([#("display", "contents")])]
+  Element("", "", "lustre-fragment", option.None, attrs, children)
 }
 
 pub fn keyed(
@@ -87,21 +86,6 @@ fn do_keyed(element: Element(msg), key: String) {
     Nothing -> Nothing
     Text(content) -> Text(content)
     Map(subtree) -> Map(fn() { do_keyed(subtree(), key) })
-    Fragment(_, children) ->
-      children
-      |> list.index_map(fn(element, idx) {
-        case element {
-          Element(el_key, _, _, _, _, _) -> {
-            let new_key = case el_key {
-              "" -> key <> "-" <> int.to_string(idx)
-              _ -> key <> "-" <> el_key
-            }
-            do_keyed(element, new_key)
-          }
-          _ -> do_keyed(element, key)
-        }
-      })
-      |> Fragment(key, _)
     Element(_, namespace, tag, attributes, children, styles) ->
       Element(key, namespace, tag, attributes, children, styles)
   }
@@ -112,7 +96,6 @@ pub fn map(element: Element(a), mapper: fn(a) -> b) {
     Nothing -> Nothing
     Text(content) -> Text(content)
     Map(subtree) -> Map(fn() { map(subtree(), mapper) })
-    Fragment(key, children) -> Fragment(key, list.map(children, map(_, mapper)))
     Element(key, namespace, tag, class, attributes, children) -> {
       let attributes = list.map(attributes, attribute.map(_, mapper))
       let children = list.map(children, map(_, mapper))
@@ -137,9 +120,6 @@ pub fn unstyled(cache: Cache, element: Element(msg)) {
     Nothing -> #(cache, el.none())
     Text(content) -> #(cache, el.text(content))
     Map(subtree) -> unstyled(cache, subtree())
-    Fragment(_, children) ->
-      unstyled_children(cache, children)
-      |> pair.map_second(fn(node) { el.fragment(node) })
     Element(key, namespace, tag, class, attributes, children) -> {
       let class = option.map(class, sketch.class_name(_, cache))
       let class_name = option.map(class, pair.second)