Fix support for recursive components in JSX V4.

CHANGELOG.md

@@ -57,6 +57,7 @@ These are only breaking changes for unformatted code.
 - Fix issue with error messages for uncurried functions where expected and given type were swapped https://github.com/rescript-lang/rescript-compiler/pull/5973
 - Fix issue with nested async functions, where the inner function would be emitted without `async` https://github.com/rescript-lang/rescript-compiler/pull/5983
 - Fix issue with async context check, and printer, for async functions with locally abstract type https://github.com/rescript-lang/rescript-compiler/pull/5982
+- Fix support for recursive components in JSX V4 https://github.com/rescript-lang/rescript-compiler/pull/5986
 
 #### :nail_care: Polish
 

jscomp/build_tests/react_ppx/src/recursive_component_test.res

@@ -7,3 +7,13 @@
 */
 @react.component
 let rec make = (~foo, ()) => React.createElement(make, makeProps(~foo, ()))
+
+@@jsxConfig({version:4})
+
+module Rec = {
+  @react.component
+  let rec make = () => {
+    mm(({}: props))
+  }
+  and mm = (x) => make(x)
+}

res_syntax/src/reactjs_jsx_v4.ml

@@ -1064,7 +1064,12 @@ let transformStructureItem ~config mapper item =
           in
           let innerExpression =
             Exp.apply
-              (Exp.ident (Location.mknoloc @@ Lident fnName))
+              (Exp.ident
+                 (Location.mknoloc
+                 @@ Lident
+                      (match recFlag with
+                      | Recursive -> internalFnName
+                      | Nonrecursive -> fnName)))
               ([(Nolabel, Exp.ident (Location.mknoloc @@ Lident "props"))]
               @
               match hasForwardRef with
@@ -1206,14 +1211,15 @@ let transformStructureItem ~config mapper item =
             | Recursive ->
               ( [
                   bindingWrapper
-                    (Exp.let_ ~loc:emptyLoc Recursive
-                       [
-                         makeNewBinding binding expression internalFnName;
-                         Vb.mk
-                           (Pat.var {loc = emptyLoc; txt = fnName})
-                           fullExpression;
-                       ]
-                       (Exp.ident {loc = emptyLoc; txt = Lident fnName}));
+                    (Exp.let_ ~loc:emptyLoc Nonrecursive
+                       [makeNewBinding binding expression internalFnName]
+                       (Exp.let_ ~loc:emptyLoc Nonrecursive
+                          [
+                            Vb.mk
+                              (Pat.var {loc = emptyLoc; txt = fnName})
+                              fullExpression;
+                          ]
+                          (Exp.ident {loc = emptyLoc; txt = Lident fnName})));
                 ],
                 None )
             | Nonrecursive ->

res_syntax/tests/ppx/react/expected/v4.res.txt

@@ -45,3 +45,55 @@ module EUncurried = {
 
   external make: React.componentLike<props<string>, React.element> = "default"
 }
+
+module Rec = {
+  type props = {}
+
+  let rec make = {
+    @merlin.focus
+    let \"make$Internal" = (_: props) => {
+      make(({}: props))
+    }
+    let make = {
+      let \"V4$Rec" = props => \"make$Internal"(props)
+
+      \"V4$Rec"
+    }
+    make
+  }
+}
+
+module Rec1 = {
+  type props = {}
+
+  let rec make = {
+    @merlin.focus
+    let \"make$Internal" = (_: props) => {
+      React.null
+    }
+    let make = {
+      let \"V4$Rec1" = props => \"make$Internal"(props)
+
+      \"V4$Rec1"
+    }
+    make
+  }
+}
+
+module Rec2 = {
+  type props = {}
+
+  let rec make = {
+    @merlin.focus
+    let \"make$Internal" = (_: props) => {
+      mm(({}: props))
+    }
+    let make = {
+      let \"V4$Rec2" = props => \"make$Internal"(props)
+
+      \"V4$Rec2"
+    }
+    make
+  }
+  and mm = x => make(x)
+}

res_syntax/tests/ppx/react/v4.res

@@ -27,3 +27,26 @@ module EUncurried = {
   @react.component
   external make: (. ~x: string) => React.element = "default"
 }
+
+module Rec = {
+  @react.component
+  let rec make = () => {
+   make({}:props)
+  }
+}
+
+module Rec1 = {
+  @react.component
+  let rec make = () => {
+    React.null
+  }
+}
+
+module Rec2 = {
+  @react.component
+  let rec make = () => {
+    mm(({}: props))
+  }
+  and mm = (x) => make(x)
+}
+