:alembic: Create test case to make sure server component patching is working.

6 files changed, 318 insertions, 0 deletions

diff --git a/test-apps/server-component-change-children/.DS_Store b/test-apps/server-component-change-children/.DS_Store
new file mode 100644
index 0000000..4ca74bb
--- /dev/null
+++ b/test-apps/server-component-change-children/.DS_Store
diff --git a/test-apps/server-component-change-children/README.md b/test-apps/server-component-change-children/README.md
new file mode 100644
index 0000000..a6acb10
--- /dev/null
+++ b/test-apps/server-component-change-children/README.md
@@ -0,0 +1,5 @@
+This example makes sure that patches that add or remove different children in a
+server component are correctly applied on the client. At one point we realised
+patches were being sent in reverse order and that meant the client ended up
+incorrectly reusing newly-created children from the _current patch_ when diffing
+new nodes.
diff --git a/test-apps/server-component-change-children/gleam.toml b/test-apps/server-component-change-children/gleam.toml
new file mode 100644
index 0000000..eb98040
--- /dev/null
+++ b/test-apps/server-component-change-children/gleam.toml
@@ -0,0 +1,27 @@
+name = "app"
+version = "1.0.0"
+
+# Fill out these fields if you intend to generate HTML documentation or publish
+# your project to the Hex package manager.
+#
+# description = ""
+# licences = ["Apache-2.0"]
+# repository = { type = "github", user = "username", repo = "project" }
+# links = [{ title = "Website", href = "https://gleam.run" }]
+#
+# For a full reference of all the available options, you can have a look at
+# https://gleam.run/writing-gleam/gleam-toml/.
+
+[dependencies]
+gleam_stdlib = "~> 0.36"
+lustre = { path = "../../" }
+mist = "~> 0.17"
+gleam_erlang = "~> 0.24"
+gleam_otp = "~> 0.10"
+gleam_http = "~> 3.6"
+lustre_ui = "~> 0.4"
+gleam_json = "~> 1.0"
+simplifile = "~> 1.5"
+
+[dev-dependencies]
+gleeunit = "~> 1.0"
diff --git a/test-apps/server-component-change-children/manifest.toml b/test-apps/server-component-change-children/manifest.toml
new file mode 100644
index 0000000..32f8931
--- /dev/null
+++ b/test-apps/server-component-change-children/manifest.toml
@@ -0,0 +1,31 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "filepath", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "EFB6FF65C98B2A16378ABC3EE2B14124168C0CE5201553DE652E2644DCFDB594" },
+  { name = "gleam_community_colour", version = "1.4.0", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "795964217EBEDB3DA656F5EB8F67D7AD22872EB95182042D3E7AFEF32D3FD2FE" },
+  { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" },
+  { name = "gleam_http", version = "3.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "8C07DF9DF8CC7F054C650839A51C30A7D3C26482AC241C899C1CEA86B22DBE51" },
+  { 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 = "glisten", version = "0.11.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "glisten", source = "hex", outer_checksum = "73BC09C8487C2FFC0963BFAB33ED2F0D636FDFA43B966E65C1251CBAB8458099" },
+  { name = "lustre", version = "4.1.8", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib"], source = "local", path = "../.." },
+  { name = "lustre_ui", version = "0.6.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_json", "gleam_stdlib", "lustre"], otp_app = "lustre_ui", source = "hex", outer_checksum = "FA1F9E89D89CDD5DF376ED86ABA8A38441CB2E664CD4D402F22A49DA4D7BB56D" },
+  { name = "mist", version = "0.17.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "glisten"], otp_app = "mist", source = "hex", outer_checksum = "DA8ACEE52C1E4892A75181B3166A4876D8CBC69D555E4770250BC84C80F75524" },
+  { name = "simplifile", version = "1.7.0", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "1D5DFA3A2F9319EC85825F6ED88B8E449F381B0D55A62F5E61424E748E7DDEB0" },
+  { name = "thoas", version = "1.2.0", build_tools = ["rebar3"], requirements = [], otp_app = "thoas", source = "hex", outer_checksum = "540C8CB7D9257F2AD0A14145DC23560F91ACDCA995F0CCBA779EB33AF5D859D1" },
+]
+
+[requirements]
+gleam_erlang = { version = "~> 0.24" }
+gleam_http = { version = "~> 3.6" }
+gleam_json = { version = "~> 1.0" }
+gleam_otp = { version = "~> 0.10" }
+gleam_stdlib = { version = "~> 0.36" }
+gleeunit = { version = "~> 1.0" }
+lustre = { path = "../../" }
+lustre_ui = { version = "~> 0.4" }
+mist = { version = "~> 0.17" }
+simplifile = { version = "~> 1.5" }
diff --git a/test-apps/server-component-change-children/src/app.gleam b/test-apps/server-component-change-children/src/app.gleam
new file mode 100644
index 0000000..82a1658
--- /dev/null
+++ b/test-apps/server-component-change-children/src/app.gleam
@@ -0,0 +1,167 @@
+import counter
+import gleam/bytes_builder
+import gleam/erlang
+import gleam/erlang/process.{type Selector, type Subject}
+import gleam/http/request.{type Request}
+import gleam/http/response.{type Response}
+import gleam/json
+import gleam/option.{type Option, None}
+import gleam/otp/actor
+import gleam/result
+import lustre
+import lustre/attribute
+import lustre/element
+import lustre/element/html.{html}
+import lustre/server_component
+import mist.{
+  type Connection, type ResponseData, type WebsocketConnection,
+  type WebsocketMessage,
+}
+
+pub fn main() {
+  let assert Ok(_) =
+    fn(req: Request(Connection)) -> Response(ResponseData) {
+      case request.path_segments(req) {
+        // Set up the websocket connection to the client. This is how we send
+        // DOM updates to the browser and receive events from the client.
+        ["counter"] ->
+          mist.websocket(
+            request: req,
+            on_init: socket_init,
+            on_close: socket_close,
+            handler: socket_update,
+          )
+
+        // We need to serve the server component runtime. There's also a minified
+        // version of this script for production.
+        ["lustre-server-component.mjs"] -> {
+          let assert Ok(priv) = erlang.priv_directory("lustre")
+          let path = priv <> "/static/lustre-server-component.mjs"
+
+          mist.send_file(path, offset: 0, limit: None)
+          |> result.map(fn(script) {
+            response.new(200)
+            |> response.prepend_header("content-type", "application/javascript")
+            |> response.set_body(script)
+          })
+          |> result.lazy_unwrap(fn() {
+            response.new(404)
+            |> response.set_body(mist.Bytes(bytes_builder.new()))
+          })
+        }
+
+        // For all other requests we'll just serve some HTML that renders the
+        // server component.
+        _ ->
+          response.new(200)
+          |> response.prepend_header("content-type", "text/html")
+          |> response.set_body(
+            html([], [
+              html.head([], [
+                html.link([
+                  attribute.rel("stylesheet"),
+                  attribute.href(
+                    "https://cdn.jsdelivr.net/gh/lustre-labs/ui/priv/styles.css",
+                  ),
+                ]),
+                html.script(
+                  [
+                    attribute.type_("module"),
+                    attribute.src("/lustre-server-component.mjs"),
+                  ],
+                  "",
+                ),
+              ]),
+              html.body([], [
+                server_component.component([server_component.route("/counter")]),
+              ]),
+            ])
+            |> element.to_document_string_builder
+            |> bytes_builder.from_string_builder
+            |> mist.Bytes,
+          )
+      }
+    }
+    |> mist.new
+    |> mist.port(3000)
+    |> mist.start_http
+
+  process.sleep_forever()
+}
+
+//
+
+type Counter =
+  Subject(lustre.Action(counter.Msg, lustre.ServerComponent))
+
+fn socket_init(
+  conn: WebsocketConnection,
+) -> #(Counter, Option(Selector(lustre.Patch(counter.Msg)))) {
+  let app = counter.app()
+  let assert Ok(counter) = lustre.start_actor(app, 0)
+
+  process.send(
+    counter,
+    server_component.subscribe(
+      // server components can have many connected clients, so we need a way to
+      // identify this client.
+      "ws",
+      // this callback is called whenever the server component has a new patch
+      // to send to the client. here we json encode that patch and send it to
+      // via the websocket connection.
+      //
+      // a more involved version would have us sending the patch to this socket's
+      // subject, and then it could be handled (perhaps with some other work) in
+      // the `mist.Custom` branch of `socket_update` below.
+      fn(patch) {
+        let assert Ok(_) =
+          patch
+          |> server_component.encode_patch
+          |> json.to_string
+          |> mist.send_text_frame(conn, _)
+
+        Nil
+      },
+    ),
+  )
+
+  #(
+    // we store the server component's `Subject` as this socket's state so we
+    // can shut it down when the socket is closed.
+    counter,
+    // the `None` here means we aren't planning on receiving any messages from
+    // elsewhere and dont need a `Selector` to handle them.
+    None,
+  )
+}
+
+import gleam/io
+
+fn socket_update(
+  counter: Counter,
+  _conn: WebsocketConnection,
+  msg: WebsocketMessage(lustre.Patch(counter.Msg)),
+) {
+  case msg {
+    mist.Text(json) -> {
+      // we attempt to decode the incoming text as an action to send to our
+      // server component runtime.
+      let action = json.decode(json, server_component.decode_action)
+
+      case action {
+        Ok(action) -> process.send(counter, action)
+        Error(_) -> Nil
+      }
+
+      actor.continue(counter)
+    }
+
+    mist.Binary(_) -> actor.continue(counter)
+    mist.Custom(_) -> actor.continue(counter)
+    mist.Closed | mist.Shutdown -> actor.Stop(process.Normal)
+  }
+}
+
+fn socket_close(counter: Counter) {
+  process.send(counter, lustre.shutdown())
+}
diff --git a/test-apps/server-component-change-children/src/counter.gleam b/test-apps/server-component-change-children/src/counter.gleam
new file mode 100644
index 0000000..06131fc
--- /dev/null
+++ b/test-apps/server-component-change-children/src/counter.gleam
@@ -0,0 +1,88 @@
+import gleam/list
+import lustre
+import lustre/attribute
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/event
+import lustre/ui
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn app() {
+  lustre.simple(init, update, view)
+}
+
+// MODEL -----------------------------------------------------------------------
+
+pub type Model =
+  List(#(String, String, String, String))
+
+fn init(_) -> Model {
+  []
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub opaque type Msg {
+  Incr
+  Decr
+}
+
+fn update(_: Model, msg: Msg) -> Model {
+  case msg {
+    Incr -> [
+      #("1", "1", "1", "1"),
+      #("2", "2", "2", "2"),
+      #("3", "3", "3", "3"),
+      #("4", "4", "4", "4"),
+      #("5", "5", "5", "5"),
+    ]
+
+    Decr -> [
+      #("3", "3", "3", "3"),
+      #("2", "2", "2", "2"),
+      #("1", "1", "1", "1"),
+    ]
+  }
+}
+
+// VIEW ------------------------------------------------------------------------
+
+fn view(model: Model) -> Element(Msg) {
+  let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
+
+  ui.centre(
+    [attribute.style(styles)],
+    ui.stack([], [
+      ui.button([event.on_click(Incr)], [element.text("ascending")]),
+      ui.button([event.on_click(Decr)], [element.text("descending")]),
+      html.div([], [
+        ui.stack([], [
+          html.table([], [
+            html.thead([], [
+              html.tr([attribute.style([])], [
+                html.th([], [html.text("Part No")]),
+                html.th([], [html.text("Customer")]),
+                html.th([], [html.text("Job No")]),
+                html.th([], [html.text("Due Date")]),
+              ]),
+            ]),
+            {
+              // let rows =
+              html.tbody([], {
+                list.map(model, fn(tuple) {
+                  html.tr([], [
+                    html.td([], [html.text(tuple.0)]),
+                    html.td([], [html.text(tuple.1)]),
+                    html.td([], [html.text(tuple.2)]),
+                    html.td([], [html.text(tuple.3)]),
+                  ])
+                })
+              })
+            },
+          ]),
+        ]),
+      ]),
+    ]),
+  )
+}