Add spa in demo (#202)

* organise all demos

* store style as (string * string) list instead of string

* play with more examples in arch

* add react notes as demo, super broken rn

* add style test as json

* update withkey on createElement

* format dune

* read notes from json

* move demo modules

* fix suspense resolved element with

* Rename a few packages to algin with uppercase etc

* add note components for router demo

* iterate over arch/server

* support client components with no params

* styles as json with good key format

* setup client router

* demo working

* push on the router and make param int

* fix client component hydration

* fix client component hydration

* enable tests fss

* update cc test

* fix demo colors

* polish the router demo

* fix dependency with client/dune

* increase timeout delta in ci

* fix textos and linkos

* handle default args in client-components

* remove silly test

* remove unused file in snapshots

* include_subdirs qualified

* stuff with the demo

* fix dangerously stufff

* more arch

* make notes work

* disable input for now

* move buttons

* add inpt

* avoid double navigation

* alert on actions

* add errors

* add errors

* haha fp rocks

* update test for input and value

* fix makefile

* remove failwiths

Makefile

@@ -132,11 +132,11 @@ build-bench: ## Run benchmark
 
 .PHONY: bench
 bench: build-bench ## Run benchmark
-	@$(DUNE) exec bench/main.exe --profile=release --display-separate-messages --no-print-directory
+	@$(DUNE) exec benchmark/main.exe --profile=release --display-separate-messages --no-print-directory
 
 .PHONY: bench-watch
 bench-watch: build-bench ## Run benchmark in watch mode
-	@$(DUNE) exec bench/main.exe --profile=release --display-separate-messages --no-print-directory --watch
+	@$(DUNE) exec benchmark/main.exe --profile=release --display-separate-messages --no-print-directory --watch
 
 .PHONY: once
 once: ## Run benchmark once

arch/server/package.json

@@ -2,7 +2,7 @@
   "name": "app",
   "version": "0.0.1",
   "scripts": {
-    "react-dom-server": "node react-dom-server.js",
+    "react-dom-server": "bun react-dom-server.js",
     "render-html-to-stream": "bun render-html-to-stream.js",
     "render-rsc-to-stream": "bun --conditions react-server render-rsc-to-stream.js",
     "react-server-dom-webpack": "node --conditions react-server react-server-dom-webpack.js"

arch/server/react-dom-server.js

@@ -2,60 +2,60 @@ const React = require("react");
 const ReactDOM = require("react-dom/server");
 
 let first = React.createElement(
-  "div",
-  { key: "fi", value1: "aaa", style: { margin: "1px" } },
-  ["first"]
+	"div",
+	{ key: "fi", value1: "aaa", style: { margin: "1px" } },
+	["first"],
 );
 let clon = React.cloneElement(
-  first,
-  { value: "bbb", more: 22, style: { margin: "1", padding: "0px" } },
-  ["asdf"]
+	first,
+	{ value: "bbb", more: 22, style: { margin: "1", padding: "0px" } },
+	["asdf"],
 );
 
 const { Provider, Consumer } = React.createContext(10);
 
 var app = () => {
-  /* https://fb.me/react-uselayouteffect-ssr */
-  React.useLayoutEffect(() => {
-    console.log("asdfdsf");
+	/* https://fb.me/react-uselayouteffect-ssr */
+	React.useLayoutEffect(() => {
+		console.log("asdfdsf");
 
-    return () => {
-      console.log("asdfsdf");
-    };
-  });
-  return React.createElement("div", { className: "contenido" }, []);
+		return () => {
+			console.log("asdfsdf");
+		};
+	});
+	return React.createElement("div", { className: "contenido" }, []);
 };
 
 var app = () => {
-  let [state, setState] = React.useState(0);
+	let [state, setState] = React.useState(0);
 
-  React.useEffect(() => {
-    setState(state + 1);
-    console.log("asdfdsf");
+	React.useEffect(() => {
+		setState(state + 1);
+		console.log("asdfdsf");
 
-    return () => {
-      console.log("asdfsdf");
-    };
-  });
-  return React.createElement("div", { className: "contenido" }, []);
+		return () => {
+			console.log("asdfsdf");
+		};
+	});
+	return React.createElement("div", { className: "contenido" }, []);
 };
 
 var app = () => {
-  let [state, setState] = React.useState(0);
-  let ref = React.useRef(true);
-  console.log(state);
-  if (ref.current) {
-    setState(state + 1);
-    ref.current = false;
-  }
-  React.useEffect(() => {
-    console.log("asfsdafsafsadf");
-  });
-  React.useEffect(() => {
-    console.log("asfsdafsafsadf");
-  }, [state]);
-  console.log(state);
-  return React.createElement("div", null, [state]);
+	let [state, setState] = React.useState(0);
+	let ref = React.useRef(true);
+	console.log(state);
+	if (ref.current) {
+		setState(state + 1);
+		ref.current = false;
+	}
+	React.useEffect(() => {
+		console.log("asfsdafsafsadf");
+	});
+	React.useEffect(() => {
+		console.log("asfsdafsafsadf");
+	}, [state]);
+	console.log(state);
+	return React.createElement("div", null, [state]);
 };
 
 /* var app = () => {
@@ -67,35 +67,44 @@ var app = () => {
 var ctx = React.createContext(10);
 
 var context_user = () => {
-  let a = React.useContext(ctx);
-  console.log(a);
-  return React.createElement("div", { key: 1 }, [a]);
+	let a = React.useContext(ctx);
+	console.log(a);
+	return React.createElement("div", { key: 1 }, [a]);
 };
 
 var app = () => {
-  let ref = React.useRef(333);
-  console.log(ref);
-  return React.createElement(
-    ctx.Provider,
-    { value: 0, ref: ref },
-    React.createElement(context_user)
-  );
+	let ref = React.useRef(333);
+	console.log(ref);
+	return React.createElement(
+		ctx.Provider,
+		{ value: 0, ref: ref },
+		React.createElement(context_user),
+	);
 };
 
 var app = React.forwardRef(() => {
-  let ref = React.useRef(333);
-  console.log(ref);
-  return React.createElement(
-    ctx.Provider,
-    { value: 0, ref: ref },
-    React.createElement(context_user)
-  );
+	let ref = React.useRef(333);
+	console.log(ref);
+	return React.createElement(
+		ctx.Provider,
+		{ value: 0, ref: ref },
+		React.createElement(context_user),
+	);
 });
 
 var app = () => {
-  return React.createElement("script", {
-    "aria-hidden": "true",
-  }, `console.log("asdfas");`);
+	return React.createElement(
+		"script",
+		{
+			"aria-hidden": "true",
+		},
+		`console.log("asdfas");`,
+	);
 };
 
-console.log(ReactDOM.renderToStaticMarkup(React.createElement(app, null)));
+function App() {
+	let value = "asdfasdf";
+	return <input id="sidebar-search-input" placeholder="Search" value={value} />;
+}
+
+console.log(ReactDOM.renderToStaticMarkup(<App />));

arch/server/render-html-to-stream.js

@@ -1,5 +1,5 @@
 import React, { Suspense } from "react";
-import ReactDOM from "react-dom/server";
+import * as ReactDOM from "react-dom/server";
 
 const sleep = (seconds) =>
 	new Promise((res) => setTimeout(res, seconds * 1000));
@@ -61,7 +61,7 @@ const App = () => (
 	</React.Suspense>
 ); */
 
-function App() {
+/* function App() {
     return React.createElement(
       Suspense,
       { fallback: "Fallback 1" },
@@ -77,8 +77,32 @@ function App() {
         )
       )
     );
-  }
+  } */
+
+/* function App() {
+	return (
+		<html>
+			<body>
+				<head>"asdf"</head>
+				<div key="33">lol</div>
+			</body>
+		</html>
+	);
+}
+ */
+
+function App() {
+	let value = "asdfasdf";
+	return (
+		<input
+			id="sidebar-search-input"
+			placeholder="Search"
+			defaultValue={"L??"}
+			onChange={() => {}}
+		/>
+	);
+}
 
-ReactDOM.renderToReadableStream(<App />).then((stream) => {
+ReactDOM.renderToReadableStream(<App />, {}).then((stream) => {
 	debug(stream);
 });

arch/server/render-rsc-to-stream.js

@@ -3,7 +3,11 @@ import { renderToPipeableStream } from "react-server-dom-webpack/server";
 
 const DefferedComponent = async ({ sleep, children }) => {
 	await new Promise((res) => setTimeout(() => res(), sleep * 1000));
-	return <span>Sleep {sleep}s, {children}</span>;
+	return (
+		<span>
+			Sleep {sleep}s, {children}
+		</span>
+	);
 };
 
 const decoder = new TextDecoder();
@@ -25,7 +29,7 @@ const debug = (readableStream) => {
 const sleep = (seconds) =>
 	new Promise((res) => setTimeout(res, seconds * 1000));
 
-const App = () => (
+/* const App = () => (
 	<React.Suspense fallback="Fallback 1">
 		<DefferedComponent sleep={1}>
 			<React.Suspense fallback="Fallback 2">
@@ -34,6 +38,13 @@ const App = () => (
 		</DefferedComponent>
 	</React.Suspense>
 );
+ */
+
+function App() {
+	let value = "asdfasdf";
+	let onChange = () => {};
+	return <input id="sidebar-search-input" placeholder="Search" value={value} />;
+}
 
 const { pipe } = renderToPipeableStream(<App />);
 

benchmark/main.re

@@ -33,12 +33,14 @@ let run = (tests: list(Bench.Test.t)) => {
 
 let test_component =
   Bench.Test.create(~name="renderToStaticMarkup_component", () => {
-    ignore(ReactDOM.renderToStaticMarkup(<HelloWorld />))
+    let _element = ReactDOM.renderToStaticMarkup(<Static_small />);
+    ();
   });
 
 let test_app =
   Bench.Test.create(~name="renderToStaticMarkup_app", () => {
-    ignore(ReactDOM.renderToStaticMarkup(<App />))
+    let _element = ReactDOM.renderToStaticMarkup(<App />);
+    ();
   });
 
 run([test_component, test_app]);

benchmark/once.ml

@@ -38,7 +38,7 @@ let main () =
   in
 
   let render_hello_world () =
-    let _ = ReactDOM.renderToStaticMarkup (HelloWorld.make ()) in
+    let _ = ReactDOM.renderToStaticMarkup (Static_small.make ()) in
     ()
   in
   let render_app () =

demo/client/index.re → demo/client/Hydrate.re

@@ -1,12 +1,13 @@
-let%browser_only mockInitWebsocket = () => [%mel.raw
-  {|
+let%browser_only mockInitWebsocket: unit => unit =
+  () => [%mel.raw
+    {|
   function mockInitWebsocket() {
     console.log("Load JS");
   }
 |}
-];
+  ];
 
-let _ = mockInitWebsocket();
+mockInitWebsocket();
 
 let element = Webapi.Dom.Document.querySelector("#root", Webapi.Dom.document);