diff --git a/README.md b/README.md
index 0025a97ab..37859f5f1 100755
--- a/README.md
+++ b/README.md
@@ -1,10 +1,9 @@
-> **Warning**
-> This repo contains a few parts that are considered experimental. The stable parts are used in production at [app.ahrefs.com](https://app.ahrefs.com) for all users and [wordcount.com](https://wordcount.com), but `Belt`, `Js` modules have missing APIs. non-implemented functions and unsafe code. Use it at your own risk.
-> This project enables sharing ReasonReact code between native (compiled to machine code) and Melange (compiled to JavaScript). There are a lot of interesting pieces from this architecture and stack. If you are interested, feel free to contact me in [Discord](https://discord.com/users/122441959414431745) or [Twitter](https://www.twitter.com/davesnx).
-
# server-reason-react
-Re-implementation of `react`, `react-dom` and `react-dom/server` to run on the server and also, a [few related libraries](https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/index.html#other-libraries) to enable Server-side Rendering for reason-react applications.
+Re-implementation of `react`, `react-dom` and `react-dom/server` to run on the server and also, a [few related libraries](https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/index.html#other-libraries) to enable Server-side rendering for reason-react applications, also contains a [few libraries](https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/universal-code.html) and a [ppx](https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html) to share code between native (compiled to machine code) and JavaScript (compiled by [Melange](https://melange.re)).
+
+> **Warning**
+> This repo contains a few parts that are considered experimental. The stable parts are used in production at [app.ahrefs.com](https://app.ahrefs.com) for all users and [wordcount.com](https://wordcount.com), but `Belt`, `Js` modules have missing APIs, non-implemented functions and unsafe code. Use it at your own risk.
## Why
Explained more details in this blog post [sancho.dev/blog/server-side-rendering-react-in-ocaml](https://sancho.dev/blog/server-side-rendering-react-in-ocaml)
diff --git a/arch/server/package.json b/arch/server/package.json
index ce9622f1b..f111f7a82 100644
--- a/arch/server/package.json
+++ b/arch/server/package.json
@@ -3,7 +3,8 @@
"version": "0.0.1",
"scripts": {
"react-dom-server": "node react-dom-server.js",
- "render-to-stream": "bun render-to-stream.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"
},
"license": "MIT",
diff --git a/arch/server/react-server-dom-webpack.js b/arch/server/react-server-dom-webpack.js
deleted file mode 100644
index efdcf186e..000000000
--- a/arch/server/react-server-dom-webpack.js
+++ /dev/null
@@ -1,106 +0,0 @@
-const React = require("react");
-const ReactServerDOM = require("react-server-dom-webpack/server");
-
-let sleep = (ms, value) => new Promise(resolve => setTimeout(() => resolve(value), ms));
-
-
-let Text = ({children}) => React.createElement("span", {}, children);
-/* let App = () => {
- return React.createElement("div", null, [
- React.createElement("span", {key: "home"}, ["Home"]),
- React.createElement("span", {key: "nohome"}, ["Nohome"]),
- ]);
-}; */
-
-/* let Text = async ({children}) => {
- let value = await sleep(2000, "lola");
- return value;
-};
-
-let ClientComponent = {
- $$typeof: Symbol.for("react.client.reference"),
- $$id: "ClientComponent",
- $$async: false,
- default: () => "Hello from the client!",
- name: "ClientComponent",
-};
-
-let App = () => {
- return React.createElement(React.Suspense, {fallback: "Loading..."}, [
- React.createElement(Text, {key: "hi"}, "hi"),
- React.createElement(ClientComponent.default, {key: "cc"}, []),
- ]);
-};
-
-let main = React.createElement(App, {}, []);
- */
-
-/* let App = () => {
- return React.createElement("div", {dangerouslySetInnerHTML: {__html: "console.log(\"hi\")"}}, []);
-}; */
-
- /* let app codition =
- React.Upper_case_component
- (fun () ->
- let text = if codition then "foo" else "bar" in
- React.createElement "span" [] [ React.string text ])
- in */
-
-/* let Foo = () => {
- return React.createElement("span", {}, "foo");
-};
-
-let App = () => {
- return React.createElement(Foo, {}, []);
-}; */
-
-/* let Text = ({children}) => React.createElement("span", {}, children);
-
-let App = () => ([
- React.createElement(Text, {}, "hi"),
- React.createElement(Text, {}, "hola"),
-]); */
-
-// 2:["$","span",null,{"children":"hi"},"$3"]
-// 4:["$","span",null,{"children":"hola"},"$5"]
-// 0:["$2","$4"]
-
-/* let Layout = ({children}) => React.createElement("div", {}, children);
-
-
-let App = () =>
- React.createElement(
- Layout,
- {},
- [
- React.createElement(Text, {key: "hi"}, "hi"),
- React.createElement(Text, {key: "hola"}, "hola"),
- ],
- ); */
-
- /* let app () =
- React.Suspense.make
- ~fallback:(React.string "Loading...")
- ~children:
- (React.createElement "div" []
- [
- React.Upper_case_component (text ~children:[ React.string "hi" ]);
- React.Upper_case_component (text ~children:[ React.string "hola" ]);
- ])
- ()
- in
- let main = React.Upper_case_component app in
- let%lwt stream = ReactServerDOM.render_to_model main in */
-
-let App = () => {
- return React.createElement(React.Suspense, {fallback: "Loading..."}, [
- React.createElement("div", null, [
- React.createElement(Text, null, "hi"),
- React.createElement(Text, null, "hola"),
-]),
- ]);
-};
-
-let {pipe} = ReactServerDOM.renderToPipeableStream(App());
-
-pipe(process.stdout);
diff --git a/arch/server/render-to-stream.js b/arch/server/render-html-to-stream.js
similarity index 98%
rename from arch/server/render-to-stream.js
rename to arch/server/render-html-to-stream.js
index d836a11cf..d49f50352 100644
--- a/arch/server/render-to-stream.js
+++ b/arch/server/render-html-to-stream.js
@@ -26,18 +26,10 @@ const debug = (readableStream) => {
reader.read().then(debugReader);
};
-/* const app = () => (
-
-
- "lol"
-
-
-); */
-
const sleep = (seconds) =>
new Promise((res) => setTimeout(res, seconds * 1000));
-const App = () => (
+/* const App = () => (
@@ -45,8 +37,17 @@ const App = () => (
+); */
+
+const App = () => (
+
+
+ "lol"
+
+
);
+
ReactDOM.renderToReadableStream().then((stream) => {
debug(stream);
});
diff --git a/arch/server/render-rsc-to-stream.js b/arch/server/render-rsc-to-stream.js
new file mode 100644
index 000000000..e789ec5af
--- /dev/null
+++ b/arch/server/render-rsc-to-stream.js
@@ -0,0 +1,40 @@
+import React from "react";
+import { renderToPipeableStream } from "react-server-dom-webpack/server";
+
+const DefferedComponent = async ({ sleep, children }) => {
+ await new Promise((res) => setTimeout(() => res(), sleep * 1000));
+ return Sleep {sleep}s, {children};
+};
+
+const decoder = new TextDecoder();
+
+const debug = (readableStream) => {
+ const reader = readableStream.getReader();
+ const debugReader = ({ done, value }) => {
+ if (done) {
+ console.log("Stream complete");
+ return;
+ }
+ console.log(decoder.decode(value));
+ console.log(" ");
+ return reader.read().then(debugReader);
+ };
+ reader.read().then(debugReader);
+};
+
+const sleep = (seconds) =>
+ new Promise((res) => setTimeout(res, seconds * 1000));
+
+const App = () => (
+
+
+
+ "lol"
+
+
+
+);
+
+const { pipe } = renderToPipeableStream();
+
+pipe(process.stdout);
diff --git a/demo/client/dune b/demo/client/dune
index 131c68ec9..cf95c7a3c 100644
--- a/demo/client/dune
+++ b/demo/client/dune
@@ -4,7 +4,7 @@
(enabled_if
(= %{profile} "dev"))
(modules index)
- (libraries melange demo_shared_js reason-react)
+ (libraries melange demo_shared_js reason-react melange.dom melange-webapi)
(preprocess
(pps reason-react-ppx browser_ppx -js melange.ppx))
(module_systems es6))
diff --git a/demo/client/index.re b/demo/client/index.re
index 0ad6d1a19..250c9f5ea 100644
--- a/demo/client/index.re
+++ b/demo/client/index.re
@@ -1,6 +1,8 @@
let _ = MelRaw.mockInitWebsocket();
-switch (ReactDOM.querySelector("#root")) {
+let element = Webapi.Dom.Document.querySelector("#root", Webapi.Dom.document);
+
+switch (element) {
| Some(el) =>
let _ = ReactDOM.Client.hydrateRoot(el, );
();
diff --git a/demo/client/runtime-with-client.jsx b/demo/client/runtime-with-client.jsx
index ccd90a278..6fc2e6650 100644
--- a/demo/client/runtime-with-client.jsx
+++ b/demo/client/runtime-with-client.jsx
@@ -1,11 +1,10 @@
window.__webpack_require__ = (id) => {
- const component = window.__client_manifest_map[id];
console.log("REQUIRE ---");
+ const component = window.__client_manifest_map[id];
console.log(id);
console.log(component);
console.log("---");
- /* return { __esModule: true, default: component }; */
- return component;
+ return { __esModule: true, default: component };
};
const React = require("react");
@@ -21,17 +20,20 @@ const register = (name, render) => {
};
register(
- "Note_editor",
- React.lazy(() => import("./app/demo/universal/js/Note_editor.js")),
+ "Counter",
+ React.lazy(() => import("./app/demo/universal/js/Counter.js"))
);
+
register(
- "Counter",
- React.lazy(() => import("./app/demo/universal/js/Counter.js")),
+ "Note_editor",
+ React.lazy(() => import("./app/demo/universal/js/Note_editor.js")),
);
-register(
+
+/* register(
"Promise_renderer",
React.lazy(() => import("./app/demo/universal/js/Promise_renderer.js")),
-);
+); */
+
/* end bootstrap.js */
class ErrorBoundary extends React.Component {
@@ -68,14 +70,17 @@ try {
const stream = window.srr_stream.readable_stream;
const promise = ReactServerDOM.createFromReadableStream(stream);
const element = document.getElementById("root");
- const app = (
-
-
-
- );
+
React.startTransition(() => {
+ const app = (
+
+
+
+ );
ReactDOM.hydrateRoot(element, app);
});
} catch (e) {
- console.error(e);
+ console.error("Error type:", e.constructor.name);
+ console.error("Full error:", e);
+ console.error("Stack:", e.stack);
}
diff --git a/demo/server/server.re b/demo/server/server.re
index e0f4e2b51..086b6fc67 100644
--- a/demo/server/server.re
+++ b/demo/server/server.re
@@ -74,12 +74,34 @@ let stream_rsc = fn => {
);
};
-let serverComponentsHandler = request => {
- let sleep = (~ms, value) => {
- let%lwt () = Lwt_unix.sleep(ms /. 1000.);
- Lwt.return(value);
+module Page = {
+ [@react.async.component]
+ let make = () => {
+ let%lwt () = Lwt_unix.sleep(1.0);
+ Lwt.return(
+
+
+
+ {React.string("This is a small form")}
+
+ /* TODO: payload is wrong in client components */
+
+
+
+
+
+ ,
+ );
};
- let app = ;
+};
+
+let serverComponentsHandler = request => {
+ let app = ;
switch (Dream.header(request, "Accept")) {
| Some(accept) when is_react_component_header(accept) =>
stream_rsc(stream => {
@@ -202,7 +224,6 @@ let router = [
let () = {
Dream.run(
- ~adjust_terminal=true,
~port=8080,
~interface={
switch (Sys.getenv_opt("SERVER_INTERFACE")) {
diff --git a/demo/universal/native/lib/App.re b/demo/universal/native/lib/App.re
index fe28d43ad..ab93c7328 100644
--- a/demo/universal/native/lib/App.re
+++ b/demo/universal/native/lib/App.re
@@ -90,7 +90,7 @@ let make = () => {
- print_endline("Clicked")} />
+ print_endline("Clicked")} />
;
};
diff --git a/demo/universal/native/lib/Counter.re b/demo/universal/native/lib/Counter.re
index 4e478f365..936c527ea 100644
--- a/demo/universal/native/lib/Counter.re
+++ b/demo/universal/native/lib/Counter.re
@@ -1,4 +1,4 @@
-let make = (~initial, ~onClick as [@browser_only] onClick) => {
+let make = (~initial, ~onClick as [@browser_only] onClick=?, ()) => {
let (count, [@browser_only] setCount) = RR.useStateValue(initial);
[@browser_only]
@@ -6,11 +6,14 @@ let make = (~initial, ~onClick as [@browser_only] onClick) => {
setCount(count + 1);
Js.log2("Printing count", count);
- onClick(e);
+ switch (onClick) {
+ | Some(onClick) => onClick(e)
+ | None => ()
+ };
};
-
+
{
-
- {React.string(
- "The HTML comes from the server"
- ++ " then is updated by the client after React runs. Via render or hydration (when using ReactDOM.hydrateRoot).",
- )}
-
;
+};
diff --git a/demo/universal/native/lib/MelRaw.re b/demo/universal/native/lib/MelRaw.re
index b3d556026..8e6843d40 100644
--- a/demo/universal/native/lib/MelRaw.re
+++ b/demo/universal/native/lib/MelRaw.re
@@ -1,12 +1,13 @@
-let%browser_only mockInitWebsocket = () =>
- {%mel.raw |
+let%browser_only mockInitWebsocket = () => [%mel.raw
+ {|
function mockInitWebsocket() {
console.log("Load JS");
}
-|};
+|}
+];
-let%browser_only initWebsocket = () =>
- {%mel.raw |
+let%browser_only initWebsocket = () => [%mel.raw
+ {|
function initWebsocket() {
var socketUrl = "ws://" + location.host + "/_livereload";
var s = new WebSocket(socketUrl);
@@ -39,6 +40,7 @@ let%browser_only initWebsocket = () =>
console.debug("Live reload: WebSocket error:", event);
};
}
- |};
+ |}
+];
let x = 22;
diff --git a/demo/universal/native/lib/Note_editor.re b/demo/universal/native/lib/Note_editor.re
index c4ef7fe53..c6120d68e 100644
--- a/demo/universal/native/lib/Note_editor.re
+++ b/demo/universal/native/lib/Note_editor.re
@@ -51,12 +51,3 @@ let make = (~title, ~body) =>
};
let default = make;
-
-/* switch%platform (Runtime.platform) {
- | Server => ()
- | Client =>
- Components.register("Note_editor", (props: Js.t({..})) => {
- React.jsx(make, makeProps(~title=props##title, ~body=props##body, ()))
- })
- };
- */
diff --git a/demo/universal/native/lib/Noter.re b/demo/universal/native/lib/Noter.re
deleted file mode 100644
index 058531756..000000000
--- a/demo/universal/native/lib/Noter.re
+++ /dev/null
@@ -1,38 +0,0 @@
-module Hr = {
- [@react.component]
- let make = () => {
-
;
- };
-};
-
-[@react.component]
-let make = (~valueIn3seconds as _) => {
- React.useEffect(() => {
- let _ = Js.log("Hello from the client");
- None;
- });
-
-
-
-
- {React.string("This is a small form")}
-
-
-
- print_endline("Clicked")} />
-
-
- ;
-};
diff --git a/demo/universal/native/lib/Promise_renderer.re b/demo/universal/native/lib/Promise_renderer.re
index 898d226ae..8fd8a4430 100644
--- a/demo/universal/native/lib/Promise_renderer.re
+++ b/demo/universal/native/lib/Promise_renderer.re
@@ -4,29 +4,24 @@ module Await = {
[@react.component]
let make = (~promise: Js.Promise.t(string)) => {
let value = React.Experimental.use(promise);
- {React.string("Promise resolved: " ++ value)}
;
+ React.string("[RESOLVED] " ++ value);
};
};
-let make = (~promise: Js.Promise.t(string)) =>
-
-
{React.string("Waiting for promise to resolve:")}
-
{React.string("Loading...")} {React.string(state)}
;
+ };
+};
+
+module Use_context = {
+ [@react.component]
+ let make = () => {
+ let captured = React.useContext(Context.value);
+ {React.string(captured)}
;
+ };
+};
diff --git a/packages/server-reason-react-ppx/cram/component.t/run.t b/packages/server-reason-react-ppx/cram/component.t/run.t
index 0377b8d81..0f5d254ec 100644
--- a/packages/server-reason-react-ppx/cram/component.t/run.t
+++ b/packages/server-reason-react-ppx/cram/component.t/run.t
@@ -27,9 +27,9 @@ We need to output ML syntax here, otherwise refmt could not parse it.
module Onclick_handler_button = struct
let make ?key:(_ : string option) ~name ?isDisabled () =
- let onClick event = Js.log event in
React.Upper_case_component
(fun () ->
+ let onClick event = Js.log event in
React.createElement "button"
(Stdlib.List.filter_map Fun.id
[
@@ -123,3 +123,22 @@ We need to output ML syntax here, otherwise refmt could not parse it.
end
let a = Async_component.make ~children:(React.createElement "div" [] []) ()
+
+ module Sequence = struct
+ let make ?key:(_ : string option) ~lola () =
+ React.Upper_case_component
+ (fun () ->
+ let state, setState = React.useState lola in
+ React.useEffect (fun () ->
+ setState lola;
+ None);
+ React.createElement "div" [] [ React.string state ])
+ end
+
+ module Use_context = struct
+ let make ?key:(_ : string option) () =
+ React.Upper_case_component
+ (fun () ->
+ let captured = React.useContext Context.value in
+ React.createElement "div" [] [ React.string captured ])
+ end
diff --git a/packages/server-reason-react-ppx/cram/functor.t/run.t b/packages/server-reason-react-ppx/cram/functor.t/run.t
index cdb0ef7ee..5df02d7be 100644
--- a/packages/server-reason-react-ppx/cram/functor.t/run.t
+++ b/packages/server-reason-react-ppx/cram/functor.t/run.t
@@ -9,6 +9,8 @@ We need to output ML syntax here, otherwise refmt could not parse it.
let x = M.x + 1
let make ?key:(_ : string option) ~a ~b () =
- print_endline "This function should be named `Test$Func`" M.x;
- React.Upper_case_component (fun () -> React.createElement "div" [] [])
+ React.Upper_case_component
+ (fun () ->
+ print_endline "This function should be named `Test$Func`" M.x;
+ React.createElement "div" [] [])
end
diff --git a/packages/server-reason-react-ppx/server_reason_react_ppx.ml b/packages/server-reason-react-ppx/server_reason_react_ppx.ml
index 78129e59e..7ef925fbb 100644
--- a/packages/server-reason-react-ppx/server_reason_react_ppx.ml
+++ b/packages/server-reason-react-ppx/server_reason_react_ppx.ml
@@ -14,17 +14,13 @@ let pexp_list ~loc xs =
exception Error of expression
let raise_errorf ~loc fmt =
- let open Ast_builder.Default in
Printf.ksprintf
(fun msg ->
let expr = pexp_extension ~loc (Location.error_extensionf ~loc "%s" msg) in
raise (Error expr))
fmt
-let make_string ~loc str =
- let open Ast_helper in
- Ast_helper.Exp.constant ~loc (Const.string str)
-
+let make_string ~loc str = Ast_helper.Exp.constant ~loc (Ast_helper.Const.string str)
let react_dot_component = "react.component"
let react_dot_async_dot_component = "react.async.component"
@@ -400,70 +396,55 @@ let get_function_name binding =
| { pvb_pat = { ppat_desc = Ppat_var { txt } } } -> txt
| _ -> raise_errorf ~loc:binding.pvb_loc "react.component calls cannot be destructured."
-(* TODO: there is a long-tail of unsupported features inside of blocks - Pexp_letmodule , Pexp_letexception , Pexp_ifthenelse *)
-let rec transform_function_with_warning expression =
+(* TODO: there are a few unsupported features inside of blocks - Pexp_letmodule , Pexp_letexception , Pexp_ifthenelse *)
+let add_unit_at_the_last_argument expression =
let loc = expression.pexp_loc in
- match expression.pexp_desc with
- (* let make = (~prop) => ... with no final unit *)
- | Pexp_fun (((Labelled _ | Optional _) as label), default, pattern, ({ pexp_desc = Pexp_fun _ } as internalExpression))
- ->
- let exp = transform_function_with_warning internalExpression in
- { expression with pexp_desc = Pexp_fun (label, default, pattern, exp) }
- (* let make = (()) => ... *)
- (* let make = (_) => ... *)
- | Pexp_fun
- (Nolabel, _default, { ppat_desc = Ppat_construct ({ txt = Lident "()" }, _) | Ppat_any }, _internalExpression) ->
- expression
- (* let make = (~prop) => ... *)
- | Pexp_fun (label, default, pattern, internalExpression) ->
- {
- expression with
- pexp_attributes = remove_warning_16_optional_argument_cannot_be_erased ~loc :: expression.pexp_attributes;
- pexp_desc =
- Pexp_fun
- ( label,
- default,
- pattern,
- {
- pexp_loc = expression.pexp_loc;
- pexp_desc = Pexp_fun (Nolabel, None, [%pat? ()], internalExpression);
- pexp_loc_stack = [];
- pexp_attributes = [];
- } );
- }
- (* let make = {let foo = bar in (~prop) => ...} *)
- | Pexp_let (recursive, vbs, internalExpression) ->
- (* here's where we spelunk! *)
- let exp = transform_function_with_warning internalExpression in
- { expression with pexp_desc = Pexp_let (recursive, vbs, exp) }
- (* let make = React.forwardRef((~prop) => ...) *)
- | Pexp_apply (_wrapperExpression, [ (Nolabel, internalExpression) ]) ->
- transform_function_with_warning internalExpression
- (* let make = React.memoCustomCompareProps((~prop) => ..., (prevPros, nextProps) => true) *)
- | Pexp_apply
- (_wrapperExpression, [ (Nolabel, internalExpression); ((Nolabel, { pexp_desc = Pexp_fun _ }) as _compareProps) ])
- ->
- transform_function_with_warning internalExpression
- | Pexp_sequence (wrapperExpression, internalExpression) ->
- let exp = transform_function_with_warning internalExpression in
- { expression with pexp_desc = Pexp_sequence (wrapperExpression, exp) }
- | _ -> expression
-
-let transform_last_expression expr fn =
+ let rec inner expression =
+ match expression.pexp_desc with
+ (* let make = (~prop) => ... with no final unit *)
+ | Pexp_fun
+ (((Labelled _ | Optional _) as label), default, pattern, ({ pexp_desc = Pexp_fun _ } as internalExpression)) ->
+ pexp_fun ~loc:expression.pexp_loc label default pattern (inner internalExpression)
+ (* let make = (()) => ... *)
+ (* let make = (_) => ... *)
+ | Pexp_fun (Nolabel, _, { ppat_desc = Ppat_construct ({ txt = Lident "()" }, _) | Ppat_any }, _) -> expression
+ (* let make = (~prop) => ... *)
+ | Pexp_fun (label, default, pattern, internalExpression) ->
+ {
+ expression with
+ pexp_attributes = remove_warning_16_optional_argument_cannot_be_erased ~loc :: expression.pexp_attributes;
+ pexp_desc =
+ Pexp_fun
+ (label, default, pattern, pexp_fun ~loc:expression.pexp_loc Nolabel None [%pat? ()] internalExpression);
+ }
+ (* let make = {let foo = bar in (~prop) => ...} *)
+ | Pexp_let (recursive, vbs, internalExpression) ->
+ pexp_let ~loc:expression.pexp_loc recursive vbs (inner internalExpression)
+ (* let make = React.forwardRef((~prop) => ...) *)
+ | Pexp_apply (_, [ (Nolabel, internalExpression) ]) -> inner internalExpression
+ (* let make = React.memoCustomCompareProps((~prop) => ..., (prevPros, nextProps) => true) *)
+ | Pexp_apply (_, [ (Nolabel, internalExpression); ((Nolabel, { pexp_desc = Pexp_fun _ }) as _compareProps) ]) ->
+ inner internalExpression
+ | Pexp_sequence (wrapperExpression, internalExpression) ->
+ pexp_sequence ~loc:expression.pexp_loc wrapperExpression (inner internalExpression)
+ | _ -> expression
+ in
+ inner expression
+
+let transform_fun_body_expression expr fn =
let rec inner expr =
match expr.pexp_desc with
- | Pexp_sequence (expr, sequence) -> pexp_sequence ~loc:expr.pexp_loc expr (inner sequence)
- | Pexp_let (flag, patt, expression) -> pexp_let ~loc:expr.pexp_loc flag patt (inner expression)
| Pexp_fun (label, def, patt, expression) -> pexp_fun ~loc:expr.pexp_loc label def patt (inner expression)
| _ -> fn expr
in
inner expr
-let make_value_binding binding wrapping =
+let make_value_binding binding react_element_variant_wrapping =
let loc = binding.pvb_loc in
let ghost_loc = { binding.pvb_loc with loc_ghost = true } in
- let binding_expr = transform_function_with_warning binding.pvb_expr in
+ let binding_with_unit = add_unit_at_the_last_argument binding.pvb_expr in
+ let binding_expr = transform_fun_body_expression binding_with_unit react_element_variant_wrapping in
(* Builds an AST node for the modified `make` function *)
let name = Ast_helper.Pat.mk ~loc:ghost_loc (Ppat_var { txt = get_function_name binding; loc = ghost_loc }) in
let key_arg = Optional "key" in
@@ -474,10 +455,8 @@ let make_value_binding binding wrapping =
let key_pattern = ppat_constraint ~loc key_renamed_to_underscore core_type in
(* Append key argument since we want to allow users of this component to set key
(and assign it to _ since it shouldn't be used) *)
- let body_expression =
- pexp_fun ~loc:ghost_loc key_arg default_value key_pattern (transform_last_expression binding_expr wrapping)
- in
- Ast_helper.Vb.mk ~loc name body_expression
+ let function_body = pexp_fun ~loc:ghost_loc key_arg default_value key_pattern binding_expr in
+ Ast_helper.Vb.mk ~loc name function_body
let rewrite_signature_item signature_item =
(* Remove the [@react.component] from the AST *)
@@ -498,9 +477,9 @@ let rewrite_signature_item signature_item =
let loc = signature_item.psig_loc in
[%sigi:
[%%ocaml.error
- "externals aren't supported on server-reason-react. externals are used to bind to React components defined \
- in JavaScript, in the server, that doesn't make sense. If you need to render this on the server, \
- implement a placeholder or an empty element"]])
+ "externals aren't supported on server-reason-react. externals are used to bind to React components from \
+ JavaScript. In the server, that doesn't make sense. If you need to render this on the server, implement a \
+ stub component or an empty element (React.null)"]])
| _signature_item -> signature_item
let rewrite_structure_item structure_item =
diff --git a/packages/server-reason-react-ppx/test/test.re b/packages/server-reason-react-ppx/test/test.re
index f99d2972f..221a29bc0 100644
--- a/packages/server-reason-react-ppx/test/test.re
+++ b/packages/server-reason-react-ppx/test/test.re
@@ -1,25 +1,25 @@
-let test = (title, fn) => Alcotest.test_case(title, `Quick, fn);
+let test = (title, fn) => (title, [Alcotest.test_case("", `Quick, fn)]);
let assert_string = (left, right) => {
Alcotest.check(Alcotest.string, "should be equal", right, left);
};
let tag = () => {
- let div = ;
- assert_string(ReactDOM.renderToStaticMarkup(div), {||});
+ assert_string(ReactDOM.renderToStaticMarkup(), {||});
};
let empty_attribute = () => {
- let div = ;
assert_string(
- ReactDOM.renderToStaticMarkup(div),
+ ReactDOM.renderToStaticMarkup(),
{||},
);
};
let bool_attribute = () => {
- let div = ;
- assert_string(ReactDOM.renderToStaticMarkup(div), {||});
+ assert_string(
+ ReactDOM.renderToStaticMarkup(),
+ {||},
+ );
};
let bool_attributes = () => {
@@ -68,15 +68,15 @@ let link_as_attribute = () => {
};
let innerhtml_attribute = () => {
- let div = ;
- assert_string(ReactDOM.renderToStaticMarkup(div), {|foo
|});
+ let app = ;
+ assert_string(ReactDOM.renderToStaticMarkup(app), {|foo
|});
};
let innerhtml_attribute_complex = () => {
- let div =
+ let app =
;
assert_string(
- ReactDOM.renderToStaticMarkup(div),
+ ReactDOM.renderToStaticMarkup(app),
{|console.log("Lola")
|},
);
};
@@ -97,21 +97,21 @@ let int_opt_attribute_none = () => {
};
let fragment = () => {
- let div = <> ;
+ let app = <> ;
assert_string(
- ReactDOM.renderToStaticMarkup(div),
+ ReactDOM.renderToStaticMarkup(app),
{||},
);
};
let fragment_with_key = () => {
- let div =
+ let app =
;
assert_string(
- ReactDOM.renderToStaticMarkup(div),
+ ReactDOM.renderToStaticMarkup(app),
{||},
);
};
@@ -380,49 +380,94 @@ let optional_prop = () => {
);
};
-let _ =
- Alcotest.run(
- "server-reason-react.ppx",
- [
- (
- "renderToStaticMarkup",
- [
- test("div", tag),
- test("div_empty_attr", empty_attribute),
- test("div_bool_attr", bool_attribute),
- test("input_bool_attrs", bool_attributes),
- test("p_inner_html", innerhtml),
- test("div_int_attr", int_attribute),
- test("svg_1", svg_1),
- test("svg_2", svg_2),
- test("booleanish_props_with_ppx", booleanish_props_with_ppx),
- test("booleanish_props_without_ppx", booleanish_props_without_ppx),
- test("style_attr", style_attribute),
- test("div_ref_attr", ref_attribute),
- test("link_as_attr", link_as_attribute),
- test("inner_html_attr", innerhtml_attribute),
- test("p_inner_html", innerhtml_attribute_complex),
- test("int_opt_attr_some", int_opt_attribute_some),
- test("int_opt_attr_none", int_opt_attribute_none),
- test("string_opt_attr_some", string_opt_attribute_some),
- test("string_opt_attr_none", string_opt_attribute_none),
- test("bool_opt_attr_some", bool_opt_attribute_some),
- test("bool_opt_attr_none", bool_opt_attribute_none),
- test("style_opt_attr_some", style_opt_attribute_some),
- test("style_opt_attr_none", style_opt_attribute_none),
- test("ref_opt_attr_some", ref_opt_attribute_some),
- test("ref_opt_attr_none", ref_opt_attribute_none),
- test("test_fragment", fragment),
- test("test_fragment_with_key", fragment_with_key),
- test("test_children_uppercase", children_uppercase),
- test("test_children_lowercase", children_lowercase),
- test("event_onClick", onClick_empty),
- test("children_one_element", children_one_element),
- test("children_multiple_elements", children_multiple_elements),
- test("createElementVariadic", create_element_variadic),
- test("aria_props", aria_props),
- test("optional_prop", optional_prop),
- ],
- ),
- ],
+let context = React.createContext(10);
+
+module ContextProvider = {
+ include React.Context;
+ let make = React.Context.provider(context);
+};
+
+module ContextConsumer = {
+ [@react.component]
+ let make = () => {
+ let value = React.useContext(context);
+ ;
+ };
+};
+
+let context = () => {
+ let component =
+ ;
+
+ assert_string(
+ ReactDOM.renderToStaticMarkup(component),
+ "",
+ );
+};
+
+let context_2 = () => {
+ let component =
+ ;
+
+ assert_string(
+ ReactDOM.renderToStaticMarkup(component),
+ "",
);
+};
+
+let multiple_contexts = () => {
+ let _component =
+ ;
+
+ let component =
+ ;
+
+ assert_string(
+ ReactDOM.renderToStaticMarkup(component),
+ "",
+ );
+};
+
+Alcotest.run(
+ "server-reason-react.ppx",
+ [
+ test("tag", tag),
+ test("empty_attribute", empty_attribute),
+ test("bool_attribute", bool_attribute),
+ test("bool_attributes", bool_attributes),
+ test("innerhtml", innerhtml),
+ test("int_attribute", int_attribute),
+ test("svg_1", svg_1),
+ test("svg_2", svg_2),
+ test("booleanish_props_with_ppx", booleanish_props_with_ppx),
+ test("booleanish_props_without_ppx", booleanish_props_without_ppx),
+ test("style_attribute", style_attribute),
+ test("ref_attribute", ref_attribute),
+ test("link_as_attribute", link_as_attribute),
+ test("inner_html_attribute", innerhtml_attribute),
+ test("inner_html_attribute_complex", innerhtml_attribute_complex),
+ test("int_opt_attr_some", int_opt_attribute_some),
+ test("int_opt_attribute_none", int_opt_attribute_none),
+ test("string_opt_attribute_some", string_opt_attribute_some),
+ test("string_opt_attribute_none", string_opt_attribute_none),
+ test("bool_opt_attribute_some", bool_opt_attribute_some),
+ test("bool_opt_attribute_none", bool_opt_attribute_none),
+ test("style_opt_attribute_some", style_opt_attribute_some),
+ test("style_opt_attribute_none", style_opt_attribute_none),
+ test("ref_opt_attribute_some", ref_opt_attribute_some),
+ test("ref_opt_attribute_none", ref_opt_attribute_none),
+ test("fragment", fragment),
+ test("fragment_with_key", fragment_with_key),
+ test("children_uppercase", children_uppercase),
+ test("children_lowercase", children_lowercase),
+ test("event_onClick", onClick_empty),
+ test("children_one_element", children_one_element),
+ test("children_multiple_elements", children_multiple_elements),
+ test("create_element_variadic", create_element_variadic),
+ test("aria_props", aria_props),
+ test("optional_prop", optional_prop),
+ test("context", context),
+ test("context_2", context_2),
+ test("multiple_contexts", multiple_contexts),
+ ],
+);
diff --git a/server-reason-react.opam b/server-reason-react.opam
index 20e94effa..5583f59a8 100644
--- a/server-reason-react.opam
+++ b/server-reason-react.opam
@@ -9,7 +9,7 @@ bug-reports: "https://github.com/ml-in-barcelona/server-reason-react/issues"
depends: [
"dune" {>= "3.9"}
"ocaml" {>= "5.0.0"}
- "reason" {>= "3.11.0"}
+ "reason" {>= "3.14.0"}
"melange" {>= "3.0.0"}
"uucp" {>= "16.0.0"}
"ppxlib" {> "0.23.0"}