Implement ACTION_* in server-actions

Author: davesnx

demo/dream-rsc/DreamRSC.re

@@ -137,13 +137,18 @@ let dispatch_handler = (~lookup, actionId, dispatch) =>
     }
   };
 
-let handleFormRequest = (~lookup, actionId, formData) => {
+let dreamFormDataToJs = formData => {
   let formDataJs = Js.FormData.make();
   formData
   |> List.iter(((name, value)) => {
        let (_filename, value) = value |> List.hd;
        Js.FormData.append(formDataJs, name, `String(value));
      });
+  formDataJs;
+};
+
+let handleFormRequest = (~lookup, actionId, formData) => {
+  let formDataJs = dreamFormDataToJs(formData);
 
   switch (ReactServerDOM.decodeFormDataReply(formDataJs)) {
   | Error(msg) => Lwt.fail_with(msg)
@@ -181,6 +186,24 @@ let handleRequestBody = (~lookup, request, actionId) => {
   };
 };
 
+let handleNoJsFormRequest = (~lookup, formDataJs) => {
+  switch (ReactServerDOM.decodeAction(formDataJs)) {
+  | Some((actionId, userFormData)) =>
+    switch (lookup(actionId)) {
+    | None => Lwt.fail_with("Action " ++ actionId ++ " is not registered")
+    | Some(handler) =>
+      switch (handler) {
+      | ReactServerDOM.FormData(handler) => handler([||], userFormData)
+      | ReactServerDOM.Body(handler) =>
+        /* No-JS form submissions don't carry serialized args; the form data is the entire payload */
+        handler([||])
+      }
+    }
+  | None =>
+    Lwt.fail_with("No ACTION_ID header and no $ACTION_* keys in FormData")
+  };
+};
+
 let handleRequest = (~lookup, request) => {
   let actionId = Dream.header(request, "ACTION_ID");
   let contentType = Dream.header(request, "Content-Type");
@@ -189,7 +212,15 @@ let handleRequest = (~lookup, request) => {
   | Some(contentType)
       when String.starts_with(contentType, ~prefix="multipart/form-data") =>
     switch%lwt (Dream.multipart(request, ~csrf=false)) {
-    | `Ok(formData) => handleFormRequest(~lookup, actionId, formData)
+    | `Ok(formData) =>
+      switch (actionId) {
+      | Some(_) =>
+        /* JS-enabled path: ACTION_ID header present */
+        handleFormRequest(~lookup, actionId, formData)
+      | None =>
+        /* No-JS path: check FormData for $ACTION_* keys */
+        handleNoJsFormRequest(~lookup, dreamFormDataToJs(formData))
+      }
     | _ =>
       Lwt.fail_with(
         "Missing form data, this request was not created by server-reason-react",

packages/reactDom/src/ReactServerDOM.ml

@@ -39,8 +39,15 @@ type server_function =
   | FormData of (Yojson.Basic.t array -> Js.FormData.t -> React.model_value Lwt.t)
   | Body of (Yojson.Basic.t array -> React.model_value Lwt.t)
 
-val decodeReply : string -> (Yojson.Basic.t array, string) result
-val decodeFormDataReply : Js.FormData.t -> (Yojson.Basic.t array * Js.FormData.t, string) result
+val decodeReply :
+  ?temporaryReferences:(string -> Yojson.Basic.t option) -> string -> (Yojson.Basic.t array, string) result
+
+val decodeFormDataReply :
+  ?temporaryReferences:(string -> Yojson.Basic.t option) ->
+  Js.FormData.t ->
+  (Yojson.Basic.t array * Js.FormData.t, string) result
+
+val decodeAction : Js.FormData.t -> (string * Js.FormData.t) option
 
 module type FunctionReferences = sig
   type t

packages/reactDom/src/ReactServerDOM.mli

@@ -21,8 +21,8 @@ let unwrap_ok = function Ok v -> v | Error msg -> Alcotest.fail (Printf.sprintf
 let unwrap_error = function Error msg -> msg | Ok _ -> Alcotest.fail "expected Error but got Ok"
 
 (* Assert that decodeReply returns Error with a message starting with expected_prefix *)
-let assert_decodeReply_errors input expected_prefix () =
-  match ReactServerDOM.decodeReply input with
+let assert_decodeReply_errors ?temporaryReferences input expected_prefix () =
+  match ReactServerDOM.decodeReply ?temporaryReferences input with
   | Ok _ -> Alcotest.fail (Printf.sprintf "expected Error starting with %S" expected_prefix)
   | Error msg ->
       if not (String.starts_with ~prefix:expected_prefix msg) then
@@ -328,6 +328,33 @@ let decodeFormDataReply_hex_id () =
   | [| `List [ `String s ] |] -> assert_string s "from_hex"
   | _ -> Alcotest.fail "expected hex ID 'a' to resolve to FormData key '10'"
 
+(* Blob ($B) resolution *)
+
+let decodeFormDataReply_blob () =
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "1" (`String "blob-content-here");
+  Js.FormData.append formData "0" (`String "[\"$B1\"]");
+  let args, _ = ReactServerDOM.decodeFormDataReply formData |> unwrap_ok in
+  match args with
+  | [| `String data |] -> assert_string data "blob-content-here"
+  | _ -> Alcotest.fail "expected blob reference to resolve from FormData"
+
+let decodeReply_blob_without_formdata () =
+  match ReactServerDOM.decodeReply {|["$B1"]|} with
+  | Error msg ->
+      if not (String.starts_with ~prefix:"decodeReply: Blob ($B) requires FormData" msg) then
+        Alcotest.fail (Printf.sprintf "expected FormData error, got %S" msg)
+  | Ok _ -> Alcotest.fail "expected Error for blob without FormData"
+
+let decodeFormDataReply_blob_missing_entry () =
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "0" (`String "[\"$B1\"]");
+  match ReactServerDOM.decodeFormDataReply formData with
+  | Error msg ->
+      if not (String.starts_with ~prefix:"decodeReply: Blob ($B) entry not found in FormData for key 1" msg) then
+        Alcotest.fail (Printf.sprintf "expected missing entry error, got %S" msg)
+  | Ok _ -> Alcotest.fail "expected Error for blob with missing FormData entry"
+
 (* Recursive resolution of nested JSON objects *)
 
 let decodeReply_nested_special_values_in_object () =
@@ -350,6 +377,121 @@ let decodeReply_nested_special_values_in_array () =
       assert_float_is_infinity inf_val
   | _ -> Alcotest.fail "expected special values in nested arrays to be resolved"
 
+(* Temporary Reference ($T) tests *)
+
+let decodeReply_temporary_reference_resolves () =
+  let temporaryReferences = function "abc" -> Some (`String "resolved_value") | _ -> None in
+  let response = ReactServerDOM.decodeReply ~temporaryReferences {|["$Tabc"]|} |> unwrap_ok in
+  match response with
+  | [| `String s |] -> assert_string s "resolved_value"
+  | _ -> Alcotest.fail "expected temporary reference to resolve to stored value"
+
+let decodeReply_temporary_reference_not_found () =
+  let temporaryReferences = function _ -> None in
+  match ReactServerDOM.decodeReply ~temporaryReferences {|["$Txyz"]|} with
+  | Error msg ->
+      if not (String.starts_with ~prefix:"decodeReply: Temporary Reference $Txyz not found" msg) then
+        Alcotest.fail (Printf.sprintf "unexpected error message: %S" msg)
+  | Ok _ -> Alcotest.fail "expected Error for missing temporary reference"
+
+let decodeReply_temporary_reference_no_resolver () =
+  match ReactServerDOM.decodeReply {|["$Tabc"]|} with
+  | Error msg ->
+      if not (String.starts_with ~prefix:"decodeReply: Temporary Reference ($T) requires" msg) then
+        Alcotest.fail (Printf.sprintf "unexpected error message: %S" msg)
+  | Ok _ -> Alcotest.fail "expected Error when no temporaryReferences resolver provided"
+
+let decodeReply_temporary_reference_complex_value () =
+  let temporaryReferences = function
+    | "obj1" -> Some (`Assoc [ ("key", `String "value"); ("num", `Int 42) ])
+    | _ -> None
+  in
+  let response = ReactServerDOM.decodeReply ~temporaryReferences {|["$Tobj1"]|} |> unwrap_ok in
+  match response with
+  | [| `Assoc [ ("key", `String v); ("num", `Int n) ] |] ->
+      assert_string v "value";
+      assert_int n 42
+  | _ -> Alcotest.fail "expected temporary reference to resolve to complex value"
+
+let decodeReply_temporary_reference_in_nested_array () =
+  let temporaryReferences = function "ref1" -> Some (`String "nested_resolved") | _ -> None in
+  let response = ReactServerDOM.decodeReply ~temporaryReferences {|[["$Tref1", 42]]|} |> unwrap_ok in
+  match response with
+  | [| `List [ `String s; `Int n ] |] ->
+      assert_string s "nested_resolved";
+      assert_int n 42
+  | _ -> Alcotest.fail "expected temporary reference to resolve inside nested array"
+
+let decodeReply_temporary_reference_in_nested_object () =
+  let temporaryReferences = function "ref1" -> Some (`String "obj_resolved") | _ -> None in
+  let response = ReactServerDOM.decodeReply ~temporaryReferences {|[{"val": "$Tref1", "other": 1}]|} |> unwrap_ok in
+  match response with
+  | [| `Assoc [ ("val", `String s); ("other", `Int n) ] |] ->
+      assert_string s "obj_resolved";
+      assert_int n 1
+  | _ -> Alcotest.fail "expected temporary reference to resolve inside nested object"
+
+(* decodeAction tests *)
+
+let decodeAction_with_action_id_and_fields () =
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "$ACTION_ID_abc123" (`String "");
+  Js.FormData.append formData "name" (`String "Lola");
+  Js.FormData.append formData "age" (`String "20");
+  match ReactServerDOM.decodeAction formData with
+  | Some (id, user_fd) -> (
+      assert_string id "abc123";
+      match (Js.FormData.get user_fd "name", Js.FormData.get user_fd "age") with
+      | `String name, `String age ->
+          assert_string name "Lola";
+          assert_string age "20")
+  | None -> Alcotest.fail "expected Some but got None"
+
+let decodeAction_no_action_keys () =
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "name" (`String "Lola");
+  Js.FormData.append formData "age" (`String "20");
+  match ReactServerDOM.decodeAction formData with None -> () | Some _ -> Alcotest.fail "expected None but got Some"
+
+let decodeAction_action_id_only () =
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "$ACTION_ID_abc123" (`String "");
+  match ReactServerDOM.decodeAction formData with
+  | Some (id, user_fd) ->
+      assert_string id "abc123";
+      let entries = Js.FormData.entries user_fd in
+      Alcotest.check Alcotest.int "should have 0 user entries" (List.length entries) 0
+  | None -> Alcotest.fail "expected Some but got None"
+
+let decodeAction_multiple_action_keys () =
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "$ACTION_ID_first" (`String "");
+  Js.FormData.append formData "name" (`String "Lola");
+  Js.FormData.append formData "$ACTION_ID_second" (`String "");
+  match ReactServerDOM.decodeAction formData with
+  | Some (id, user_fd) -> (
+      (* Either action ID is valid since Hashtbl iteration order is unspecified *)
+      assert_bool (String.equal id "first" || String.equal id "second") true;
+      match Js.FormData.get user_fd "name" with `String name -> assert_string name "Lola")
+  | None -> Alcotest.fail "expected Some but got None"
+
+let decodeAction_filters_other_action_keys () =
+  (* $ACTION_REF_ and other $ACTION_ prefixed keys should be filtered out from user data *)
+  let formData = Js.FormData.make () in
+  Js.FormData.append formData "$ACTION_ID_abc123" (`String "");
+  Js.FormData.append formData "$ACTION_REF_xyz" (`String "some_ref");
+  Js.FormData.append formData "name" (`String "Lola");
+  match ReactServerDOM.decodeAction formData with
+  | Some (id, user_fd) -> (
+      assert_string id "abc123";
+      (match Js.FormData.get user_fd "name" with `String name -> assert_string name "Lola");
+      (* $ACTION_REF_ should not be in user_fd *)
+      try
+        let _ = Js.FormData.get user_fd "$ACTION_REF_xyz" in
+        Alcotest.fail "$ACTION_REF_ key should not be in user FormData"
+      with Not_found -> ())
+  | None -> Alcotest.fail "expected Some but got None"
+
 let test title fn = (Printf.sprintf "Decoders / %s" title, [ Alcotest_lwt.test_case_sync "" `Quick fn ])
 
 let tests =
@@ -402,10 +544,18 @@ let tests =
     test "decodeReply: $W Set without FormData raises" (assert_decodeReply_errors "[\"$W1\"]" "decodeReply: Set");
     (* Unsupported types raise descriptive errors *)
     test "decodeReply: $@ Promise raises" (assert_decodeReply_errors "[\"$@1\"]" "decodeReply: Promise");
-    test "decodeReply: $T Temporary Reference raises"
-      (assert_decodeReply_errors "[\"$T1\"]" "decodeReply: Temporary Reference");
+    (* Temporary References ($T) *)
+    test "decodeReply: $T resolves with temporaryReferences" decodeReply_temporary_reference_resolves;
+    test "decodeReply: $T not found returns error" decodeReply_temporary_reference_not_found;
+    test "decodeReply: $T without resolver returns error" decodeReply_temporary_reference_no_resolver;
+    test "decodeReply: $T resolves complex value" decodeReply_temporary_reference_complex_value;
+    test "decodeReply: $T resolves in nested array" decodeReply_temporary_reference_in_nested_array;
+    test "decodeReply: $T resolves in nested object" decodeReply_temporary_reference_in_nested_object;
     test "decodeReply: $A TypedArray raises" (assert_decodeReply_errors "[\"$A1\"]" "decodeReply: TypedArray");
-    test "decodeReply: $B Blob raises" (assert_decodeReply_errors "[\"$B1\"]" "decodeReply: Blob");
+    (* Blob ($B) resolution *)
+    test "decodeFormDataReply: $B Blob resolves from FormData" decodeFormDataReply_blob;
+    test "decodeReply: $B Blob without FormData returns error" decodeReply_blob_without_formdata;
+    test "decodeFormDataReply: $B Blob with missing entry returns error" decodeFormDataReply_blob_missing_entry;
     test "decodeReply: $R ReadableStream raises"
       (assert_decodeReply_errors "[\"$R1\"]" "decodeReply: ReadableStream ($R)");
     test "decodeReply: $r ReadableStream bytes raises"
@@ -416,4 +566,10 @@ let tests =
         List.iter
           (fun prefix -> assert_decodeReply_errors (Printf.sprintf "[\"$%s1\"]" prefix) "decodeReply: TypedArray" ())
           [ "O"; "o"; "U"; "S"; "s"; "L"; "l"; "G"; "g"; "M"; "m"; "V" ]);
+    (* decodeAction *)
+    test "decodeAction: $ACTION_ID with form fields" decodeAction_with_action_id_and_fields;
+    test "decodeAction: no $ACTION_* keys returns None" decodeAction_no_action_keys;
+    test "decodeAction: $ACTION_ID with no other fields" decodeAction_action_id_only;
+    test "decodeAction: multiple $ACTION_ID keys (unspecified which wins)" decodeAction_multiple_action_keys;
+    test "decodeAction: filters $ACTION_* keys from user data" decodeAction_filters_other_action_keys;
   ]

packages/reactDom/test/test_RSC_decoders.ml

@@ -533,7 +533,8 @@ let server_function_as_action () =
   let main = React.Upper_case_component ("app", app) in
   assert_html main ~disable_backtrace:true
     ~shell:
-      "<form>Server Content</form><script data-payload='0:[\"$\",\"form\",null,{\"children\":\"Server \
+      "<form action=\"\" method=\"POST\"><input type=\"hidden\" name=\"$ACTION_ID_1234-4321\" value=\"\" />Server \
+       Content</form><script data-payload='0:[\"$\",\"form\",null,{\"children\":\"Server \
        Content\",\"action\":\"$F1\"},null,null,1]\n\
        '>window.srr_stream.push()</script>"
     [ "<script data-payload='1:{\"id\":\"1234-4321\",\"bound\":null}\n'>window.srr_stream.push()</script>" ]

packages/reactDom/test/test_RSC_html.ml

@@ -70,3 +70,18 @@ let withFormDataAndArgsDifferentOrder =
   let country = country;
   Lwt.return(Printf.sprintf("Hello %s, you are from %s", name, country));
 };
+
+[@react.server.function]
+let withBoolArg = (~flag: bool): Js.Promise.t(string) => {
+  Js.Promise.resolve(flag ? "yes" : "no");
+};
+
+[@react.server.function]
+let withListArg = (~names: list(string)): Js.Promise.t(string) => {
+  Js.Promise.resolve(String.concat(", ", names));
+};
+
+[@react.server.function]
+let withResultArg = (~res: result(string, string)): Js.Promise.t(string) => {
+  Js.Promise.resolve("ok");
+};

packages/server-reason-react-ppx/cram/server-function-on-client.t/input.re

@@ -268,3 +268,90 @@
               },
             };
           };
