use React for new jsx transform, modify cli arg

- use rescript-react for the new jsx transform
- change cli arg, react-runtime -> jsx-mode
- add cli arg, jsx-module

Author: mununki

cli/reactjs_jsx_ppx_v4.ml

@@ -351,7 +351,7 @@ let transformUppercaseCall3 jsxRuntime modulePath mapper loc attrs
           ( labelled "children",
             Exp.apply
               (Exp.ident
-                 {txt = Ldot (Lident "Jsx", "array"); loc = Location.none})
+                 {txt = Ldot (Lident "React", "array"); loc = Location.none})
               [(Nolabel, expression)] );
         ]
       | _ ->
@@ -395,14 +395,15 @@ let transformUppercaseCall3 jsxRuntime modulePath mapper loc attrs
     let jsxExpr, key =
       match (!childrenArg, keyProp) with
       | None, (_, keyExpr) :: _ ->
-        ( Exp.ident ~loc {loc; txt = Ldot (Lident "Jsx", "jsxKeyed")},
+        ( Exp.ident ~loc {loc; txt = Ldot (Lident "React", "jsxKeyed")},
           [(nolabel, keyExpr)] )
-      | None, [] -> (Exp.ident ~loc {loc; txt = Ldot (Lident "Jsx", "jsx")}, [])
+      | None, [] ->
+        (Exp.ident ~loc {loc; txt = Ldot (Lident "React", "jsx")}, [])
       | Some _, (_, keyExpr) :: _ ->
-        ( Exp.ident ~loc {loc; txt = Ldot (Lident "Jsx", "jsxsKeyed")},
+        ( Exp.ident ~loc {loc; txt = Ldot (Lident "React", "jsxsKeyed")},
           [(nolabel, keyExpr)] )
       | Some _, [] ->
-        (Exp.ident ~loc {loc; txt = Ldot (Lident "Jsx", "jsxs")}, [])
+        (Exp.ident ~loc {loc; txt = Ldot (Lident "React", "jsxs")}, [])
     in
     Exp.apply ~loc ~attrs jsxExpr
       ([(nolabel, Exp.ident ~loc {txt = ident; loc}); (nolabel, props)] @ key)
@@ -461,7 +462,7 @@ let transformLowercaseCall3 jsxRuntime mapper loc attrs callExpression
           ( labelled "children",
             Exp.apply
               (Exp.ident
-                 {txt = Ldot (Lident "Jsx", "array"); loc = Location.none})
+                 {txt = Ldot (Lident "React", "array"); loc = Location.none})
               [(Nolabel, expression)] );
         ]
     in
@@ -480,15 +481,15 @@ let transformLowercaseCall3 jsxRuntime mapper loc attrs callExpression
     let jsxExpr, key =
       match (!childrenArg, keyProp) with
       | None, (_, keyExpr) :: _ ->
