Allow empty line between JSX expressions (rescript-lang#7269)

* Keep empty line in JSX * Changes to the tests * Handle braces expression * Fix test * Update CHANGELOG * WIP * Fix test * Handle case with comments * Fix test * Fix formatting * Update CHANGELOG

Author: shulhi

CHANGELOG.md

@@ -12,6 +12,10 @@
 
 # 12.0.0-alpha.9 (Unreleased)
 
+#### :nail_care: Polish
+
+- Allow single newline in JSX. https://github.com/rescript-lang/rescript/pull/7269
+
 # 12.0.0-alpha.8
 
 #### :bug: Bug fix

compiler/syntax/src/res_printer.ml

@@ -4429,33 +4429,51 @@ and print_jsx_children ~state (children_expr : Parsetree.expression) ~sep
  match children_expr.pexp_desc with
  | Pexp_construct ({txt = Longident.Lident "::"}, _) ->
  let children, _ = ParsetreeViewer.collect_list_expressions children_expr in
- Doc.group
- (Doc.join ~sep
- (List.map
- (fun (expr : Parsetree.expression) ->
- let leading_line_comment_present =
- has_leading_line_comment cmt_tbl expr.pexp_loc
- in
- let expr_doc =
- print_expression_with_comments ~state expr cmt_tbl
- in
- let add_parens_or_braces expr_doc =
- (* {(20: int)} make sure that we also protect the expression inside *)
- let inner_doc =
- if Parens.braced_expr expr then add_parens expr_doc
- else expr_doc
- in
- if leading_line_comment_present then add_braces inner_doc
- else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
- in
- match Parens.jsx_child_expr expr with
- | Nothing -> expr_doc
- | Parenthesized -> add_parens_or_braces expr_doc
- | Braced braces_loc ->
- print_comments
- (add_parens_or_braces expr_doc)
- cmt_tbl braces_loc)
- children))
+ let print_expr (expr : Parsetree.expression) =
+ let leading_line_comment_present =
+ has_leading_line_comment cmt_tbl expr.pexp_loc
+ in
+ let expr_doc = print_expression_with_comments ~state expr cmt_tbl in
+ let add_parens_or_braces expr_doc =
+ (* {(20: int)} make sure that we also protect the expression inside *)
+ let inner_doc =
+ if Parens.braced_expr expr then add_parens expr_doc else expr_doc
+ in
+ if leading_line_comment_present then add_braces inner_doc
+ else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
+ in
+ match Parens.jsx_child_expr expr with
+ | Nothing -> expr_doc
+ | Parenthesized -> add_parens_or_braces expr_doc
+ | Braced braces_loc ->
+ print_comments (add_parens_or_braces expr_doc) cmt_tbl braces_loc
+ in
+ let get_first_leading_comment loc =
+ match get_first_leading_comment cmt_tbl loc with
+ | None -> loc
+ | Some comment -> Comment.loc comment
+ in
+ let get_loc expr =
+ match ParsetreeViewer.process_braces_attr expr with
+ | None, _ -> get_first_leading_comment expr.pexp_loc
+ | Some ({loc}, _), _ -> get_first_leading_comment loc
+ in
+ let rec loop prev acc exprs =
+ match exprs with
+ | [] -> List.rev acc
+ | expr :: tails ->
+ let start_loc = (get_loc expr).loc_start.pos_lnum in
+ let end_loc = (get_loc prev).loc_end.pos_lnum in
+ let expr_doc = print_expr expr in
+ let docs =
+ if start_loc - end_loc > 1 then
+ Doc.concat [Doc.hard_line; expr_doc] :: acc
+ else expr_doc :: acc
+ in
+ loop expr docs tails
+ in
+ let docs = loop children_expr [] children in
+ Doc.group (Doc.join ~sep docs)
  | _ ->
  let leading_line_comment_present =
  has_leading_line_comment cmt_tbl children_expr.pexp_loc

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

@@ -351,6 +351,7 @@ module App = {
  // comment
  content
  }
+
  {
  // comment
  if condition() {
@@ -460,3 +461,67 @@ let x = {
  let _ = <C> {children} </C>
  msg->React.string
 }
+
+let x =
+ <div>
+ {
+ hello()
+ hello()
+ }
+ {
+ world()
+ world()
+ }
+
+ {
+ hello()
+ hello()
+ }
+ {
+ world()
+ world()
+ }
+ // another test
+ <span
+ id="1"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+
+ // Comment 2
+
+ <span
+ id="2"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}>
+ <span
+ id="2-1"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+
+ // Comment
+ <span
+ id="2-2"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+
+ <span id="2-3" />
+ </span>
+ <span
+ id="3"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+ </div>

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

@@ -443,3 +443,69 @@ let x = {
  let _ = <C> {children} </C>
  msg->React.string
 }
+
+let x =
+ <div>
+ {
+ hello()
+ hello()
+ } 
+ {
+ world()
+ world()
+ }
+
+ {
+ hello()
+ hello()
+ } {
+ world()
+ world()
+ }
+ // another test
+ <span
+ id="1"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+
+ // Comment 2
+
+ <span
+ id="2"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ >
+ <span
+ id="2-1"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+
+
+ // Comment
+ <span
+ id="2-2"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+
+ <span id="2-3" 
+ />
+ </span>
+ <span
+ id="3"
+ className="sdf sdfdsf sdfs sdf asdf dsf"
+ onClick={() => {
+ ()
+ }}
+ />
+ </div>