+  
+  include {
+            {
+              module J = {
+                [@ocaml.warning "-unboxable-type-in-prim-decl"]
+                external unsafe_expr: _ => _ = "#raw_stmt";
+              };
+              J.unsafe_expr(
+                "// extract-server-function 639322061 withBoolArg ",
+              );
+            };
+  
+            let withBoolArg = {
+              Runtime.id: "639322061",
+              call: (~flag: bool) => {
+                let action =
+                  ReactServerDOMEsbuild.createServerReference("639322061");
+                (
+                  [@ocaml.warning "-ignored-extra-argument"]
+                  Js.Internal.opaqueFullApply(
+                    (Js.Internal.opaque((action: Js.Fn.arity1(_)).I1))(flag),
+                  ): _
+                )
+                |> Js.Promise.then_(response =>
+                     Js.Promise.resolve(RSC.Primitives.string_of_rsc(response))
+                   );
+              },
+            };
+          };
+  
+  include {
+            {
+              module J = {
+                [@ocaml.warning "-unboxable-type-in-prim-decl"]
+                external unsafe_expr: _ => _ = "#raw_stmt";
+              };
+              J.unsafe_expr(
+                "// extract-server-function 543472495 withListArg ",
+              );
+            };
+  
+            let withListArg = {
+              Runtime.id: "543472495",
+              call: (~names: list(string)) => {
+                let action =
+                  ReactServerDOMEsbuild.createServerReference("543472495");
+                (
+                  [@ocaml.warning "-ignored-extra-argument"]
+                  Js.Internal.opaqueFullApply(
+                    (Js.Internal.opaque((action: Js.Fn.arity1(_)).I1))(names),
+                  ): _
+                )
+                |> Js.Promise.then_(response =>
+                     Js.Promise.resolve(RSC.Primitives.string_of_rsc(response))
+                   );
+              },
+            };
+          };
+  
+  include {
+            {
+              module J = {
+                [@ocaml.warning "-unboxable-type-in-prim-decl"]
+                external unsafe_expr: _ => _ = "#raw_stmt";
+              };
+              J.unsafe_expr(
+                "// extract-server-function 271688509 withResultArg ",
+              );
+            };
+  
+            let withResultArg = {
+              Runtime.id: "271688509",
+              call: (~res: result(string, string)) => {
+                let action =
+                  ReactServerDOMEsbuild.createServerReference("271688509");
+                (
+                  [@ocaml.warning "-ignored-extra-argument"]
+                  Js.Internal.opaqueFullApply(
+                    (Js.Internal.opaque((action: Js.Fn.arity1(_)).I1))(res),
+                  ): _
+                )
+                |> Js.Promise.then_(response =>
+                     Js.Promise.resolve(RSC.Primitives.string_of_rsc(response))
+                   );
+              },
+            };
+          };