Port of PR Fix issue with JSX V4 when components are nested rescript-lang/rescript#6031

Author: cristianoc

CHANGELOG.md

@@ -65,6 +65,7 @@
 - Fix formatting of `switch` expressions that contain braced `cases` inside https://github.com/rescript-lang/syntax/pull/735
 - Fix formatting of props spread for multiline JSX expression https://github.com/rescript-lang/syntax/pull/736
 - Fix issue with JSX V4 and newtype https://github.com/rescript-lang/syntax/pull/737
+- Fix issue with JSX V4 when components are nested
 
 #### :eyeglasses: Spec Compliance
 

cli/reactjs_jsx_ppx.ml

@@ -127,8 +127,8 @@ let getMapper ~config =
           | Pstr_attribute attr -> processConfigAttribute attr config
           | _ -> ());
           let item = default_mapper.structure_item mapper item in
-          if config.version = 3 then transformStructureItem3 mapper item
-          else if config.version = 4 then transformStructureItem4 mapper item
+          if config.version = 3 then transformStructureItem3 item
+          else if config.version = 4 then transformStructureItem4 item
           else [item])
         items
       |> List.flatten

cli/reactjs_jsx_v3.ml

@@ -446,8 +446,7 @@ let jsxMapper ~config =
       args
   in
 
-  let rec recursivelyTransformNamedArgsForMake mapper expr args newtypes =
-    let expr = mapper.expr mapper expr in
+  let rec recursivelyTransformNamedArgsForMake expr args newtypes =
     match expr.pexp_desc with
     (* TODO: make this show up with a loc. *)
     | Pexp_fun (Labelled "key", _, _, _) | Pexp_fun (Optional "key", _, _, _) ->
@@ -494,7 +493,7 @@ let jsxMapper ~config =
         | _ -> None
       in
 
-      recursivelyTransformNamedArgsForMake mapper expression
+      recursivelyTransformNamedArgsForMake expression
         ((arg, default, pattern, alias, pattern.ppat_loc, type_) :: args)
         newtypes
     | Pexp_fun
@@ -517,10 +516,9 @@ let jsxMapper ~config =
         "React: react.component refs only support plain arguments and type \
          annotations."
     | Pexp_newtype (label, expression) ->
-      recursivelyTransformNamedArgsForMake mapper expression args
-        (label :: newtypes)
+      recursivelyTransformNamedArgsForMake expression args (label :: newtypes)
     | Pexp_constraint (expression, _typ) ->
-      recursivelyTransformNamedArgsForMake mapper expression args newtypes
+      recursivelyTransformNamedArgsForMake expression args newtypes
     | _ -> (args, newtypes, None)
   in
 
@@ -586,7 +584,7 @@ let jsxMapper ~config =
   in
 
   let nestedModules = ref [] in
-  let transformStructureItem mapper item =
+  let transformStructureItem item =
     match item with
     (* external *)
     | {
@@ -825,7 +823,7 @@ let jsxMapper ~config =
           let props = getPropsAttr payload in
           (* do stuff here! *)
           let namedArgList, newtypes, forwardRef =
-            recursivelyTransformNamedArgsForMake mapper
+            recursivelyTransformNamedArgsForMake
               (modifiedBindingOld binding)
               [] []
           in

cli/reactjs_jsx_v4.ml

@@ -598,9 +598,7 @@ let transformLowercaseCall3 ~config mapper jsxExprLoc callExprLoc attrs
          })
       args
 
-let rec recursivelyTransformNamedArgsForMake mapper expr args newtypes coreType
-    =
-  let expr = mapper.expr mapper expr in
+let rec recursivelyTransformNamedArgsForMake expr args newtypes coreType =
   match expr.pexp_desc with
   (* TODO: make this show up with a loc. *)
   | Pexp_fun (Labelled "key", _, _, _) | Pexp_fun (Optional "key", _, _, _) ->
@@ -647,7 +645,7 @@ let rec recursivelyTransformNamedArgsForMake mapper expr args newtypes coreType
       | _ -> None
     in
 
-    recursivelyTransformNamedArgsForMake mapper expression
+    recursivelyTransformNamedArgsForMake expression
       ((arg, default, pattern, alias, pattern.ppat_loc, type_) :: args)
       newtypes coreType
   | Pexp_fun
@@ -680,10 +678,10 @@ let rec recursivelyTransformNamedArgsForMake mapper expr args newtypes coreType
       "React: react.component refs only support plain arguments and type \
        annotations."
   | Pexp_newtype (label, expression) ->
-    recursivelyTransformNamedArgsForMake mapper expression args
-      (label :: newtypes) coreType
+    recursivelyTransformNamedArgsForMake expression args (label :: newtypes)
+      coreType
   | Pexp_constraint (expression, coreType) ->
-    recursivelyTransformNamedArgsForMake mapper expression args newtypes
+    recursivelyTransformNamedArgsForMake expression args newtypes
       (Some coreType)
   | _ -> (args, newtypes, coreType)
 
