From e58458573c9345c6647d462495dc070bc921b33a Mon Sep 17 00:00:00 2001
From: David Sancho <dsnxmoreno@gmail.com>
Date: Tue, 30 Jul 2024 11:57:00 +0200
Subject: [PATCH] Fix demo with dream (#150)

---
 Makefile                                      |   8 +-
 demo/README.md                                |  51 +++
 demo/server/{Page.re => Document.re}          |  11 +-
 demo/server/Esbuild.re                        |   3 +-
 demo/server/comments.re                       | 101 +++---
 demo/server/dune                              |  11 +-
 demo/server/server.re                         | 303 +++++++-----------
 demo/universal/native/lib/App.re              |  34 +-
 demo/universal/native/lib/Arrow.re            |  27 ++
 demo/universal/native/lib/Context.re          |   2 +-
 demo/universal/native/lib/Counter.re          |  10 +-
 demo/universal/native/lib/Header.re           | 253 ---------------
 demo/universal/native/lib/Layout.re           |  31 ++
 demo/universal/native/lib/Link.re             |  43 ++-
 demo/universal/native/lib/RR.re               |   8 +-
 demo/universal/native/lib/Root.re             |  17 -
 demo/universal/native/lib/Router.re           |   4 +
 demo/universal/native/lib/SubHeader.re        |  69 ----
 demo/universal/native/lib/Text.re             |  66 ++++
 demo/universal/native/lib/Theme.re            |  15 +-
 dune-project                                  |   2 +-
 packages/reactDom/test/test_renderToString.ml |  10 +-
 server-reason-react.opam                      |  14 +-
 23 files changed, 431 insertions(+), 662 deletions(-)
 create mode 100644 demo/README.md
 rename demo/server/{Page.re => Document.re} (85%)
 create mode 100644 demo/universal/native/lib/Arrow.re
 delete mode 100644 demo/universal/native/lib/Header.re
 create mode 100644 demo/universal/native/lib/Layout.re
 delete mode 100644 demo/universal/native/lib/Root.re
 create mode 100644 demo/universal/native/lib/Router.re
 delete mode 100644 demo/universal/native/lib/SubHeader.re
 create mode 100644 demo/universal/native/lib/Text.re

diff --git a/Makefile b/Makefile
index 14632bd47..558c0b5f1 100644
--- a/Makefile
+++ b/Makefile
@@ -19,6 +19,10 @@ build: ## Build the project, including non installable libraries and executables
 build-prod: ## Build for production (--profile=prod)
 	$(DUNE) build packages --profile=prod
 
+.PHONY: build-demo
+build-demo: ## Build the project, including non installable libraries and executables
+	$(DUNE) build packages --profile=dev @install @client
+
 .PHONY: dev
 dev: ## Build in watch mode
 	$(DUNE) build -w --profile=dev @all
@@ -87,11 +91,11 @@ lib-test: ## Run library tests
 	$(DUNE) exec test/test.exe
 
 .PHONY: demo
-demo: build ## Run demo executable
+demo: build-demo ## Run demo executable
 	$(DUNE) exec demo/server/server.exe --display-separate-messages --no-print-directory --profile=dev
 
 .PHONY: demo-watch
-demo-watch: build ## Run demo executable in watch mode
+demo-watch: build-demo ## Run demo executable in watch mode
 	$(DUNE) exec demo/server/server.exe --display-separate-messages --no-print-directory --display=quiet --watch --profile=dev
 
 .PHONY: subst
diff --git a/demo/README.md b/demo/README.md
new file mode 100644
index 000000000..67c4cb708
--- /dev/null
+++ b/demo/README.md
@@ -0,0 +1,51 @@
+# server-reason-react demo
+
+The app consist of 3 folders: `shared`, `server` and `client`, which encapsulates each compilation target defined by dune.
+
+## `client/`
+
+A folder that contains the code executed in the client only. It's defined in dune as a `melange.emit` to emit JavaScript from Reason via Melange. It uses all the ReScript goodies: Belt, Js, etc. Currently is tiny: client only renders the `Shared_js.App` component:
+
+```re
+switch (ReactDOM.querySelector("#root")) {
+| Some(el) => ReactDOM.render(<Shared_js.App />, el)
+| None => ()
+};
+```
+
+## `server/`
+
+An executable that expose a dream app with a home route which serves an HTML page. Written in [server-reason-react](https://github.com/ml-in-barcelona/server-reason-react) and send it as a string with `ReactDOM.renderToString`
+
+## `universal/`
+
+The folder contains the library for shared code between `client` and `server`. dune generates two libraries `Shared_js` and `Shared_native` (by using `copy_files#`) with separate dependencies for each:
+
+```dune
+; universal/js/dune
+(library
+ (name shared_js)
+ (modes melange)
+ (libraries reason-react)
+ (preprocess (pps reason-react-ppx)))
+
+(copy_files# "../*.re")
+```
+
+```dune
+; universal/native/dune
+(library
+ (name shared_native)
+ (modes native)
+ (libraries
+  server-reason-react.react
+  server-reason-react.reactDom)
+ (preprocess
+  (pps server-reason-react.ppx)))
+
+(copy_files# "../*.re")
+```
+
+`Shared_js` is compiled by Melange to JavaScript while `Shared_native` compiled by OCaml to native.
+
+<!-- Link to documentation -->
diff --git a/demo/server/Page.re b/demo/server/Document.re
similarity index 85%
rename from demo/server/Page.re
rename to demo/server/Document.re
index d08c01ed0..4b90dfb50 100644
--- a/demo/server/Page.re
+++ b/demo/server/Document.re
@@ -4,6 +4,7 @@ let globalStyles = {js|
     padding: 0;
     width: 100vw;
     height: 100vh;
+    background-color: #161615; /* Theme.Color.black; */
   }
 
   * {
@@ -12,6 +13,15 @@ let globalStyles = {js|
     -moz-osx-font-smoothing: grayscale;
     box-sizing: border-box;
   }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
 |js};
 
 [@react.component]
@@ -30,7 +40,6 @@ let make = (~children, ~script=?) => {
         dangerouslySetInnerHTML={"__html": globalStyles}
       />
       <script src="https://cdn.tailwindcss.com" />
-      <div id="randomId" />
       {switch (script) {
        | None => React.null
        | Some(src) => <script type_="module" src />
diff --git a/demo/server/Esbuild.re b/demo/server/Esbuild.re
index 132fe5e54..bdbcb93db 100644
--- a/demo/server/Esbuild.re
+++ b/demo/server/Esbuild.re
@@ -1,5 +1,6 @@
+let build_folder = "_build/default/demo/client/app";
+
 let build = (~entry_point, ~outfile, ()) => {
-  let build_folder = "_build/default/demo/client/app";
   let output = Filename.concat(build_folder, outfile);
   let entry = Filename.concat(build_folder, entry_point);
   let command =
diff --git a/demo/server/comments.re b/demo/server/comments.re
index 26361db5e..68c3151a7 100644
--- a/demo/server/comments.re
+++ b/demo/server/comments.re
@@ -18,25 +18,6 @@ module Spinner = {
   };
 };
 
-module Sidebar = {
-  let make = () => {
-    <aside>
-      <h3> {React.string("Archive")} </h3>
-      <ul>
-        <li> {React.string("May 2021")} </li>
-        <li> {React.string("April 2021")} </li>
-        <li> {React.string("March 2021")} </li>
-        <li> {React.string("February 2021")} </li>
-        <li> {React.string("January 2021")} </li>
-        <li> {React.string("December 2020")} </li>
-        <li> {React.string("November 2020")} </li>
-        <li> {React.string("October 2020")} </li>
-        <li> {React.string("September 2020")} </li>
-      </ul>
-    </aside>;
-  };
-};
-
 module Post = {
   let make = () => {
     <section>
@@ -61,6 +42,9 @@ module Data = {
     "Wait, it doesn't wait for React to load?",
     "How does this even work?",
     "I like marshmallows",
+    "!1!1!1! This is a comment",
+    "This is actually static from the server",
+    "But, imagine it's dynamic",
   ];
 
   let cached = ref(false);
@@ -84,60 +68,51 @@ module Comments = {
     /* Sincronous data: let comments = Data.get(); */
     let comments = React.Experimental.use(Data.promise());
 
-    <>
+    <div className="flex gap-4 flex-col">
       {comments
        |> List.mapi((i, comment) =>
             <p
               key={Int.to_string(i)}
-              style={ReactDOM.Style.make(
-                ~border="2px solid #facedd",
-                ~borderRadius="4px",
-                ~padding="8px 8px",
-                ~margin="2px",
-                (),
-              )}>
+              className="font-semibold border-2 border-yellow-200 rounded-lg p-2 bg-yellow-600 text-slate-900">
               {React.string(comment)}
             </p>
           )
        |> React.list}
-    </>;
-  };
-};
-
-module Layout = {
-  [@react.component]
-  let make = (~children) => {
-    <div style={ReactDOM.Style.make(~padding="20px", ~height="100%", ())}>
-      children
     </div>;
   };
 };
 
-module App = {
-  let make = () => {
-    <Layout>
-      <nav> <a href="/"> {React.string("Home")} </a> </nav>
-      <main
-        style={ReactDOM.Style.make(~display="flex", ~marginTop="16px", ())}>
-        <aside
-          className="sidebar"
-          style={ReactDOM.Style.make(~marginRight="16px", ())}>
-          <Sidebar />
-        </aside>
-        <React.Suspense fallback={<Spinner />}>
-          <article className="post">
-            <h1> {React.string("Hello world")} </h1>
-            <Post />
-            <section className="comments">
-              <h3> {React.string("Comments")} </h3>
-              <React.Suspense fallback={<Spinner />}>
-                <Comments />
-              </React.Suspense>
-            </section>
-            <h2> {React.string("Thanks for reading!")} </h2>
-          </article>
-        </React.Suspense>
-      </main>
-    </Layout>;
-  };
+[@react.component]
+let make = () => {
+  <Layout background=Theme.Color.black>
+    <main
+      className={Theme.text(Theme.Color.white)}
+      style={ReactDOM.Style.make(~display="flex", ~marginTop="16px", ())}>
+      <React.Suspense fallback={<Spinner />}>
+        <article className="flex gap-4 flex-col">
+          <h1
+            className={Cx.make([
+              "text-4xl font-bold ",
+              Theme.text(Theme.Color.white),
+            ])}>
+            {React.string("Hello world")}
+          </h1>
+          <Post />
+          <section>
+            <h3
+              className={Cx.make([
+                "text-2xl font-bold mb-4",
+                Theme.text(Theme.Color.white),
+              ])}>
+              {React.string("Comments")}
+            </h3>
+            <React.Suspense fallback={<Spinner />}>
+              <Comments />
+            </React.Suspense>
+          </section>
+          <h2> {React.string("Thanks for reading!")} </h2>
+        </article>
+      </React.Suspense>
+    </main>
+  </Layout>;
 };
diff --git a/demo/server/dune b/demo/server/dune
index 3b0a40513..b5f167485 100644
--- a/demo/server/dune
+++ b/demo/server/dune
@@ -3,15 +3,6 @@
  (enabled_if
   (= %{profile} "dev"))
  (flags :standard -w -26-27) ; browser_only removes code form the server, making this warning necessary
- (libraries
-  tiny_httpd
-  tiny_httpd.core
-  tiny_httpd.unix
-  shared_native
-  react
-  reactDOM
-  js
-  lwt.unix
-  unix)
+ (libraries dream shared_native react reactDOM js lwt.unix unix belt)
  (preprocess
   (pps server_reason_react_ppx melange_native_ppx browser_ppx lwt_ppx)))
diff --git a/demo/server/server.re b/demo/server/server.re
index 06b108bdc..f12b833bd 100644
--- a/demo/server/server.re
+++ b/demo/server/server.re
@@ -1,203 +1,140 @@
-/**
-
-  This is a demo of a HTTP server that demostrates the possibility of Html_of_jsx.
-
-  It uses `tiny_httpd` to keep the dependencies to a minimum. It also contains a bunch of utilities to generate styles.
-
-*/
-module Httpd = Tiny_httpd;
-module Httpd_dir = Tiny_httpd.Dir;
-
-module Link = {
-  [@react.component]
-  let make = (~href, ~children) => {
-    let (state, setState) = React.useState(() => false);
-
-    React.useEffect0(() => {
-      setState(_prev => !state);
-
-      None;
-    });
-
-    <a
-      onClick={_e => print_endline("clicked")}
-      className="font-medium text-blue-600 hover:underline flex items-center"
-      href>
-      {React.string(children)}
-      <svg
-        className="w-3 h-3 ms-2 rtl:rotate-180"
-        ariaHidden=true
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 14 10">
-        <path
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="M1 5h12m0 0L9 1m4 4L9 9"
-        />
-      </svg>
-    </a>;
-  };
-};
-
 module Home = {
   [@react.component]
   let make = () => {
-    <div className="py-16 px-12">
-      <h1 className="font-bold text-4xl">
-        {React.string("Home page of the demos")}
-      </h1>
-      <br />
-      <ul className="gap-1 flex flex-col">
+    <div className={Cx.make(["py-16", "px-12"])}>
+      <Spacer bottom=8>
+        <h1
+          className={Cx.make([
+            "font-bold text-4xl",
+            Theme.text(Theme.Color.white),
+          ])}>
+          {React.string("Home of the demos")}
+        </h1>
+      </Spacer>
+      <ul className="flex flex-col gap-4">
+        <li>
+          <Link.WithArrow href=Router.renderToStaticMarkup>
+            Router.renderToStaticMarkup
+          </Link.WithArrow>
+        </li>
         <li>
-          <Link href="/markup"> "Tiny app with renderToStaticMarkup" </Link>
+          <Link.WithArrow href=Router.renderToString>
+            Router.renderToString
+          </Link.WithArrow>
+        </li>
+        <li>
+          <Link.WithArrow href=Router.renderToLwtStream>
+            Router.renderToLwtStream
+          </Link.WithArrow>
         </li>
-        <li> <Link href="/string"> "Tiny app with renderToString" </Link> </li>
       </ul>
     </div>;
   };
 };
 
-module Not_found = {
+module Error = {
   [@react.component]
-  let make = (~path) => {
-    <div className="p-12">
-      <Spacer bottom=4>
-        <h1 className="font-bold text-5xl"> {React.string("Not found")} </h1>
-      </Spacer>
-      <span className="text-xl font-bold"> {React.string("Error 404")} </span>
-      <span className="text-xl"> {React.string(" · ")} </span>
-      <span className="text-xl"> {React.string("The requested URL")} </span>
-      <span
-        className="bg-slate-200 mx-2 py-1 px-3 no-underline rounded-full font-sans font-semibold">
-        {React.string(path)}
-      </span>
-      <span className="text-xl">
-        {React.string("was not found on this server.")}
-      </span>
+  let make = (~error, ~debugInfo, ~suggestedResponse) => {
+    let status = Dream.status(suggestedResponse);
+    let code = Dream.status_to_int(status);
+    let reason = Dream.status_to_string(status);
+    <div className="py-16 px-12">
+      <main>
+        <Spacer bottom=8>
+          <h1
+            className={Cx.make([
+              "font-bold text-5xl",
+              Theme.text(Theme.Color.white),
+            ])}>
+            {React.string(reason)}
+          </h1>
+        </Spacer>
+        <pre className="overflow-scroll">
+          <code
+            className="w-full text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-orange-900 font-bold text-white rounded-lg p-4 pl-6">
+            {React.string(debugInfo)}
+          </code>
+        </pre>
+      </main>
     </div>;
   };
 };
 
-let () = {
-  let server = Httpd.create();
-  let addr = Httpd.addr(server);
-  let port = Httpd.port(server);
-
-  Httpd.add_route_handler(
-    ~meth=`GET,
-    server,
-    Httpd.Route.(exact("markup") @/ string @/ return),
-    (_name, _req) => {
-      let html =
-        ReactDOM.renderToStaticMarkup(
-          <Page script="/static/demo/client/bundle.js"> <App /> </Page>,
-        );
-      Httpd.Response.make_string(Ok(html));
-    },
-  );
-  Httpd.add_route_handler(
-    ~meth=`GET,
-    server,
-    Httpd.Route.(exact("string") @/ return),
-    _req => {
-      let html =
+let handler =
+  Dream.router([
+    Dream.get("/", _request =>
+      Dream.html(
+        ReactDOM.renderToStaticMarkup(<Document> <Home /> </Document>),
+      )
+    ),
+    Dream.get(Router.renderToString, _request =>
+      Dream.html(
         ReactDOM.renderToString(
-          <Page script="/static/demo/client/bundle.js"> <App /> </Page>,
-        );
-      Httpd.Response.make_string(Ok(html));
-    },
-  );
-
-  /*
-   TODO: Render to stream
-    Dream.get("/stream", _request =>
-           Dream.stream(
-             ~headers=[("Content-Type", "text/html")],
-             response_stream => {
-               let (stream, _) =
-                 ReactDOM.renderToLwtStream(<Page> <Comments.App /> </Page>);
-
-               Lwt_stream.iter_s(
-                 data => {
-                   let%lwt () = Dream.write(response_stream, data);
-                   Dream.flush(response_stream);
-                 },
-                 stream,
-               );
-             },
-           )
-         ),
+          <Document script="/static/demo/client/bundle.js">
+            <App />
+          </Document>,
+        ),
+      )
+    ),
+    Dream.get(Router.renderToStaticMarkup, _request =>
+      Dream.html(
+        ReactDOM.renderToStaticMarkup(
+          <Document script="/static/demo/client/bundle.js">
+            <App />
+          </Document>,
+        ),
+      )
+    ),
+    Dream.get(Router.renderToLwtStream, _request =>
+      Dream.stream(
+        ~headers=[("Content-Type", "text/html")],
+        response_stream => {
+          let (stream, _) =
+            ReactDOM.renderToLwtStream(<Document> <Comments /> </Document>);
+
+          /* Lwt.async(() => {}); */
 
-   Httpd.add_route_handler_stream(
-        ~meth=`GET,
-        server,
-        Httpd.Route.(exact("stream") @/ return),
-        req => {
-          let (_stream, _close) =
-            ReactDOM.renderToLwtStream(
-              <Page scripts=["/static/app.js"]> <App /> </Page>,
-            );
           Lwt_stream.iter_s(
-               data => {
-                 let%lwt () = Dream.write(response_stream, data);
-                 Dream.flush(response_stream);
-               },
-               stream,
-             );
-          Tiny_httpd_stream.iter(write, req.Request.body);
-          let a = Httpd.Byte_stream.of_string("asdf");
-          Httpd.Response.make_stream(Ok(a));
+            data => {
+              let%lwt () = Dream.write(response_stream, data);
+              Dream.flush(response_stream);
+            },
+            stream,
+          );
         },
-      ); */
-
-  Httpd_dir.add_dir_path(
-    server,
-    ~prefix="static",
-    ~dir="_build/default/demo/client/app",
-    ~config=
-      Httpd_dir.config(
-        ~download=true,
-        ~upload=false,
-        ~dir_behavior=Httpd_dir.Index_or_lists,
-        (),
-      ),
-  );
-
-  Httpd.set_top_handler(
-    server,
-    req => {
-      let html =
-        ReactDOM.renderToString(<Page> <Not_found path={req.path} /> </Page>);
-      Httpd.Response.make_string(Ok(html));
-    },
-  );
-
-  Httpd.add_route_handler(
-    server,
-    Httpd.Route.(return),
-    _req => {
-      let html = ReactDOM.renderToString(<Page> <Home /> </Page>);
-      Httpd.Response.make_string(Ok(html));
-    },
-  );
-
-  switch (
-    Httpd.run(
-      server,
-      ~after_init=() => {
-        Esbuild.build(
-          ~entry_point="demo/client/index.js",
-          ~outfile="demo/client/bundle.js",
-          (),
-        );
-        Printf.printf("Listening on http://%s:%d\n%!", addr, port);
-      },
-    )
-  ) {
-  | Ok () => ()
-  | Error(e) => raise(e)
+      )
+    ),
+    Dream.get(
+      "/static/**",
+      Dream.static("./_build/default/demo/client/app"),
+    ),
+  ]);
+
+let interface =
+  switch (Sys.getenv_opt("SERVER_INTERFACE")) {
+  | Some(env) => env
+  | None => "localhost"
   };
-};
+
+Esbuild.build(
+  ~entry_point="demo/client/index.js",
+  ~outfile="demo/client/bundle.js",
+  (),
+);
+
+Dream.run(
+  ~port=8080,
+  ~interface,
+  ~error_handler={
+    Dream.error_template((error, info, suggested) =>
+      Dream.html(
+        ReactDOM.renderToStaticMarkup(
+          <Document>
+            <Error error debugInfo=info suggestedResponse=suggested />
+          </Document>,
+        ),
+      )
+    );
+  },
+  Dream.livereload(handler),
+);
diff --git a/demo/universal/native/lib/App.re b/demo/universal/native/lib/App.re
index ca1db64d7..79963fbb2 100644
--- a/demo/universal/native/lib/App.re
+++ b/demo/universal/native/lib/App.re
@@ -6,21 +6,12 @@ module Hr = {
         "block",
         "w-full",
         "h-px",
-        Theme.background("grey"),
+        Theme.background("slate-400"),
       ])}
     />;
   };
 };
 
-module Layout = {
-  [@react.component]
-  let make = (~children) => {
-    <div spellCheck=false className={Cx.make(["max-w-2xl", "pt-16"])}>
-      children
-    </div>;
-  };
-};
-
 module Title = {
   type item = {
     label: string,
@@ -56,8 +47,12 @@ module Title = {
                  href={item.link}
                  target="_blank"
                  className={Cx.make([
-                   "text-primary hover:text-slate-300 focus:text-slate-300 underline transition duration-100 ease-in-out hover:decoration-inherit",
-                   Theme.hover([Theme.text(Theme.Color.white)]),
+                   "underline transition duration-100 ease-in-out hover:decoration-inherit",
+                   Theme.text(Theme.Color.white),
+                   Theme.hover([
+                     "underline",
+                     Theme.text(Theme.Color.brokenWhite),
+                   ]),
                  ])}>
                  {React.string(item.label)}
                </a>
@@ -70,7 +65,7 @@ module Title = {
 
   [@react.component]
   let make = () => {
-    <div className={Cx.make(["text-yellow-700", "text-xl"])}>
+    <div className={Cx.make([Theme.text(Theme.Color.white), "text-xl"])}>
       <Spacer bottom=4>
         <h1 className={Cx.make(["m-0", "text-5xl", "font-bold"])}>
           {React.string("Server Reason React")}
@@ -88,12 +83,9 @@ let make = () => {
     None;
   });
 
-  <Root background=Theme.Color.darkGrey>
-    <Header />
-    <Layout>
-      <Stack gap=8 justify=`start>
-        <> <Title /> <Hr /> <Counter initial=23 /> </>
-      </Stack>
-    </Layout>
-  </Root>;
+  <Layout background=Theme.Color.black>
+    <Stack gap=8 justify=`start>
+      <> <Title /> <Hr /> <Counter initial=23 /> </>
+    </Stack>
+  </Layout>;
 };
diff --git a/demo/universal/native/lib/Arrow.re b/demo/universal/native/lib/Arrow.re
new file mode 100644
index 000000000..5c49a5832
--- /dev/null
+++ b/demo/universal/native/lib/Arrow.re
@@ -0,0 +1,27 @@
+type direction =
+  | Left
+  | Right;
+
+[@react.component]
+let make = (~direction: direction=Right) => {
+  <svg
+    className={Cx.make([
+      "w-3 h-3 ms-2",
+      switch (direction) {
+      | Left => "transform -rotate-180"
+      | Right => ""
+      },
+    ])}
+    ariaHidden=true
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 14 10">
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M1 5h12m0 0L9 1m4 4L9 9"
+    />
+  </svg>;
+};
diff --git a/demo/universal/native/lib/Context.re b/demo/universal/native/lib/Context.re
index 3f8ee8c16..ce16c8dd7 100644
--- a/demo/universal/native/lib/Context.re
+++ b/demo/universal/native/lib/Context.re
@@ -1,5 +1,5 @@
 module Provider = {
-  let context = React.createContext(23);
   include React.Context;
+  let context = React.createContext(23);
   let make = React.Context.provider(context);
 };
diff --git a/demo/universal/native/lib/Counter.re b/demo/universal/native/lib/Counter.re
index 301aca3b3..6fe9cbb4f 100644
--- a/demo/universal/native/lib/Counter.re
+++ b/demo/universal/native/lib/Counter.re
@@ -7,11 +7,11 @@ let make = (~initial) => {
   | Client => print_endline("This prints to the console")
   };
 
-  let%browser_only onClick = _event => {
+  let onClick = _event => {
     setCount(count + 1);
   };
 
-  <div className="text-yellow-600">
+  <div className={Theme.text(Theme.Color.white)}>
     <Spacer bottom=3>
       <div
         className={Cx.make([
@@ -23,7 +23,11 @@ let make = (~initial) => {
         <p className={Cx.make(["m-0", "text-3xl", "font-bold"])}>
           {React.string("Counter")}
         </p>
-        <button onClick> {React.string(Int.to_string(count))} </button>
+        <button
+          className="font-mono border-2 py-1 px-2 rounded-lg bg-yellow-950 border-yellow-700 text-yellow-200"
+          onClick>
+          {React.string(Int.to_string(count))}
+        </button>
       </div>
     </Spacer>
     <p className="text-lg">
diff --git a/demo/universal/native/lib/Header.re b/demo/universal/native/lib/Header.re
deleted file mode 100644
index 7108fe3f2..000000000
--- a/demo/universal/native/lib/Header.re
+++ /dev/null
@@ -1,253 +0,0 @@
-module ExternalLinkIcon = {
-  [@react.component]
-  let make = () => {
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="14px"
-      height="14px"
-      className="fill-slate-400 hover:fill-slate-200">
-      <path
-        d="M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z"
-      />
-    </svg>;
-  };
-};
-
-module Panel = {
-  [@react.component]
-  let make = (~children) => {
-    <div
-      className={Cx.make([
-        "w-[100vw]",
-        "pt-2 pb-2 pl-4 pr-4",
-        Theme.background(Theme.Color.box),
-      ])}>
-      children
-    </div>;
-  };
-};
-
-module ShrinkerText = {
-  [@react.component]
-  let make = (~children, ~color) => {
-    let first = children.[0] |> String.make(1);
-    let rest = String.sub(children, 1, String.length(children) - 1);
-
-    <>
-      <span className={Cx.make([Theme.text(color)])}>
-        {React.string(first)}
-      </span>
-      <span
-        className={Cx.make([
-          "cursor-pointer hidden",
-          Theme.text(Theme.Color.white),
-          Theme.Media.onDesktop(["inline"]),
-        ])}>
-        {React.string(rest)}
-      </span>
-    </>;
-  };
-};
-
-module Logo = {
-  [@react.component]
-  let make = () => {
-    <p className={Cx.make(["text-3xl", "font-bold", "margin-0"])}>
-      <ShrinkerText color=Theme.Color.ahrefs> "ahrefs" </ShrinkerText>
-    </p>;
-  };
-};
-
-module Dropdown = {
-  module Trigger = {
-    [@react.component]
-    let make = (~isOpen, ~onClick) => {
-      <div
-        onClick
-        className={Cx.make([
-          Theme.text(isOpen ? Theme.Color.white : Theme.Color.lightGrey),
-          "cursor-pointer",
-          "user-select-none",
-          "text-base",
-          "whitespace-nowrap",
-          Theme.hover([Theme.text(Theme.Color.white)]),
-        ])}>
-        {React.string("More tools")}
-      </div>;
-    };
-  };
-
-  [@react.component]
-  let make = (~items, ~onClick) => {
-    let (isOpen, setIsOpen) = RR.useStateValue(false);
-
-    <div className={Cx.make(["relative"])}>
-      <Trigger isOpen onClick={_e => setIsOpen(!isOpen)} />
-      {isOpen
-         ? {
-           <div
-             className={Cx.make([
-               "absolute",
-               "top-4",
-               "left-[-50%]",
-               "p-4",
-               "radius-3",
-               Theme.background(Theme.Color.box),
-             ])}>
-             {React.array(
-                Belt.Array.mapWithIndex(items, (key, item) =>
-                  <div
-                    key={Int.to_string(key)} className={Cx.make(["block"])}>
-                    <span
-                      onClick={_e => onClick(item)}
-                      className={Cx.make([
-                        Theme.text(Theme.Color.lightGrey),
-                        "cursor-pointer",
-                        "text-base",
-                        "whitespace-nowrap",
-                        Theme.hover([Theme.text(Theme.Color.white)]),
-                      ])}>
-                      {React.string(item)}
-                    </span>
-                  </div>
-                ),
-              )}
-           </div>;
-         }
-         : React.null}
-    </div>;
-  };
-};
-
-module Menu = {
-  module Dom = Webapi.Dom;
-  let%browser_only getWindowHeight = () => Dom.window->Dom.Window.innerHeight;
-
-  let%browser_only useOnResize = () => {
-    let (windowHeight, setWindowHeight) =
-      React.useState(_ => getWindowHeight());
-
-    React.useEffect0(() => {
-      open Webapi.Dom;
-      let windowAsTarget = Window.asEventTarget(window);
-      let handleResize = _ => setWindowHeight(_ => getWindowHeight());
-      EventTarget.addEventListener("resize", handleResize, windowAsTarget);
-      Some(
-        () =>
-          EventTarget.removeEventListener(
-            "resize",
-            handleResize,
-            windowAsTarget,
-          ),
-      );
-    });
-
-    windowHeight;
-  };
-
-  [@react.component]
-  let make = (~currentNavigate: string, ~navigate: string => unit) => {
-    let (tools, _setTools) =
-      RR.useStateValue([|
-        "Dashboard",
-        "Site Explorer",
-        "Keywords Explorer",
-        "Site Audit",
-        "Rank Tracker",
-        "Content Explorer",
-      |]);
-
-    let (moreTools, _setMoreTools) =
-      RR.useStateValue([|
-        "Alerts",
-        "Ahrefs Rank",
-        "Batch Analysis",
-        "Link intersect",
-        "SEO Toolbar",
-        "WordPress Plugin",
-        "Ahrefs API",
-        "Apps",
-      |]);
-
-    let externalLinks = [|"Community", "Academy"|];
-
-    <div
-      className={Cx.make([
-        "flex items-center justify-items-end gap-4 mt-px p-2",
-      ])}>
-      {React.array(
-         Belt.Array.mapWithIndex(tools, (key, item) =>
-           <div key={Int.to_string(key)} className={Cx.make(["block"])}>
-             <span
-               onClick={_e => navigate(item)}
-               className={Cx.make([
-                 currentNavigate == item
-                   ? Theme.text(Theme.Color.white)
-                   : Theme.text(Theme.Color.lightGrey),
-                 "cursor-pointer",
-                 "text-base",
-                 "whitespace-nowrap",
-                 Theme.hover([Theme.text(Theme.Color.white)]),
-               ])}>
-               {React.string(item)}
-             </span>
-           </div>
-         ),
-       )}
-      <Dropdown items=moreTools onClick=navigate />
-      <span
-        className={Cx.make([
-          Theme.text(Theme.Color.white),
-          "text-base",
-          "user-select-none",
-        ])}>
-        {React.string("|")}
-      </span>
-      {React.array(
-         Belt.Array.mapWithIndex(externalLinks, (key, item) =>
-           <div key={Int.to_string(key)} className={Cx.make(["block"])}>
-             <span
-               onClick={_e => navigate(item)}
-               className={Cx.make([
-                 currentNavigate == item
-                   ? Theme.text(Theme.Color.white)
-                   : Theme.text(Theme.Color.lightGrey),
-                 "cursor-pointer",
-                 "text-base",
-                 "whitespace-nowrap",
-                 Theme.hover([Theme.text(Theme.Color.white)]),
-               ])}>
-               <Row align=`center gap=1>
-                 <span> {React.string(item)} </span>
-                 <ExternalLinkIcon />
-               </Row>
-             </span>
-           </div>
-         ),
-       )}
-    </div>;
-  };
-};
-
-module Layout = {
-  [@react.component]
-  let make = (~children) => {
-    <div spellCheck=false className={Cx.make(["h-52"])}> children </div>;
-  };
-};
-
-[@react.component]
-let make = () => {
-  let (currentNavigate, setNavigate) = RR.useStateValue("Dashboard");
-
-  <Panel>
-    <Spacer bottom=3>
-      <Row justify=`start align=`center>
-        <Spacer bottom=1> <Logo /> </Spacer>
-        <Menu currentNavigate navigate={to_ => setNavigate(to_) |> ignore} />
-      </Row>
-    </Spacer>
-    <SubHeader />
-  </Panel>;
-};
diff --git a/demo/universal/native/lib/Layout.re b/demo/universal/native/lib/Layout.re
new file mode 100644
index 000000000..4b5ffc0da
--- /dev/null
+++ b/demo/universal/native/lib/Layout.re
@@ -0,0 +1,31 @@
+[@react.component]
+let make = (~children, ~background) => {
+  <div
+    className={Cx.make([
+      "margin-0",
+      "padding-0",
+      "w-[100vw]",
+      "h-[100vh]",
+      "flex",
+      "flex-col",
+      "items-center",
+      "justify-start",
+      Theme.background(background),
+    ])}>
+    <nav className="max-w-2xl w-full mt-10">
+      <a
+        className={Cx.make([
+          "text-s font-bold inline-flex items-center justify-between gap-2",
+          Theme.text(Theme.Color.white),
+          Theme.hover([Theme.text(Theme.Color.brokenWhite)]),
+        ])}
+        href=Router.home>
+        <Arrow direction=Left />
+        {React.string("Home")}
+      </a>
+    </nav>
+    <div spellCheck=false className={Cx.make(["max-w-2xl", "pt-12"])}>
+      children
+    </div>
+  </div>;
+};
diff --git a/demo/universal/native/lib/Link.re b/demo/universal/native/lib/Link.re
index 0b5619063..40d52b93f 100644
--- a/demo/universal/native/lib/Link.re
+++ b/demo/universal/native/lib/Link.re
@@ -1,14 +1,31 @@
-[@react.component]
-let make = (~url, ~txt) => {
-  <a
-    className="text-blue-500 hover:text-blue-800"
-    href=url
-    onClick={e => {
-      React.Event.Mouse.preventDefault(
-        e,
-        /* ReasonReactRouter.push(url); */
-      )
-    }}>
-    {React.string(txt)}
-  </a>;
+module Base = {
+  [@react.component]
+  let make = (~href, ~children) => {
+    <a
+      href
+      onClick={_e => print_endline("clicked")}
+      className={Cx.make([
+        "font-medium",
+        "flex",
+        "items-center",
+        Theme.text(Theme.Color.white),
+        Theme.hover(["underline", Theme.text(Theme.Color.brokenWhite)]),
+      ])}>
+      children
+    </a>;
+  };
+};
+
+module Text = {
+  [@react.component]
+  let make = (~href, ~children) => {
+    <Base href> {React.string(children)} </Base>;
+  };
+};
+
+module WithArrow = {
+  [@react.component]
+  let make = (~href, ~children) => {
+    <Base href> {React.string(children)} <Arrow /> </Base>;
+  };
 };
diff --git a/demo/universal/native/lib/RR.re b/demo/universal/native/lib/RR.re
index 8364b6742..601548e63 100644
--- a/demo/universal/native/lib/RR.re
+++ b/demo/universal/native/lib/RR.re
@@ -1,5 +1,5 @@
-let useStateValue = a => {
-  let (value, setValue) = React.useState(_ => a);
-  let setValueStatic = value => setValue(_ => value);
-  (value, setValueStatic);
+let useStateValue = initialState => {
+  let (state, setState) = React.useState(_ => initialState);
+  let setValueStatic = newState => setState(_ => newState);
+  (state, setValueStatic);
 };
diff --git a/demo/universal/native/lib/Root.re b/demo/universal/native/lib/Root.re
deleted file mode 100644
index ccbb1b062..000000000
--- a/demo/universal/native/lib/Root.re
+++ /dev/null
@@ -1,17 +0,0 @@
-[@react.component]
-let make = (~children, ~background) => {
-  <div
-    className={Cx.make([
-      "margin-0",
-      "padding-0",
-      "w-[100vw]",
-      "h-[100vh]",
-      "flex",
-      "flex-col",
-      "items-center",
-      "justify-start",
-      Theme.background(background),
-    ])}>
-    children
-  </div>;
-};
diff --git a/demo/universal/native/lib/Router.re b/demo/universal/native/lib/Router.re
new file mode 100644
index 000000000..63b8ff736
--- /dev/null
+++ b/demo/universal/native/lib/Router.re
@@ -0,0 +1,4 @@
+let home = "/";
+let renderToStaticMarkup = "/demo/renderToStaticMarkup";
+let renderToString = "/demo/renderToString";
+let renderToLwtStream = "/demo/renderToLwtStream";
diff --git a/demo/universal/native/lib/SubHeader.re b/demo/universal/native/lib/SubHeader.re
deleted file mode 100644
index 3a44133fe..000000000
--- a/demo/universal/native/lib/SubHeader.re
+++ /dev/null
@@ -1,69 +0,0 @@
-module Cosis = {
-  [@react.component]
-  let make = (~onClick) => {
-    <div
-      onClick={_ => {
-        Js.log("asdfs");
-        onClick();
-      }}
-    />;
-  };
-};
-
-let%browser_only getStorage = () => Dom.Storage.localStorage;
-
-[@react.component]
-let make = () => {
-  let%browser_only onClick = _event => {
-    Js.log("Click on account button");
-  };
-
-  React.useEffect0(
-    [%browser_only
-      () => {
-        open Webapi.Dom;
-        let randomElement = Document.getElementById("randomId", document);
-        switch (randomElement) {
-        | None => ()
-        | Some(stylesheetEl) =>
-          let version =
-            Element.getAttribute("data-version", stylesheetEl)
-            ->Belt.Option.getWithDefault("");
-          Element.setAttribute(
-            "href",
-            Printf.sprintf("/assets/css/%s-palette.css%s", "dark", version),
-            stylesheetEl,
-          );
-        };
-
-        None;
-      }
-    ],
-  );
-
-  <div className="flex items-center justify-between gap-24">
-    <form className="flex items-center gap-4 m-0">
-      <label className="text-white flex items-center gap-4">
-        {React.string("Name ")}
-        <input
-          className="text-black"
-          onKeyPress=[%browser_only
-            _ => {
-              Js.log("key pressed");
-            }
-          ]
-          type_="text"
-          name="name"
-        />
-        <input
-          className="text-white text-m font-bold py px-2 border rounded"
-          type_="submit"
-          value="Submit"
-        />
-      </label>
-    </form>
-    <button className="text-white font-bold py px-2 rounded border" onClick>
-      {React.string("Account")}
-    </button>
-  </div>;
-};
diff --git a/demo/universal/native/lib/Text.re b/demo/universal/native/lib/Text.re
new file mode 100644
index 000000000..84206e103
--- /dev/null
+++ b/demo/universal/native/lib/Text.re
@@ -0,0 +1,66 @@
+type size =
+  | XSmall
+  | Small
+  | Medium
+  | Large
+  | XLarge
+  | XXLarge
+  | XXXLarge;
+
+type weight =
+  | Thin
+  | Light
+  | Regular
+  | Medium
+  | Semibold
+  | Bold
+  | Extrabold
+  | Black;
+
+type align =
+  | Left
+  | Center
+  | Right
+  | Justify;
+
+[@react.component]
+let make =
+    (
+      ~color,
+      ~size: size=Small,
+      ~weight: weight=Regular,
+      ~align=Left,
+      ~children,
+    ) => {
+  let className =
+    Cx.make([
+      Theme.text(color),
+      switch (size) {
+      | XSmall => "text-xs"
+      | Small => "text-sm"
+      | Medium => "text-base"
+      | Large => "text-lg"
+      | XLarge => "text-xl"
+      | XXLarge => "text-2xl"
+      | XXXLarge => "text-3xl"
+      },
+      switch (weight) {
+      | Thin => "font-thin"
+      | Light => "font-light"
+      | Regular => "font-normal"
+      | Medium => "font-medium"
+      | Semibold => "font-semibold"
+      | Bold => "font-bold"
+      | Extrabold => "font-extrabold"
+      | Black => "font-black"
+      },
+      switch (align) {
+      | Left => "text-left"
+      | Right => "text-right"
+      | Justify => "text-justify"
+      | Center => "text-center"
+      },
+    ]);
+
+  <span className> {React.string(children)} </span>;
+};
diff --git a/demo/universal/native/lib/Theme.re b/demo/universal/native/lib/Theme.re
index d855b44a6..bc772ea80 100644
--- a/demo/universal/native/lib/Theme.re
+++ b/demo/universal/native/lib/Theme.re
@@ -8,19 +8,18 @@ module Media = {
 };
 
 module Color = {
-  let white = "white";
-  let white01 = "slate-800";
-  let black = "black";
+  let brokenWhite = "[#a0a0a0]";
+  let white = "[#eaecee]";
+  let yellow = white;
+  let darkYellow = "[#34342f]";
+  let black = "[#161615]";
+
   let reason = "[#db4d3f]";
   let react = "[#149eca]";
   let ahrefs = "[#ff8800]";
-  let lightGrey = "[#c1c5cd]";
-  let darkGrey = "[#292a2d]";
-  let box = "[#2e3c56]";
-  let brokenWhite = "[#eaecee]";
 };
 
 let text = value => "text-" ++ value;
 let background = value => "bg-" ++ value;
 
-let hover = value => String.concat(" hover:", value);
+let hover = value => "hover:" ++ String.concat(" hover:", value);
diff --git a/dune-project b/dune-project
index 29a4c3552..97b671a16 100644
--- a/dune-project
+++ b/dune-project
@@ -55,7 +55,7 @@
   (ocaml-lsp-server :with-dev-setup)
 
   ; Demo deps
-  (tiny_httpd :with-dev-setup)
+  (dream :with-dev-setup)
   (melange-webapi :with-dev-setup)
   (reason-react :with-dev-setup)
   (melange-webapi :with-dev-setup)
diff --git a/packages/reactDom/test/test_renderToString.ml b/packages/reactDom/test/test_renderToString.ml
index d277195bd..747955e6a 100644
--- a/packages/reactDom/test/test_renderToString.ml
+++ b/packages/reactDom/test/test_renderToString.ml
@@ -28,13 +28,13 @@ let consecutives_text_nodes () =
     (ReactDOM.renderToString div)
     "<div><span>Hello<!-- -->Hello</span></div>"
 
-let case title fn = Alcotest_lwt.test_case_sync title `Quick fn
+let test title fn = Alcotest_lwt.test_case_sync title `Quick fn
 
 let tests =
   ( "renderToString",
     [
-      case "react root" react_root_one_element;
-      case "react root in two" react_root_two_elements;
-      case "one text node should not add <!-- -->" text_single_node;
-      case "consecutive text nodes should add <!-- -->" consecutives_text_nodes;
+      test "react root" react_root_one_element;
+      test "react root in two" react_root_two_elements;
+      test "one text node should not add <!-- -->" text_single_node;
+      test "consecutive text nodes should add <!-- -->" consecutives_text_nodes;
     ] )
diff --git a/server-reason-react.opam b/server-reason-react.opam
index b2706442d..3190a61d3 100644
--- a/server-reason-react.opam
+++ b/server-reason-react.opam
@@ -24,15 +24,15 @@ depends: [
   "merlin" {with-test}
   "odoc" {with-doc}
   "ocamlformat" {= "0.26.1" & with-test}
-  "ocaml-lsp-server" {with-test}
-  "tiny_httpd" {with-test}
-  "melange-webapi" {with-test}
-  "reason-react" {with-test}
-  "melange-webapi" {with-test}
-  "reason-react-ppx" {with-test}
+  "ocaml-lsp-server" {with-dev-setup}
+  "dream" {with-dev-setup}
+  "melange-webapi" {with-dev-setup}
+  "reason-react" {with-dev-setup}
+  "melange-webapi" {with-dev-setup}
+  "reason-react-ppx" {with-dev-setup}
 ]
 dev-repo: "git+https://github.com/ml-in-barcelona/server-reason-react.git"
-# build command is custom to add "@new-doc"
+# The template is needed since we want to add "@new-doc" into the build command
 build: [
   ["dune" "subst"] {dev}
   [