-        ( Exp.ident ~loc {loc; txt = Ldot (Lident "JsxDOM", "jsxKeyed")},
+        ( Exp.ident ~loc {loc; txt = Ldot (Lident "ReactDOM", "jsxKeyed")},
           [(nolabel, keyExpr)] )
       | None, [] ->
-        (Exp.ident ~loc {loc; txt = Ldot (Lident "JsxDOM", "jsx")}, [])
+        (Exp.ident ~loc {loc; txt = Ldot (Lident "ReactDOM", "jsx")}, [])
       | Some _, (_, keyExpr) :: _ ->
-        ( Exp.ident ~loc {loc; txt = Ldot (Lident "JsxDOM", "jsxsKeyed")},
+        ( Exp.ident ~loc {loc; txt = Ldot (Lident "ReactDOM", "jsxsKeyed")},
           [(nolabel, keyExpr)] )
       | Some _, [] ->
-        (Exp.ident ~loc {loc; txt = Ldot (Lident "JsxDOM", "jsxs")}, [])
+        (Exp.ident ~loc {loc; txt = Ldot (Lident "ReactDOM", "jsxs")}, [])
     in
     Exp.apply ~loc ~attrs jsxExpr
       ([(nolabel, componentNameExpr); (nolabel, props)] @ key)

cli/res_cli.ml

@@ -163,7 +163,8 @@ module ResClflags : sig
   val file : string ref
   val interface : bool ref
   val ppx : string ref
-  val jsxRuntime : string ref
+  val jsxModule : string ref
+  val jsxMode : string ref
   val typechecker : bool ref
 
   val parse : unit -> unit
@@ -175,7 +176,8 @@ end = struct
   let origin = ref ""
   let interface = ref false
   let ppx = ref ""
-  let jsxRuntime = ref "automatic"
+  let jsxModule = ref "react"
+  let jsxMode = ref "classic"
   let file = ref ""
   let typechecker = ref false
 
@@ -207,10 +209,12 @@ end = struct
         Arg.String (fun txt -> ppx := txt),
         "Apply a specific built-in ppx before parsing, none or jsx3, jsx4. \
          Default: none" );
-      ( "-jsx-runtime",
-        Arg.String (fun txt -> jsxRuntime := txt),
-        "Specify the jsx runtime for React, classic or automatic. Default: \
-         automatic" );
+      ( "-jsx-module",
+        Arg.String (fun txt -> jsxModule := txt),
+        "Specify the jsx module. Default: react" );
+      ( "-jsx-mode",
+        Arg.String (fun txt -> jsxMode := txt),
+        "Specify the jsx mode, classic or automatic. Default: classic" );
       ( "-typechecker",
         Arg.Unit (fun () -> typechecker := true),
         "Parses the ast as it would be passed to the typechecker and not the \
@@ -224,7 +228,7 @@ module CliArgProcessor = struct
   type backend = Parser : 'diagnostics Res_driver.parsingEngine -> backend
   [@@unboxed]
 
-  let processFile ~isInterface ~width ~recover ~origin ~target ~ppx ~jsxRuntime
+  let processFile ~isInterface ~width ~recover ~origin ~target ~ppx ~jsxMode
       ~typechecker filename =
     let len = String.length filename in
     let processInterface =
@@ -285,8 +289,7 @@ module CliArgProcessor = struct
           match ppx with
           | "jsx3" -> Reactjs_jsx_ppx_v3.rewrite_signature parseResult.parsetree
           | "jsx4" ->
-            Reactjs_jsx_ppx_v4.rewrite_signature jsxRuntime
-              parseResult.parsetree
+            Reactjs_jsx_ppx_v4.rewrite_signature jsxMode parseResult.parsetree
           | _ -> parseResult.parsetree
         in
         printEngine.printInterface ~width ~filename
@@ -306,7 +309,7 @@ module CliArgProcessor = struct
           | "jsx3" ->
             Reactjs_jsx_ppx_v3.rewrite_implementation parseResult.parsetree
           | "jsx4" ->
-            Reactjs_jsx_ppx_v4.rewrite_implementation jsxRuntime
+            Reactjs_jsx_ppx_v4.rewrite_implementation jsxMode
               parseResult.parsetree
           | _ -> parseResult.parsetree
         in
@@ -321,5 +324,5 @@ let[@raises exit] () =
     CliArgProcessor.processFile ~isInterface:!ResClflags.interface
       ~width:!ResClflags.width ~recover:!ResClflags.recover
       ~target:!ResClflags.print ~origin:!ResClflags.origin ~ppx:!ResClflags.ppx
-      ~jsxRuntime:!ResClflags.jsxRuntime ~typechecker:!ResClflags.typechecker
+      ~jsxMode:!ResClflags.jsxMode ~typechecker:!ResClflags.typechecker
       !ResClflags.file)

scripts/test.sh

@@ -47,13 +47,13 @@ done <temp/files.txt
 # printing with ppx v4 classic
 find tests/ppx/react -name "*.res" -o -name "*.resi" >temp/files.txt
 while read file; do
-  rescript -ppx jsx4 -jsx-runtime classic $file &> $(exp2 $file "_v4_cls") & maybeWait
+  rescript -ppx jsx4 -jsx-mode classic $file &> $(exp2 $file "_v4_cls") & maybeWait
 done <temp/files.txt
 
 # printing with ppx v4 automatic
 find tests/ppx/react -name "*.res" -o -name "*.resi" >temp/files.txt
 while read file; do
-  rescript -ppx jsx4 -jsx-runtime automatic $file &> $(exp2 $file "_v4_auto") & maybeWait
+  rescript -ppx jsx4 -jsx-mode automatic $file &> $(exp2 $file "_v4_auto") & maybeWait
 done <temp/files.txt
 
 wait

tests/ppx/react/expected/commentAtTop.res_v4_auto.txt

@@ -1,7 +1,7 @@
 type props<'msg> = {key?: string, msg: 'msg} // test React JSX file
 
 let make = ({msg, _}: props<'msg>) => {
-  JsxDOM.jsx("div", {children: {msg->React.string}})
+  ReactDOM.jsx("div", {children: {msg->React.string}})
 }
 let make = {
   let \"CommentAtTop" = (props: props<_>) => make(props)

tests/ppx/react/expected/externalWithCustomName.res_v4_auto.txt

@@ -4,4 +4,4 @@ module Foo = {
   external component: React.componentLike<props<'a, 'b>, React.element> = "component"
 }
 
-let t = Jsx.jsx(Foo.component, {a: 1, b: "1"})
+let t = React.jsx(Foo.component, {a: 1, b: "1"})

tests/ppx/react/expected/forwardRef.res_v4_auto.txt

@@ -9,11 +9,11 @@ module FancyInput = {
     let ref = Js.Nullable.fromOption(ref)
     let _ = ref
 
-    JsxDOM.jsxs(
+    ReactDOM.jsxs(
       "div",
       {
-        children: Jsx.array([
-          JsxDOM.jsx(
+        children: React.array([
+          ReactDOM.jsx(
             "input",
             {
               type_: "text",
@@ -37,9 +37,14 @@ type props = {key?: string}
 let make = (_: props) => {
   let input = React.useRef(Js.Nullable.null)
 
-  JsxDOM.jsx(
+  ReactDOM.jsx(
     "div",
-    {children: Jsx.jsx(FancyInput.make, {ref: input, children: {React.string("Click to focus")}})},
+    {
+      children: React.jsx(
+        FancyInput.make,
+        {ref: input, children: {React.string("Click to focus")}},
+      ),
+    },
   )
 }
 let make = {

tests/ppx/react/expected/innerModule.res_v4_auto.txt

@@ -2,7 +2,7 @@ module Bar = {
   type props<'a, 'b> = {key?: string, a: 'a, b: 'b}
   let make = ({a, b, _}: props<'a, 'b>) => {
     Js.log("This function should be named `InnerModule.react$Bar`")
-    JsxDOM.jsx("div", {key: ?None})
+    ReactDOM.jsx("div", {key: ?None})
   }
   let make = {
     let \"InnerModule$Bar" = (props: props<_>) => make(props)
@@ -12,7 +12,7 @@ module Bar = {
 
   let component = ({a, b, _}: props<'a, 'b>) => {
     Js.log("This function should be named `InnerModule.react$Bar$component`")
-    JsxDOM.jsx("div", {key: ?None})
+    ReactDOM.jsx("div", {key: ?None})
   }
   let component = {
     let \"InnerModule$Bar$component" = (props: props<_>) => make(props)

tests/ppx/react/expected/newtype.res_v4_auto.txt

@@ -1,6 +1,6 @@
 type props<'a, 'b, 'c> = {key?: string, a: 'a, b: 'b, c: 'c}
 let make = (_: props<'a, 'b, 'c>, type a, ~a: a, ~b: array<option<[#Foo(a)]>>, ~c: 'a, _) =>
-  JsxDOM.jsx("div", {key: ?None})
+  ReactDOM.jsx("div", {key: ?None})
 let make = {
   let \"Newtype" = (props: props<_>) => make(props)
   \"Newtype"

tests/ppx/react/expected/topLevel.res_v4_auto.txt

@@ -1,7 +1,7 @@
 type props<'a, 'b> = {key?: string, a: 'a, b: 'b}
 let make = ({a, b, _}: props<'a, 'b>) => {
   Js.log("This function should be named 'TopLevel.react'")
-  JsxDOM.jsx("div", {key: ?None})
+  ReactDOM.jsx("div", {key: ?None})
 }
 let make = {
   let \"TopLevel" = (props: props<_>) => make(props)

tests/ppx/react/expected/typeConstraint.res_v4_auto.txt

@@ -1,7 +1,7 @@
 type props<'a, 'b> = {key?: string, a: 'a, b: 'b}
 let make: 'a. (~a: 'a, ~b: 'a, 'a) => React.element = (_: props<'a, 'b>, type a): (
   (~a: a, ~b: a, a) => React.element
-) => (~a, ~b, _) => JsxDOM.jsx("div", {key: ?None})
+) => (~a, ~b, _) => ReactDOM.jsx("div", {key: ?None})
 let make = {
   let \"TypeConstraint" = (props: props<_>) => make(props)
   \"TypeConstraint"