reasonml · davesnx · Sep 6, 2023 · Sep 3, 2023 · Sep 4, 2023 · Sep 4, 2023
diff --git a/.github/workflows/opam.yml b/.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'

diff --git a/.ocamlformat b/.ocamlformat
@@ -0,0 +1 @@
+version = 0.24.0
diff --git a/Makefile b/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

diff --git a/dune-project b/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))))
diff --git a/ppx/dune b/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))
diff --git a/ppx/src/reactjs_jsx_ppx.ml → ppx/reason_react_ppx.ml b/ppx/src/reactjs_jsx_ppx.ml → ppx/reason_react_ppx.ml
diff --git a/ppx/src/dune b/ppx/src/dune
diff --git a/ppx/test/standalone.ml → ppx/standalone.ml b/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 ()
diff --git a/ppx/test/component.t/input.re b/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>;
+};
diff --git a/ppx/test/component.t/run.t b/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
diff --git a/ppx/test/dune b/ppx/test/dune
@@ -1,44 +1,10 @@
-(executable
- (name standalone)
- (libraries reason-react-ppx ppxlib))
-
-(rule
- (targets result.ml)
- (deps generated.ml)
- (action
-  (run ./standalone.exe --impl %{deps} -o %{targets})))
-
-(rule
- (targets generated.ml)
- (deps input.re)
- (action
-  (with-stdout-to
-   %{targets}
-   (run refmt --parse=re --print=ml %{deps}))))
-
-(rule
- (alias runtest)
- (action
-  (diff output.expected result.ml)))
-
-(rule
- (targets output_locations.ml)
- (deps generated_locations.ml)
- (action
-  (run ./standalone.exe -dparsetree --impl %{deps} -o %{targets})))
-
-(rule
- (targets generated_locations.ml)
- (deps input_locations.re)
- (action
-  (with-stdout-to
-   %{targets}
-   (run refmt --parse=re --print=ml %{deps}))))
-
-(rule
- (alias runtest)
- (action
-  (diff output_locations.expected output_locations.ml)))
-
 (cram
- (package reason-react))
+ (package reason-react-ppx)
+ (deps
+  (package reason-react)
+  %{bin:reason-react-ppx}
+  %{bin:refmt}
+  %{bin:dune}
+  %{bin:jq}
+  %{bin:ocamlmerlin}
+  ppx.sh))