Merge branch 'main' of github.com:/reasonml/reason-react into Remove-…

…legacy-apis

* 'main' of github.com:/reasonml/reason-react:
  test: add merlin test for key prop (#771)
  Migrate snapshot to cram (#767)
  Allow memoCustomCompareProps on ppx (#766)

.github/workflows/opam.yml

@@ -68,6 +68,9 @@ jobs:
       - name: Test
         run: make test
 
+      - name: Jest
+        run: make jest
+
       - name: Save cache when not Windows
         uses: actions/cache/save@v3
         if: steps.opam-cache.outputs.cache-hit != 'true' && runner.os != 'Windows'

.ocamlformat

@@ -0,0 +1 @@
+version = 0.24.0

Makefile

@@ -23,10 +23,17 @@ dev: ## Build in watch mode
 clean: ## Clean artifacts
 	@$(DUNE) clean
 
+.PHONY: jest
+jest: ## Run the jest unit tests
+	@npx jest
+
+.PHONY: jest-watch
+jest-watch: ## Run the jest unit tests in watch mode
+	@npx jest --watch
+
 .PHONY: test
-test: ## Run the unit tests
+test: ## Run the runtests from dune (snapshot)
 	@$(DUNE) build @runtest
-	@npx jest
 
 .PHONY: test-watch
 test-watch: ## Run the unit tests in watch mode

dune-project

@@ -44,6 +44,10 @@
   (opam-check-npm-deps
    (and
     (= 1.0.0)
+    :with-dev-setup))
+  (ocamlformat
+   (and
+    (= 0.24.0)
     :with-dev-setup))))
 
 (package
@@ -57,4 +61,8 @@
    (>= 3.9.0))
   (ppxlib
    (>= 0.28.0))
-  (merlin :with-test)))
+  (merlin :with-test)
+  (ocamlformat
+   (and
+    (= 0.24.0)
+    :with-dev-setup))))

ppx/dune

@@ -0,0 +1,14 @@
+(library
+ (name reason_react_ppx)
+ (modules reason_react_ppx)
+ (public_name reason-react-ppx)
+ (flags :standard -w -9)
+ (kind ppx_rewriter)
+ (libraries ppxlib))
+
+(executable
+ (name standalone)
+ (modules standalone)
+ (package reason-react-ppx)
+ (public_name reason-react-ppx)
+ (libraries reason-react-ppx ppxlib))

ppx/src/reactjs_jsx_ppx.ml → ppx/reason_react_ppx.ml

@@ -847,6 +847,16 @@ let jsxMapper =
                      (_wrapperExpression, [ (Nolabel, innerFunctionExpression) ]);
                 } ->
                     spelunkForFunExpression innerFunctionExpression
+                (* let make = React.memoCustomCompareProps(
+                    (~prop) => ...,
+                    (prevProps, nextProps) => false
+                  ) *)
+                | {
+                 pexp_desc =
+                   Pexp_apply
+                     (_wrapperExpression, [ (Nolabel, innerFunctionExpression); _ ]);
+                } ->
+                    spelunkForFunExpression innerFunctionExpression
                 | {
                  pexp_desc =
                    Pexp_sequence (_wrapperExpression, innerFunctionExpression);
@@ -857,8 +867,8 @@ let jsxMapper =
                       (Invalid_argument
                          "react.component calls can only be on function \
                           definitions or component wrappers (forwardRef, \
-                          memo).")
-                  [@@raises Invalid_argument]
+                          memo or memoCustomCompareProps).")
+                [@@raises Invalid_argument]
               in
               spelunkForFunExpression expression
             in

ppx/test/standalone.ml → ppx/standalone.ml

@@ -1,4 +1,2 @@
-open Ppxlib
-
 (* To run as a standalone binary, run the registered drivers *)
-let () = Driver.standalone ()
+let () = Ppxlib.Driver.standalone ()

ppx/test/component.t/input.re

