Merge remote-tracking branch 'origin/main' into feat/navigation

* origin/main:
  Specify model values at React (#309)
  feat: allow async in client props (#315)
  chore: add context to turn_element_into_payload
  revert: client_value to push
  revert: Fiber abstraction of render_element
  revert: remove push on async component
  revert: remove debug info changes
  chore: add better naming to root_data_payload
  feat: change serialize for to_chunk
  Improve CI (#313)
  feat: improve debugging due to new fiber/model contextg
  Add environtmnet for srr
  Client component's can't be functions
  refact: improve the Fiber and Model stream context
  fix: align Suspense with reason-react (#311)
  fix: adjust doc link on tests
  Fix broken link to browser_ppx

Author: pedrobslisboa

.github/workflows/ci.yml

@@ -9,7 +9,6 @@ on:
     - main
 
 env:
-  OPAM_VERSION: 2.3.0
   DUNE_PROFILE: release
   OCAMLRUNPARAM: b
 
@@ -44,19 +43,14 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Install openssl
-        if: matrix.os == 'macos-latest'
-        run: |
-          pkg-config --modversion openssl
-
       - name: Load npm cache
         id: npm-cache
         uses: actions/cache/restore@v4
         with:
           path: |
             demo/node_modules
             demo/client/node_modules
-          key: npm-${{ matrix.os }}-${{ hashFiles('demo/package.json') }}-${{ hashFiles('demo/client/package.json') }}
+          key: v1.0.0-npm-${{ matrix.os }}-${{ hashFiles('demo/package.json') }}-${{ hashFiles('demo/client/package.json') }}
 
       - name: Load opam cache
         id: opam-cache
@@ -67,10 +61,10 @@ jobs:
             ~/.opam
             _opam
             .opam-path
-          key: opam-${{ matrix.os }}-${{ matrix.ocaml-compiler }}-${{ hashFiles('**.opam') }}
+          key: v1.0.0-opam-${{ matrix.os }}-${{ matrix.ocaml-compiler }}-${{ hashFiles('**.opam') }}
 
       - name: Use OCaml ${{ matrix.ocaml-compiler }}
-        uses: ocaml/setup-ocaml@v3.2.5
+        uses: ocaml/setup-ocaml@v3.4.5
         if: steps.opam-cache.outputs.cache-hit != 'true'
         with:
           ocaml-compiler: ${{ matrix.ocaml-compiler }}
@@ -134,19 +128,18 @@ jobs:
         run: make test
 
       - name: Generate docs
-        if: github.ref == 'refs/heads/main' && matrix.ocaml-compiler == '5.2.0'
+        if: github.ref == 'refs/heads/main' && matrix.os == 'ubuntu-latest' && matrix.ocaml-compiler == '5.2.0'
         run: |
           opam install -y odoc-driver
           make docs
 
-      - name: Publish docs
-        uses: crazy-max/ghaction-github-pages@v1
-        if: github.ref == 'refs/heads/main' && matrix.ocaml-compiler == '5.2.0'
+      - name: Upload docs artifact
+        if: github.ref == 'refs/heads/main' && matrix.os == 'ubuntu-latest' && matrix.ocaml-compiler == '5.2.0'
+        uses: actions/upload-artifact@v4
         with:
-          target_branch: gh-pages
-          build_dir: _html
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
+          name: documentation
+          path: _html
+          retention-days: 1
 
       - name: Run benchmarks
         run: make bench
@@ -157,7 +150,7 @@ jobs:
           path: |
             demo/node_modules
             demo/client/node_modules
-          key: npm-${{ matrix.os }}-${{ hashFiles('demo/package.json') }}-${{ hashFiles('demo/client/package.json') }}
+          key: v1.0.0-npm-${{ matrix.os }}-${{ hashFiles('demo/package.json') }}-${{ hashFiles('demo/client/package.json') }}
 
       - name: Save opam cache
         uses: actions/cache/save@v4
@@ -168,4 +161,36 @@ jobs:
             ~/.opam
             _opam
             .opam-path
-          key: opam-${{ matrix.os }}-${{ matrix.ocaml-compiler }}-${{ hashFiles('**.opam') }}
+          key: v1.0.0-opam-${{ matrix.os }}-${{ matrix.ocaml-compiler }}-${{ hashFiles('**.opam') }}
+
+  publish-docs:
+    name: Publish documentation
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+
+    environment:
+      name: github-pages
+      url: https://ml-in-barcelona.github.io/server-reason-react
+
+    permissions:
+      contents: write
+      pages: write
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download docs artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: documentation
+          path: _html
+
+      - name: Publish to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v1
+        with:
+          target_branch: gh-pages
+          build_dir: _html
+        env:
+          GITHUB_TOKEN: ${{ github.token }}

README.md

@@ -56,6 +56,6 @@ The [documentation site](https://ml-in-barcelona.github.io/server-reason-react/s
 
 The `demo` folder contains a bunch of demos under a server to showcases the usages of `server-reason-react`. Check the [README](demo/README.md) for how to setup and run it.
 
-## Want to contribute to the future?
+## Want to contribute?
 
-[Follow me](https://x.com/davesnx) or [message me](https://x.com/davesnx)
+[DM me](https://x.com/davesnx)

demo/server/DreamRSC.re

@@ -165,7 +165,10 @@ let createFromRequest =
     ) => {
   switch (Dream.header(request, "Accept")) {
   | Some(accept) when is_react_component_header(accept) =>
-    stream_model(~location=Dream.target(request), element)
+    stream_model(
+      ~location=Dream.target(request),
+      React.Model.Element(element),
+    )
   | _ =>
     stream_html(
       ~skipRoot=disableSSR,

documentation/universal-code.mld

@@ -74,7 +74,7 @@ module ServerReasonReact = {
       | Fragment(array(element));
 
     // createElement is a function that returns a React.element
-    let createElement = name => React.Element(string);
+    let createElement = name => React.Model.Element(string);
   };
 };
 ]}

packages/melange.ppx/ppx.ml

@@ -569,7 +569,7 @@ let mel_raw_found_in_native_message ~loc payload =
     Printf.sprintf
       "[server-reason-react.melange_ppx] There's a [%%mel.raw \"%s\"] expression in native, which should only happen \
        in JavaScript. You need to conditionally run it via let%%browser_only or switch%%platform. More info at \
-       https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"
+       https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"
       payload
   in
   Builder.pexp_constant ~loc (Pconst_string (msg, loc, None))
@@ -580,7 +580,7 @@ let mel_module_found_in_native_message ~loc =
       "[server-reason-react.melange_ppx] There's an external with [%%mel.module \"...\"] in native, which should only \
        happen in JavaScript. You need to conditionally run it, either by not including it on native or via \
        let%%browser_only/switch%%platform. More info at \
-       https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"
+       https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"
   in
   Builder.pexp_constant ~loc (Pconst_string (msg, loc, None))
 
@@ -589,7 +589,7 @@ let external_found_in_native_message ~loc =
     Printf.sprintf
       "[server-reason-react.melange_ppx] There's an external in native, which should only happen in JavaScript. You \
        need to conditionally run it, either by not including it on native or via let%%browser_only/switch%%platform. \
-       More info at https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"
+       More info at https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"
   in
   Builder.pexp_constant ~loc (Pconst_string (msg, loc, None))
 

packages/melange.ppx/tests/external.t

@@ -12,7 +12,7 @@ mel.as attribute
   "[server-reason-react.melange_ppx] There's an external in native, which should \
    only happen in JavaScript. You need to conditionally run it, either by not \
    including it on native or via let%browser_only/switch%platform. More info at \
-   https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+   https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]
 
   $ echo "module Runtime = struct" > main.ml
   $ cat $INSIDE_DUNE/packages/runtime/Runtime.ml >> main.ml
@@ -26,5 +26,5 @@ mel.as attribute
          should only happen in JavaScript. You need to conditionally run it,
          either by not including it on native or via
          let%browser_only/switch%platform. More info at
-         https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html
+         https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html
   [2]

packages/melange.ppx/tests/mel_module.t

@@ -68,7 +68,7 @@ Single type (invalid OCaml, but valid in Melange)
    \"...\"] in native, which should only happen in JavaScript. You need to \
    conditionally run it, either by not including it on native or via \
    let%browser_only/switch%platform. More info at \
-   https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+   https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]
 
   $ echo "module Runtime = struct" > main.ml
   $ cat $INSIDE_DUNE/packages/runtime/Runtime.ml >> main.ml
@@ -82,7 +82,7 @@ Single type (invalid OCaml, but valid in Melange)
          [%mel.module "..."] in native, which should only happen in JavaScript.
          You need to conditionally run it, either by not including it on native
          or via let%browser_only/switch%platform. More info at
-         https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html
+         https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html
   [2]
 
 Assets with file not found

packages/melange.ppx/tests/mel_raw.t

@@ -10,7 +10,7 @@ mel.raw as a value
      { return element.ownerDocument; } \"] expression in native, which should \
      only happen in JavaScript. You need to conditionally run it via \
      let%browser_only or switch%platform. More info at \
-     https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+     https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]
 
 mel.raw as an unary function
 
@@ -24,7 +24,7 @@ mel.raw as an unary function
      { return element.ownerDocument; } \"] expression in native, which should \
      only happen in JavaScript. You need to conditionally run it via \
      let%browser_only or switch%platform. More info at \
-     https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+     https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]
 
 mel.raw as an binary function
 
@@ -44,7 +44,7 @@ mel.raw as an binary function
      } \"] expression in native, which should only happen in JavaScript. You \
      need to conditionally run it via let%browser_only or switch%platform. More \
      info at \
-     https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+     https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]
 
 mel.raw with type
 
@@ -60,7 +60,7 @@ mel.raw with type
     "[server-reason-react.melange_ppx] There's a [%mel.raw \"window\"] \
      expression in native, which should only happen in JavaScript. You need to \
      conditionally run it via let%browser_only or switch%platform. More info at \
-     https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+     https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]
 
   $ echo "module Runtime = struct" > main.ml
   $ cat $INSIDE_DUNE/packages/runtime/Runtime.ml >> main.ml
@@ -74,7 +74,7 @@ mel.raw with type
          expression in native, which should only happen in JavaScript. You need
          to conditionally run it via let%browser_only or switch%platform. More
          info at
-         https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html
+         https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html
   [2]
 
 mel.raw as a value
@@ -89,4 +89,4 @@ mel.raw as a value
    console.log(\"running in JS\"); \"] expression in native, which should only \
    happen in JavaScript. You need to conditionally run it via let%browser_only \
    or switch%platform. More info at \
-   https://ml-in-barcelona.github.io/server-reason-react/local/server-reason-react/browser_only.html"]
+   https://ml-in-barcelona.github.io/server-reason-react/server-reason-react/browser_ppx.html"]

packages/react/src/React.ml

@@ -374,11 +374,22 @@ end
 
 type error = { message : string; stack : Yojson.Basic.t; env : string; digest : string }
 
+module Model = struct
+  type 'element t =
+    | Function : 'server_function Runtime.server_function -> 'element t
+    | List : 'element t list -> 'element t
+    | Assoc : (string * 'element t) list -> 'element t
+    | Json : Yojson.Basic.t -> 'element t
+    | Error : error -> 'element t
+    | Element : 'element -> 'element t
+    | Promise : 'a Js.Promise.t * ('a -> Yojson.Basic.t) -> 'element t
+end
+
 type element =
   | Lower_case_element of lower_case_element
   | Upper_case_component of string * (unit -> element)
   | Async_component of string * (unit -> element Lwt.t)
-  | Client_component of { props : client_props; client : unit -> element; import_module : string; import_name : string }
+  | Client_component of { props : client_props; client : element; import_module : string; import_name : string }
   | List of element list
   | Array of element array
   | Text of string
@@ -390,15 +401,8 @@ type element =
   | Suspense of { key : string option; children : element; fallback : element }
 
 and lower_case_element = { key : string option; tag : string; attributes : JSX.prop list; children : element list }
-and client_props = (string * client_value) list
-
-and client_value =
-  (* TODO: Do we need to add more types here? *)
-  | Function : 'f Runtime.server_function -> client_value
-  | Json : Yojson.Basic.t -> client_value
-  | Error : error -> client_value
-  | Element : element -> client_value
-  | Promise : 'a Js.Promise.t * ('a -> Yojson.Basic.t) -> client_value
+and client_props = (string * element Model.t) list
+and model_value = element Model.t
 
 exception Invalid_children of string
 
@@ -519,7 +523,7 @@ let createContext (initial_value : 'a) : 'a Context.t =
 module Suspense = struct
   let or_react_null = function None -> null | Some x -> x
 
-  let make ?(key = None) ?fallback ?children () =
+  let make ?key ?fallback ?children () =
     Suspense { key; fallback = or_react_null fallback; children = or_react_null children }
 end
 

packages/react/src/React.mli

@@ -557,11 +557,22 @@ end
 
 type error = { message : string; stack : Yojson.Basic.t; env : string; digest : string }
 
+module Model : sig
+  type 'element t =
+    | Function : 'server_function Runtime.server_function -> 'element t
+    | List : 'element t list -> 'element t
+    | Assoc : (string * 'element t) list -> 'element t
+    | Json : Yojson.Basic.t -> 'element t
+    | Error : error -> 'element t
+    | Element : 'element -> 'element t
+    | Promise : 'a Js.Promise.t * ('a -> Yojson.Basic.t) -> 'element t
+end
+
 type element =
   | Lower_case_element of lower_case_element
   | Upper_case_component of string * (unit -> element)
   | Async_component of string * (unit -> element Lwt.t)
-  | Client_component of { props : client_props; client : unit -> element; import_module : string; import_name : string }
+  | Client_component of { props : client_props; client : element; import_module : string; import_name : string }
   | List of element list
   | Array of element array
   | Text of string
@@ -573,14 +584,8 @@ type element =
   | Suspense of { key : string option; children : element; fallback : element }
 
 and lower_case_element = { key : string option; tag : string; attributes : JSX.prop list; children : element list }
-and client_props = (string * client_value) list
-
-and client_value =
-  | Function : 'server_function Runtime.server_function -> client_value
-  | Json : Yojson.Basic.t -> client_value
-  | Error : error -> client_value
-  | Element : element -> client_value
-  | Promise : 'a Js.Promise.t * ('a -> Yojson.Basic.t) -> client_value
+and client_props = (string * element Model.t) list
+and model_value = element Model.t
 
 exception Invalid_children of string
 
@@ -610,7 +615,7 @@ end
 val createContext : 'a -> 'a Context.t
 
 module Suspense : sig
-  val make : ?key:string option -> ?fallback:element -> ?children:element -> unit -> element
+  val make : ?key:string -> ?fallback:element -> ?children:element -> unit -> element
 end
 
 type any_promise = Any_promise : 'a Lwt.t -> any_promise