@@ -724,7 +722,7 @@ let check_string_int_attribute_iter =
 
   {Ast_iterator.default_iterator with attribute}
 
-let transformStructureItem ~config mapper item =
+let transformStructureItem ~config item =
   match item with
   (* external *)
   | {
@@ -827,6 +825,8 @@ let transformStructureItem ~config mapper item =
               binding with
               pvb_pat = {binding.pvb_pat with ppat_loc = emptyLoc};
               pvb_loc = emptyLoc;
+              pvb_attributes =
+                binding.pvb_attributes |> List.filter otherAttrsPure;
             }
           in
           let fnName = getFnName binding.pvb_pat in
@@ -870,8 +870,7 @@ let transformStructureItem ~config mapper item =
           let modifiedBinding binding =
             let hasApplication = ref false in
             let wrapExpressionWithBinding expressionFn expression =
-              Vb.mk ~loc:bindingLoc
-                ~attrs:(List.filter otherAttrsPure binding.pvb_attributes)
+              Vb.mk ~loc:bindingLoc ~attrs:binding.pvb_attributes
                 (Pat.var ~loc:bindingPatLoc {loc = bindingPatLoc; txt = fnName})
                 (expressionFn expression)
             in
@@ -979,7 +978,7 @@ let transformStructureItem ~config mapper item =
           in
           (* do stuff here! *)
           let namedArgList, newtypes, _typeConstraints =
-            recursivelyTransformNamedArgsForMake mapper
+            recursivelyTransformNamedArgsForMake
               (modifiedBindingOld binding)
               [] [] None
           in

tests/ppx/react/expected/aliasProps.res.txt

@@ -3,7 +3,6 @@
 module C0 = {
   type props<'priority, 'text> = {priority: 'priority, text?: 'text}
 
-  @react.component
   let make = (props: props<_, _>) => {
     let _ = props.priority
     let text = switch props.text {
@@ -23,7 +22,6 @@ module C0 = {
 module C1 = {
   type props<'priority, 'text> = {priority: 'priority, text?: 'text}
 
-  @react.component
   let make = (props: props<_, _>) => {
     let p = props.priority
     let text = switch props.text {
@@ -43,7 +41,6 @@ module C1 = {
 module C2 = {
   type props<'foo> = {foo?: 'foo}
 
-  @react.component
   let make = (props: props<_>) => {
     let bar = switch props.foo {
     | Some(foo) => foo

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

@@ -1,6 +1,5 @@
 type props<'msg> = {msg: 'msg} // test React JSX file
 
-@react.component
 let make = ({msg, _}: props<_>) => {
   ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
 }

tests/ppx/react/expected/defaultValueProp.res.txt

@@ -1,6 +1,5 @@
 module C0 = {
   type props<'a, 'b> = {a?: 'a, b?: 'b}
-  @react.component
   let make = (props: props<_, _>) => {
     let a = switch props.a {
     | Some(a) => a
@@ -22,7 +21,6 @@ module C0 = {
 module C1 = {
   type props<'a, 'b> = {a?: 'a, b: 'b}
 
-  @react.component
   let make = (props: props<_, _>) => {
     let a = switch props.a {
     | Some(a) => a

tests/ppx/react/expected/fileLevelConfig.res.txt

@@ -20,7 +20,6 @@ module V3 = {
 module V4C = {
   type props<'msg> = {msg: 'msg}
 
-  @react.component
   let make = ({msg, _}: props<_>) => {
     ReactDOM.createDOMElementVariadic("div", [{msg->React.string}])
   }
@@ -36,7 +35,6 @@ module V4C = {
 module V4A = {
   type props<'msg> = {msg: 'msg}
 
-  @react.component
   let make = ({msg, _}: props<_>) => {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
   }

tests/ppx/react/expected/firstClassModules.res.txt

@@ -64,7 +64,6 @@ module Select = {
     items: 'items,
   }
 
-  @react.component
   let make = (
     type a key,
     {model, selected, onChange, items, _}: props<

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

@@ -75,7 +75,6 @@ module V4C = {
       ref?: 'ref,
     }
 
-    @react.component
     let make = (
       {?className, children, _}: props<_, _, ReactRef.currentDomRef>,
       ref: Js.Nullable.t<ReactRef.currentDomRef>,
@@ -103,7 +102,6 @@ module V4C = {
   }
   type props = {}
 
-  @react.component
   let make = (_: props) => {
     let input = React.useRef(Js.Nullable.null)
 
@@ -134,7 +132,6 @@ module V4A = {
       ref?: 'ref,
     }
 
-    @react.component
     let make = ({?className, children, _}: props<_, _, ReactDOM.Ref.currentDomRef>, ref) =>
       ReactDOM.jsxs(
         "div",
@@ -160,7 +157,6 @@ module V4A = {
   }
   type props = {}
 
-  @react.component
   let make = (_: props) => {
     let input = React.useRef(Js.Nullable.null)