ml-in-barcelona · davesnx · Jan 22, 2025 · Jan 17, 2025 · Jan 17, 2025 · Jan 17, 2025
diff --git a/Makefile b/Makefile
@@ -13,15 +13,15 @@ help: ## Print this help message
 
 .PHONY: build
 build: ## Build the project, including non installable libraries and executables
-	$(DUNE) build @all --profile=dev
+	$(DUNE) build --profile=dev
 
 .PHONY: build-prod
 build-prod: ## Build for production (--profile=prod)
-	$(DUNE) build @all --profile=prod
+	$(DUNE) build --profile=prod
 
 .PHONY: dev
 dev: ## Build in watch mode
-	$(DUNE) build -w --profile=dev @all
+	$(DUNE) build -w --profile=dev
 
 .PHONY: clean
 clean: ## Clean artifacts

diff --git a/arch/server/render-html-to-stream.js b/arch/server/render-html-to-stream.js
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom/server";
 
 const sleep = (seconds) =>
 	new Promise((res) => setTimeout(res, seconds * 1000));
 
-const DefferedComponent = async ({ by, children }) => {
+const DeferredComponent = async ({ by, children }) => {
 	await sleep(by);
 	return (
 		<div>
@@ -31,30 +31,53 @@ const debug = (readableStream) => {
 
 /* const App = () => (
 	<React.Suspense fallback="Fallback 1">
-		<DefferedComponent by={1}>
+		<DeferredComponent by={1}>
 			<React.Suspense fallback="Fallback 2">
-				<DefferedComponent by={1}>"lol"</DefferedComponent>
+				<DeferredComponent by={1}>"lol"</DeferredComponent>
 			</React.Suspense>
-		</DefferedComponent>
+		</DeferredComponent>
 	</React.Suspense>
 ); */
 
 /* const App = () => (
 	<div>
 		<React.Suspense fallback="Fallback 1">
-			<DefferedComponent by={0}>"lol"</DefferedComponent>
+			<DeferredComponent by={0}>"lol"</DeferredComponent>
 		</React.Suspense>
 	</div>
 ); */
 
-const App = () =>
-<head>
-	<main>
-		<span>{"Hi"}</span>
-		<link href="/static/demo/client/app.css" rel="stylesheet" />
-	</main>
-</head>
+/* const AlwaysThrow = () => {
+	throw new Error("always throwing");
+};
+
+const App = () => (
+	<React.Suspense fallback="Fallback 1">
+		<DeferredComponent by={1}>
+			<React.Suspense fallback="Fallback 2">
+				<AlwaysThrow/>
+			</React.Suspense>
+		</DeferredComponent>
+	</React.Suspense>
+); */
 
+function App() {
+    return React.createElement(
+      Suspense,
+      { fallback: "Fallback 1" },
+      React.createElement(DeferredComponent,
+        { by: 0.02 },
+        React.createElement(
+          Suspense,
+          { fallback: "Fallback 2" },
+          React.createElement(DeferredComponent,
+            { by: 0.02 },
+            "lol"
+          )
+        )
+      )
+    );
+  }
 
 ReactDOM.renderToReadableStream(<App />).then((stream) => {
 	debug(stream);

diff --git a/bench/dune b/bench/dune
@@ -19,6 +19,8 @@
  (modules once)
  (libraries
   unix
+  lwt
+  lwt.unix
   server-reason-react.react
   server-reason-react.reactDom
   demo_shared_native)

diff --git a/bench/once.ml b/bench/once.ml
@@ -0,0 +1,55 @@
+let measure_alloc title f =
+  let before = Gc.stat () in
+  let result = f () in
+  let after = Gc.stat () in
+  Printf.printf "\n=== %s ===\n" title;
+  Printf.printf "Minor words: %f\n" (after.minor_words -. before.minor_words);
+  Printf.printf "Major words: %f\n" (after.major_words -. before.major_words);
+  Printf.printf "Minor collections: %d\n" (after.minor_collections - before.minor_collections);
+  result
+
+let loop n f =
+  for _ = 1 to n do
+    f ()
+  done
+
+let main () =
+  let filter_map_style () =
+    let element =
+      React.createElement "div"
+        (Stdlib.List.filter_map Fun.id
+           (List.init 50 (fun i ->
+                Some
+                  (React.JSX.String (Printf.sprintf "prop%d" i, Printf.sprintf "prop%d" i, Printf.sprintf "value%d" i)))))
+        []
+    in
+    let _ = ReactDOM.renderToStaticMarkup element in
+    ()
+  in
+
+  let direct_style () =
+    let props =
+      List.init 50 (fun i ->
+          React.JSX.String (Printf.sprintf "prop%d" i, Printf.sprintf "prop%d" i, Printf.sprintf "value%d" i))
+    in
+    let element = React.createElement "div" props [] in
+    let _ = ReactDOM.renderToStaticMarkup element in
+    ()
+  in
+
+  let render_hello_world () =
+    let _ = ReactDOM.renderToStaticMarkup (HelloWorld.make ()) in
+    ()
+  in
+  let render_app () =
+    let _ = ReactDOM.renderToStaticMarkup (App.make ()) in
+    ()
+  in
+
+  measure_alloc "Use filter_map" (fun () -> loop 10000 filter_map_style);
+  measure_alloc "Use list direct style" (fun () -> loop 10000 direct_style);
+  measure_alloc "Render <HelloWorld />" (fun () -> loop 10000 render_hello_world);
+  measure_alloc "Render <App />" (fun () -> loop 10000 render_app);
+  Lwt.return ()
+
+let () = Lwt_main.run (main ())
diff --git a/bench/once.re b/bench/once.re
diff --git a/demo/client/create-from-fetch.jsx b/demo/client/create-from-fetch.jsx
@@ -1,3 +1,7 @@
+window.__webpack_require__ = () => {
+  throw new Error("__webpack_require__ should not be called on this demo");
+};
+
 let ReactDOM = require("react-dom/client");
 let ReactServerDOM = require("react-server-dom-webpack/client");
 

diff --git a/demo/server/comments.re b/demo/server/comments.re
@@ -36,7 +36,7 @@ module Post = {
 };
 
 module Data = {
-  let delay = 1.0;
+  let delay = 4.0;
 
   let fakeData = [
     "Wait, it doesn't wait for React to load?",
@@ -47,29 +47,39 @@ module Data = {
     "But, imagine it's dynamic",
   ];
 
+  let get = () => fakeData;
+
+  let cached = ref(false);
+  let destroy = () => cached := false;
   let promise = () => {
-    let%lwt () = Lwt_unix.sleep(delay);
-    Lwt.return(fakeData);
+    cached.contents
+      ? Lwt.return(fakeData)
+      : {
+        let%lwt () = Lwt_unix.sleep(delay);
+        cached.contents = true;
+        Lwt.return(fakeData);
+      };
   };
 };
 
 module Comments = {
+  [@react.async.component]
   let make = () => {
-    /* Sincronous data: let comments = Data.get(); */
-    /* let comments = React.Experimental.use(Data.promise()); */
-    let comments = ["a", "b"];
+    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)}
-              className="font-semibold border-2 border-yellow-200 rounded-lg p-2 bg-yellow-600 text-slate-900">
-              {React.string(comment)}
-            </p>
-          )
-       |> React.list}
-    </div>;
+    Lwt.return(
+      <div className="flex gap-4 flex-col">
+        {comments
+         |> List.mapi((i, comment) =>
+              <p
+                key={Int.to_string(i)}
+                className="font-semibold border-2 border-yellow-200 rounded-lg p-2 bg-yellow-600 text-slate-900">
+                {React.string(comment)}
+              </p>
+            )
+         |> React.list}
+      </div>,
+    );
   };
 };
 
@@ -85,7 +95,7 @@ let make = () => {
             "text-4xl font-bold ",
             Theme.text(Theme.Color.white),
           ])}>
-          {React.string("Hello world")}
+          {React.string("Rendering React.Suspense on the server")}
         </h1>
         <Post />
         <section>

diff --git a/demo/server/server.re b/demo/server/server.re
@@ -2,17 +2,22 @@ let renderToStreamHandler = _ =>
   Dream.stream(
     ~headers=[("Content-Type", "text/html")],
     response_stream => {
+      Comments.Data.destroy();
+
       let pipe = data => {
+        Dream.log("Pipe: %s", data);
         let%lwt () = Dream.write(response_stream, data);
         Dream.flush(response_stream);
       };
+
       let%lwt (stream, _abort) =
         ReactDOM.renderToStream(~pipe, <Document> <Comments /> </Document>);
-      Lwt.return();
+
+      Lwt_stream.iter_s(pipe, stream);
     },
   );
 
-let serverComponentsWithoutClientHandler = request => {
+let createFromFetchHandler = request => {
   let isRSCheader =
     Dream.header(request, "Accept") == Some("text/x-component");
 
@@ -174,7 +179,7 @@ module Page = {
   };
 };
 
-let serverComponentsHandler = request => {
+let createFromReadableStreamHandler = request => {
   let app = <AppRouter> <Page /> </AppRouter>;
   switch (Dream.header(request, "Accept")) {
   | Some(accept) when is_react_component_header(accept) =>
@@ -292,11 +297,8 @@ let router = [
     )
   ),
   Dream.get(Router.renderToStream, renderToStreamHandler),
-  Dream.get(
-    Router.serverComponentsWithoutClient,
-    serverComponentsWithoutClientHandler,
-  ),
-  Dream.get(Router.serverComponents, serverComponentsHandler),
+  Dream.get(Router.createFromFetch, createFromFetchHandler),
+  Dream.get(Router.createFromReadableStream, createFromReadableStreamHandler),
 ];
 
 let () = {

diff --git a/demo/universal/native/lib/Router.re b/demo/universal/native/lib/Router.re
@@ -2,18 +2,18 @@ let home = "/";
 let renderToStaticMarkup = "/demo/renderToStaticMarkup";
 let renderToString = "/demo/renderToString";
 let renderToStream = "/demo/renderToStream";
-let serverComponentsWithoutClient = "/demo/server-components-without-client";
-let serverComponents = "/demo/server-components";
+let createFromFetch = "/demo/server-components-without-client";
+let createFromReadableStream = "/demo/server-components";
 
 let links = [|
   ("Render to static markup (SSR)", renderToStaticMarkup),
   ("Render to string (SSR)", renderToString),
-  ("Render to Stream (SSR)", renderToStream),
+  ("Render to stream (SSR)", renderToStream),
+  ("Server components without client (createFromFetch)", createFromFetch),
   (
-    "Server components without client (createFromFetch)",
-    serverComponentsWithoutClient,
+    "Server components with createFromReadableStream (RSC + SSR)",
+    createFromReadableStream,
   ),
-  ("Server components (RSC + SSR)", serverComponents),
 |];
 
 module Menu = {

diff --git a/packages/extract-client-components/dune b/packages/extract-client-components/dune
@@ -2,11 +2,3 @@
  (name extract_client_components)
  (public_name server_reason_react.extract_client_components)
  (libraries unix cmdliner))
-
-; add a rule to `all` to copy the plugin to the build directory
-; so demo/client/build.mjs can import it
-
-(rule
- (alias all)
- (deps ./esbuild-plugin.mjs)
- (action (progn)))