Change placement of closing > in JSX (#7803)

* Change placement of closing > in JSX

* fmt of rescript code

* Add changelog entry

* Format ReScript code

* I should have ran make build before make format

Author: nojaf

CHANGELOG.md

@@ -42,6 +42,7 @@
 - Autocomplete `@react.componentWithProps` attribute. https://github.com/rescript-lang/rescript/pull/7812
 - Add some missing iframe attributes to `domProps`. https://github.com/rescript-lang/rescript/pull/7813
 - Polish error message for inline record escaping scope. https://github.com/rescript-lang/rescript/pull/7808
+- Formatter: Change placement of closing `>` in JSX. https://github.com/rescript-lang/rescript/pull/7803
 
 #### :house: Internal
 

compiler/syntax/src/res_printer.ml

@@ -4498,27 +4498,14 @@ and print_jsx_container_tag ~state tag_name
     (closing_tag : Parsetree.jsx_closing_container_tag option)
     (pexp_loc : Location.t) cmt_tbl =
   let name = print_jsx_name tag_name.txt in
-  let last_prop_has_comment_after =
-    let rec visit props =
-      match props with
-      | [] -> None
-      | [x] -> Some x
-      | _ :: xs -> visit xs
-    in
-    let last_prop = visit props in
-    match last_prop with
-    | None -> false
-    | Some last_prop ->
-      has_trailing_comments cmt_tbl (ParsetreeViewer.get_jsx_prop_loc last_prop)
-  in
   let opening_greater_than_loc =
     {
       Warnings.loc_start = opening_greater_than;
       loc_end = opening_greater_than;
       loc_ghost = false;
     }
   in
-  let opening_greater_than_has_leading_comments, opening_greater_than_doc =
+  let _opening_greater_than_has_leading_comments, opening_greater_than_doc =
     let has_leading_comments =
       has_leading_comments cmt_tbl opening_greater_than_loc
     in
@@ -4586,11 +4573,7 @@ and print_jsx_container_tag ~state tag_name
                    (* if the element name has a single comment on the same line, force newline before '>' *)
                    if has_trailing_single_line_comment cmt_tbl tag_loc then
                      Doc.concat [Doc.hard_line; opening_greater_than_doc]
-                   else if
-                     last_prop_has_comment_after
-                     || opening_greater_than_has_leading_comments
-                   then Doc.concat [Doc.soft_line; opening_greater_than_doc]
-                   else opening_greater_than_doc
+                   else Doc.concat [Doc.soft_line; opening_greater_than_doc]
                  in
                  Doc.concat
                    [

tests/gentype_tests/typescript-react-example/src/Hooks.res

@@ -20,7 +20,8 @@ let make = (~vehicle) => {
       {React.string("child2")}
     </ImportHooks>
     <ImportHookDefault
-      person={name: "DefaultImport", age: 42} renderMe={x => React.string(x["randomString"])}>
+      person={name: "DefaultImport", age: 42} renderMe={x => React.string(x["randomString"])}
+    >
       {React.string("child1")}
       {React.string("child2")}
     </ImportHookDefault>

tests/syntax_benchmarks/data/HeroGraphic.res

@@ -1997,7 +1997,8 @@ let make = (~width="760", ~height="380") =>
         y1="180.64"
         x2="362.765"
         y2="435.722"
-        gradientUnits="userSpaceOnUse">
+        gradientUnits="userSpaceOnUse"
+      >
         <stop offset="0.0658436" stopColor="#3A7DDD" />
         <stop offset="0.4001" stopColor="#265291" />
         <stop offset="0.571" stopColor="#1D3E6E" />

tests/syntax_tests/data/conversion/reason/expected/bracedJsx.res.txt

@@ -111,7 +111,8 @@ let make = () => {
     <div
       className=Styles.terminal
       onClick={event => (event->ReactEvent.Mouse.target)["querySelector"]("input")["focus"]()}
-      ref={containerRef->ReactDOMRe.Ref.domRef}>
+      ref={containerRef->ReactDOMRe.Ref.domRef}
+    >
       {state.history
       ->Array.mapWithIndex((index, item) =>
         <div key={j`$index`} className=Styles.line>

tests/syntax_tests/data/printer/expr/expected/jsx.res.txt

@@ -116,7 +116,8 @@ let avatarSection =
           onMouseLeave={_ => setHoveringAdmin(false)}
           onClick={_e => {
             stopImpersonating(csrfToken)
-          }}>
+          }}
+        >
           <Avatar user={viewer} size={45} />
         </div>
       : React.nullElement}
@@ -497,7 +498,8 @@ let x =
       className="sdf sdfdsf sdfs sdf asdf dsf"
       onClick={() => {
         ()
-      }}>
+      }}
+    >
       <span
         id="2-1"
         className="sdf sdfdsf sdfs sdf asdf dsf"
@@ -566,3 +568,11 @@ let arrow_with_container_tag = el =>
     el
     {t(")")}
   </div>
+
+<Component
+  prop1
+  //
+  prop2
+>
+  {React.string("yow")}
+</Component>

tests/syntax_tests/data/printer/expr/jsx.res

@@ -546,4 +546,11 @@ let arrow_with_container_tag = el => <div>
   {t(nbsp ++ "(")}
   el
   {t(")")}
-</div>
+</div>
+
+<Component
+  prop1
+  // 
+  prop2>
+  {React.string("yow")}
+</Component>

tests/syntax_tests/data/printer/other/expected/signaturePicker.res.txt

@@ -28,7 +28,8 @@ let make = () => {
     <div className="pr-2 font-bold text-gray-400 text-lg"> {"Signature"->string} </div>
     <select
       id="country"
-      className="transition duration-150 ease-in-out sm:text-sm sm:leading-5 border-none font-bold text-2xl text-gray-600 bg-transparent">
+      className="transition duration-150 ease-in-out sm:text-sm sm:leading-5 border-none font-bold text-2xl text-gray-600 bg-transparent"
+    >
       {options
       ->Belt.List.map(option =>
         <option key={option->TimeSignature.toString}>
@@ -47,7 +48,8 @@ let make = () => {
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-gray-400">
+      className="text-gray-400"
+    >
       <polyline points="6 9 12 15 18 9" />
     </svg>
   </label>

tests/tests/src/jsx_preserve_test.res

@@ -150,5 +150,6 @@ let _youtube_iframe =
     frameBorder={0}
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
     referrerPolicy="strict-origin-when-cross-origin"
-    allowFullScreen={true}>
+    allowFullScreen={true}
+  >
   </iframe>