From 71c20233ff79e696d0eeca2ce1462d3083fbcfed Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Sun, 15 Jun 2025 04:59:49 +0700
Subject: and were done, just like that

---
 bs5/server/pages/SinglePageRSC.re | 232 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 bs5/server/pages/SinglePageRSC.re

(limited to 'bs5/server/pages/SinglePageRSC.re')

diff --git a/bs5/server/pages/SinglePageRSC.re b/bs5/server/pages/SinglePageRSC.re
new file mode 100644
index 0000000..685069a
--- /dev/null
+++ b/bs5/server/pages/SinglePageRSC.re
@@ -0,0 +1,232 @@
+open Rsc;
+module Section = {
+  [@react.component]
+  let make = (~title, ~children, ~description=?) => {
+    <Stack gap=2 justify=`start>
+      <h2
+        className={Cx.make([
+          "text-3xl",
+          "font-bold",
+          Theme.text(Theme.Color.Gray11),
+        ])}>
+        {React.string(title)}
+      </h2>
+      {switch (description) {
+       | Some(description) =>
+         <Text color=Theme.Color.Gray10> description </Text>
+       | None => React.null
+       }}
+      <div className="mb-4" />
+      children
+    </Stack>;
+  };
+};
+
+module ExpandedContent = {
+  [@react.component]
+  let make = (~id, ~content: string, ~updatedAt: float, ~title: string) => {
+    let lastUpdatedAt =
+      if (Date.is_today(updatedAt)) {
+        Date.format_time(updatedAt);
+      } else {
+        Date.format_date(updatedAt);
+      };
+
+    let summary =
+      content |> Markdown.extract_text |> Markdown.summarize(~words=20);
+
+    <Expander
+      id
+      title
+      expandedChildren={
+        <div className="mt-2">
+          {switch (String.trim(summary)) {
+           | "" => <i> {React.string("(No content)")} </i>
+           | s => <Text size=Small color=Theme.Color.Gray11> s </Text>
+           }}
+          <Counter.Double initial=22 />
+        </div>
+      }>
+      <header
+        className={Cx.make(["max-w-[85%] flex flex-col gap-2"])}
+        style={ReactDOM.Style.make(~zIndex="1", ())}>
+        <Text size=Large weight=Bold> title </Text>
+        <Text size=Small> lastUpdatedAt </Text>
+      </header>
+    </Expander>;
+  };
+};
+
+module Page = {
+  [@react.async.component]
+  let make = () => {
+    let promiseIn2 =
+      Lwt.bind(Lwt_unix.sleep(2.0), _ =>
+        Lwt.return("Solusionao in 2 seconds!")
+      );
+    let promiseIn4 =
+      Lwt.bind(Lwt_unix.sleep(4.0), _ =>
+        Lwt.return("Solusionao in 4 seconds!")
+      );
+
+    Lwt.return(
+      <Stack gap=8 justify=`start>
+        <Stack gap=2 justify=`start>
+          <h1
+            className={Cx.make([
+              "text-3xl",
+              "font-bold",
+              Theme.text(Theme.Color.Gray11),
+            ])}>
+            {React.string(
+               "Server side rendering server components and client components",
+             )}
+          </h1>
+          <Text color=Theme.Color.Gray10>
+            "React server components. Lazy loading of client components. Client props encodings, such as promises, React elements, and primitive types."
+          </Text>
+        </Stack>
+        <Hr />
+        <Section
+          title="Counter"
+          description="Passing int into a client component, the counter starts at 45 and counts by one">
+          <Counter initial=45 />
+        </Section>
+        <Hr />
+        <Section
+          title="Debug client props"
+          description="Passing client props into a client component">
+          <Debug_props
+            string="Title"
+            float=1.1
+            bool_true=true
+            bool_false=false
+            header={Some(<div> {React.string("H E A D E R")} </div>)}
+            string_list=["Item 1", "Item 2"]
+            promise=promiseIn2>
+            <div>
+              {React.string(
+                 "This footer is a React.element as a server component into client prop, yay!",
+               )}
+            </div>
+          </Debug_props>
+        </Section>
+        <Hr />
+        <Section
+          title="Debug client props"
+          description="Passing client props into a client component">
+          <Debug_props
+            string="Title"
+            int=99
+            float=1.1
+            bool_true=true
+            bool_false=false
+            header={Some(<div> {React.string("H E A D E R")} </div>)}
+            string_list=["Item 1", "Item 2"]
+            promise=promiseIn2>
+            <div>
+              {React.string(
+                 "This footer is a React.element as a server component into client prop, yay!",
+               )}
+            </div>
+          </Debug_props>
+        </Section>
+        <Hr />
+        <Section
+          title="Pass another promise prop"
+          description="Sending a promise from the server to the client">
+          <Promise_renderer promise=promiseIn4 />
+        </Section>
+        <Hr />
+        <Section
+          title="Pass a client component prop"
+          description="Sending a client component from the server to the client (that contains another client component)">
+          <ExpandedContent
+            id=1
+            title="Titulaso"
+            updatedAt=1653561600.0
+            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+          />
+        </Section>
+        <Hr />
+        <h1
+          className={Cx.make([
+            "text-5xl",
+            "font-bold",
+            Theme.text(Theme.Color.Gray11),
+          ])}>
+          {React.string("Server functions")}
+        </h1>
+        <Hr />
+        <Section
+          title="Server function from props on a Client Component"
+          description="In this case, react will use the server function from the window.__server_functions_manifest_map">
+          <ServerActionFromPropsClient
+            actionOnClick=ServerFunctions.simpleResponse
+          />
+        </Section>
+        <Hr />
+        <Section
+          title="Server function with simple response"
+          description="Server function imported and called directly on a client component">
+          <ServerActionWithSimpleResponse />
+        </Section>
+        <Hr />
+        <Section
+          title="Server function with error"
+          description="Server function with error">
+          <ServerActionWithError />
+        </Section>
+        <Hr />
+        <Section
+          title="Server function with FormData"
+          description="Server function with FormData">
+          <ServerActionWithFormData />
+        </Section>
+        <Hr />
+        <Section
+          title="Server function with FormData on action attribute on Server Component"
+          description="In this case, react will use the server function from the window.__server_functions_manifest_map">
+          <ServerActionWithFormDataServer />
+        </Section>
+        <Hr />
+        <Section
+          title="Server function with FormData on formAction attribute on Server Component"
+          description="In this case, react will use the server function from the window.__server_functions_manifest_map">
+          <ServerActionWithFormDataFormAction />
+        </Section>
+        <Hr />
+        <Section
+          title="Server function with FormData with extra arg"
+          description="It shows that it's possible to pass extra arguments to the server function on forms">
+          <ServerActionWithFormDataWithArg />
+        </Section>
+        <Hr />
+      </Stack>,
+    );
+  };
+};
+
+module App = {
+  [@react.component]
+  let make = () => {
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <link rel="stylesheet" href="/output.css" />
+      </head>
+      <body>
+        <div id="root">
+          <DemoLayout background=Theme.Color.Gray2> <Page /> </DemoLayout>
+        </div>
+      </body>
+    </html>;
+  };
+};
+
+let handler = request =>
+  DreamRSC.create_from_request(
+    ~bootstrap_modules=["/static/demo/SinglePageRSC.re.js"],
+    <App />,
+    request,
+  );
-- 
cgit v1.2.3