SSR + dynamic css props

ReasonOCamlIndia · Jun 23, 2024 · 7fe9493 · 7fe9493
1 parent 0dc5e22
commit 7fe9493
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/bin/dune b/bin/dune
@@ -1,7 +1,7 @@
 (executable
  (public_name reason_india_website)
  (name main)
- (preprocess (pps server-reason-react.ppx))
+ (preprocess (pps server-reason-react.ppx     server-reason-react.melange_ppx))
  (libraries reason_india_website
             dream
             server-reason-react.react

diff --git a/bin/main.re b/bin/main.re
@@ -1,6 +1,8 @@
 module Page = {
   [@react.component]
-  let make = (~children, ~scripts=[], ~stylesheet) => {
+  let make = (~scripts=[], ~appHTMLString) => {
+    print_endline("Inside component <<<<<<");
+    let stylesheet = CssJs.render_style_tag();
     <html style={ReactDOM.Style.make(~height="100%", ())}>
       <head>
         <meta charSet="UTF-8" />
@@ -16,22 +18,23 @@ module Page = {
         <style> {React.string(stylesheet)} </style>
       </head>
       <body style={ReactDOM.Style.make(~height="100%", ())}>
-        <div id="root" style={ReactDOM.Style.make(~height="100%", ())}>
-          children
-        </div>
+        <div
+          dangerouslySetInnerHTML={"__html": appHTMLString}
+          id="root"
+          style={ReactDOM.Style.make(~height="100%", ())}
+        />
         {scripts |> List.map(src => <script src />) |> React.list}
       </body>
     </html>;
   };
 };
 
 let hello_route_handler = _request => {
-  let stylesheet = CssJs.render_style_tag();
+  let appHTMLString =
+    ReactDOM.renderToString(<Reason_india_website_native.App />);
   Dream.html(
     ReactDOM.renderToString(
-      <Page stylesheet scripts=["/static/app.js"]>
-        <Reason_india_website_native.App />
-      </Page>,
+      <Page scripts=["/static/app.js"] appHTMLString />,
     ),
   );
 };

diff --git a/lib/native/app.re b/lib/native/app.re
@@ -4,20 +4,20 @@ let useState = a => {
   (value, setValueStatic);
 };
 
-
-module Container = [%styled.section {|
+module Container = [%styled.section
+  (~blah) => {|
   height: 100%;
   width: 100%;
-  display: flex;
+  display: $(blah);
   align-items: center;
   justify-content: center;
-|}];
-
+|}
+];
 
 [@react.component]
 let make = () => {
   let (count, setCount) = useState(0);
-  <Container>
+  <Container blah=`flex>
     <section className="centered">
       <section>
         {React.string(" clicked " ++ Int.to_string(count) ++ " times")}