@@ -0,0 +1,79 @@
+module React_component_with_props = {
+  [@react.component]
+  let make = (~lola) => {
+    <div> {React.string(lola)} </div>;
+  };
+};
+
+let react_component_with_props = <React_component_with_props lola="flores" />;
+
+module Upper_case_with_fragment_as_root = {
+  [@react.component]
+  let make = (~name="") =>
+    <>
+      <div> {React.string("First " ++ name)} </div>
+      <Hello one="1"> {React.string("2nd " ++ name)} </Hello>
+    </>;
+};
+
+/* module Using_React_memo = {
+  [@react.component]
+  let make =
+    React.memo((~a) =>
+      <div> {Printf.sprintf("`a` is %s", a) |> React.string} </div>
+    );
+};
+
+module Using_memo_custom_compare_Props = {
+  [@react.component]
+  let make =
+    React.memoCustomCompareProps(
+      (~a) => <div> {Printf.sprintf("`a` is %d", a) |> React.string} </div>,
+      (prevPros, nextProps) => false,
+    );
+}; */
+
+module Forward_Ref = {
+  [@react.component]
+  let make =
+    React.forwardRef((~children, ~buttonRef) => {
+      <button ref=buttonRef className="FancyButton"> children </button>
+    });
+};
+
+module Onclick_handler_button = {
+  [@react.component]
+  let make = (~name, ~isDisabled=?) => {
+    let onClick = event => Js.log(event);
+    <button name onClick disabled=isDisabled />;
+  };
+};
+
+module Children_as_string = {
+  [@react.component]
+  let make = (~name="joe") =>
+    <div> {Printf.sprintf("`name` is %s", name) |> React.string} </div>;
+};
+
+/* It shoudn't remove this :/ */
+let () = Dream.run();
+let l = 33;
+
+module Uppercase_with_SSR_components = {
+  [@react.component]
+  let make = (~children, ~moreProps) =>
+    <html>
+      <head>
+        <title> {React.string("SSR React " ++ moreProps)} </title>
+      </head>
+      <body>
+        <div id="root"> children </div>
+        <script src="/static/client.js" />
+      </body>
+    </html>;
+};
+
+module Upper_with_aria = {
+  [@react.component]
+  let make = (~children) => <div ariaHidden="true"> children </div>;
+};

ppx/test/component.t/run.t

