Enable ref as valid prop (#862)

* Install melange-testing-library

* Install melange-testing-library npm deps

* Vendor melange-testing-library

* Fix Form__test with RTL

* Start migrating Hooks__test

* Remove dependency

* Remove unused code from Form__test

* Add a jest-devtoolsgs

* Add a jest-devtools

* Migrate Hooks and Form into RTL

* Add demo to manually test easily

* Use Uncurried for tests

* Migrate all React__test

* Force install since we are dealing with R19

* Snapshot with lower {}

* Enable ref in ppx

* Add jest test for ref

* Remove jest from demo/dune

* Add comment on install --force

* Improve test from checking ref

* Bind React.act and React.actAsync

* Bind React.act and React.actAsync

ppx/reason_react_ppx.ml

@@ -653,11 +653,6 @@ let jsxMapper =
           (Invalid_argument
              "Key cannot be accessed inside of a component. Don't worry - you \
               can always key a component from its parent!")
-    | Pexp_fun (Labelled "ref", _, _, _) | Pexp_fun (Optional "ref", _, _, _) ->
-        raise
-          (Invalid_argument
-             "Ref cannot be passed as a normal prop. Please use `forwardRef` \
-              API instead.")
     | Pexp_fun
         ( ((Optional label | Labelled label) as arg),
           default,

ppx/test/component.t/input.re

@@ -41,6 +41,13 @@ module Forward_Ref = {
     });
 };
 
+module Ref_as_prop = {
+  [@react.component]
+  let make = (~children, ~ref) => {
+    <button ref className="FancyButton"> children </button>;
+  };
+};
+
 module Onclick_handler_button = {
   [@react.component]
   let make = (~name, ~isDisabled=?) => {

ppx/test/component.t/run.t

@@ -68,6 +68,27 @@ We need to output ML syntax here, otherwise refmt could not parse it.
              make ~buttonRef:(Props ## buttonRef) ~children:(Props ## children) in
            Output$Forward_Ref)
     end
+  module Ref_as_prop =
+    struct
+      external makeProps :
+        children:'children ->
+          ref:'ref ->
+            ?key:string -> unit -> < children: 'children  ;ref: 'ref   >  Js.t
+          = ""[@@mel.obj ]
+      let make =
+        ((fun ~children ->
+            ((fun ~ref ->
+                ReactDOM.jsx "button"
+                  (((ReactDOM.domProps)[@merlin.hide ]) ~children ~ref
+                     ~className:"FancyButton" ()))
+            [@warning "-16"]))
+        [@warning "-16"])
+      let make =
+        let Output$Ref_as_prop
+          (Props : < children: 'children  ;ref: 'ref   >  Js.t) =
+          make ~ref:(Props ## ref) ~children:(Props ## children) in
+        Output$Ref_as_prop
+    end
   module Onclick_handler_button =
     struct
       external makeProps :

test/Ref__test.re

@@ -0,0 +1,35 @@
+open Jest;
+open Expect;
+
+module Button_with_ref = {
+  [@react.component]
+  let make = (~children, ~ref) => {
+    <button ref role="FancyButton"> children </button>;
+  };
+};
+
+let getByRole = (role, container) => {
+  ReactTestingLibrary.getByRole(~matcher=`Str(role), container);
+};
+
+[@mel.get] external innerHTML: Dom.element => string = "innerHTML";
+
+describe("ref", () => {
+  test("can be passed as prop to a component", () => {
+    let domRef = React.createRef();
+    let container =
+      ReactTestingLibrary.render(
+        <Button_with_ref ref={ReactDOM.Ref.domRef(domRef)}>
+          {React.string("Click me")}
+        </Button_with_ref>,
+      );
+    let button = getByRole("FancyButton", container);
+    expect(button->innerHTML)->toBe("Click me");
+    let content =
+      switch (Js.Nullable.toOption(domRef.current)) {
+      | Some(element) => element->innerHTML
+      | None => failwith("No element found")
+      };
+    expect(content)->toBe("Click me");
+  })
+});