@@ -0,0 +1,181 @@
+Since we generate invalid syntax for the argument of the make fn `(Props : <>)`
+We need to output ML syntax here, otherwise refmt could not parse it.
+  $ ../ppx.sh --output ml input.re
+  module React_component_with_props =
+    struct
+      external makeProps :
+        lola:'lola -> ?key:string -> unit -> < lola: 'lola   >  Js.t = ""
+      [@@bs.obj ]
+      let make =
+        ((fun ~lola ->
+            ReactDOM.jsx "div"
+              (((ReactDOM.domProps)[@merlin.hide ])
+                 ~children:(React.string lola) ()))
+        [@warning "-16"])
+      let make =
+        let Output$React_component_with_props (Props : < lola: 'lola   >  Js.t)
+          = make ~lola:(Props ## lola) in
+        Output$React_component_with_props
+    end
+  let react_component_with_props =
+    React.jsx React_component_with_props.make
+      (React_component_with_props.makeProps ~lola:"flores" ())
+  module Upper_case_with_fragment_as_root =
+    struct
+      external makeProps :
+        ?name:'name -> ?key:string -> unit -> < name: 'name option   >  Js.t =
+          ""[@@bs.obj ]
+      let make =
+        ((fun ?(name= "") ->
+            ReactDOM.createElement React.jsxFragment
+              [|(ReactDOM.jsx "div"
+                   (((ReactDOM.domProps)[@merlin.hide ])
+                      ~children:(React.string ("First " ^ name)) ()));(
+                React.jsx Hello.make
+                  (Hello.makeProps ~children:(React.string ("2nd " ^ name))
+                     ~one:"1" ()))|])
+        [@warning "-16"])
+      let make =
+        let Output$Upper_case_with_fragment_as_root
+          (Props : < name: 'name option   >  Js.t) = make ?name:(Props ## name) in
+        Output$Upper_case_with_fragment_as_root
+    end
+  module Forward_Ref =
+    struct
+      external makeProps :
+        children:'children ->
+          buttonRef:'buttonRef ->
+            ?key:string ->
+              unit -> < children: 'children  ;buttonRef: 'buttonRef   >  Js.t =
+          ""[@@bs.obj ]
+      let make =
+        ((fun ~children ->
+            ((fun ~buttonRef ->
+                ReactDOM.jsx "button"
+                  (((ReactDOM.domProps)[@merlin.hide ]) ~children
+                     ~ref:buttonRef ~className:"FancyButton" ()))
+            [@warning "-16"]))
+        [@warning "-16"])
+      let make =
+        React.forwardRef
+          (let Output$Forward_Ref
+             (Props : < children: 'children  ;buttonRef: 'buttonRef   >  Js.t)
+             =
+             make ~buttonRef:(Props ## buttonRef) ~children:(Props ## children) in
+           Output$Forward_Ref)
+    end
+  module Onclick_handler_button =
+    struct
+      external makeProps :
+        name:'name ->
+          ?isDisabled:'isDisabled ->
+            ?key:string ->
+              unit -> < name: 'name  ;isDisabled: 'isDisabled option   >  Js.t
+          = ""[@@bs.obj ]
+      let make =
+        ((fun ~name ->
+            ((fun ?isDisabled ->
+                let onClick event = Js.log event in
+                ReactDOM.jsx "button"
+                  (((ReactDOM.domProps)[@merlin.hide ]) ~name ~onClick
+                     ~disabled:isDisabled ()))
+            [@warning "-16"]))
+        [@warning "-16"])
+      let make =
+        let Output$Onclick_handler_button
+          (Props : < name: 'name  ;isDisabled: 'isDisabled option   >  Js.t) =
+          make ?isDisabled:(Props ## isDisabled) ~name:(Props ## name) in
+        Output$Onclick_handler_button
+    end
+  module Children_as_string =
+    struct
+      external makeProps :
+        ?name:'name -> ?key:string -> unit -> < name: 'name option   >  Js.t =
+          ""[@@bs.obj ]
+      let make =
+        ((fun ?(name= "joe") ->
+            ReactDOM.jsx "div"
+              (((ReactDOM.domProps)[@merlin.hide ])
+                 ~children:((Printf.sprintf "`name` is %s" name) |>
+                              React.string) ()))
+        [@warning "-16"])
+      let make =
+        let Output$Children_as_string (Props : < name: 'name option   >  Js.t)
+          = make ?name:(Props ## name) in
+        Output$Children_as_string
+    end
+  let () = Dream.run ()
+  let l = 33
+  module Uppercase_with_SSR_components =
+    struct
+      external makeProps :
+        children:'children ->
+          moreProps:'moreProps ->
+            ?key:string ->
+              unit -> < children: 'children  ;moreProps: 'moreProps   >  Js.t =
+          ""[@@bs.obj ]
+      let make =
+        ((fun ~children ->
+            ((fun ~moreProps ->
+                ReactDOM.jsxs "html"
+                  (((ReactDOM.domProps)[@merlin.hide ])
+                     ~children:(React.array
+                                  [|(ReactDOM.jsx "head"
+                                       (((ReactDOM.domProps)[@merlin.hide ])
+                                          ~children:(ReactDOM.jsx "title"
+                                                       (((ReactDOM.domProps)
+                                                          [@merlin.hide ])
+                                                          ~children:(React.string
+                                                                      ("SSR React "
+                                                                      ^
+                                                                      moreProps))
+                                                          ())) ()));(ReactDOM.jsxs
+                                                                      "body"
+                                                                      (((ReactDOM.domProps)
+                                                                      [@merlin.hide
+                                                                      ])
+                                                                      ~children:(
+                                                                      React.array
+                                                                      [|(
+                                                                      ReactDOM.jsx
+                                                                      "div"
+                                                                      (((ReactDOM.domProps)
+                                                                      [@merlin.hide
+                                                                      ])
+                                                                      ~children
+                                                                      ~id:"root"
+                                                                      ()));(
+                                                                      ReactDOM.jsx
+                                                                      "script"
+                                                                      (((ReactDOM.domProps)
+                                                                      [@merlin.hide
+                                                                      ])
+                                                                      ~src:"/static/client.js"
+                                                                      ()))|])
+                                                                      ()))|])
+                     ()))
+            [@warning "-16"]))
+        [@warning "-16"])
+      let make =
+        let Output$Uppercase_with_SSR_components
+          (Props : < children: 'children  ;moreProps: 'moreProps   >  Js.t) =
+          make ~moreProps:(Props ## moreProps) ~children:(Props ## children) in
+        Output$Uppercase_with_SSR_components
+    end
+  module Upper_with_aria =
+    struct
+      external makeProps :
+        children:'children ->
+          ?key:string -> unit -> < children: 'children   >  Js.t = ""[@@bs.obj
+                                                                      ]
+      let make =
+        ((fun ~children ->
+            ReactDOM.jsx "div"
+              (((ReactDOM.domProps)[@merlin.hide ]) ~children
+                 ~ariaHidden:"true" ()))
+        [@warning "-16"])
+      let make =
+        let Output$Upper_with_aria (Props : < children: 'children   >  Js.t) =
+          make ~children:(Props ## children) in
+        Output$Upper_with_aria
+    end