From db7eee656dc2db2ec075cc17d47e45e607b3eca8 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 6 Feb 2025 18:11:26 +0100
Subject: [PATCH 01/99] Intial exploration of JSX ast

Map child expressions

Initial mapping of Pexp_jsx_fragment to 0

Correct location in mapping

Update analysis for jsx_fragment

Remove unused code

Print something for ml print

Commit invalid test results for reference

Try improve printing

Correct fragment range, try and print comments

Indent jsx

Process comments from children inside fragment

Attach comments to fragment tags

Fix comment

Improve comment formatting

Print single element on same line

Update comment

WIP: Debug

More debugging

Works

Fix some jsx printing

Fix the test

Clean up

Update tests with location changes
---
 analysis/src/CompletionFrontEnd.ml            |   3 +-
 analysis/src/Utils.ml                         |   5 +
 compiler/frontend/bs_ast_mapper.ml            |   2 +
 compiler/ml/ast_helper.ml                     |  27 ++++
 compiler/ml/ast_helper.mli                    |  10 ++
 compiler/ml/ast_iterator.ml                   |   1 +
 compiler/ml/ast_mapper.ml                     |   2 +
 compiler/ml/ast_mapper_to0.ml                 |  12 ++
 compiler/ml/depend.ml                         |   1 +
 compiler/ml/parsetree.ml                      |  10 +-
 compiler/ml/pprintast.ml                      |   2 +
 compiler/ml/printast.ml                       |   3 +
 compiler/ml/typecore.ml                       |   5 +-
 compiler/syntax/src/jsx_v4.ml                 | 137 +++++++-----------
 compiler/syntax/src/res_ast_debugger.ml       |   5 +
 compiler/syntax/src/res_comments_table.ml     |  39 ++---
 compiler/syntax/src/res_core.ml               |  61 +++-----
 compiler/syntax/src/res_parens.ml             |   2 +-
 compiler/syntax/src/res_parsetree_viewer.ml   |   1 +
 compiler/syntax/src/res_printer.ml            |  62 ++++++--
 .../tests/src/expected/Completion.res.txt     |   2 +-
 .../tests/src/expected/Fragment.res.txt       |   9 +-
 .../tests/src/expected/Jsx2.res.txt           |   9 +-
 .../conversion/reason/expected/string.res.txt |   2 +-
 .../expected/bracedOrRecord.res.txt           |   2 +-
 .../grammar/expressions/expected/jsx.res.txt  |  41 +++---
 .../data/printer/expr/expected/braced.res.txt |   4 +-
 .../data/printer/expr/expected/switch.res.txt |   3 +-
 .../syntax_tests/data/printer/expr/switch.res |   2 +-
 29 files changed, 266 insertions(+), 198 deletions(-)

diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
index aea7a6141d..1ba52807d1 100644
--- a/analysis/src/CompletionFrontEnd.ml
+++ b/analysis/src/CompletionFrontEnd.ml
@@ -1232,7 +1232,8 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
                          then ValueOrField
                          else Value);
                     }))
-        | Pexp_construct ({txt = Lident ("::" | "()")}, _) ->
+        | Pexp_construct ({txt = Lident ("::" | "()")}, _) | Pexp_jsx_fragment _
+          ->
           (* Ignore list expressions, used in JSX, unit, and more *) ()
         | Pexp_construct (lid, eOpt) -> (
           let lidPath = flattenLidCheckDot lid in
diff --git a/analysis/src/Utils.ml b/analysis/src/Utils.ml
index c274b5a9fb..1a068afedb 100644
--- a/analysis/src/Utils.ml
+++ b/analysis/src/Utils.ml
@@ -111,6 +111,7 @@ let identifyPexp pexp =
   | Pexp_pack _ -> "Pexp_pack"
   | Pexp_extension _ -> "Pexp_extension"
   | Pexp_open _ -> "Pexp_open"
+  | Pexp_jsx_fragment _ -> "Pexp_jsx_fragment"
 
 let identifyPpat pat =
   match pat with
@@ -154,6 +155,10 @@ let isJsxComponent (vb : Parsetree.value_binding) =
   |> List.exists (function
        | {Location.txt = "react.component" | "jsx.component"}, _payload -> true
        | _ -> false)
+  ||
+  match vb.pvb_expr.pexp_desc with
+  | Parsetree.Pexp_jsx_fragment _ -> true
+  | _ -> false
 
 let checkName name ~prefix ~exact =
   if exact then name = prefix else startsWith name prefix
diff --git a/compiler/frontend/bs_ast_mapper.ml b/compiler/frontend/bs_ast_mapper.ml
index 4bcda7c534..c2beac2140 100644
--- a/compiler/frontend/bs_ast_mapper.ml
+++ b/compiler/frontend/bs_ast_mapper.ml
@@ -366,6 +366,8 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
+    | Pexp_jsx_fragment (o, xs, c) ->
+      jsx_fragment o (List.map (sub.expr sub) xs) c
 end
 
 module P = struct
diff --git a/compiler/ml/ast_helper.ml b/compiler/ml/ast_helper.ml
index aa0c66dbfc..5c27101d66 100644
--- a/compiler/ml/ast_helper.ml
+++ b/compiler/ml/ast_helper.ml
@@ -180,8 +180,35 @@ module Exp = struct
   let pack ?loc ?attrs a = mk ?loc ?attrs (Pexp_pack a)
   let open_ ?loc ?attrs a b c = mk ?loc ?attrs (Pexp_open (a, b, c))
   let extension ?loc ?attrs a = mk ?loc ?attrs (Pexp_extension a)
+  let jsx_fragment ?loc ?attrs a b c =
+    mk ?loc ?attrs (Pexp_jsx_fragment (a, b, c))
 
   let case lhs ?guard rhs = {pc_lhs = lhs; pc_guard = guard; pc_rhs = rhs}
+
+  let make_list_expression loc seq ext_opt =
+    let rec handle_seq = function
+      | [] -> (
+        match ext_opt with
+        | Some ext -> ext
+        | None ->
+          let loc = {loc with Location.loc_ghost = true} in
+          let nil = Location.mkloc (Longident.Lident "[]") loc in
+          construct ~loc nil None)
+      | e1 :: el ->
+        let exp_el = handle_seq el in
+        let loc =
+          Location.
+            {
+              loc_start = e1.Parsetree.pexp_loc.Location.loc_start;
+              loc_end = exp_el.pexp_loc.loc_end;
+              loc_ghost = false;
+            }
+        in
+        let arg = tuple ~loc [e1; exp_el] in
+        construct ~loc (Location.mkloc (Longident.Lident "::") loc) (Some arg)
+    in
+    let expr = handle_seq seq in
+    {expr with pexp_loc = loc}
 end
 
 module Mty = struct
diff --git a/compiler/ml/ast_helper.mli b/compiler/ml/ast_helper.mli
index a78e33589e..c5adff0d05 100644
--- a/compiler/ml/ast_helper.mli
+++ b/compiler/ml/ast_helper.mli
@@ -208,8 +208,18 @@ module Exp : sig
   val open_ :
     ?loc:loc -> ?attrs:attrs -> override_flag -> lid -> expression -> expression
   val extension : ?loc:loc -> ?attrs:attrs -> extension -> expression
+  val jsx_fragment :
+    ?loc:loc ->
+    ?attrs:attrs ->
+    Lexing.position ->
+    expression list ->
+    Lexing.position ->
+    expression
 
   val case : pattern -> ?guard:expression -> expression -> case
+
+  val make_list_expression :
+    Location.t -> expression list -> expression option -> expression
 end
 
 (** Value declarations *)
diff --git a/compiler/ml/ast_iterator.ml b/compiler/ml/ast_iterator.ml
index 1c0bd087da..3bd6f6df57 100644
--- a/compiler/ml/ast_iterator.ml
+++ b/compiler/ml/ast_iterator.ml
@@ -344,6 +344,7 @@ module E = struct
       iter_loc sub lid;
       sub.expr sub e
     | Pexp_extension x -> sub.extension sub x
+    | Pexp_jsx_fragment (_, xs, _) -> List.iter (sub.expr sub) xs
 end
 
 module P = struct
diff --git a/compiler/ml/ast_mapper.ml b/compiler/ml/ast_mapper.ml
index f2055efb93..efd5b247e1 100644
--- a/compiler/ml/ast_mapper.ml
+++ b/compiler/ml/ast_mapper.ml
@@ -329,6 +329,8 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
+    | Pexp_jsx_fragment (o, xs, c) ->
+      jsx_fragment ~loc ~attrs o (List.map (sub.expr sub) xs) c
 end
 
 module P = struct
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index cc343762fc..bb2a97fbb3 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -407,6 +407,18 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
+    | Pexp_jsx_fragment (o, xs, c) ->
+      (*
+         The location of  Pexp_jsx_fragment is from the start of < till the end of />.
+         This is not the case in the old AST. There it is from >...</
+      *)
+      let loc = {loc with loc_start = o; loc_end = c} in
+      let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
+      let mapped = sub.expr sub list_expr in
+      let jsx_attr =
+        sub.attribute sub (Location.mknoloc "JSX", Parsetree.PStr [])
+      in
+      {mapped with pexp_attributes = jsx_attr :: attrs}
 end
 
 module P = struct
diff --git a/compiler/ml/depend.ml b/compiler/ml/depend.ml
index f33454d448..0aa6fc4095 100644
--- a/compiler/ml/depend.ml
+++ b/compiler/ml/depend.ml
@@ -289,6 +289,7 @@ let rec add_expr bv exp =
     | Pstr_eval ({pexp_desc = Pexp_construct (c, None)}, _) -> add bv c
     | _ -> handle_extension e)
   | Pexp_extension e -> handle_extension e
+  | Pexp_jsx_fragment (_, xs, _) -> List.iter (add_expr bv) xs
 
 and add_cases bv cases = List.iter (add_case bv) cases
 
diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index b7db5e902b..c4ac25cbc1 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -313,8 +313,14 @@ and expression_desc =
        let open M in E
        let! open M in E *)
   | Pexp_extension of extension
-(* [%id] *)
-(* . *)
+  (* [%id] *)
+  (* . *)
+  (* represents <> foo </> , the entire range is stored in the expression , we keep track of >, children and </ *)
+  | Pexp_jsx_fragment of
+      (* > *) Lexing.position
+      * (* children *)
+      expression list
+      * (* </ *) Lexing.position
 
 and case = {
   (* (P -> E) or (P when E0 -> E) *)
diff --git a/compiler/ml/pprintast.ml b/compiler/ml/pprintast.ml
index 31cb171d81..71a0b203cb 100644
--- a/compiler/ml/pprintast.ml
+++ b/compiler/ml/pprintast.ml
@@ -794,6 +794,8 @@ and simple_expr ctxt f x =
       let expression = expression ctxt in
       pp f fmt (pattern ctxt) s expression e1 direction_flag df expression e2
         expression e3
+    | Pexp_jsx_fragment (_, xs, _) ->
+      pp f "<>%a</>" (list (simple_expr ctxt)) xs
     | _ -> paren true (expression ctxt) f x
 
 and attributes ctxt f l = List.iter (attribute ctxt f) l
diff --git a/compiler/ml/printast.ml b/compiler/ml/printast.ml
index 777829f0c9..2721b0bbda 100644
--- a/compiler/ml/printast.ml
+++ b/compiler/ml/printast.ml
@@ -345,6 +345,9 @@ and expression i ppf x =
   | Pexp_extension (s, arg) ->
     line i ppf "Pexp_extension \"%s\"\n" s.txt;
     payload i ppf arg
+  | Pexp_jsx_fragment (_, xs, _) ->
+    line i ppf "Pexp_jsx_fragment";
+    list i expression ppf xs
 
 and value_description i ppf x =
   line i ppf "value_description %a %a\n" fmt_string_loc x.pval_name fmt_location
diff --git a/compiler/ml/typecore.ml b/compiler/ml/typecore.ml
index 2217d3c94d..a54e43d63b 100644
--- a/compiler/ml/typecore.ml
+++ b/compiler/ml/typecore.ml
@@ -148,7 +148,8 @@ let iter_expression f e =
     | Pexp_match (e, pel) | Pexp_try (e, pel) ->
       expr e;
       List.iter case pel
-    | Pexp_array el | Pexp_tuple el -> List.iter expr el
+    | Pexp_array el | Pexp_tuple el | Pexp_jsx_fragment (_, el, _) ->
+      List.iter expr el
     | Pexp_construct (_, eo) | Pexp_variant (_, eo) -> may expr eo
     | Pexp_record (iel, eo) ->
       may expr eo;
@@ -3208,6 +3209,8 @@ and type_expect_ ?type_clash_context ?in_function ?(recarg = Rejected) env sexp
     | _ -> raise (Error (loc, env, Invalid_extension_constructor_payload)))
   | Pexp_extension ext ->
     raise (Error_forward (Builtin_attributes.error_of_extension ext))
+  | Pexp_jsx_fragment _ ->
+    failwith "Pexp_jsx_fragment is expected to be transformed at this point"
 
 and type_function ?in_function ~arity ~async loc attrs env ty_expected_ l
     caselist =
diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index b1eb169b84..32affe1e3b 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1530,8 +1530,62 @@ let transform_jsx_call ~config mapper call_expression call_arguments
       "JSX: `createElement` should be preceeded by a simple, direct module \
        name."
 
-let expr ~config mapper expression =
+let expr ~(config : Jsx_common.jsx_config) mapper expression =
   match expression with
+  | {
+   pexp_desc = Pexp_jsx_fragment (_, xs, _);
+   pexp_loc = loc;
+   pexp_attributes = attrs;
+  } ->
+    let loc = {loc with loc_ghost = true} in
+    let fragment =
+      match config.mode with
+      | "automatic" ->
+        Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
+      | "classic" | _ ->
+        Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
+    in
+    let record_of_children children =
+      Exp.record [(Location.mknoloc (Lident "children"), children, false)] None
+    in
+    let apply_jsx_array expr =
+      Exp.apply
+        (Exp.ident
+           {txt = module_access_name config "array"; loc = Location.none})
+        [(Nolabel, expr)]
+    in
+    let children_props =
+      match xs with
+      | [] -> empty_record ~loc:Location.none
+      | [child] -> record_of_children (mapper.expr mapper child)
+      | _ -> (
+        match config.mode with
+        | "automatic" ->
+          record_of_children
+          @@ apply_jsx_array (Exp.array (List.map (mapper.expr mapper) xs))
+        | "classic" | _ -> empty_record ~loc:Location.none)
+    in
+    let args =
+      (nolabel, fragment) :: (nolabel, children_props)
+      ::
+      (match config.mode with
+      | "classic" when List.length xs > 1 ->
+        [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
+      | _ -> [])
+    in
+    Exp.apply ~loc ~attrs
+      (* ReactDOM.createElement *)
+      (match config.mode with
+      | "automatic" ->
+        if List.length xs > 1 then
+          Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
+        else Exp.ident ~loc {loc; txt = module_access_name config "jsx"}
+      | "classic" | _ ->
+        if List.length xs > 1 then
+          Exp.ident ~loc
+            {loc; txt = Ldot (Lident "React", "createElementVariadic")}
+        else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
+      args
   (* Does the function application have the @JSX attribute? *)
   | {
    pexp_desc = Pexp_apply {funct = call_expression; args = call_arguments};
@@ -1549,87 +1603,6 @@ let expr ~config mapper expression =
     | _, non_jsx_attributes ->
       transform_jsx_call ~config mapper call_expression call_arguments pexp_loc
         non_jsx_attributes)
-  (* is it a list with jsx attribute? Reason <>foo</> desugars to [@JSX][foo]*)
-  | {
-      pexp_desc =
-        ( Pexp_construct
-            ({txt = Lident "::"; loc}, Some {pexp_desc = Pexp_tuple _})
-        | Pexp_construct ({txt = Lident "[]"; loc}, None) );
-      pexp_attributes;
-    } as list_items -> (
-    let jsx_attribute, non_jsx_attributes =
-      List.partition
-        (fun (attribute, _) -> attribute.txt = "JSX")
-        pexp_attributes
-    in
-    match (jsx_attribute, non_jsx_attributes) with
-    (* no JSX attribute *)
-    | [], _ -> default_mapper.expr mapper expression
-    | _, non_jsx_attributes ->
-      let loc = {loc with loc_ghost = true} in
-      let fragment =
-        match config.mode with
-        | "automatic" ->
-          Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
-        | "classic" | _ ->
-          Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
-      in
-      let children_expr = transform_children_if_list ~mapper list_items in
-      let record_of_children children =
-        Exp.record
-          [(Location.mknoloc (Lident "children"), children, false)]
-          None
-      in
-      let apply_jsx_array expr =
-        Exp.apply
-          (Exp.ident
-             {txt = module_access_name config "array"; loc = Location.none})
-          [(Nolabel, expr)]
-      in
-      let count_of_children = function
-        | {pexp_desc = Pexp_array children} -> List.length children
-        | _ -> 0
-      in
-      let transform_children_to_props children_expr =
-        match children_expr with
-        | {pexp_desc = Pexp_array children} -> (
-          match children with
-          | [] -> empty_record ~loc:Location.none
-          | [child] -> record_of_children child
-          | _ -> (
-            match config.mode with
-            | "automatic" -> record_of_children @@ apply_jsx_array children_expr
-            | "classic" | _ -> empty_record ~loc:Location.none))
-        | _ -> (
-          match config.mode with
-          | "automatic" -> record_of_children @@ apply_jsx_array children_expr
-          | "classic" | _ -> empty_record ~loc:Location.none)
-      in
-      let args =
-        (nolabel, fragment)
-        :: (nolabel, transform_children_to_props children_expr)
-        ::
-        (match config.mode with
-        | "classic" when count_of_children children_expr > 1 ->
-          [(nolabel, children_expr)]
-        | _ -> [])
-      in
-      Exp.apply
-        ~loc (* throw away the [@JSX] attribute and keep the others, if any *)
-        ~attrs:non_jsx_attributes
-        (* ReactDOM.createElement *)
-        (match config.mode with
-        | "automatic" ->
-          if count_of_children children_expr > 1 then
-            Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
-          else Exp.ident ~loc {loc; txt = module_access_name config "jsx"}
-        | "classic" | _ ->
-          if count_of_children children_expr > 1 then
-            Exp.ident ~loc
-              {loc; txt = Ldot (Lident "React", "createElementVariadic")}
-          else
-            Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
-        args)
   (* Delegate to the default mapper, a deep identity traversal *)
   | e -> default_mapper.expr mapper e
 
diff --git a/compiler/syntax/src/res_ast_debugger.ml b/compiler/syntax/src/res_ast_debugger.ml
index a4d4f4a390..72ec8226bc 100644
--- a/compiler/syntax/src/res_ast_debugger.ml
+++ b/compiler/syntax/src/res_ast_debugger.ml
@@ -707,6 +707,11 @@ module SexpAst = struct
           ]
       | Pexp_extension ext ->
         Sexp.list [Sexp.atom "Pexp_extension"; extension ext]
+      | Pexp_jsx_fragment (_, xs, _) ->
+        Sexp.list
+          [
+            Sexp.atom "Pexp_jsx_fragment"; Sexp.list (map_empty ~f:expression xs);
+          ]
     in
     Sexp.list [Sexp.atom "expression"; desc]
 
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index c003d04ff6..ad7083811a 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -24,25 +24,24 @@ let copy tbl =
 
 let empty = make ()
 
+let print_loc (k : Warnings.loc) =
+  Doc.concat
+    [
+      Doc.lbracket;
+      Doc.text (string_of_int k.loc_start.pos_lnum);
+      Doc.text ":";
+      Doc.text (string_of_int (k.loc_start.pos_cnum - k.loc_start.pos_bol));
+      Doc.text "-";
+      Doc.text (string_of_int k.loc_end.pos_lnum);
+      Doc.text ":";
+      Doc.text (string_of_int (k.loc_end.pos_cnum - k.loc_end.pos_bol));
+      Doc.rbracket;
+    ]
+
 let print_entries tbl =
-  let open Location in
   Hashtbl.fold
     (fun (k : Location.t) (v : Comment.t list) acc ->
-      let loc =
-        Doc.concat
-          [
-            Doc.lbracket;
-            Doc.text (string_of_int k.loc_start.pos_lnum);
-            Doc.text ":";
-            Doc.text
-              (string_of_int (k.loc_start.pos_cnum - k.loc_start.pos_bol));
-            Doc.text "-";
-            Doc.text (string_of_int k.loc_end.pos_lnum);
-            Doc.text ":";
-            Doc.text (string_of_int (k.loc_end.pos_cnum - k.loc_end.pos_bol));
-            Doc.rbracket;
-          ]
-      in
+      let loc = print_loc k in
       let doc =
         Doc.breakable_group ~force_break:true
           (Doc.concat
@@ -1508,7 +1507,13 @@ and walk_expression expr t comments =
         attach t.leading return_expr.pexp_loc leading;
         walk_expression return_expr t inside;
         attach t.trailing return_expr.pexp_loc trailing)
-  | _ -> ()
+  | Pexp_jsx_fragment (opening_greater_than, exprs, _closing_lesser_than) ->
+    let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
+    let on_same_line, rest = partition_by_on_same_line opening_token comments in
+    attach t.trailing opening_token on_same_line;
+    let xs = exprs |> List.map (fun e -> Expression e) in
+    walk_list xs t rest
+  | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =
   let leading, inside, trailing = partition_by_loc comments pattern.ppat_loc in
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index b1724b239a..c08f3c0c7d 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -435,28 +435,6 @@ let make_unary_expr start_pos token_end token operand =
       [(Nolabel, operand)]
   | _ -> operand
 
-let make_list_expression loc seq ext_opt =
-  let rec handle_seq = function
-    | [] -> (
-      match ext_opt with
-      | Some ext -> ext
-      | None ->
-        let loc = {loc with Location.loc_ghost = true} in
-        let nil = Location.mkloc (Longident.Lident "[]") loc in
-        Ast_helper.Exp.construct ~loc nil None)
-    | e1 :: el ->
-      let exp_el = handle_seq el in
-      let loc =
-        mk_loc e1.Parsetree.pexp_loc.Location.loc_start exp_el.pexp_loc.loc_end
-      in
-      let arg = Ast_helper.Exp.tuple ~loc [e1; exp_el] in
-      Ast_helper.Exp.construct ~loc
-        (Location.mkloc (Longident.Lident "::") loc)
-        (Some arg)
-  in
-  let expr = handle_seq seq in
-  {expr with pexp_loc = loc}
-
 let make_list_pattern loc seq ext_opt =
   let rec handle_seq = function
     | [] ->
@@ -2619,7 +2597,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p =
       Scanner.pop_mode p.scanner Jsx;
       Parser.expect GreaterThan p;
       let loc = mk_loc children_start_pos children_end_pos in
-      make_list_expression loc [] None (* no children *)
+      Ast_helper.Exp.make_list_expression loc [] None (* no children *)
     | GreaterThan -> (
       (* <foo a=b> bar </foo> *)
       let children_start_pos = p.Parser.start_pos in
@@ -2642,7 +2620,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p =
         let loc = mk_loc children_start_pos children_end_pos in
         match (spread, children) with
         | true, child :: _ -> child
-        | _ -> make_list_expression loc children None)
+        | _ -> Ast_helper.Exp.make_list_expression loc children None)
       | token -> (
         Scanner.pop_mode p.scanner Jsx;
         let () =
@@ -2663,11 +2641,11 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p =
         let loc = mk_loc children_start_pos children_end_pos in
         match (spread, children) with
         | true, child :: _ -> child
-        | _ -> make_list_expression loc children None))
+        | _ -> Ast_helper.Exp.make_list_expression loc children None))
     | token ->
       Scanner.pop_mode p.scanner Jsx;
       Parser.err p (Diagnostics.unexpected token p.breadcrumbs);
-      make_list_expression Location.none [] None
+      Ast_helper.Exp.make_list_expression Location.none [] None
   in
   let jsx_end_pos = p.prev_end_pos in
   let loc = mk_loc jsx_start_pos jsx_end_pos in
@@ -2697,24 +2675,24 @@ and parse_jsx p =
   Parser.leave_breadcrumb p Grammar.Jsx;
   let start_pos = p.Parser.start_pos in
   Parser.expect LessThan p;
-  let jsx_expr =
+  let jsx_expr, jsx_attrs =
     match p.Parser.token with
     | Lident _ | Uident _ ->
-      parse_jsx_opening_or_self_closing_element ~start_pos p
+      (parse_jsx_opening_or_self_closing_element ~start_pos p, [jsx_attr])
     | GreaterThan ->
       (* fragment: <> foo </> *)
-      parse_jsx_fragment p
-    | _ -> parse_jsx_name p
+      (parse_jsx_fragment start_pos p, [])
+    | _ -> (parse_jsx_name p, [])
   in
   Parser.eat_breadcrumb p;
-  {jsx_expr with pexp_attributes = [jsx_attr]}
+  {jsx_expr with pexp_attributes = jsx_attrs}
 
 (*
  * jsx-fragment ::=
  *  | <> </>
  *  | <> jsx-children </>
  *)
-and parse_jsx_fragment p =
+and parse_jsx_fragment start_pos p =
   let children_start_pos = p.Parser.start_pos in
   Parser.expect GreaterThan p;
   let _spread, children = parse_jsx_children p in
@@ -2722,9 +2700,12 @@ and parse_jsx_fragment p =
   if p.token = LessThan then p.token <- Scanner.reconsider_less_than p.scanner;
   Parser.expect LessThanSlash p;
   Scanner.pop_mode p.scanner Jsx;
+  let end_pos = p.Parser.end_pos in
   Parser.expect GreaterThan p;
-  let loc = mk_loc children_start_pos children_end_pos in
-  make_list_expression loc children None
+  (* location is from starting < till closing >  *)
+  let loc = mk_loc start_pos end_pos in
+  Ast_helper.Exp.jsx_fragment ~attrs:[] ~loc children_start_pos children
+    children_end_pos
 
 (*
  * jsx-prop ::=
@@ -3864,9 +3845,10 @@ and parse_list_expr ~start_pos p =
   in
   let make_sub_expr = function
     | exprs, Some spread, start_pos, end_pos ->
-      make_list_expression (mk_loc start_pos end_pos) exprs (Some spread)
+      Ast_helper.Exp.make_list_expression (mk_loc start_pos end_pos) exprs
+        (Some spread)
     | exprs, None, start_pos, end_pos ->
-      make_list_expression (mk_loc start_pos end_pos) exprs None
+      Ast_helper.Exp.make_list_expression (mk_loc start_pos end_pos) exprs None
   in
   let list_exprs_rev =
     parse_comma_delimited_reversed_list p ~grammar:Grammar.ListExpr
@@ -3875,9 +3857,10 @@ and parse_list_expr ~start_pos p =
   Parser.expect Rbrace p;
   let loc = mk_loc start_pos p.prev_end_pos in
   match split_by_spread list_exprs_rev with
-  | [] -> make_list_expression loc [] None
-  | [(exprs, Some spread, _, _)] -> make_list_expression loc exprs (Some spread)
-  | [(exprs, None, _, _)] -> make_list_expression loc exprs None
+  | [] -> Ast_helper.Exp.make_list_expression loc [] None
+  | [(exprs, Some spread, _, _)] ->
+    Ast_helper.Exp.make_list_expression loc exprs (Some spread)
+  | [(exprs, None, _, _)] -> Ast_helper.Exp.make_list_expression loc exprs None
   | exprs ->
     let list_exprs = List.map make_sub_expr exprs in
     Ast_helper.Exp.apply ~loc
diff --git a/compiler/syntax/src/res_parens.ml b/compiler/syntax/src/res_parens.ml
index 550c375df9..b9dc6a8c80 100644
--- a/compiler/syntax/src/res_parens.ml
+++ b/compiler/syntax/src/res_parens.ml
@@ -385,7 +385,7 @@ let jsx_child_expr expr =
          ( Pexp_ident _ | Pexp_constant _ | Pexp_field _ | Pexp_construct _
          | Pexp_variant _ | Pexp_array _ | Pexp_pack _ | Pexp_record _
          | Pexp_extension _ | Pexp_letmodule _ | Pexp_letexception _
-         | Pexp_open _ | Pexp_sequence _ | Pexp_let _ );
+         | Pexp_open _ | Pexp_sequence _ | Pexp_let _ | Pexp_jsx_fragment _ );
        pexp_attributes = [];
       } ->
         Nothing
diff --git a/compiler/syntax/src/res_parsetree_viewer.ml b/compiler/syntax/src/res_parsetree_viewer.ml
index 71696b0845..ff33dd4156 100644
--- a/compiler/syntax/src/res_parsetree_viewer.ml
+++ b/compiler/syntax/src/res_parsetree_viewer.ml
@@ -492,6 +492,7 @@ let is_jsx_expression expr =
     | _ :: attrs -> loop attrs
   in
   match expr.pexp_desc with
+  | Pexp_jsx_fragment _ -> true
   | Pexp_apply _ -> loop expr.Parsetree.pexp_attributes
   | _ -> false
 
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 9b313a00ea..74e3cc3a69 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2098,6 +2098,7 @@ and print_value_binding ~state ~rec_flag (vb : Parsetree.value_binding) cmt_tbl
           | {pexp_desc = Pexp_newtype _} -> false
           | {pexp_attributes = [({Location.txt = "res.taggedTemplate"}, _)]} ->
             false
+          | {pexp_desc = Pexp_jsx_fragment _} -> true
           | e ->
             ParsetreeViewer.has_attributes e.pexp_attributes
             || ParsetreeViewer.is_array_access e)
@@ -2782,9 +2783,8 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
     | Pexp_fun _ | Pexp_newtype _ -> print_arrow e
     | Parsetree.Pexp_constant c ->
       print_constant ~template_literal:(ParsetreeViewer.is_template_literal e) c
-    | Pexp_construct _ when ParsetreeViewer.has_jsx_attribute e.pexp_attributes
-      ->
-      print_jsx_fragment ~state e cmt_tbl
+    | Pexp_jsx_fragment (o, xs, c) ->
+      print_jsx_fragment ~state o xs c e.pexp_loc cmt_tbl
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
       Doc.concat
@@ -3413,6 +3413,7 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
     | Pexp_ifthenelse _ ->
       true
     | Pexp_match _ when ParsetreeViewer.is_if_let_expr e -> true
+    | Pexp_jsx_fragment _ -> true
     | Pexp_construct _ when ParsetreeViewer.has_jsx_attribute e.pexp_attributes
       ->
       true
@@ -4403,27 +4404,66 @@ and print_jsx_expression ~state lident args cmt_tbl =
               ]);
        ])
 
-and print_jsx_fragment ~state expr cmt_tbl =
-  let opening = Doc.text "<>" in
-  let closing = Doc.text "</>" in
+and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
+    (children : Parsetree.expression list)
+    (closing_lesser_than : Lexing.position) (fragment_loc : Warnings.loc)
+    cmt_tbl =
+  let opening =
+    let loc : Location.t = {fragment_loc with loc_end = opening_greater_than} in
+    print_comments (Doc.text "<>") cmt_tbl loc
+  in
+  let closing =
+    let loc : Location.t =
+      {fragment_loc with loc_start = closing_lesser_than}
+    in
+    print_comments (Doc.text "</>") cmt_tbl loc
+  in
   let line_sep =
-    if has_nested_jsx_or_more_than_one_child expr then Doc.hard_line
+    if
+      List.length children > 1
+      || List.exists ParsetreeViewer.is_jsx_expression children
+    then Doc.hard_line
     else Doc.line
   in
   Doc.group
     (Doc.concat
        [
          opening;
-         (match expr.pexp_desc with
-         | Pexp_construct ({txt = Longident.Lident "[]"}, None) -> Doc.nil
-         | _ ->
+         (match children with
+         | [] -> Doc.nil
+         | children ->
            Doc.indent
              (Doc.concat
-                [Doc.line; print_jsx_children ~state expr ~sep:line_sep cmt_tbl]));
+                [
+                  Doc.line;
+                  Doc.join ~sep:line_sep
+                    (List.map
+                       (fun e -> print_jsx_child ~state e cmt_tbl)
+                       children);
+                ]));
          line_sep;
          closing;
        ])
 
+and print_jsx_child ~state (expr : Parsetree.expression) cmt_tbl =
+  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
+
 and print_jsx_children ~state (children_expr : Parsetree.expression) ~sep
     cmt_tbl =
   match children_expr.pexp_desc with
diff --git a/tests/analysis_tests/tests/src/expected/Completion.res.txt b/tests/analysis_tests/tests/src/expected/Completion.res.txt
index b2aa5b483f..64d1d2b373 100644
--- a/tests/analysis_tests/tests/src/expected/Completion.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Completion.res.txt
@@ -963,7 +963,7 @@ Path Objects.Rec.
 
 Complete src/Completion.res 120:7
 posCursor:[120:7] posNoWhite:[120:6] Found expr:[119:11->123:1]
-posCursor:[120:7] posNoWhite:[120:6] Found expr:[120:5->122:5]
+posCursor:[120:7] posNoWhite:[120:6] Found expr:[120:5->122:8]
 posCursor:[120:7] posNoWhite:[120:6] Found expr:[120:5->120:7]
 Pexp_ident my:[120:5->120:7]
 Completable: Cpath Value[my]
diff --git a/tests/analysis_tests/tests/src/expected/Fragment.res.txt b/tests/analysis_tests/tests/src/expected/Fragment.res.txt
index 3b67cf3a42..6250ed882a 100644
--- a/tests/analysis_tests/tests/src/expected/Fragment.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Fragment.res.txt
@@ -3,15 +3,8 @@ Hover src/Fragment.res 6:19
 
 Hover src/Fragment.res 9:56
 Nothing at that position. Now trying to use completion.
-posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:10->9:67]
-posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:13->9:67]
+posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:9->9:70]
 posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:13->9:66]
 JSX <SectionHeader:[9:13->9:26] > _children:9:26
-posCursor:[9:56] posNoWhite:[9:55] Found expr:__ghost__[9:10->9:67]
-Pexp_construct []:__ghost__[9:10->9:67] None
-Completable: Cexpression CTypeAtPos()=[]->variantPayload::::($1)
-Package opens Stdlib.place holder Pervasives.JsxModules.place holder
-Resolved opens 1 Stdlib
-ContextPath CTypeAtPos()
 null
 
diff --git a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
index 87e09267cf..2364cc159c 100644
--- a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
@@ -534,8 +534,7 @@ Path Nested.
 
 Hover src/Jsx2.res 162:12
 Nothing at that position. Now trying to use completion.
-posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:3->162:21]
-posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:6->162:21]
+posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:2->162:24]
 posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:6->162:20]
 JSX <Comp:[162:6->162:10] age[162:11->162:14]=...[162:15->162:17]> _children:162:18
 Completable: Cjsx([Comp], age, [age])
@@ -546,10 +545,8 @@ Path Comp.make
 
 Hover src/Jsx2.res 167:16
 Nothing at that position. Now trying to use completion.
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:3->167:30]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:7->167:30]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:7->167:25]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:10->167:25]
+posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:2->167:33]
+posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:6->167:28]
 posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:10->167:24]
 JSX <Comp:[167:10->167:14] age[167:15->167:18]=...[167:19->167:21]> _children:167:22
 Completable: Cjsx([Comp], age, [age])
diff --git a/tests/syntax_tests/data/conversion/reason/expected/string.res.txt b/tests/syntax_tests/data/conversion/reason/expected/string.res.txt
index dde635285c..217af2ddad 100644
--- a/tests/syntax_tests/data/conversion/reason/expected/string.res.txt
+++ b/tests/syntax_tests/data/conversion/reason/expected/string.res.txt
@@ -8,7 +8,7 @@ carriage return`
 let x = "\""
 let y = "\n"
 
-(<> {"\n"->React.string} </>)
+<> {"\n"->React.string} </>
 
 // The `//` should not result into an extra comment
 let x = `https://www.apple.com`
diff --git a/tests/syntax_tests/data/parsing/grammar/expressions/expected/bracedOrRecord.res.txt b/tests/syntax_tests/data/parsing/grammar/expressions/expected/bracedOrRecord.res.txt
index d561dd0ad7..cdb2da8111 100644
--- a/tests/syntax_tests/data/parsing/grammar/expressions/expected/bracedOrRecord.res.txt
+++ b/tests/syntax_tests/data/parsing/grammar/expressions/expected/bracedOrRecord.res.txt
@@ -26,4 +26,4 @@ let f = ((fun [arity:1]event -> (event.target).value)[@res.braces ])
 let f = ((fun [arity:1]event -> ((event.target).value : string))
   [@res.braces ])
 let x = ((let a = 1 in let b = 2 in a + b)[@res.braces ])
-;;(([(({js|\n|js} -> React.string)[@res.braces ])])[@JSX ])
\ No newline at end of file
+;;<>(({js|\n|js} -> React.string)[@res.braces ])</>
\ No newline at end of file
diff --git a/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt b/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt
index 7a853a944a..b4004d3d06 100644
--- a/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt
@@ -51,8 +51,8 @@ let _ = ((el ~punned ~children:[] ())[@JSX ])
 let _ = ((el ?punned ~children:[] ())[@JSX ])
 let _ = ((el ?a:b ~children:[] ())[@JSX ])
 let _ = ((el ?a:b ~children:[] ())[@JSX ])
-let _ = (([])[@JSX ])
-let _ = (([])[@JSX ])
+let _ = <></>
+let _ = <></>
 let _ =
   ((div ~className:{js|menu|js}
       ~children:[((div ~className:{js|submenu|js} ~children:[sub1] ())
@@ -83,8 +83,7 @@ let _ =
   ((Outer.createElement ~inner:((Inner.createElement ~children:[] ())
       [@JSX ]) ~children:[] ())
   [@JSX ])
-let _ =
-  ((div ~onClick:onClickHandler ~children:[(([{js|foobar|js}])[@JSX ])] ())
+let _ = ((div ~onClick:onClickHandler ~children:[<>{js|foobar|js}</>] ())
   [@JSX ])
 let _ =
   ((Window.createElement
@@ -98,21 +97,19 @@ let _ =
              } ~children:[] ())
   [@JSX ])
 let _ = ((OverEager.createElement ~fiber:Metal.fiber ~children:[] ())[@JSX ])
-let arrayOfListOfJsx = [|(([])[@JSX ])|]
-let arrayOfListOfJsx =
-  [|(([((Foo.createElement ~children:[] ())[@JSX ])])[@JSX ])|]
+let arrayOfListOfJsx = [|<></>|]
+let arrayOfListOfJsx = [|<>((Foo.createElement ~children:[] ())[@JSX ])</>|]
 let arrayOfListOfJsx =
-  [|(([((Foo.createElement ~children:[] ())[@JSX ])])
-    [@JSX ]);(([((Bar.createElement ~children:[] ())[@JSX ])])[@JSX ])|]
-let sameButWithSpaces = [|(([])[@JSX ])|]
-let sameButWithSpaces =
-  [|(([((Foo.createElement ~children:[] ())[@JSX ])])[@JSX ])|]
+  [|<>((Foo.createElement ~children:[] ())
+    [@JSX ])</>;<>((Bar.createElement ~children:[] ())[@JSX ])</>|]
+let sameButWithSpaces = [|<></>|]
+let sameButWithSpaces = [|<>((Foo.createElement ~children:[] ())[@JSX ])</>|]
 let sameButWithSpaces =
-  [|(([((Foo.createElement ~children:[] ())[@JSX ])])
-    [@JSX ]);(([((Bar.createElement ~children:[] ())[@JSX ])])[@JSX ])|]
+  [|<>((Foo.createElement ~children:[] ())
+    [@JSX ])</>;<>((Bar.createElement ~children:[] ())[@JSX ])</>|]
 let sameButWithSpaces =
-  [|(([((Foo.createElement ~children:[] ())[@JSX ])])
-    [@JSX ]);(([((Bar.createElement ~children:[] ())[@JSX ])])[@JSX ])|]
+  [|<>((Foo.createElement ~children:[] ())
+    [@JSX ])</>;<>((Bar.createElement ~children:[] ())[@JSX ])</>|]
 let arrayOfJsx = [||]
 let arrayOfJsx = [|((Foo.createElement ~children:[] ())[@JSX ])|]
 let arrayOfJsx =
@@ -495,11 +492,11 @@ let _ =
 ;;((div ~children:[|a|] ())[@JSX ])
 ;;((div ~children:(1, 2) ())[@JSX ])
 ;;((div ~children:((array -> f)[@res.braces ]) ())[@JSX ])
-;;(([element])[@JSX ])
-;;(([(((fun [arity:1]a -> 1))[@res.braces ])])[@JSX ])
-;;(([((span ~children:[] ())[@JSX ])])[@JSX ])
-;;(([[|a|]])[@JSX ])
-;;(([(1, 2)])[@JSX ])
-;;(([((array -> f)[@res.braces ])])[@JSX ])
+;;<>element</>
+;;<>((fun [arity:1]a -> 1)[@res.braces ])</>
+;;<>((span ~children:[] ())[@JSX ])</>
+;;<>[|a|]</>
+;;<>(1, 2)</>
+;;<>((array -> f)[@res.braces ])</>
 let _ = ((A.createElement ~x:{js|y|js} ~_spreadProps:str ~children:[] ())
   [@JSX ])
\ No newline at end of file
diff --git a/tests/syntax_tests/data/printer/expr/expected/braced.res.txt b/tests/syntax_tests/data/printer/expr/expected/braced.res.txt
index 26c9d855b4..80ea824389 100644
--- a/tests/syntax_tests/data/printer/expr/expected/braced.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/braced.res.txt
@@ -318,5 +318,5 @@ let x = {
 }
 
 // string constant should be printed correct
-(<> {"\n"->React.string} </>)
-(<> {"\""->React.string} </>)
+<> {"\n"->React.string} </>
+<> {"\""->React.string} </>
diff --git a/tests/syntax_tests/data/printer/expr/expected/switch.res.txt b/tests/syntax_tests/data/printer/expr/expected/switch.res.txt
index da576e4d29..80b1a07044 100644
--- a/tests/syntax_tests/data/printer/expr/expected/switch.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/switch.res.txt
@@ -49,8 +49,7 @@ switch route {
     <div> {React.string("Second A div")} </div>
   </div>
 | B =>
-  <>
-    // fragment tag moves to the next line
+  <> // fragment tag stays after <>
     <div> {React.string("First B div")} </div>
     <div> {React.string("Second B div")} </div>
   </>
diff --git a/tests/syntax_tests/data/printer/expr/switch.res b/tests/syntax_tests/data/printer/expr/switch.res
index 7d4f8aa0f6..6887e3adb5 100644
--- a/tests/syntax_tests/data/printer/expr/switch.res
+++ b/tests/syntax_tests/data/printer/expr/switch.res
@@ -44,7 +44,7 @@ switch route {
     <div> {React.string("First A div")} </div>
     <div> {React.string("Second A div")} </div>
   </div>
-| B => <> // fragment tag moves to the next line
+| B => <> // fragment tag stays after <>
     <div> {React.string("First B div")} </div>
     <div> {React.string("Second B div")} </div>
   </>

From 28aa287b1aafd415a14aa726d5710e94f06ce201 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 24 Feb 2025 13:38:52 +0100
Subject: [PATCH 02/99] Initial mapping from0

---
 compiler/ml/ast_mapper_from0.ml                  | 4 ++++
 tests/tools_tests/package-lock.json              | 2 +-
 tests/tools_tests/ppx/TestPpx.res                | 4 ++++
 tests/tools_tests/src/expected/TestPpx.res.jsout | 5 +++++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index 1e3e3687b7..caf646b661 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -358,6 +358,10 @@ module E = struct
       match_ ~loc ~attrs (sub.expr sub e) (sub.cases sub pel)
     | Pexp_try (e, pel) -> try_ ~loc ~attrs (sub.expr sub e) (sub.cases sub pel)
     | Pexp_tuple el -> tuple ~loc ~attrs (List.map (sub.expr sub) el)
+    | Pexp_construct ({txt = Longident.Lident "[]"}, None)
+      when attrs |> List.exists (fun ({txt}, _) -> txt == "JSX") ->
+      let attrs = attrs |> List.filter (fun ({txt}, _) -> txt != "JSX") in
+      jsx_fragment ~loc ~attrs loc.loc_start [] loc.loc_end
     | Pexp_construct (lid, arg) -> (
       let lid1 = map_loc sub lid in
       let arg1 = map_opt (sub.expr sub) arg in
diff --git a/tests/tools_tests/package-lock.json b/tests/tools_tests/package-lock.json
index 9d3242c476..7ab9790b95 100644
--- a/tests/tools_tests/package-lock.json
+++ b/tests/tools_tests/package-lock.json
@@ -26,7 +26,7 @@
       },
       "devDependencies": {
         "@biomejs/biome": "1.8.3",
-        "mocha": "10.1.0",
+        "mocha": "10.8.2",
         "nyc": "15.0.0"
       },
       "engines": {
diff --git a/tests/tools_tests/ppx/TestPpx.res b/tests/tools_tests/ppx/TestPpx.res
index b18c96a8ae..d42c9b8e12 100644
--- a/tests/tools_tests/ppx/TestPpx.res
+++ b/tests/tools_tests/ppx/TestPpx.res
@@ -61,3 +61,7 @@ let eq2 = 3 === 3
 
 let test = async () => 12
 let f = async () => (await test()) + 1
+
+module Fragments = {
+  let f1 = <></>
+}
diff --git a/tests/tools_tests/src/expected/TestPpx.res.jsout b/tests/tools_tests/src/expected/TestPpx.res.jsout
index 87ea7737ee..829050f25c 100644
--- a/tests/tools_tests/src/expected/TestPpx.res.jsout
+++ b/tests/tools_tests/src/expected/TestPpx.res.jsout
@@ -80,6 +80,10 @@ async function f() {
   return await test() + 1 | 0;
 }
 
+let Fragments = {
+  f1: /* [] */0
+};
+
 let a = "A";
 
 let b = "B";
@@ -114,4 +118,5 @@ exports.eq = eq;
 exports.eq2 = eq2;
 exports.test = test;
 exports.f = f;
+exports.Fragments = Fragments;
 /*  Not a pure module */

From b57f2df2b79edaf84ee2838c84c9054cbd2b2de6 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 24 Feb 2025 13:54:36 +0100
Subject: [PATCH 03/99] Format code

---
 tests/tools_tests/ppx/TestPpx.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/tools_tests/ppx/TestPpx.res b/tests/tools_tests/ppx/TestPpx.res
index d42c9b8e12..4262befc9f 100644
--- a/tests/tools_tests/ppx/TestPpx.res
+++ b/tests/tools_tests/ppx/TestPpx.res
@@ -63,5 +63,5 @@ let test = async () => 12
 let f = async () => (await test()) + 1
 
 module Fragments = {
-  let f1 = <></>
+  let f1 = <> </>
 }

From d714829fed3e60f60b6f35dec104b994c0adb38d Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 3 Mar 2025 09:03:25 +0100
Subject: [PATCH 04/99] Fix jsx fragment mapping

---
 compiler/ml/ast_mapper_from0.ml | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index caf646b661..c9236bb70a 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -295,7 +295,23 @@ end
 module E = struct
   (* Value expressions for the core language *)
 
-  let map sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
+  let map_jsx_list sub (e : expression) : Pt.expression list =
+    let rec visit (e : expression) : Pt.expression list =
+      match e.pexp_desc with
+      | Pexp_construct
+          ({txt = Longident.Lident "::"}, Some {pexp_desc = Pexp_tuple [e1; e2]})
+        ->
+        sub.expr sub e1 :: visit e2
+      | Pexp_construct ({txt = Longident.Lident "[]"}, ext_opt) -> (
+        match ext_opt with
+        | None -> []
+        | Some e -> visit e)
+      | _ -> [sub.expr sub e]
+    in
+    visit e
+
+  let map sub e =
+    let {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} = e in
     let open Exp in
     let loc = sub.location sub loc in
     let attrs = sub.attributes sub attrs in
@@ -358,10 +374,11 @@ module E = struct
       match_ ~loc ~attrs (sub.expr sub e) (sub.cases sub pel)
     | Pexp_try (e, pel) -> try_ ~loc ~attrs (sub.expr sub e) (sub.cases sub pel)
     | Pexp_tuple el -> tuple ~loc ~attrs (List.map (sub.expr sub) el)
-    | Pexp_construct ({txt = Longident.Lident "[]"}, None)
-      when attrs |> List.exists (fun ({txt}, _) -> txt == "JSX") ->
-      let attrs = attrs |> List.filter (fun ({txt}, _) -> txt != "JSX") in
-      jsx_fragment ~loc ~attrs loc.loc_start [] loc.loc_end
+    (* <></> *)
+    | Pexp_construct ({txt = Longident.Lident "[]" | Longident.Lident "::"}, _)
+      when attrs |> List.exists (fun ({txt}, _) -> txt = "JSX") ->
+      let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
+      jsx_fragment ~loc ~attrs loc.loc_start (map_jsx_list sub e) loc.loc_end
     | Pexp_construct (lid, arg) -> (
       let lid1 = map_loc sub lid in
       let arg1 = map_opt (sub.expr sub) arg in

From e27b339e2b265bb3afe0625038a7ca4a1cc0177c Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 3 Mar 2025 09:09:21 +0100
Subject: [PATCH 05/99] Remove fragment

---
 tests/tools_tests/ppx/TestPpx.res | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/tests/tools_tests/ppx/TestPpx.res b/tests/tools_tests/ppx/TestPpx.res
index 4262befc9f..b18c96a8ae 100644
--- a/tests/tools_tests/ppx/TestPpx.res
+++ b/tests/tools_tests/ppx/TestPpx.res
@@ -61,7 +61,3 @@ let eq2 = 3 === 3
 
 let test = async () => 12
 let f = async () => (await test()) + 1
-
-module Fragments = {
-  let f1 = <> </>
-}

From 92657eea1432241e9aff4cccc7accc805029de8e Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 3 Mar 2025 10:09:26 +0100
Subject: [PATCH 06/99] Update test output

---
 tests/tools_tests/src/expected/TestPpx.res.jsout | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/tests/tools_tests/src/expected/TestPpx.res.jsout b/tests/tools_tests/src/expected/TestPpx.res.jsout
index 829050f25c..87ea7737ee 100644
--- a/tests/tools_tests/src/expected/TestPpx.res.jsout
+++ b/tests/tools_tests/src/expected/TestPpx.res.jsout
@@ -80,10 +80,6 @@ async function f() {
   return await test() + 1 | 0;
 }
 
-let Fragments = {
-  f1: /* [] */0
-};
-
 let a = "A";
 
 let b = "B";
@@ -118,5 +114,4 @@ exports.eq = eq;
 exports.eq2 = eq2;
 exports.test = test;
 exports.f = f;
-exports.Fragments = Fragments;
 /*  Not a pure module */

From 441de6e02f0fbf15dcceb25ec680a85aebea3b6e Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 6 Mar 2025 11:55:39 +0100
Subject: [PATCH 07/99] Introducing Pexp_jsx_unary_element &
 Pexp_jsx_container_element

---
 compiler/frontend/bs_ast_mapper.ml        |  29 ++-
 compiler/ml/ast_helper.ml                 |  13 ++
 compiler/ml/ast_helper.mli                |  15 +-
 compiler/ml/ast_iterator.ml               |  28 ++-
 compiler/ml/ast_mapper.ml                 |  30 ++-
 compiler/ml/ast_mapper_from0.ml           |   5 +-
 compiler/ml/ast_mapper_to0.ml             |  10 +-
 compiler/ml/depend.ml                     |  26 ++-
 compiler/ml/parsetree.ml                  |  47 ++++-
 compiler/ml/pprintast.ml                  |   9 +-
 compiler/ml/printast.ml                   |  37 +++-
 compiler/ml/typecore.ml                   |  30 ++-
 compiler/syntax/src/jsx_v4.ml             |  21 +-
 compiler/syntax/src/res_ast_debugger.ml   |  11 +-
 compiler/syntax/src/res_comments_table.ml |   9 +-
 compiler/syntax/src/res_core.ml           | 229 +++++++++++++++-------
 compiler/syntax/src/res_printer.ml        |   9 +-
 17 files changed, 463 insertions(+), 95 deletions(-)

diff --git a/compiler/frontend/bs_ast_mapper.ml b/compiler/frontend/bs_ast_mapper.ml
index c2beac2140..b170d9b82b 100644
--- a/compiler/frontend/bs_ast_mapper.ml
+++ b/compiler/frontend/bs_ast_mapper.ml
@@ -292,6 +292,20 @@ module M = struct
 end
 
 module E = struct
+  let map_jsx_children sub = function
+    | JSXChildrenSpreading e -> JSXChildrenSpreading (sub.expr sub e)
+    | JSXChildrenItems xs -> JSXChildrenItems (List.map (sub.expr sub) xs)
+
+  let map_jsx_prop sub = function
+    | JSXPropPunning (optional, name) ->
+      JSXPropPunning (optional, map_loc sub name)
+    | JSXPropValue (name, optional, value) ->
+      JSXPropValue (map_loc sub name, optional, sub.expr sub value)
+    | JSXPropSpreading (loc, e) ->
+      JSXPropSpreading (sub.location sub loc, sub.expr sub e)
+
+  let map_jsx_props sub = List.map (map_jsx_prop sub)
+
   (* Value expressions for the core language *)
 
   let map sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
@@ -366,8 +380,19 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
-    | Pexp_jsx_fragment (o, xs, c) ->
-      jsx_fragment o (List.map (sub.expr sub) xs) c
+    | Pexp_jsx_fragment (o, children, c) ->
+      jsx_fragment o (map_jsx_children sub children) c
+    | Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+      jsx_unary_element ~loc ~attrs name (map_jsx_props sub props)
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      jsx_container_element ~loc ~attrs name (map_jsx_props sub props)
+        (map_jsx_children sub children)
 end
 
 module P = struct
diff --git a/compiler/ml/ast_helper.ml b/compiler/ml/ast_helper.ml
index 5c27101d66..2a3fdb1b92 100644
--- a/compiler/ml/ast_helper.ml
+++ b/compiler/ml/ast_helper.ml
@@ -182,6 +182,19 @@ module Exp = struct
   let extension ?loc ?attrs a = mk ?loc ?attrs (Pexp_extension a)
   let jsx_fragment ?loc ?attrs a b c =
     mk ?loc ?attrs (Pexp_jsx_fragment (a, b, c))
+  let jsx_unary_element ?loc ?attrs a b =
+    mk ?loc ?attrs
+      (Pexp_jsx_unary_element
+         {jsx_unary_element_tag_name = a; jsx_unary_element_props = b})
+
+  let jsx_container_element ?loc ?attrs a b c =
+    mk ?loc ?attrs
+      (Pexp_jsx_container_element
+         {
+           jsx_container_element_tag_name_start = a;
+           jsx_container_element_props = b;
+           jsx_container_element_children = c;
+         })
 
   let case lhs ?guard rhs = {pc_lhs = lhs; pc_guard = guard; pc_rhs = rhs}
 
diff --git a/compiler/ml/ast_helper.mli b/compiler/ml/ast_helper.mli
index c5adff0d05..245edfbade 100644
--- a/compiler/ml/ast_helper.mli
+++ b/compiler/ml/ast_helper.mli
@@ -212,9 +212,22 @@ module Exp : sig
     ?loc:loc ->
     ?attrs:attrs ->
     Lexing.position ->
-    expression list ->
+    Parsetree.jsx_children ->
     Lexing.position ->
     expression
+  val jsx_unary_element :
+    ?loc:loc ->
+    ?attrs:attrs ->
+    Longident.t Location.loc ->
+    Parsetree.jsx_props ->
+    expression
+  val jsx_container_element :
+    ?loc:loc ->
+    ?attrs:attrs ->
+    Longident.t Location.loc ->
+    Parsetree.jsx_props ->
+    Parsetree.jsx_children ->
+    expression
 
   val case : pattern -> ?guard:expression -> expression -> case
 
diff --git a/compiler/ml/ast_iterator.ml b/compiler/ml/ast_iterator.ml
index 3bd6f6df57..b59e701512 100644
--- a/compiler/ml/ast_iterator.ml
+++ b/compiler/ml/ast_iterator.ml
@@ -267,6 +267,19 @@ module M = struct
 end
 
 module E = struct
+  let iter_jsx_children sub = function
+    | JSXChildrenSpreading e -> sub.expr sub e
+    | JSXChildrenItems xs -> List.iter (sub.expr sub) xs
+
+  let iter_jsx_prop sub = function
+    | JSXPropPunning (_, name) -> iter_loc sub name
+    | JSXPropValue (name, _, value) ->
+      iter_loc sub name;
+      sub.expr sub value
+    | JSXPropSpreading (_, e) -> sub.expr sub e
+
+  let iter_jsx_props sub = List.iter (iter_jsx_prop sub)
+
   (* Value expressions for the core language *)
 
   let iter sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
@@ -344,7 +357,20 @@ module E = struct
       iter_loc sub lid;
       sub.expr sub e
     | Pexp_extension x -> sub.extension sub x
-    | Pexp_jsx_fragment (_, xs, _) -> List.iter (sub.expr sub) xs
+    | Pexp_jsx_fragment (_, children, _) -> iter_jsx_children sub children
+    | Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+      iter_loc sub name;
+      iter_jsx_props sub props
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      iter_loc sub name;
+      iter_jsx_props sub props;
+      iter_jsx_children sub children
 end
 
 module P = struct
diff --git a/compiler/ml/ast_mapper.ml b/compiler/ml/ast_mapper.ml
index efd5b247e1..abd505ea3e 100644
--- a/compiler/ml/ast_mapper.ml
+++ b/compiler/ml/ast_mapper.ml
@@ -263,6 +263,20 @@ module M = struct
 end
 
 module E = struct
+  let map_jsx_children sub = function
+    | JSXChildrenSpreading e -> JSXChildrenSpreading (sub.expr sub e)
+    | JSXChildrenItems xs -> JSXChildrenItems (List.map (sub.expr sub) xs)
+
+  let map_jsx_prop sub = function
+    | JSXPropPunning (optional, name) ->
+      JSXPropPunning (optional, map_loc sub name)
+    | JSXPropValue (name, optional, value) ->
+      JSXPropValue (map_loc sub name, optional, sub.expr sub value)
+    | JSXPropSpreading (loc, e) ->
+      JSXPropSpreading (sub.location sub loc, sub.expr sub e)
+
+  let map_jsx_props sub = List.map (map_jsx_prop sub)
+
   (* Value expressions for the core language *)
 
   let map sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
@@ -329,8 +343,20 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
-    | Pexp_jsx_fragment (o, xs, c) ->
-      jsx_fragment ~loc ~attrs o (List.map (sub.expr sub) xs) c
+    | Pexp_jsx_fragment (o, children, c) ->
+      jsx_fragment ~loc ~attrs o (map_jsx_children sub children) c
+    | Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+      jsx_unary_element ~loc ~attrs (map_loc sub name) (map_jsx_props sub props)
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      jsx_container_element ~loc ~attrs (map_loc sub name)
+        (map_jsx_props sub props)
+        (map_jsx_children sub children)
 end
 
 module P = struct
diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index c9236bb70a..e889b0ac74 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -378,7 +378,10 @@ module E = struct
     | Pexp_construct ({txt = Longident.Lident "[]" | Longident.Lident "::"}, _)
       when attrs |> List.exists (fun ({txt}, _) -> txt = "JSX") ->
       let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
-      jsx_fragment ~loc ~attrs loc.loc_start (map_jsx_list sub e) loc.loc_end
+      (* TODO: support spread *)
+      jsx_fragment ~loc ~attrs loc.loc_start
+        (Parsetree.JSXChildrenItems (map_jsx_list sub e))
+        loc.loc_end
     | Pexp_construct (lid, arg) -> (
       let lid1 = map_loc sub lid in
       let arg1 = map_opt (sub.expr sub) arg in
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index bb2a97fbb3..19eae3bf14 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -407,18 +407,26 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
-    | Pexp_jsx_fragment (o, xs, c) ->
+    | Pexp_jsx_fragment (o, children, c) ->
       (*
          The location of  Pexp_jsx_fragment is from the start of < till the end of />.
          This is not the case in the old AST. There it is from >...</
       *)
       let loc = {loc with loc_start = o; loc_end = c} in
+      let xs =
+        match children with
+        | JSXChildrenSpreading e -> [e]
+        | JSXChildrenItems xs -> xs
+      in
       let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
       let mapped = sub.expr sub list_expr in
       let jsx_attr =
         sub.attribute sub (Location.mknoloc "JSX", Parsetree.PStr [])
       in
       {mapped with pexp_attributes = jsx_attr :: attrs}
+    | Pexp_jsx_unary_element _ -> failwith "TODO: Pexp_jsx_unary_element 1"
+    | Pexp_jsx_container_element _ ->
+      failwith "TODO: Pexp_jsx_container_element 1"
 end
 
 module P = struct
diff --git a/compiler/ml/depend.ml b/compiler/ml/depend.ml
index 0aa6fc4095..79a5e76516 100644
--- a/compiler/ml/depend.ml
+++ b/compiler/ml/depend.ml
@@ -289,7 +289,31 @@ let rec add_expr bv exp =
     | Pstr_eval ({pexp_desc = Pexp_construct (c, None)}, _) -> add bv c
     | _ -> handle_extension e)
   | Pexp_extension e -> handle_extension e
-  | Pexp_jsx_fragment (_, xs, _) -> List.iter (add_expr bv) xs
+  | Pexp_jsx_fragment (_, children, _) -> add_jsx_children bv children
+  | Pexp_jsx_unary_element
+      {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+    add bv name;
+    and_jsx_props bv props
+  | Pexp_jsx_container_element
+      {
+        jsx_container_element_tag_name_start = name;
+        jsx_container_element_props = props;
+        jsx_container_element_children = children;
+      } ->
+    add bv name;
+    and_jsx_props bv props;
+    add_jsx_children bv children
+
+and add_jsx_children bv = function
+  | JSXChildrenSpreading e -> add_expr bv e
+  | JSXChildrenItems xs -> List.iter (add_expr bv) xs
+
+and add_jsx_prop bv = function
+  | JSXPropPunning (_, _) -> ()
+  | JSXPropValue (_, _, e) -> add_expr bv e
+  | JSXPropSpreading (_, e) -> add_expr bv e
+
+and and_jsx_props bv = List.iter (add_jsx_prop bv)
 
 and add_cases bv cases = List.iter (add_case bv) cases
 
diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index c4ac25cbc1..603d972768 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -319,8 +319,53 @@ and expression_desc =
   | Pexp_jsx_fragment of
       (* > *) Lexing.position
       * (* children *)
-      expression list
+        jsx_children
       * (* </ *) Lexing.position
+  (* represents <input type_="text" /> *)
+  | Pexp_jsx_unary_element of jsx_unary_element
+  (* represents <div className={v}>{children}</div> *)
+  | Pexp_jsx_container_element of jsx_container_element
+
+and jsx_unary_element = {
+  (* jsx_unary_element_opening: Lexing.position; *)
+  jsx_unary_element_tag_name: Longident.t loc;
+  jsx_unary_element_props: jsx_props;
+      (* jsx_unary_element_closing: Lexing.position; *)
+}
+
+and jsx_container_element = {
+  (* jsx_container_element_opening_tag_start: Lexing.position; *)
+  jsx_container_element_tag_name_start: Longident.t loc;
+  (* jsx_container_element_opening_tag_end: Lexing.position; *)
+  jsx_container_element_props: jsx_props;
+  jsx_container_element_children: jsx_children;
+      (* jsx_container_element_closing_tag_start: Lexing.position; *)
+      (* jsx_container_element_tag_name_end: string loc; *)
+      (* jsx_container_element_closing_tag_end: Lexing.position; *)
+}
+
+and jsx_prop =
+  (*
+   *   |  lident
+   *   | ?lident
+   *)
+  | JSXPropPunning of (* optional *) bool * (* name *) string loc
+  (*
+   *   |  lident =  jsx_expr
+   *   |  lident = ?jsx_expr
+   *)
+  | JSXPropValue of
+      (* name *) string loc * (* optional *) bool * (* value *) expression
+  (*
+   *   |  {...jsx_expr}
+   *)
+  | JSXPropSpreading of Location.t * expression
+
+and jsx_children =
+  | JSXChildrenSpreading of expression
+  | JSXChildrenItems of expression list
+
+and jsx_props = jsx_prop list
 
 and case = {
   (* (P -> E) or (P when E0 -> E) *)
diff --git a/compiler/ml/pprintast.ml b/compiler/ml/pprintast.ml
index 71a0b203cb..daf00ce7aa 100644
--- a/compiler/ml/pprintast.ml
+++ b/compiler/ml/pprintast.ml
@@ -795,9 +795,16 @@ and simple_expr ctxt f x =
       pp f fmt (pattern ctxt) s expression e1 direction_flag df expression e2
         expression e3
     | Pexp_jsx_fragment (_, xs, _) ->
-      pp f "<>%a</>" (list (simple_expr ctxt)) xs
+      pp f "<>%a</>" (list (simple_expr ctxt)) (collect_jsx_children xs)
+    | Pexp_jsx_unary_element _ -> failwith "TODO: Pexp_jsx_unary_element 2"
+    | Pexp_jsx_container_element _ ->
+      failwith "TODO: Pexp_jsx_container_element 2"
     | _ -> paren true (expression ctxt) f x
 
+and collect_jsx_children = function
+  | JSXChildrenSpreading e -> [e]
+  | JSXChildrenItems xs -> xs
+
 and attributes ctxt f l = List.iter (attribute ctxt f) l
 
 and item_attributes ctxt f l = List.iter (item_attribute ctxt f) l
diff --git a/compiler/ml/printast.ml b/compiler/ml/printast.ml
index 2721b0bbda..b80e53ef29 100644
--- a/compiler/ml/printast.ml
+++ b/compiler/ml/printast.ml
@@ -345,9 +345,42 @@ and expression i ppf x =
   | Pexp_extension (s, arg) ->
     line i ppf "Pexp_extension \"%s\"\n" s.txt;
     payload i ppf arg
-  | Pexp_jsx_fragment (_, xs, _) ->
+  | Pexp_jsx_fragment (_, children, _) ->
     line i ppf "Pexp_jsx_fragment";
-    list i expression ppf xs
+    jsx_children i ppf children
+  | Pexp_jsx_unary_element
+      {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+    line i ppf "Pexp_jsx_unary_element %a\n" fmt_longident_loc name;
+    jsx_props i ppf props
+  | Pexp_jsx_container_element
+      {
+        jsx_container_element_tag_name_start = name;
+        jsx_container_element_props = props;
+        jsx_container_element_children = children;
+      } ->
+    line i ppf "Pexp_jsx_container_element %a\n" fmt_longident_loc name;
+    jsx_props i ppf props;
+    jsx_children i ppf children
+
+and jsx_children i ppf children =
+  line i ppf "jsx_children =\n";
+  match children with
+  | JSXChildrenSpreading e -> expression (i + 1) ppf e
+  | JSXChildrenItems xs -> list (i + 1) expression ppf xs
+
+and jsx_prop i ppf = function
+  | JSXPropPunning (opt, name) ->
+    line i ppf "%s%s" (if opt then "?" else "") name.txt
+  | JSXPropValue (name, opt, expr) ->
+    line i ppf "%s=%s" name.txt (if opt then "?" else "");
+    expression i ppf expr
+  | JSXPropSpreading (_, e) ->
+    line i ppf "...";
+    expression i ppf e
+
+and jsx_props i ppf xs =
+  line i ppf "jsx_props =\n";
+  list (i + 1) jsx_prop ppf xs
 
 and value_description i ppf x =
   line i ppf "value_description %a %a\n" fmt_string_loc x.pval_name fmt_location
diff --git a/compiler/ml/typecore.ml b/compiler/ml/typecore.ml
index 5145b6e248..f47922a774 100644
--- a/compiler/ml/typecore.ml
+++ b/compiler/ml/typecore.ml
@@ -147,8 +147,7 @@ let iter_expression f e =
     | Pexp_match (e, pel) | Pexp_try (e, pel) ->
       expr e;
       List.iter case pel
-    | Pexp_array el | Pexp_tuple el | Pexp_jsx_fragment (_, el, _) ->
-      List.iter expr el
+    | Pexp_array el | Pexp_tuple el -> List.iter expr el
     | Pexp_construct (_, eo) | Pexp_variant (_, eo) -> may expr eo
     | Pexp_record (iel, eo) ->
       may expr eo;
@@ -179,6 +178,18 @@ let iter_expression f e =
       expr e;
       module_expr me
     | Pexp_pack me -> module_expr me
+    | Pexp_jsx_fragment (_, children, _) -> iter_jsx_children children
+    | Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = _; jsx_unary_element_props = props} ->
+      iter_jsx_props props
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = _;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      iter_jsx_props props;
+      iter_jsx_children children
   and case {pc_lhs = _; pc_guard; pc_rhs} =
     may expr pc_guard;
     expr pc_rhs
@@ -202,7 +213,14 @@ let iter_expression f e =
     | Pstr_include {pincl_mod = me} | Pstr_module {pmb_expr = me} ->
       module_expr me
     | Pstr_recmodule l -> List.iter (fun x -> module_expr x.pmb_expr) l
-  in
+  and iter_jsx_children = function
+    | JSXChildrenSpreading e -> expr e
+    | JSXChildrenItems el -> List.iter expr el
+  and iter_jsx_prop = function
+    | JSXPropPunning _ -> ()
+    | JSXPropValue (_, _, e) -> expr e
+    | JSXPropSpreading (_, e) -> expr e
+  and iter_jsx_props props = List.iter iter_jsx_prop props in
 
   expr e
 
@@ -3197,6 +3215,12 @@ and type_expect_ ?type_clash_context ?in_function ?(recarg = Rejected) env sexp
     raise (Error_forward (Builtin_attributes.error_of_extension ext))
   | Pexp_jsx_fragment _ ->
     failwith "Pexp_jsx_fragment is expected to be transformed at this point"
+  | Pexp_jsx_unary_element _ ->
+    failwith
+      "Pexp_jsx_unary_element is expected to be transformed at this point"
+  | Pexp_jsx_container_element _ ->
+    failwith
+      "Pexp_jsx_container_element is expected to be transformed at this point"
 
 and type_function ?in_function ~arity ~async loc attrs env ty_expected_ l
     caselist =
diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 32affe1e3b..ff12d35339 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1554,11 +1554,17 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
            {txt = module_access_name config "array"; loc = Location.none})
         [(Nolabel, expr)]
     in
+    let more_than_one_children =
+      match xs with
+      | JSXChildrenSpreading _ -> false
+      | JSXChildrenItems xs -> List.length xs > 1
+    in
     let children_props =
       match xs with
-      | [] -> empty_record ~loc:Location.none
-      | [child] -> record_of_children (mapper.expr mapper child)
-      | _ -> (
+      | JSXChildrenItems [] -> empty_record ~loc:Location.none
+      | JSXChildrenItems [child] | JSXChildrenSpreading child ->
+        record_of_children (mapper.expr mapper child)
+      | JSXChildrenItems xs -> (
         match config.mode with
         | "automatic" ->
           record_of_children
@@ -1568,20 +1574,21 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
     let args =
       (nolabel, fragment) :: (nolabel, children_props)
       ::
-      (match config.mode with
-      | "classic" when List.length xs > 1 ->
+      (match (config.mode, xs) with
+      | "classic", JSXChildrenItems xs when more_than_one_children ->
         [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
       | _ -> [])
     in
+
     Exp.apply ~loc ~attrs
       (* ReactDOM.createElement *)
       (match config.mode with
       | "automatic" ->
-        if List.length xs > 1 then
+        if more_than_one_children then
           Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
         else Exp.ident ~loc {loc; txt = module_access_name config "jsx"}
       | "classic" | _ ->
-        if List.length xs > 1 then
+        if more_than_one_children then
           Exp.ident ~loc
             {loc; txt = Ldot (Lident "React", "createElementVariadic")}
         else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
diff --git a/compiler/syntax/src/res_ast_debugger.ml b/compiler/syntax/src/res_ast_debugger.ml
index 72ec8226bc..75ef62aac4 100644
--- a/compiler/syntax/src/res_ast_debugger.ml
+++ b/compiler/syntax/src/res_ast_debugger.ml
@@ -707,11 +707,20 @@ module SexpAst = struct
           ]
       | Pexp_extension ext ->
         Sexp.list [Sexp.atom "Pexp_extension"; extension ext]
-      | Pexp_jsx_fragment (_, xs, _) ->
+      | Pexp_jsx_fragment (_, children, _) ->
+        let xs =
+          match children with
+          | JSXChildrenSpreading e -> [e]
+          | JSXChildrenItems xs -> xs
+        in
         Sexp.list
           [
             Sexp.atom "Pexp_jsx_fragment"; Sexp.list (map_empty ~f:expression xs);
           ]
+      | Pexp_jsx_unary_element _ ->
+        failwith "Pexp_jsx_unary_element is not supported"
+      | Pexp_jsx_container_element _ ->
+        failwith "Pexp_jsx_container_element is not supported"
     in
     Sexp.list [Sexp.atom "expression"; desc]
 
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index ad7083811a..126473a90c 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1507,12 +1507,19 @@ and walk_expression expr t comments =
         attach t.leading return_expr.pexp_loc leading;
         walk_expression return_expr t inside;
         attach t.trailing return_expr.pexp_loc trailing)
-  | Pexp_jsx_fragment (opening_greater_than, exprs, _closing_lesser_than) ->
+  | Pexp_jsx_fragment (opening_greater_than, children, _closing_lesser_than) ->
     let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
     let on_same_line, rest = partition_by_on_same_line opening_token comments in
     attach t.trailing opening_token on_same_line;
+    let exprs =
+      match children with
+      | Parsetree.JSXChildrenSpreading e -> [e]
+      | Parsetree.JSXChildrenItems xs -> xs
+    in
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
+  | Pexp_jsx_unary_element _ -> failwith "Pexp_jsx_unary_element 3"
+  | Pexp_jsx_container_element _ -> failwith "Pexp_jsx_container_element 3"
   | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index c08f3c0c7d..c589838cde 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -145,7 +145,7 @@ module InExternal = struct
   let status = ref false
 end
 
-let jsx_attr = (Location.mknoloc "JSX", Parsetree.PStr [])
+(* let jsx_attr = (Location.mknoloc "JSX", Parsetree.PStr []) *)
 let ternary_attr = (Location.mknoloc "res.ternary", Parsetree.PStr [])
 let if_let_attr = (Location.mknoloc "res.iflet", Parsetree.PStr [])
 let make_await_attr loc = (Location.mkloc "res.await" loc, Parsetree.PStr [])
@@ -735,7 +735,8 @@ let parse_module_long_ident ~lowercase p =
   (* Parser.eatBreadcrumb p; *)
   module_ident
 
-let verify_jsx_opening_closing_name p name_expr =
+let verify_jsx_opening_closing_name p
+    (name_longident : Longident.t Location.loc) : bool =
   let closing =
     match p.Parser.token with
     | Lident lident ->
@@ -744,27 +745,25 @@ let verify_jsx_opening_closing_name p name_expr =
     | Uident _ -> (parse_module_long_ident ~lowercase:true p).txt
     | _ -> Longident.Lident ""
   in
-  match name_expr.Parsetree.pexp_desc with
-  | Pexp_ident opening_ident ->
-    let opening =
-      let without_create_element =
-        Longident.flatten opening_ident.txt
-        |> List.filter (fun s -> s <> "createElement")
-      in
-      match Longident.unflatten without_create_element with
-      | Some li -> li
-      | None -> Longident.Lident ""
+  (* match name_longident.Parsetree.pexp_desc with
+  | Pexp_ident opening_ident -> *)
+  (* let opening =
+    let without_create_element =
+      Longident.flatten name_longident.txt
+      (* |> List.filter (fun s -> s <> "createElement") *)
     in
-    opening = closing
-  | _ -> assert false
-
-let string_of_pexp_ident name_expr =
-  match name_expr.Parsetree.pexp_desc with
-  | Pexp_ident opening_ident ->
-    Longident.flatten opening_ident.txt
-    |> List.filter (fun s -> s <> "createElement")
-    |> String.concat "."
-  | _ -> ""
+    match Longident.unflatten without_create_element with
+    | Some li -> li
+    | None -> Longident.Lident ""
+  in *)
+  let opening = name_longident.txt in
+  opening = closing
+(* | _ -> assert false *)
+
+let string_of_longident (longindent : Longident.t Location.loc) =
+  Longident.flatten longindent.txt
+  (* |> List.filter (fun s -> s <> "createElement") *)
+  |> String.concat "."
 
 (* open-def ::=
  *   | open module-path
@@ -2559,31 +2558,113 @@ and parse_let_bindings ~attrs ~start_pos p =
  * Foo -> Foo.createElement
  * Foo.Bar -> Foo.Bar.createElement
  *)
-and parse_jsx_name p =
-  let longident =
+and parse_jsx_name p : Longident.t Location.loc =
+  (* let longident = *)
+  match p.Parser.token with
+  | Lident ident ->
+    let ident_start = p.start_pos in
+    let ident_end = p.end_pos in
+    Parser.next p;
+    let loc = mk_loc ident_start ident_end in
+    Location.mkloc (Longident.Lident ident) loc
+  | Uident _ ->
+    let longident = parse_module_long_ident ~lowercase:true p in
+    longident
+    (* Location.mkloc
+        (Longident.Ldot (longident.txt, "createElement")) (* TODO: I kinda wanna drop the createElement here as that is not what the user typed *)
+        longident.loc *)
+  | _ ->
+    let msg =
+      "A jsx name must be a lowercase or uppercase name, like: div in <div /> \
+       or Navbar in <Navbar />"
+    in
+    Parser.err p (Diagnostics.message msg);
+    Location.mknoloc (Longident.Lident "_")
+(* in
+  Ast_helper.Exp.ident ~loc:longident.loc longident *)
+
+and parse_jsx_opening_or_self_closing_element ~start_pos p :
+    Parsetree.expression =
+  let jsx_start_pos = p.Parser.start_pos in
+  let name = parse_jsx_name p in
+  let jsx_props = parse_jsx_props p in
+  match p.Parser.token with
+  | Forwardslash ->
+    (* <foo a=b /> *)
+    (* let children_start_pos = p.Parser.start_pos in *)
+    Parser.next p;
+    (* let children_end_pos = p.Parser.start_pos in *)
+    Scanner.pop_mode p.scanner Jsx;
+    Parser.expect GreaterThan p;
+    let loc = mk_loc jsx_start_pos p.Parser.start_pos in
+    (* Ast_helper.Exp.make_list_expression loc [] None no children *)
+    let desc =
+      Parsetree.Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = name; jsx_unary_element_props = jsx_props}
+    in
+    {pexp_desc = desc; pexp_loc = loc; pexp_attributes = []}
+  | GreaterThan -> (
+    (* <foo a=b> bar </foo> *)
+    (* let children_start_pos = p.Parser.start_pos in *)
+    Parser.next p;
+    let children = parse_jsx_children p in
+    (* let children_end_pos = p.Parser.start_pos in *)
+    let () =
+      match p.token with
+      | LessThanSlash -> Parser.next p
+      | LessThan ->
+        Parser.next p;
+        Parser.expect Forwardslash p
+      | token when Grammar.is_structure_item_start token -> ()
+      | _ -> Parser.expect LessThanSlash p
+    in
     match p.Parser.token with
-    | Lident ident ->
-      let ident_start = p.start_pos in
-      let ident_end = p.end_pos in
-      Parser.next p;
-      let loc = mk_loc ident_start ident_end in
-      Location.mkloc (Longident.Lident ident) loc
-    | Uident _ ->
-      let longident = parse_module_long_ident ~lowercase:true p in
-      Location.mkloc
-        (Longident.Ldot (longident.txt, "createElement"))
-        longident.loc
-    | _ ->
-      let msg =
-        "A jsx name must be a lowercase or uppercase name, like: div in <div \
-         /> or Navbar in <Navbar />"
+    | (Lident _ | Uident _) when verify_jsx_opening_closing_name p name ->
+      Scanner.pop_mode p.scanner Jsx;
+      Parser.expect GreaterThan p;
+      let loc = mk_loc jsx_start_pos p.Parser.start_pos in
+      let desc =
+        Parsetree.Pexp_jsx_container_element
+          {
+            jsx_container_element_tag_name_start = name;
+            jsx_container_element_props = jsx_props;
+            jsx_container_element_children = children;
+          }
       in
-      Parser.err p (Diagnostics.message msg);
-      Location.mknoloc (Longident.Lident "_")
-  in
-  Ast_helper.Exp.ident ~loc:longident.loc longident
+      {pexp_desc = desc; pexp_loc = loc; pexp_attributes = []}
+      (* let loc = mk_loc children_start_pos children_end_pos in
+      match (spread, children) with
+      | true, child :: _ -> child
+      | _ -> Ast_helper.Exp.make_list_expression loc children None) *)
+    | token ->
+      Scanner.pop_mode p.scanner Jsx;
+      let () =
+        if Grammar.is_structure_item_start token then
+          let closing = "</" ^ string_of_longident name ^ ">" in
+          let msg = Diagnostics.message ("Missing " ^ closing) in
+          Parser.err ~start_pos ~end_pos:p.prev_end_pos p msg
+        else
+          let opening = "</" ^ string_of_longident name ^ ">" in
+          let msg =
+            "Closing jsx name should be the same as the opening name. Did you \
+             mean " ^ opening ^ " ?"
+          in
+          Parser.err ~start_pos ~end_pos:p.prev_end_pos p
+            (Diagnostics.message msg);
+          Parser.expect GreaterThan p
+      in
+      failwith "Unsure how you can get here"
+    (* let loc = mk_loc children_start_pos children_end_pos in
+      match (spread, children) with
+      | true, child :: _ -> child
+      | _ -> Ast_helper.Exp.make_list_expression loc children None)) *)
+    )
+  | token ->
+    Scanner.pop_mode p.scanner Jsx;
+    Parser.err p (Diagnostics.unexpected token p.breadcrumbs);
+    Ast_helper.Exp.make_list_expression Location.none [] None
 
-and parse_jsx_opening_or_self_closing_element ~start_pos p =
+(* and parse_jsx_opening_or_self_closing_element_old ~start_pos p =
   let jsx_start_pos = p.Parser.start_pos in
   let name = parse_jsx_name p in
   let jsx_props = parse_jsx_props p in
@@ -2660,7 +2741,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p =
                (Location.mknoloc (Longident.Lident "()"))
                None );
          ];
-       ])
+       ]) *)
 
 (*
  *  jsx ::=
@@ -2675,17 +2756,19 @@ and parse_jsx p =
   Parser.leave_breadcrumb p Grammar.Jsx;
   let start_pos = p.Parser.start_pos in
   Parser.expect LessThan p;
-  let jsx_expr, jsx_attrs =
+  let jsx_expr =
     match p.Parser.token with
     | Lident _ | Uident _ ->
-      (parse_jsx_opening_or_self_closing_element ~start_pos p, [jsx_attr])
+      parse_jsx_opening_or_self_closing_element ~start_pos p
     | GreaterThan ->
       (* fragment: <> foo </> *)
-      (parse_jsx_fragment start_pos p, [])
-    | _ -> (parse_jsx_name p, [])
+      parse_jsx_fragment start_pos p
+    | _ ->
+      let longident = parse_jsx_name p in
+      Ast_helper.Exp.ident ~loc:longident.loc longident
   in
   Parser.eat_breadcrumb p;
-  {jsx_expr with pexp_attributes = jsx_attrs}
+  jsx_expr
 
 (*
  * jsx-fragment ::=
@@ -2695,7 +2778,7 @@ and parse_jsx p =
 and parse_jsx_fragment start_pos p =
   let children_start_pos = p.Parser.start_pos in
   Parser.expect GreaterThan p;
-  let _spread, children = parse_jsx_children p in
+  let children = parse_jsx_children p in
   let children_end_pos = p.Parser.start_pos in
   if p.token = LessThan then p.token <- Scanner.reconsider_less_than p.scanner;
   Parser.expect LessThanSlash p;
@@ -2715,17 +2798,16 @@ and parse_jsx_fragment start_pos p =
  *   |  lident = ?jsx_expr
  *   |  {...jsx_expr}
  *)
-and parse_jsx_prop p =
+and parse_jsx_prop p : Parsetree.jsx_prop option =
   match p.Parser.token with
   | Question | Lident _ -> (
     let optional = Parser.optional p Question in
     let name, loc = parse_lident p in
     (* optional punning: <foo ?a /> *)
-    if optional then
-      Some
-        ( Asttypes.Optional {txt = name; loc},
+    if optional then Some (Parsetree.JSXPropPunning (true, {txt = name; loc}))
+      (* ( Asttypes.Optional {txt = name; loc},
           Ast_helper.Exp.ident ~loc (Location.mkloc (Longident.Lident name) loc)
-        )
+        ) *)
     else
       match p.Parser.token with
       | Equal ->
@@ -2734,12 +2816,16 @@ and parse_jsx_prop p =
         let optional = Parser.optional p Question in
         Scanner.pop_mode p.scanner Jsx;
         let attr_expr = parse_primary_expr ~operand:(parse_atomic_expr p) p in
-        let label =
+        (* let label =
+          if optional then Asttypes.Optional {txt = name; loc}
+          else Asttypes.Labelled {txt = name; loc}
+        in *)
+        Some (Parsetree.JSXPropValue ({txt = name; loc}, optional, attr_expr))
+        (* Some (label, attr_expr) *)
+      | _ -> Some (Parsetree.JSXPropPunning (false, {txt = name; loc}))
+    (* let label =
           if optional then Asttypes.Optional {txt = name; loc}
           else Asttypes.Labelled {txt = name; loc}
-        in
-        Some (label, attr_expr)
-      | _ ->
         let attr_expr =
           Ast_helper.Exp.ident ~loc (Location.mkloc (Longident.Lident name) loc)
         in
@@ -2747,7 +2833,8 @@ and parse_jsx_prop p =
           if optional then Asttypes.Optional {txt = name; loc}
           else Asttypes.Labelled {txt = name; loc}
         in
-        Some (label, attr_expr))
+        Some (label, attr_expr)) *)
+    )
   (* {...props} *)
   | Lbrace -> (
     Scanner.pop_mode p.scanner Jsx;
@@ -2759,20 +2846,21 @@ and parse_jsx_prop p =
       let loc = mk_loc p.Parser.start_pos p.prev_end_pos in
       let attr_expr = parse_primary_expr ~operand:(parse_expr p) p in
       (* using label "spreadProps" to distinguish from others *)
-      let label = Asttypes.Labelled {txt = "_spreadProps"; loc} in
+      (* let label = Asttypes.Labelled {txt = "_spreadProps"; loc} in *)
       match p.Parser.token with
       | Rbrace ->
         Parser.next p;
         Scanner.set_jsx_mode p.scanner;
-        Some (label, attr_expr)
+        Some (Parsetree.JSXPropSpreading (loc, attr_expr))
+        (* Some (label, attr_expr) *)
       | _ -> None)
     | _ -> None)
   | _ -> None
 
-and parse_jsx_props p =
+and parse_jsx_props p : Parsetree.jsx_prop list =
   parse_region ~grammar:Grammar.JsxAttribute ~f:parse_jsx_prop p
 
-and parse_jsx_children p =
+and parse_jsx_children p : Parsetree.jsx_children =
   Scanner.pop_mode p.scanner Jsx;
   let rec loop p children =
     match p.Parser.token with
@@ -2800,17 +2888,20 @@ and parse_jsx_children p =
       loop p (child :: children)
     | _ -> children
   in
-  let spread, children =
+  let children =
     match p.Parser.token with
     | DotDotDot ->
       Parser.next p;
-      (true, [parse_primary_expr ~operand:(parse_atomic_expr p) ~no_call:true p])
+      let expr =
+        parse_primary_expr ~operand:(parse_atomic_expr p) ~no_call:true p
+      in
+      Parsetree.JSXChildrenSpreading expr
     | _ ->
       let children = List.rev (loop p []) in
-      (false, children)
+      Parsetree.JSXChildrenItems children
   in
   Scanner.set_jsx_mode p.scanner;
-  (spread, children)
+  children
 
 and parse_braced_or_record_expr p =
   let start_pos = p.Parser.start_pos in
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 74e3cc3a69..a5237de235 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2783,8 +2783,15 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
     | Pexp_fun _ | Pexp_newtype _ -> print_arrow e
     | Parsetree.Pexp_constant c ->
       print_constant ~template_literal:(ParsetreeViewer.is_template_literal e) c
-    | Pexp_jsx_fragment (o, xs, c) ->
+    | Pexp_jsx_fragment (o, children, c) ->
+      let xs =
+        match children with
+        | JSXChildrenSpreading e -> [e]
+        | JSXChildrenItems xs -> xs
+      in
       print_jsx_fragment ~state o xs c e.pexp_loc cmt_tbl
+    | Pexp_jsx_unary_element _ -> failwith "Pexp_jsx_unary_element 4"
+    | Pexp_jsx_container_element _ -> failwith "Pexp_jsx_container_element 4"
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
       Doc.concat

From bf1b411bd4eb4120bdb942b25d80df1883c9e91e Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 6 Mar 2025 13:36:48 +0100
Subject: [PATCH 08/99] Refactor fragment transformation.

---
 compiler/syntax/src/jsx_v4.ml | 102 ++++++++++++++++++----------------
 1 file changed, 53 insertions(+), 49 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index ff12d35339..8b4c5b4a21 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1530,10 +1530,61 @@ let transform_jsx_call ~config mapper call_expression call_arguments
       "JSX: `createElement` should be preceeded by a simple, direct module \
        name."
 
+let mkChildrenProps (config : Jsx_common.jsx_config) mapper
+    (children : jsx_children) =
+  let record_of_children children =
+    Exp.record [(Location.mknoloc (Lident "children"), children, false)] None
+  in
+  let apply_jsx_array expr =
+    Exp.apply
+      (Exp.ident {txt = module_access_name config "array"; loc = Location.none})
+      [(Nolabel, expr)]
+  in
+  match children with
+  | JSXChildrenItems [] -> empty_record ~loc:Location.none
+  | JSXChildrenItems [child] | JSXChildrenSpreading child ->
+    record_of_children (mapper.expr mapper child)
+  | JSXChildrenItems xs -> (
+    match config.mode with
+    | "automatic" ->
+      record_of_children
+      @@ apply_jsx_array (Exp.array (List.map (mapper.expr mapper) xs))
+    | "classic" | _ -> empty_record ~loc:Location.none)
+
+let mkReactCreateElement (config : Jsx_common.jsx_config) mapper loc attrs
+    (elementTag : expression) (children : jsx_children) : expression =
+  let more_than_one_children =
+    match children with
+    | JSXChildrenSpreading _ -> false
+    | JSXChildrenItems xs -> List.length xs > 1
+  in
+  let children_props = mkChildrenProps config mapper children in
+  let args =
+    (nolabel, elementTag) :: (nolabel, children_props)
+    ::
+    (match (config.mode, children) with
+    | "classic", JSXChildrenItems xs when more_than_one_children ->
+      [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
+    | _ -> [])
+  in
+  Exp.apply ~loc ~attrs
+    (* ReactDOM.createElement *)
+    (match config.mode with
+    | "automatic" ->
+      if more_than_one_children then
+        Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
+      else Exp.ident ~loc {loc; txt = module_access_name config "jsx"}
+    | "classic" | _ ->
+      if more_than_one_children then
+        Exp.ident ~loc
+          {loc; txt = Ldot (Lident "React", "createElementVariadic")}
+      else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
+    args
+
 let expr ~(config : Jsx_common.jsx_config) mapper expression =
   match expression with
   | {
-   pexp_desc = Pexp_jsx_fragment (_, xs, _);
+   pexp_desc = Pexp_jsx_fragment (_, children, _);
    pexp_loc = loc;
    pexp_attributes = attrs;
   } ->
@@ -1545,54 +1596,7 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
       | "classic" | _ ->
         Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
     in
-    let record_of_children children =
-      Exp.record [(Location.mknoloc (Lident "children"), children, false)] None
-    in
-    let apply_jsx_array expr =
-      Exp.apply
-        (Exp.ident
-           {txt = module_access_name config "array"; loc = Location.none})
-        [(Nolabel, expr)]
-    in
-    let more_than_one_children =
-      match xs with
-      | JSXChildrenSpreading _ -> false
-      | JSXChildrenItems xs -> List.length xs > 1
-    in
-    let children_props =
-      match xs with
-      | JSXChildrenItems [] -> empty_record ~loc:Location.none
-      | JSXChildrenItems [child] | JSXChildrenSpreading child ->
-        record_of_children (mapper.expr mapper child)
-      | JSXChildrenItems xs -> (
-        match config.mode with
-        | "automatic" ->
-          record_of_children
-          @@ apply_jsx_array (Exp.array (List.map (mapper.expr mapper) xs))
-        | "classic" | _ -> empty_record ~loc:Location.none)
-    in
-    let args =
-      (nolabel, fragment) :: (nolabel, children_props)
-      ::
-      (match (config.mode, xs) with
-      | "classic", JSXChildrenItems xs when more_than_one_children ->
-        [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
-      | _ -> [])
-    in
-
-    Exp.apply ~loc ~attrs
-      (* ReactDOM.createElement *)
-      (match config.mode with
-      | "automatic" ->
-        if more_than_one_children then
-          Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
-        else Exp.ident ~loc {loc; txt = module_access_name config "jsx"}
-      | "classic" | _ ->
-        if more_than_one_children then
-          Exp.ident ~loc
-            {loc; txt = Ldot (Lident "React", "createElementVariadic")}
-        else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
-      args
+    mkReactCreateElement config mapper loc attrs fragment children
   (* Does the function application have the @JSX attribute? *)
   | {
    pexp_desc = Pexp_apply {funct = call_expression; args = call_arguments};

From 5fe5f121606ca2a779fbc77580d40ff4adfe1a81 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Fri, 7 Mar 2025 08:57:51 +0100
Subject: [PATCH 09/99] Initial transform of Pexp_jsx_unary_element in
 automatic mode

---
 compiler/syntax/src/jsx_v4.ml  | 232 ++++++++++++++++++++++++++-------
 compiler/syntax/src/jsx_v4.mli |   8 ++
 2 files changed, 191 insertions(+), 49 deletions(-)
 create mode 100644 compiler/syntax/src/jsx_v4.mli

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 8b4c5b4a21..380040c85b 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1496,7 +1496,7 @@ let transform_signature_item ~config item =
         "Only one JSX component call can exist on a component at one time")
   | _ -> [item]
 
-let transform_jsx_call ~config mapper call_expression call_arguments
+let _transform_jsx_call ~config mapper call_expression call_arguments
     jsx_expr_loc attrs =
   match call_expression.pexp_desc with
   | Pexp_ident caller -> (
@@ -1530,58 +1530,163 @@ let transform_jsx_call ~config mapper call_expression call_arguments
       "JSX: `createElement` should be preceeded by a simple, direct module \
        name."
 
-let mkChildrenProps (config : Jsx_common.jsx_config) mapper
-    (children : jsx_children) =
-  let record_of_children children =
-    Exp.record [(Location.mknoloc (Lident "children"), children, false)] None
-  in
-  let apply_jsx_array expr =
-    Exp.apply
-      (Exp.ident {txt = module_access_name config "array"; loc = Location.none})
-      [(Nolabel, expr)]
-  in
-  match children with
-  | JSXChildrenItems [] -> empty_record ~loc:Location.none
-  | JSXChildrenItems [child] | JSXChildrenSpreading child ->
-    record_of_children (mapper.expr mapper child)
-  | JSXChildrenItems xs -> (
-    match config.mode with
-    | "automatic" ->
+let starts_with_lowercase s =
+  if String.length s = 0 then false
+  else
+    let c = s.[0] in
+    Char.lowercase_ascii c = c
+
+let _starts_with_uppercase s =
+  if String.length s = 0 then false
+  else
+    let c = s.[0] in
+    Char.uppercase_ascii c = c
+
+module AutomaticExpr = struct
+  let mk_children_props (config : Jsx_common.jsx_config) mapper
+      (children : jsx_children) =
+    let record_of_children children =
+      Exp.record [(Location.mknoloc (Lident "children"), children, false)] None
+    in
+    let apply_jsx_array expr =
+      Exp.apply
+        (Exp.ident
+           {txt = module_access_name config "array"; loc = Location.none})
+        [(Nolabel, expr)]
+    in
+    match children with
+    | JSXChildrenItems [] -> empty_record ~loc:Location.none
+    | JSXChildrenItems [child] | JSXChildrenSpreading child ->
+      record_of_children (mapper.expr mapper child)
+    | JSXChildrenItems xs ->
       record_of_children
       @@ apply_jsx_array (Exp.array (List.map (mapper.expr mapper) xs))
-    | "classic" | _ -> empty_record ~loc:Location.none)
 
-let mkReactCreateElement (config : Jsx_common.jsx_config) mapper loc attrs
-    (elementTag : expression) (children : jsx_children) : expression =
-  let more_than_one_children =
-    match children with
-    | JSXChildrenSpreading _ -> false
-    | JSXChildrenItems xs -> List.length xs > 1
-  in
-  let children_props = mkChildrenProps config mapper children in
-  let args =
-    (nolabel, elementTag) :: (nolabel, children_props)
-    ::
-    (match (config.mode, children) with
-    | "classic", JSXChildrenItems xs when more_than_one_children ->
-      [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
-    | _ -> [])
-  in
-  Exp.apply ~loc ~attrs
-    (* ReactDOM.createElement *)
-    (match config.mode with
-    | "automatic" ->
-      if more_than_one_children then
-        Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
-      else Exp.ident ~loc {loc; txt = module_access_name config "jsx"}
-    | "classic" | _ ->
-      if more_than_one_children then
-        Exp.ident ~loc
-          {loc; txt = Ldot (Lident "React", "createElementVariadic")}
-      else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
-    args
+  let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
+      (elementTag : expression) (children : jsx_children) : expression =
+    let more_than_one_children =
+      match children with
+      | JSXChildrenSpreading _ -> false
+      | JSXChildrenItems xs -> List.length xs > 1
+    in
+    let children_props = mk_children_props config mapper children in
+    let args = [(nolabel, elementTag); (nolabel, children_props)] in
+    Exp.apply ~loc ~attrs (* ReactDOM.jsx *)
+      (if more_than_one_children then
+         Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
+       else Exp.ident ~loc {loc; txt = module_access_name config "jsx"})
+      args
+
+  let try_find_key_prop (props : jsx_props) : (arg_label * expression) option =
+    props
+    |> List.find_map (function
+         | JSXPropPunning (_, ({txt = "key"} as name)) ->
+           Some (Labelled name, Exp.ident {txt = Lident "key"; loc = name.loc})
+         | JSXPropValue (({txt = "key"} as name), is_optional, expr) ->
+           let arg_label =
+             if is_optional then Optional name else Labelled name
+           in
+           Some (arg_label, expr)
+         | _ -> None)
+
+  let expr ~(config : Jsx_common.jsx_config) mapper expression =
+    match expression with
+    | {
+     pexp_desc = Pexp_jsx_fragment (_, children, _);
+     pexp_loc = loc;
+     pexp_attributes = attrs;
+    } ->
+      let loc = {loc with loc_ghost = true} in
+      let fragment =
+        Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
+      in
+      mk_react_jsx config mapper loc attrs fragment children
+    | {
+     pexp_desc =
+       Pexp_jsx_unary_element
+         {jsx_unary_element_tag_name = name; jsx_unary_element_props = props};
+     pexp_loc = loc;
+     pexp_attributes = attrs;
+    } -> (
+      match name.txt with
+      | Longident.Lident elementName when starts_with_lowercase elementName ->
+        (* For example 'input' *)
+        let component_name_expr = constant_string ~loc:name.loc elementName in
+        let element_binding =
+          match config.module_ |> String.lowercase_ascii with
+          | "react" -> Lident "ReactDOM"
+          | _generic -> module_access_name config "Elements"
+        in
+        let jsx_expr, key_and_unit =
+          match try_find_key_prop props with
+          | None ->
+            ( Exp.ident
+                {loc = Location.none; txt = Ldot (element_binding, "jsx")},
+              [] )
+          | Some key_prop ->
+            ( Exp.ident
+                {loc = Location.none; txt = Ldot (element_binding, "jsxKeyed")},
+              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
+        in
+        (* TODO *)
+        let props = empty_record ~loc in
+
+        Exp.apply ~loc ~attrs jsx_expr
+          ([(nolabel, component_name_expr); (nolabel, props)] @ key_and_unit)
+      | _ ->
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten name.txt |> String.concat "."))
+    | e -> default_mapper.expr mapper e
+end
+
+module ClassicExpr = struct
+  let mk_react_create_element mapper loc attrs (elementTag : expression)
+      (children : jsx_children) : expression =
+    let more_than_one_children =
+      match children with
+      | JSXChildrenSpreading _ -> false
+      | JSXChildrenItems xs -> List.length xs > 1
+    in
+    (* children are a special prop are special in React.createElement *)
+    let children_props = empty_record ~loc:Location.none in
+    let args =
+      (nolabel, elementTag) :: (nolabel, children_props)
+      ::
+      (match children with
+      | JSXChildrenItems xs when more_than_one_children ->
+        [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
+      | _ -> [])
+    in
+    Exp.apply ~loc ~attrs
+      (* ReactDOM.createElement *)
+      (if more_than_one_children then
+         Exp.ident ~loc
+           {loc; txt = Ldot (Lident "React", "createElementVariadic")}
+       else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
+      args
+
+  let expr (_config : Jsx_common.jsx_config) mapper expression =
+    match expression with
+    | {
+     pexp_desc = Pexp_jsx_fragment (_, children, _);
+     pexp_loc = loc;
+     pexp_attributes = attrs;
+    } ->
+      let loc = {loc with loc_ghost = true} in
+      let fragment =
+        Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
+      in
+      mk_react_create_element mapper loc attrs fragment children
+    | e -> default_mapper.expr mapper e
+end
 
 let expr ~(config : Jsx_common.jsx_config) mapper expression =
+  match config.mode with
+  | "automatic" -> AutomaticExpr.expr ~config mapper expression
+  | "classic" -> ClassicExpr.expr config mapper expression
+  | _ -> default_mapper.expr mapper expression
+(*
   match expression with
   | {
    pexp_desc = Pexp_jsx_fragment (_, children, _);
@@ -1596,7 +1701,35 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
       | "classic" | _ ->
         Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
     in
-    mkReactCreateElement config mapper loc attrs fragment children
+    mk_react_create_element config mapper loc attrs fragment children
+  | {
+      pexp_desc =
+        Pexp_jsx_unary_element
+          {jsx_unary_element_tag_name = name; jsx_unary_element_props = props};
+      pexp_loc = loc;
+      pexp_attributes = attrs;
+    } as e ->
+    let elementTag =
+      match name.txt with
+      | Longident.Lident elementName when starts_with_lowercase elementName -> (
+        (* For example 'input' *)
+        let component_name_expr = constant_string ~loc:name.loc elementName in
+        match config.mode with
+        | "automatic" ->
+          let element_binding =
+            match config.module_ |> String.lowercase_ascii with
+            | "react" -> Lident "ReactDOM"
+            | _generic -> module_access_name config "Elements"
+          in
+          Exp.ident ~loc {loc; txt = Lident elementName}
+        | "classic" | _ -> ()
+      )
+      | _ ->
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten name.txt |> String.concat ".")
+    in
+    e
   (* Does the function application have the @JSX attribute? *)
   | {
    pexp_desc = Pexp_apply {funct = call_expression; args = call_arguments};
@@ -1616,6 +1749,7 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
         non_jsx_attributes)
   (* Delegate to the default mapper, a deep identity traversal *)
   | e -> default_mapper.expr mapper e
+*)
 
 let module_binding ~(config : Jsx_common.jsx_config) mapper module_binding =
   config.nested_modules <- module_binding.pmb_name.txt :: config.nested_modules;
diff --git a/compiler/syntax/src/jsx_v4.mli b/compiler/syntax/src/jsx_v4.mli
new file mode 100644
index 0000000000..b5823409bd
--- /dev/null
+++ b/compiler/syntax/src/jsx_v4.mli
@@ -0,0 +1,8 @@
+open Parsetree
+
+val jsx_mapper :
+  config:Jsx_common.jsx_config ->
+  (Ast_mapper.mapper -> expression -> expression)
+  * (Ast_mapper.mapper -> module_binding -> module_binding)
+  * (signature_item -> signature_item list)
+  * (structure_item -> structure_item list)

From 9251609f9bcb6e89763e1e99af63c9ff102675c4 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Fri, 7 Mar 2025 14:26:36 +0100
Subject: [PATCH 10/99] Make props for unary element in automatic mode.

---
 compiler/syntax/src/jsx_v4.ml | 65 +++++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 380040c85b..f7b3d27a33 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1543,6 +1543,68 @@ let _starts_with_uppercase s =
     Char.uppercase_ascii c = c
 
 module AutomaticExpr = struct
+  let loc_from_prop = function
+    | JSXPropPunning (_, {loc}) -> loc
+    | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
+    | JSXPropSpreading (loc, _) -> loc
+
+  let mk_record_from_props (jsx_expr_loc : Location.t) (props : jsx_props) :
+      expression =
+    (* Create an artificial range from the first till the last prop *)
+    let loc =
+      match props with
+      | [] -> jsx_expr_loc
+      | head :: tail ->
+        let rec visit props =
+          match props with
+          | [] -> head
+          | [last] -> last
+          | _ :: rest -> visit rest
+        in
+        let first_item = head |> loc_from_prop in
+        let last_item = visit tail |> loc_from_prop in
+        {
+          loc_start = first_item.loc_start;
+          loc_end = last_item.loc_end;
+          loc_ghost = true;
+        }
+    in
+    (* key should be filtered out *)
+    let props =
+      props
+      |> List.filter (function
+           | JSXPropPunning (_, {txt = "key"})
+           | JSXPropValue ({txt = "key"}, _, _) ->
+             false
+           | _ -> true)
+    in
+    let props, spread_props =
+      match props with
+      | JSXPropSpreading (_, expr) :: rest -> (rest, Some expr)
+      | _ -> (props, None)
+    in
+
+    let record_fields =
+      props
+      |> List.map (function
+           | JSXPropPunning (is_optional, name) ->
+             ( {txt = Lident name.txt; loc = name.loc},
+               Exp.ident {txt = Lident name.txt; loc = name.loc},
+               is_optional )
+           | JSXPropValue (name, is_optional, value) ->
+             ({txt = Lident name.txt; loc = name.loc}, value, is_optional)
+           | JSXPropSpreading (loc, _) ->
+             (* There can only be one spread expression and it is expected to be the first prop *)
+             Jsx_common.raise_error ~loc
+               "JSX: use {...p} {x: v} not {x: v} {...p} \n\
+               \     multiple spreads {...p} {...p} not allowed.")
+    in
+    {
+      pexp_desc = Pexp_record (record_fields, spread_props);
+      pexp_loc = loc;
+      pexp_attributes = [];
+    }
+
   let mk_children_props (config : Jsx_common.jsx_config) mapper
       (children : jsx_children) =
     let record_of_children children =
@@ -1628,8 +1690,7 @@ module AutomaticExpr = struct
                 {loc = Location.none; txt = Ldot (element_binding, "jsxKeyed")},
               [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
         in
-        (* TODO *)
-        let props = empty_record ~loc in
+        let props = mk_record_from_props loc props in
 
         Exp.apply ~loc ~attrs jsx_expr
           ([(nolabel, component_name_expr); (nolabel, props)] @ key_and_unit)

From 1aaa6865c7fed4edf1d3119be6f30615c65a2ef7 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sat, 8 Mar 2025 19:35:48 +0100
Subject: [PATCH 11/99] Initial custom component unary tag

---
 compiler/syntax/src/jsx_v4.ml | 43 ++++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index f7b3d27a33..e426a5c872 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1536,7 +1536,7 @@ let starts_with_lowercase s =
     let c = s.[0] in
     Char.lowercase_ascii c = c
 
-let _starts_with_uppercase s =
+let starts_with_uppercase s =
   if String.length s = 0 then false
   else
     let c = s.[0] in
@@ -1666,14 +1666,18 @@ module AutomaticExpr = struct
     | {
      pexp_desc =
        Pexp_jsx_unary_element
-         {jsx_unary_element_tag_name = name; jsx_unary_element_props = props};
+         {
+           jsx_unary_element_tag_name = tag_name;
+           jsx_unary_element_props = props;
+         };
      pexp_loc = loc;
      pexp_attributes = attrs;
-    } -> (
-      match name.txt with
-      | Longident.Lident elementName when starts_with_lowercase elementName ->
+    } ->
+      let loc = {loc with loc_ghost = true} in
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      if starts_with_lowercase name then
         (* For example 'input' *)
-        let component_name_expr = constant_string ~loc:name.loc elementName in
+        let component_name_expr = constant_string ~loc:tag_name.loc name in
         let element_binding =
           match config.module_ |> String.lowercase_ascii with
           | "react" -> Lident "ReactDOM"
@@ -1694,10 +1698,33 @@ module AutomaticExpr = struct
 
         Exp.apply ~loc ~attrs jsx_expr
           ([(nolabel, component_name_expr); (nolabel, props)] @ key_and_unit)
-      | _ ->
+      else if starts_with_uppercase name then
+        (* MyModule.make *)
+        let make_id =
+          Exp.ident ~loc:tag_name.loc
+            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
+        in
+        let jsx_expr, key_and_unit =
+          match try_find_key_prop props with
+          | None ->
+            ( Exp.ident
+                {loc = Location.none; txt = module_access_name config "jsx"},
+              [] )
+          | Some key_prop ->
+            ( Exp.ident
+                {
+                  loc = Location.none;
+                  txt = module_access_name config "jsxKeyed";
+                },
+              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
+        in
+        let props = mk_record_from_props loc props in
+        Exp.apply ~loc ~attrs jsx_expr
+          ([(nolabel, make_id); (nolabel, props)] @ key_and_unit)
+      else
         Jsx_common.raise_error ~loc
           "JSX: element name is neither upper- or lowercase, got \"%s\""
-          (Longident.flatten name.txt |> String.concat "."))
+          (Longident.flatten tag_name.txt |> String.concat ".")
     | e -> default_mapper.expr mapper e
 end
 

From b37421219f66bfd71949f4b230f45e6447ffeae0 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sat, 8 Mar 2025 22:24:45 +0100
Subject: [PATCH 12/99] lowercase container element with children.

---
 compiler/syntax/src/jsx_v4.ml | 113 ++++++++++++++++++++++++++++++++--
 1 file changed, 107 insertions(+), 6 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index e426a5c872..409521d73c 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1548,8 +1548,8 @@ module AutomaticExpr = struct
     | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
     | JSXPropSpreading (loc, _) -> loc
 
-  let mk_record_from_props (jsx_expr_loc : Location.t) (props : jsx_props) :
-      expression =
+  let mk_record_from_props mapper (jsx_expr_loc : Location.t)
+      (props : jsx_props) : expression =
     (* Create an artificial range from the first till the last prop *)
     let loc =
       match props with
@@ -1580,7 +1580,8 @@ module AutomaticExpr = struct
     in
     let props, spread_props =
       match props with
-      | JSXPropSpreading (_, expr) :: rest -> (rest, Some expr)
+      | JSXPropSpreading (_, expr) :: rest ->
+        (rest, Some (mapper.expr mapper expr))
       | _ -> (props, None)
     in
 
@@ -1592,7 +1593,9 @@ module AutomaticExpr = struct
                Exp.ident {txt = Lident name.txt; loc = name.loc},
                is_optional )
            | JSXPropValue (name, is_optional, value) ->
-             ({txt = Lident name.txt; loc = name.loc}, value, is_optional)
+             ( {txt = Lident name.txt; loc = name.loc},
+               mapper.expr mapper value,
+               is_optional )
            | JSXPropSpreading (loc, _) ->
              (* There can only be one spread expression and it is expected to be the first prop *)
              Jsx_common.raise_error ~loc
@@ -1694,7 +1697,7 @@ module AutomaticExpr = struct
                 {loc = Location.none; txt = Ldot (element_binding, "jsxKeyed")},
               [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
         in
-        let props = mk_record_from_props loc props in
+        let props = mk_record_from_props mapper loc props in
 
         Exp.apply ~loc ~attrs jsx_expr
           ([(nolabel, component_name_expr); (nolabel, props)] @ key_and_unit)
@@ -1718,13 +1721,111 @@ module AutomaticExpr = struct
                 },
               [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
         in
-        let props = mk_record_from_props loc props in
+        let props = mk_record_from_props mapper loc props in
         Exp.apply ~loc ~attrs jsx_expr
           ([(nolabel, make_id); (nolabel, props)] @ key_and_unit)
       else
         Jsx_common.raise_error ~loc
           "JSX: element name is neither upper- or lowercase, got \"%s\""
           (Longident.flatten tag_name.txt |> String.concat ".")
+    | {
+     pexp_desc =
+       Pexp_jsx_container_element
+         {
+           jsx_container_element_tag_name_start = tag_name;
+           jsx_container_element_props = props;
+           jsx_container_element_children = children;
+         };
+     pexp_loc = loc;
+     pexp_attributes = attrs;
+    } ->
+      let loc = {loc with loc_ghost = true} in
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      (* For example: <div> <h1></h1> <br /> </div>
+         This has an impact if we want to use ReactDOM.jsx or ReactDOM.jsxs
+           *)
+      let has_multiple_literal_children =
+        match children with
+        | JSXChildrenItems (_ :: _ :: _) -> true
+        | _ -> false
+      in
+      if starts_with_lowercase name then
+        let component_name_expr = constant_string ~loc:tag_name.loc name in
+        let element_binding =
+          match config.module_ |> String.lowercase_ascii with
+          | "react" -> Lident "ReactDOM"
+          | _generic -> module_access_name config "Elements"
+        in
+        let props_record =
+          (* Append current props with JSXPropValue("children") 
+             This will later be transformed correctly into a record. *)
+          let props_with_children =
+            match children with
+            | JSXChildrenItems [] -> props
+            | JSXChildrenItems [expr] | JSXChildrenSpreading expr ->
+              props
+              @ [
+                  JSXPropValue
+                    ( {txt = "children"; loc = Location.none},
+                      true,
+                      Exp.apply
+                        (Exp.ident
+                           {
+                             txt = Ldot (element_binding, "someElement");
+                             loc = Location.none;
+                           })
+                        [(Nolabel, expr)] );
+                ]
+            | JSXChildrenItems xs ->
+              (* this is a hack to support react components that introspect into their children *)
+              props
+              @ [
+                  JSXPropValue
+                    ( {txt = "children"; loc = Location.none},
+                      false,
+                      Exp.apply
+                        (Exp.ident
+                           {
+                             txt = module_access_name config "array";
+                             loc = Location.none;
+                           })
+                        [
+                          (Nolabel, Exp.array (List.map (mapper.expr mapper) xs));
+                        ] );
+                ]
+          in
+          mk_record_from_props mapper loc props_with_children
+        in
+        let jsx_expr, key_and_unit =
+          match try_find_key_prop props with
+          | None ->
+            ( Exp.ident
+                {
+                  loc = Location.none;
+                  txt =
+                    Ldot
+                      ( element_binding,
+                        if has_multiple_literal_children then "jsxs" else "jsx"
+                      );
+                },
+              [] )
+          | Some key_prop ->
+            ( Exp.ident
+                {
+                  loc = Location.none;
+                  txt =
+                    Ldot
+                      ( element_binding,
+                        if has_multiple_literal_children then "jsxsKeyed"
+                        else "jsxKeyed" );
+                },
+              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
+        in
+
+        Exp.apply ~loc ~attrs jsx_expr
+          ([(nolabel, component_name_expr); (nolabel, props_record)]
+          @ key_and_unit)
+      else failwith "TODO"
     | e -> default_mapper.expr mapper e
 end
 

From c91aedae81dc4e162096411514b898492715183e Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 9 Mar 2025 00:17:44 +0100
Subject: [PATCH 13/99] Uppercase container elements

---
 compiler/syntax/src/jsx_v4.ml | 69 ++++++++++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 409521d73c..7ddc3ca9de 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1825,7 +1825,74 @@ module AutomaticExpr = struct
         Exp.apply ~loc ~attrs jsx_expr
           ([(nolabel, component_name_expr); (nolabel, props_record)]
           @ key_and_unit)
-      else failwith "TODO"
+      else if starts_with_uppercase name then
+        (* MyModule.make *)
+        let make_id =
+          Exp.ident ~loc:tag_name.loc
+            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
+        in
+        let props_record =
+          (* Append current props with JSXPropValue("children") 
+             This will later be transformed correctly into a record. *)
+          let props_with_children =
+            match children with
+            | JSXChildrenItems [] -> props
+            | JSXChildrenItems [expr] | JSXChildrenSpreading expr ->
+              props
+              @ [
+                  JSXPropValue
+                    ( {txt = "children"; loc = Location.none},
+                      false,
+                      mapper.expr mapper expr );
+                ]
+            | JSXChildrenItems xs ->
+              (* this is a hack to support react components that introspect into their children *)
+              props
+              @ [
+                  JSXPropValue
+                    ( {txt = "children"; loc = Location.none},
+                      false,
+                      Exp.apply
+                        (Exp.ident
+                           {
+                             txt = module_access_name config "array";
+                             loc = Location.none;
+                           })
+                        [
+                          (Nolabel, Exp.array (List.map (mapper.expr mapper) xs));
+                        ] );
+                ]
+          in
+          mk_record_from_props mapper loc props_with_children
+        in
+        let jsx_expr, key_and_unit =
+          match try_find_key_prop props with
+          | None ->
+            ( Exp.ident
+                {
+                  loc = Location.none;
+                  txt =
+                    module_access_name config
+                      (if has_multiple_literal_children then "jsxs" else "jsx");
+                },
+              [] )
+          | Some key_prop ->
+            ( Exp.ident
+                {
+                  loc = Location.none;
+                  txt =
+                    module_access_name config
+                      (if has_multiple_literal_children then "jsxsKeyed"
+                       else "jsxKeyed");
+                },
+              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
+        in
+        Exp.apply ~loc ~attrs jsx_expr
+          ([(nolabel, make_id); (nolabel, props_record)] @ key_and_unit)
+      else
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten tag_name.txt |> String.concat ".")
     | e -> default_mapper.expr mapper e
 end
 

From 85ccab48a9229a7016a8d2c9fa8d532d226da0af Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 9 Mar 2025 11:26:23 +0100
Subject: [PATCH 14/99] Streamline automatic element calls

---
 compiler/syntax/src/jsx_v4.ml   | 317 +++++++++++---------------------
 compiler/syntax/src/res_core.ml |   6 +-
 2 files changed, 113 insertions(+), 210 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 7ddc3ca9de..d8b6904e11 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1543,6 +1543,12 @@ let starts_with_uppercase s =
     Char.uppercase_ascii c = c
 
 module AutomaticExpr = struct
+  (* There appear to be slightly different rules of transformation whether the component is upper-, lowercase or a fragment *)
+  type componentDescription =
+    | LowercasedComponent
+    | UppercasedComponent
+    | FragmentComponent
+
   let loc_from_prop = function
     | JSXPropPunning (_, {loc}) -> loc
     | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
@@ -1608,39 +1614,55 @@ module AutomaticExpr = struct
       pexp_attributes = [];
     }
 
-  let mk_children_props (config : Jsx_common.jsx_config) mapper
-      (children : jsx_children) =
-    let record_of_children children =
-      Exp.record [(Location.mknoloc (Lident "children"), children, false)] None
-    in
-    let apply_jsx_array expr =
-      Exp.apply
-        (Exp.ident
-           {txt = module_access_name config "array"; loc = Location.none})
-        [(Nolabel, expr)]
-    in
+  let append_children_prop (config : Jsx_common.jsx_config) mapper
+      (component_description : componentDescription) (props : jsx_props)
+      (children : jsx_children) : jsx_props =
     match children with
-    | JSXChildrenItems [] -> empty_record ~loc:Location.none
+    | JSXChildrenItems [] -> props
     | JSXChildrenItems [child] | JSXChildrenSpreading child ->
-      record_of_children (mapper.expr mapper child)
+      let expr =
+        (* I don't quite know why fragment and uppercase don't do this additional ReactDOM.someElement wrapping *)
+        match component_description with
+        | FragmentComponent | UppercasedComponent -> mapper.expr mapper child
+        | LowercasedComponent ->
+          let element_binding =
+            match config.module_ |> String.lowercase_ascii with
+            | "react" -> Lident "ReactDOM"
+            | _generic -> module_access_name config "Elements"
+          in
+          Exp.apply
+            (Exp.ident
+               {
+                 txt = Ldot (element_binding, "someElement");
+                 loc = Location.none;
+               })
+            [(Nolabel, child)]
+      in
+      let is_optional =
+        match component_description with
+        | LowercasedComponent -> true
+        | FragmentComponent | UppercasedComponent -> false
+      in
+      props
+      @ [
+          JSXPropValue
+            ({txt = "children"; loc = Location.none}, is_optional, expr);
+        ]
     | JSXChildrenItems xs ->
-      record_of_children
-      @@ apply_jsx_array (Exp.array (List.map (mapper.expr mapper) xs))
-
-  let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
-      (elementTag : expression) (children : jsx_children) : expression =
-    let more_than_one_children =
-      match children with
-      | JSXChildrenSpreading _ -> false
-      | JSXChildrenItems xs -> List.length xs > 1
-    in
-    let children_props = mk_children_props config mapper children in
-    let args = [(nolabel, elementTag); (nolabel, children_props)] in
-    Exp.apply ~loc ~attrs (* ReactDOM.jsx *)
-      (if more_than_one_children then
-         Exp.ident ~loc {loc; txt = module_access_name config "jsxs"}
-       else Exp.ident ~loc {loc; txt = module_access_name config "jsx"})
-      args
+      (* this is a hack to support react components that introspect into their children *)
+      props
+      @ [
+          JSXPropValue
+            ( {txt = "children"; loc = Location.none},
+              false,
+              Exp.apply
+                (Exp.ident
+                   {
+                     txt = module_access_name config "array";
+                     loc = Location.none;
+                   })
+                [(Nolabel, Exp.array (List.map (mapper.expr mapper) xs))] );
+        ]
 
   let try_find_key_prop (props : jsx_props) : (arg_label * expression) option =
     props
@@ -1654,6 +1676,56 @@ module AutomaticExpr = struct
            Some (arg_label, expr)
          | _ -> None)
 
+  let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
+      (component_description : componentDescription) (elementTag : expression)
+      (props : jsx_props) (children : jsx_children) : expression =
+    let more_than_one_children =
+      match children with
+      | JSXChildrenSpreading _ -> false
+      | JSXChildrenItems xs -> List.length xs > 1
+    in
+    let props_with_children =
+      append_children_prop config mapper component_description props children
+    in
+    let props_record = mk_record_from_props mapper loc props_with_children in
+    let jsx_expr, key_and_unit =
+      let mk_element_bind (jsx_part : string) : Longident.t =
+        match component_description with
+        | FragmentComponent | UppercasedComponent ->
+          module_access_name config jsx_part
+        | LowercasedComponent ->
+          let element_binding =
+            match config.module_ |> String.lowercase_ascii with
+            | "react" -> Lident "ReactDOM"
+            | _generic -> module_access_name config "Elements"
+          in
+          Ldot (element_binding, jsx_part)
+      in
+      match try_find_key_prop props with
+      | None ->
+        ( Exp.ident
+            {
+              loc = Location.none;
+              txt =
+                mk_element_bind
+                  (if more_than_one_children then "jsxs" else "jsx");
+            },
+          [] )
+      | Some key_prop ->
+        ( Exp.ident
+            {
+              loc = Location.none;
+              txt =
+                mk_element_bind
+                  (if more_than_one_children then "jsxsKeyed" else "jsxKeyed");
+            },
+          [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
+    in
+    let args =
+      [(nolabel, elementTag); (nolabel, props_record)] @ key_and_unit
+    in
+    Exp.apply ~loc ~attrs jsx_expr args
+
   let expr ~(config : Jsx_common.jsx_config) mapper expression =
     match expression with
     | {
@@ -1665,7 +1737,8 @@ module AutomaticExpr = struct
       let fragment =
         Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
       in
-      mk_react_jsx config mapper loc attrs fragment children
+      mk_react_jsx config mapper loc attrs FragmentComponent fragment []
+        children
     | {
      pexp_desc =
        Pexp_jsx_unary_element
@@ -1681,49 +1754,16 @@ module AutomaticExpr = struct
       if starts_with_lowercase name then
         (* For example 'input' *)
         let component_name_expr = constant_string ~loc:tag_name.loc name in
-        let element_binding =
-          match config.module_ |> String.lowercase_ascii with
-          | "react" -> Lident "ReactDOM"
-          | _generic -> module_access_name config "Elements"
-        in
-        let jsx_expr, key_and_unit =
-          match try_find_key_prop props with
-          | None ->
-            ( Exp.ident
-                {loc = Location.none; txt = Ldot (element_binding, "jsx")},
-              [] )
-          | Some key_prop ->
-            ( Exp.ident
-                {loc = Location.none; txt = Ldot (element_binding, "jsxKeyed")},
-              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
-        in
-        let props = mk_record_from_props mapper loc props in
-
-        Exp.apply ~loc ~attrs jsx_expr
-          ([(nolabel, component_name_expr); (nolabel, props)] @ key_and_unit)
+        mk_react_jsx config mapper loc attrs LowercasedComponent
+          component_name_expr props (JSXChildrenItems [])
       else if starts_with_uppercase name then
         (* MyModule.make *)
         let make_id =
           Exp.ident ~loc:tag_name.loc
             {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
         in
-        let jsx_expr, key_and_unit =
-          match try_find_key_prop props with
-          | None ->
-            ( Exp.ident
-                {loc = Location.none; txt = module_access_name config "jsx"},
-              [] )
-          | Some key_prop ->
-            ( Exp.ident
-                {
-                  loc = Location.none;
-                  txt = module_access_name config "jsxKeyed";
-                },
-              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
-        in
-        let props = mk_record_from_props mapper loc props in
-        Exp.apply ~loc ~attrs jsx_expr
-          ([(nolabel, make_id); (nolabel, props)] @ key_and_unit)
+        mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
+          (JSXChildrenItems [])
       else
         Jsx_common.raise_error ~loc
           "JSX: element name is neither upper- or lowercase, got \"%s\""
@@ -1744,151 +1784,18 @@ module AutomaticExpr = struct
       (* For example: <div> <h1></h1> <br /> </div>
          This has an impact if we want to use ReactDOM.jsx or ReactDOM.jsxs
            *)
-      let has_multiple_literal_children =
-        match children with
-        | JSXChildrenItems (_ :: _ :: _) -> true
-        | _ -> false
-      in
       if starts_with_lowercase name then
         let component_name_expr = constant_string ~loc:tag_name.loc name in
-        let element_binding =
-          match config.module_ |> String.lowercase_ascii with
-          | "react" -> Lident "ReactDOM"
-          | _generic -> module_access_name config "Elements"
-        in
-        let props_record =
-          (* Append current props with JSXPropValue("children") 
-             This will later be transformed correctly into a record. *)
-          let props_with_children =
-            match children with
-            | JSXChildrenItems [] -> props
-            | JSXChildrenItems [expr] | JSXChildrenSpreading expr ->
-              props
-              @ [
-                  JSXPropValue
-                    ( {txt = "children"; loc = Location.none},
-                      true,
-                      Exp.apply
-                        (Exp.ident
-                           {
-                             txt = Ldot (element_binding, "someElement");
-                             loc = Location.none;
-                           })
-                        [(Nolabel, expr)] );
-                ]
-            | JSXChildrenItems xs ->
-              (* this is a hack to support react components that introspect into their children *)
-              props
-              @ [
-                  JSXPropValue
-                    ( {txt = "children"; loc = Location.none},
-                      false,
-                      Exp.apply
-                        (Exp.ident
-                           {
-                             txt = module_access_name config "array";
-                             loc = Location.none;
-                           })
-                        [
-                          (Nolabel, Exp.array (List.map (mapper.expr mapper) xs));
-                        ] );
-                ]
-          in
-          mk_record_from_props mapper loc props_with_children
-        in
-        let jsx_expr, key_and_unit =
-          match try_find_key_prop props with
-          | None ->
-            ( Exp.ident
-                {
-                  loc = Location.none;
-                  txt =
-                    Ldot
-                      ( element_binding,
-                        if has_multiple_literal_children then "jsxs" else "jsx"
-                      );
-                },
-              [] )
-          | Some key_prop ->
-            ( Exp.ident
-                {
-                  loc = Location.none;
-                  txt =
-                    Ldot
-                      ( element_binding,
-                        if has_multiple_literal_children then "jsxsKeyed"
-                        else "jsxKeyed" );
-                },
-              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
-        in
-
-        Exp.apply ~loc ~attrs jsx_expr
-          ([(nolabel, component_name_expr); (nolabel, props_record)]
-          @ key_and_unit)
+        mk_react_jsx config mapper loc attrs LowercasedComponent
+          component_name_expr props children
       else if starts_with_uppercase name then
         (* MyModule.make *)
         let make_id =
           Exp.ident ~loc:tag_name.loc
             {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
         in
-        let props_record =
-          (* Append current props with JSXPropValue("children") 
-             This will later be transformed correctly into a record. *)
-          let props_with_children =
-            match children with
-            | JSXChildrenItems [] -> props
-            | JSXChildrenItems [expr] | JSXChildrenSpreading expr ->
-              props
-              @ [
-                  JSXPropValue
-                    ( {txt = "children"; loc = Location.none},
-                      false,
-                      mapper.expr mapper expr );
-                ]
-            | JSXChildrenItems xs ->
-              (* this is a hack to support react components that introspect into their children *)
-              props
-              @ [
-                  JSXPropValue
-                    ( {txt = "children"; loc = Location.none},
-                      false,
-                      Exp.apply
-                        (Exp.ident
-                           {
-                             txt = module_access_name config "array";
-                             loc = Location.none;
-                           })
-                        [
-                          (Nolabel, Exp.array (List.map (mapper.expr mapper) xs));
-                        ] );
-                ]
-          in
-          mk_record_from_props mapper loc props_with_children
-        in
-        let jsx_expr, key_and_unit =
-          match try_find_key_prop props with
-          | None ->
-            ( Exp.ident
-                {
-                  loc = Location.none;
-                  txt =
-                    module_access_name config
-                      (if has_multiple_literal_children then "jsxs" else "jsx");
-                },
-              [] )
-          | Some key_prop ->
-            ( Exp.ident
-                {
-                  loc = Location.none;
-                  txt =
-                    module_access_name config
-                      (if has_multiple_literal_children then "jsxsKeyed"
-                       else "jsxKeyed");
-                },
-              [key_prop; (nolabel, unit_expr ~loc:Location.none)] )
-        in
-        Exp.apply ~loc ~attrs jsx_expr
-          ([(nolabel, make_id); (nolabel, props_record)] @ key_and_unit)
+        mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
+          children
       else
         Jsx_common.raise_error ~loc
           "JSX: element name is neither upper- or lowercase, got \"%s\""
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index c589838cde..1904e2d525 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2653,11 +2653,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
             (Diagnostics.message msg);
           Parser.expect GreaterThan p
       in
-      failwith "Unsure how you can get here"
-    (* let loc = mk_loc children_start_pos children_end_pos in
-      match (spread, children) with
-      | true, child :: _ -> child
-      | _ -> Ast_helper.Exp.make_list_expression loc children None)) *)
+      Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None
     )
   | token ->
     Scanner.pop_mode p.scanner Jsx;

From 86c9f5f49573d0277a68b23f193900832f3df356 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 9 Mar 2025 21:35:43 +0100
Subject: [PATCH 15/99] lowercase container element in classic mode

---
 compiler/syntax/src/jsx_v4.ml | 335 ++++++++++++++++++++++++----------
 1 file changed, 240 insertions(+), 95 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index d8b6904e11..0627479857 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1542,78 +1542,94 @@ let starts_with_uppercase s =
     let c = s.[0] in
     Char.uppercase_ascii c = c
 
-module AutomaticExpr = struct
-  (* There appear to be slightly different rules of transformation whether the component is upper-, lowercase or a fragment *)
-  type componentDescription =
-    | LowercasedComponent
-    | UppercasedComponent
-    | FragmentComponent
-
-  let loc_from_prop = function
-    | JSXPropPunning (_, {loc}) -> loc
-    | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
-    | JSXPropSpreading (loc, _) -> loc
-
-  let mk_record_from_props mapper (jsx_expr_loc : Location.t)
-      (props : jsx_props) : expression =
-    (* Create an artificial range from the first till the last prop *)
-    let loc =
-      match props with
-      | [] -> jsx_expr_loc
-      | head :: tail ->
-        let rec visit props =
-          match props with
-          | [] -> head
-          | [last] -> last
-          | _ :: rest -> visit rest
-        in
-        let first_item = head |> loc_from_prop in
-        let last_item = visit tail |> loc_from_prop in
-        {
-          loc_start = first_item.loc_start;
-          loc_end = last_item.loc_end;
-          loc_ghost = true;
-        }
-    in
-    (* key should be filtered out *)
-    let props =
+(* There appear to be slightly different rules of transformation whether the component is upper-, lowercase or a fragment *)
+type componentDescription =
+  | LowercasedComponent
+  | UppercasedComponent
+  | FragmentComponent
+
+let loc_from_prop = function
+  | JSXPropPunning (_, {loc}) -> loc
+  | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
+  | JSXPropSpreading (loc, _) -> loc
+
+let mk_record_from_props mapper
+    (* automatic mode always will filter this out. 
+      Upper case components for classic mode as well.
+    *)
+      (filter_key : bool) (jsx_expr_loc : Location.t) (props : jsx_props) :
+    expression =
+  (* Create an artificial range from the first till the last prop *)
+  let loc =
+    match props with
+    | [] -> jsx_expr_loc
+    | head :: tail ->
+      let rec visit props =
+        match props with
+        | [] -> head
+        | [last] -> last
+        | _ :: rest -> visit rest
+      in
+      let first_item = head |> loc_from_prop in
+      let last_item = visit tail |> loc_from_prop in
+      {
+        loc_start = first_item.loc_start;
+        loc_end = last_item.loc_end;
+        loc_ghost = true;
+      }
+  in
+  (* key should be filtered out *)
+  let props =
+    if not filter_key then props
+    else
       props
       |> List.filter (function
            | JSXPropPunning (_, {txt = "key"})
            | JSXPropValue ({txt = "key"}, _, _) ->
              false
            | _ -> true)
-    in
-    let props, spread_props =
-      match props with
-      | JSXPropSpreading (_, expr) :: rest ->
-        (rest, Some (mapper.expr mapper expr))
-      | _ -> (props, None)
-    in
+  in
+  let props, spread_props =
+    match props with
+    | JSXPropSpreading (_, expr) :: rest ->
+      (rest, Some (mapper.expr mapper expr))
+    | _ -> (props, None)
+  in
 
-    let record_fields =
-      props
-      |> List.map (function
-           | JSXPropPunning (is_optional, name) ->
-             ( {txt = Lident name.txt; loc = name.loc},
-               Exp.ident {txt = Lident name.txt; loc = name.loc},
-               is_optional )
-           | JSXPropValue (name, is_optional, value) ->
-             ( {txt = Lident name.txt; loc = name.loc},
-               mapper.expr mapper value,
-               is_optional )
-           | JSXPropSpreading (loc, _) ->
-             (* There can only be one spread expression and it is expected to be the first prop *)
-             Jsx_common.raise_error ~loc
-               "JSX: use {...p} {x: v} not {x: v} {...p} \n\
-               \     multiple spreads {...p} {...p} not allowed.")
-    in
-    {
-      pexp_desc = Pexp_record (record_fields, spread_props);
-      pexp_loc = loc;
-      pexp_attributes = [];
-    }
+  let record_fields =
+    props
+    |> List.map (function
+         | JSXPropPunning (is_optional, name) ->
+           ( {txt = Lident name.txt; loc = name.loc},
+             Exp.ident {txt = Lident name.txt; loc = name.loc},
+             is_optional )
+         | JSXPropValue (name, is_optional, value) ->
+           ( {txt = Lident name.txt; loc = name.loc},
+             mapper.expr mapper value,
+             is_optional )
+         | JSXPropSpreading (loc, _) ->
+           (* There can only be one spread expression and it is expected to be the first prop *)
+           Jsx_common.raise_error ~loc
+             "JSX: use {...p} {x: v} not {x: v} {...p} \n\
+             \     multiple spreads {...p} {...p} not allowed.")
+  in
+  {
+    pexp_desc = Pexp_record (record_fields, spread_props);
+    pexp_loc = loc;
+    pexp_attributes = [];
+  }
+
+let try_find_key_prop (props : jsx_props) : (arg_label * expression) option =
+  props
+  |> List.find_map (function
+       | JSXPropPunning (_, ({txt = "key"} as name)) ->
+         Some (Labelled name, Exp.ident {txt = Lident "key"; loc = name.loc})
+       | JSXPropValue (({txt = "key"} as name), is_optional, expr) ->
+         let arg_label = if is_optional then Optional name else Labelled name in
+         Some (arg_label, expr)
+       | _ -> None)
 
+module AutomaticExpr = struct
   let append_children_prop (config : Jsx_common.jsx_config) mapper
       (component_description : componentDescription) (props : jsx_props)
       (children : jsx_children) : jsx_props =
@@ -1664,18 +1680,6 @@ module AutomaticExpr = struct
                 [(Nolabel, Exp.array (List.map (mapper.expr mapper) xs))] );
         ]
 
-  let try_find_key_prop (props : jsx_props) : (arg_label * expression) option =
-    props
-    |> List.find_map (function
-         | JSXPropPunning (_, ({txt = "key"} as name)) ->
-           Some (Labelled name, Exp.ident {txt = Lident "key"; loc = name.loc})
-         | JSXPropValue (({txt = "key"} as name), is_optional, expr) ->
-           let arg_label =
-             if is_optional then Optional name else Labelled name
-           in
-           Some (arg_label, expr)
-         | _ -> None)
-
   let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
       (component_description : componentDescription) (elementTag : expression)
       (props : jsx_props) (children : jsx_children) : expression =
@@ -1687,7 +1691,9 @@ module AutomaticExpr = struct
     let props_with_children =
       append_children_prop config mapper component_description props children
     in
-    let props_record = mk_record_from_props mapper loc props_with_children in
+    let props_record =
+      mk_record_from_props mapper true loc props_with_children
+    in
     let jsx_expr, key_and_unit =
       let mk_element_bind (jsx_part : string) : Longident.t =
         match component_description with
@@ -1804,30 +1810,107 @@ module AutomaticExpr = struct
 end
 
 module ClassicExpr = struct
-  let mk_react_create_element mapper loc attrs (elementTag : expression)
-      (children : jsx_children) : expression =
+  let mk_react_create_element mapper loc attrs
+      (component_description : componentDescription) (elementTag : expression)
+      (props : jsx_props) (children : jsx_children) : expression =
     let more_than_one_children =
       match children with
       | JSXChildrenSpreading _ -> false
       | JSXChildrenItems xs -> List.length xs > 1
     in
-    (* children are a special prop are special in React.createElement *)
-    let children_props = empty_record ~loc:Location.none in
+    let key_arg_opt = try_find_key_prop props in
+    (* children are a separate argument in React.createElement *)
+    let props_expr =
+      match component_description with
+      | FragmentComponent -> empty_record ~loc:Location.none
+      | LowercasedComponent -> mk_record_from_props mapper false loc props
+      | UppercasedComponent -> mk_record_from_props mapper true loc props
+    in
+    let children_expr =
+      match children with
+      | JSXChildrenItems [] -> Exp.array []
+      | JSXChildrenItems [child] | JSXChildrenSpreading child -> (
+        match component_description with
+        | LowercasedComponent -> Exp.array [mapper.expr mapper child]
+        | _ -> mapper.expr mapper child)
+      | JSXChildrenItems (_ :: _ :: _ as xs) ->
+        Exp.array (List.map (mapper.expr mapper) xs)
+    in
     let args =
-      (nolabel, elementTag) :: (nolabel, children_props)
-      ::
-      (match children with
-      | JSXChildrenItems xs when more_than_one_children ->
-        [(nolabel, Exp.array (List.map (mapper.expr mapper) xs))]
-      | _ -> [])
+      match component_description with
+      | FragmentComponent -> (
+        match children with
+        | JSXChildrenItems [] -> [(nolabel, elementTag); (nolabel, props_expr)]
+        | JSXChildrenItems [child] | JSXChildrenSpreading child ->
+          [
+            (nolabel, elementTag);
+            ( nolabel,
+              Exp.record
+                [
+                  ( {txt = Lident "children"; loc = child.pexp_loc},
+                    mapper.expr mapper child,
+                    false );
+                ]
+                None );
+          ]
+        | _ ->
+          [
+            (nolabel, elementTag);
+            (* empty record for props *)
+            (nolabel, props_expr);
+            (* multiple children should have a separte argument *)
+            (nolabel, children_expr);
+          ])
+      | LowercasedComponent -> (
+        match (children, props) with
+        | JSXChildrenItems [], [] ->
+          [(nolabel, elementTag); (nolabel, Exp.array [])]
+        | (JSXChildrenItems [child] | JSXChildrenSpreading child), [] ->
+          [
+            (nolabel, elementTag);
+            (nolabel, Exp.array [mapper.expr mapper child]);
+          ]
+        | JSXChildrenItems children, [] ->
+          [
+            (nolabel, elementTag);
+            (nolabel, Exp.array (List.map (mapper.expr mapper) children));
+          ]
+        | _ ->
+          [
+            (nolabel, elementTag);
+            (labelled "props", props_expr);
+            (nolabel, children_expr);
+          ])
+      | UppercasedComponent -> (
+        match (key_arg_opt, children, props) with
+        | None, JSXChildrenItems [], [] ->
+          [(nolabel, elementTag); (nolabel, empty_record ~loc:Location.none)]
+        | None, JSXChildrenItems [], _ :: _ ->
+          [(nolabel, elementTag); (nolabel, props_expr)]
+        | Some key_arg, JSXChildrenItems [], _ ->
+          [key_arg; (nolabel, elementTag); (nolabel, props_expr)]
+        | _ ->
+          [
+            (labelled "props", props_expr);
+            (nolabel, elementTag);
+            (nolabel, children_expr);
+          ])
     in
-    Exp.apply ~loc ~attrs
-      (* ReactDOM.createElement *)
-      (if more_than_one_children then
-         Exp.ident ~loc
-           {loc; txt = Ldot (Lident "React", "createElementVariadic")}
-       else Exp.ident ~loc {loc; txt = Ldot (Lident "React", "createElement")})
-      args
+    (* f.ex ReactDOM.createElement *)
+    let creatElement : Longident.t =
+      match component_description with
+      | FragmentComponent ->
+        if more_than_one_children then
+          Ldot (Lident "React", "createElementVariadic")
+        else Ldot (Lident "React", "createElement")
+      | LowercasedComponent ->
+        Ldot (Lident "ReactDOM", "createDOMElementVariadic")
+      | UppercasedComponent -> (
+        match key_arg_opt with
+        | None -> Ldot (Lident "React", "createElement")
+        | Some _ -> Ldot (Lident "JsxPPXReactSupport", "createElementWithKey"))
+    in
+    Exp.apply ~loc ~attrs (Exp.ident ~loc {loc; txt = creatElement}) args
 
   let expr (_config : Jsx_common.jsx_config) mapper expression =
     match expression with
@@ -1840,7 +1923,69 @@ module ClassicExpr = struct
       let fragment =
         Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
       in
-      mk_react_create_element mapper loc attrs fragment children
+      mk_react_create_element mapper loc attrs FragmentComponent fragment []
+        children
+    | {
+     pexp_desc =
+       Pexp_jsx_unary_element
+         {
+           jsx_unary_element_tag_name = tag_name;
+           jsx_unary_element_props = props;
+         };
+     pexp_loc = loc;
+     pexp_attributes = attrs;
+    } ->
+      let loc = {loc with loc_ghost = true} in
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      if starts_with_lowercase name then
+        let component_name_expr =
+          let name = Longident.flatten tag_name.txt |> String.concat "." in
+          constant_string ~loc:tag_name.loc name
+        in
+        mk_react_create_element mapper loc attrs LowercasedComponent
+          component_name_expr props (JSXChildrenItems [])
+      else if starts_with_uppercase name then
+        (* MyModule *)
+        let make_id =
+          Exp.ident ~loc:tag_name.loc {txt = tag_name.txt; loc = tag_name.loc}
+        in
+        mk_react_create_element mapper loc attrs UppercasedComponent make_id
+          props (JSXChildrenItems [])
+      else
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten tag_name.txt |> String.concat ".")
+    | {
+     pexp_desc =
+       Pexp_jsx_container_element
+         {
+           jsx_container_element_tag_name_start = tag_name;
+           jsx_container_element_props = props;
+           jsx_container_element_children = children;
+         };
+     pexp_loc = loc;
+     pexp_attributes = attrs;
+    } ->
+      let loc = {loc with loc_ghost = true} in
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      if starts_with_lowercase name then
+        let component_name_expr =
+          let name = Longident.flatten tag_name.txt |> String.concat "." in
+          constant_string ~loc:tag_name.loc name
+        in
+        mk_react_create_element mapper loc attrs LowercasedComponent
+          component_name_expr props children
+      else if starts_with_uppercase name then
+        (* MyModule *)
+        let make_id =
+          Exp.ident ~loc:tag_name.loc {txt = tag_name.txt; loc = tag_name.loc}
+        in
+        mk_react_create_element mapper loc attrs UppercasedComponent make_id
+          props children
+      else
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten tag_name.txt |> String.concat ".")
     | e -> default_mapper.expr mapper e
 end
 

From 0dfd5b604221d4c16f9de531d793d7435d7b3fc0 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 10 Mar 2025 13:48:24 +0100
Subject: [PATCH 16/99] Deal with uppercase tags in classic mode.

---
 compiler/syntax/src/jsx_v4.ml | 101 +++++++++++++++++++++++++++++++---
 1 file changed, 92 insertions(+), 9 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 0627479857..66bc1aef9c 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1889,10 +1889,81 @@ module ClassicExpr = struct
           [(nolabel, elementTag); (nolabel, props_expr)]
         | Some key_arg, JSXChildrenItems [], _ ->
           [key_arg; (nolabel, elementTag); (nolabel, props_expr)]
-        | _ ->
+        | None, (JSXChildrenItems [child] | JSXChildrenSpreading child), [] ->
           [
-            (labelled "props", props_expr);
             (nolabel, elementTag);
+            ( nolabel,
+              Exp.record
+                [
+                  ( {txt = Lident "children"; loc = child.pexp_loc},
+                    mapper.expr mapper child,
+                    false );
+                ]
+                None );
+          ]
+        | None, JSXChildrenItems (_ :: _ :: _), _ ->
+          (* This one is a bit absurd, but doing it anyway to have parity with the old code *)
+          [
+            (nolabel, elementTag);
+            ( nolabel,
+              mk_record_from_props mapper false loc
+                (props
+                @ [
+                    JSXPropValue
+                      ( {txt = "children"; loc = Location.none},
+                        false,
+                        Exp.ident
+                          {
+                            txt = Ldot (Lident "React", "null");
+                            loc = Location.none;
+                          } );
+                  ]) );
+            (nolabel, children_expr);
+          ]
+        | None, (JSXChildrenItems [_] | JSXChildrenSpreading _), props ->
+          [
+            (nolabel, elementTag);
+            ( nolabel,
+              mk_record_from_props mapper false loc
+                (props
+                @ [
+                    JSXPropValue
+                      ( {txt = "children"; loc = Location.none},
+                        false,
+                        children_expr );
+                  ]) );
+          ]
+        | Some key_arg, (JSXChildrenItems [_] | JSXChildrenSpreading _), _ ->
+          [
+            key_arg;
+            (nolabel, elementTag);
+            ( nolabel,
+              mk_record_from_props mapper true loc
+                (props
+                @ [
+                    JSXPropValue
+                      ( {txt = "children"; loc = Location.none},
+                        false,
+                        children_expr );
+                  ]) );
+          ]
+        | Some key_arg, JSXChildrenItems (_ :: _), _ ->
+          [
+            key_arg;
+            (nolabel, elementTag);
+            ( nolabel,
+              mk_record_from_props mapper true loc
+                (props
+                @ [
+                    JSXPropValue
+                      ( {txt = "children"; loc = Location.none},
+                        false,
+                        Exp.ident
+                          {
+                            txt = Ldot (Lident "React", "null");
+                            loc = Location.none;
+                          } );
+                  ]) );
             (nolabel, children_expr);
           ])
     in
@@ -1906,9 +1977,19 @@ module ClassicExpr = struct
       | LowercasedComponent ->
         Ldot (Lident "ReactDOM", "createDOMElementVariadic")
       | UppercasedComponent -> (
-        match key_arg_opt with
-        | None -> Ldot (Lident "React", "createElement")
-        | Some _ -> Ldot (Lident "JsxPPXReactSupport", "createElementWithKey"))
+        match (key_arg_opt, children) with
+        | ( None,
+            (JSXChildrenItems [] | JSXChildrenItems [_] | JSXChildrenSpreading _)
+          ) ->
+          Ldot (Lident "React", "createElement")
+        | None, JSXChildrenItems (_ :: _ :: _) ->
+          Ldot (Lident "React", "createElementVariadic")
+        | ( Some _,
+            (JSXChildrenItems [] | JSXChildrenItems [_] | JSXChildrenSpreading _)
+          ) ->
+          Ldot (Lident "JsxPPXReactSupport", "createElementWithKey")
+        | Some _, JSXChildrenItems (_ :: _) ->
+          Ldot (Lident "JsxPPXReactSupport", "createElementVariadicWithKey"))
     in
     Exp.apply ~loc ~attrs (Exp.ident ~loc {loc; txt = creatElement}) args
 
@@ -1945,9 +2026,10 @@ module ClassicExpr = struct
         mk_react_create_element mapper loc attrs LowercasedComponent
           component_name_expr props (JSXChildrenItems [])
       else if starts_with_uppercase name then
-        (* MyModule *)
+        (* MyModule.make *)
         let make_id =
-          Exp.ident ~loc:tag_name.loc {txt = tag_name.txt; loc = tag_name.loc}
+          Exp.ident ~loc:tag_name.loc
+            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
         in
         mk_react_create_element mapper loc attrs UppercasedComponent make_id
           props (JSXChildrenItems [])
@@ -1976,9 +2058,10 @@ module ClassicExpr = struct
         mk_react_create_element mapper loc attrs LowercasedComponent
           component_name_expr props children
       else if starts_with_uppercase name then
-        (* MyModule *)
+        (* MyModule.make *)
         let make_id =
-          Exp.ident ~loc:tag_name.loc {txt = tag_name.txt; loc = tag_name.loc}
+          Exp.ident ~loc:tag_name.loc
+            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
         in
         mk_react_create_element mapper loc attrs UppercasedComponent make_id
           props children

From 203ff25c83b2d39af877b38cb53d232dc5672a42 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 10 Mar 2025 20:02:32 +0100
Subject: [PATCH 17/99] Remove old code

---
 compiler/syntax/src/jsx_v4.ml | 499 ----------------------------------
 1 file changed, 499 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 66bc1aef9c..bf2372e4c0 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -51,74 +51,6 @@ let ref_type loc =
     {loc; txt = Ldot (Ldot (Lident "Js", "Nullable"), "t")}
     [ref_type_var loc]
 
-type 'a children = ListLiteral of 'a | Exact of 'a
-
-(* if children is a list, convert it to an array while mapping each element. If not, just map over it, as usual *)
-let transform_children_if_list_upper ~mapper the_list =
-  let rec transformChildren_ the_list accum =
-    (* not in the sense of converting a list to an array; convert the AST
-       reprensentation of a list to the AST reprensentation of an array *)
-    match the_list with
-    | {pexp_desc = Pexp_construct ({txt = Lident "[]"}, None)} -> (
-      match accum with
-      | [single_element] -> Exact single_element
-      | accum -> ListLiteral (Exp.array (List.rev accum)))
-    | {
-     pexp_desc =
-       Pexp_construct
-         ({txt = Lident "::"}, Some {pexp_desc = Pexp_tuple [v; acc]});
-    } ->
-      transformChildren_ acc (mapper.expr mapper v :: accum)
-    | not_a_list -> Exact (mapper.expr mapper not_a_list)
-  in
-  transformChildren_ the_list []
-
-let transform_children_if_list ~mapper the_list =
-  let rec transformChildren_ the_list accum =
-    (* not in the sense of converting a list to an array; convert the AST
-       reprensentation of a list to the AST reprensentation of an array *)
-    match the_list with
-    | {pexp_desc = Pexp_construct ({txt = Lident "[]"}, None)} ->
-      Exp.array (List.rev accum)
-    | {
-     pexp_desc =
-       Pexp_construct
-         ({txt = Lident "::"}, Some {pexp_desc = Pexp_tuple [v; acc]});
-    } ->
-      transformChildren_ acc (mapper.expr mapper v :: accum)
-    | not_a_list -> mapper.expr mapper not_a_list
-  in
-  transformChildren_ the_list []
-
-let extract_children ?(remove_last_position_unit = false) ~loc
-    props_and_children =
-  let rec allButLast_ lst acc =
-    match lst with
-    | [] -> []
-    | [(Nolabel, {pexp_desc = Pexp_construct ({txt = Lident "()"}, None)})] ->
-      acc
-    | (Nolabel, {pexp_loc}) :: _rest ->
-      Jsx_common.raise_error ~loc:pexp_loc
-        "JSX: found non-labelled argument before the last position"
-    | arg :: rest -> allButLast_ rest (arg :: acc)
-  in
-  let all_but_last lst = allButLast_ lst [] |> List.rev in
-  match
-    List.partition
-      (fun (label, _) -> label = labelled "children")
-      props_and_children
-  with
-  | [], props ->
-    (* no children provided? Place a placeholder list *)
-    ( Exp.construct {loc = Location.none; txt = Lident "[]"} None,
-      if remove_last_position_unit then all_but_last props else props )
-  | [(_, children_expr)], props ->
-    ( children_expr,
-      if remove_last_position_unit then all_but_last props else props )
-  | _ ->
-    Jsx_common.raise_error ~loc
-      "JSX: somehow there's more than one `children` label"
-
 let merlin_focus = ({loc = Location.none; txt = "merlin.focus"}, PStr [])
 
 (* Helper method to filter out any attribute that isn't [@react.component] *)
@@ -180,76 +112,6 @@ let make_module_name file_name nested_modules fn_name =
   let full_module_name = String.concat "$" full_module_name in
   full_module_name
 
-(*
-  AST node builders
-  These functions help us build AST nodes that are needed when transforming a [@react.component] into a
-  constructor and a props external
-  *)
-
-(* make record from props and spread props if exists *)
-let record_from_props ~loc ~remove_key call_arguments =
-  let spread_props_label = "_spreadProps" in
-  let rec remove_last_position_unit_aux props acc =
-    match props with
-    | [] -> acc
-    | [(Nolabel, {pexp_desc = Pexp_construct ({txt = Lident "()"}, None)}, _)]
-      ->
-      acc
-    | (Nolabel, {pexp_loc}, _) :: _rest ->
-      Jsx_common.raise_error ~loc:pexp_loc
-        "JSX: found non-labelled argument before the last position"
-    | ((Labelled {txt}, {pexp_loc}, _) as prop) :: rest
-    | ((Optional {txt}, {pexp_loc}, _) as prop) :: rest ->
-      if txt = spread_props_label then
-        match acc with
-        | [] -> remove_last_position_unit_aux rest (prop :: acc)
-        | _ ->
-          Jsx_common.raise_error ~loc:pexp_loc
-            "JSX: use {...p} {x: v} not {x: v} {...p} \n\
-            \     multiple spreads {...p} {...p} not allowed."
-      else remove_last_position_unit_aux rest (prop :: acc)
-  in
-  let props, props_to_spread =
-    remove_last_position_unit_aux call_arguments []
-    |> List.rev
-    |> List.partition (fun (label, _, _) ->
-           match label with
-           | Labelled {txt = "_spreadProps"} -> false
-           | _ -> true)
-  in
-  let props =
-    if remove_key then
-      props
-      |> List.filter (fun (arg_label, _, _) -> "key" <> get_label arg_label)
-    else props
-  in
-
-  let process_prop (arg_label, ({pexp_loc} as pexpr), optional) =
-    (* In case filed label is "key" only then change expression to option *)
-    let id = get_label arg_label in
-    ({txt = Lident id; loc = pexp_loc}, pexpr, optional || is_optional arg_label)
-  in
-  let fields = props |> List.map process_prop in
-  let spread_fields =
-    props_to_spread |> List.map (fun (_, expression, _) -> expression)
-  in
-  match (fields, spread_fields) with
-  | [], [spread_props] | [], spread_props :: _ -> spread_props
-  | _, [] ->
-    {
-      pexp_desc = Pexp_record (fields, None);
-      pexp_loc = loc;
-      pexp_attributes = [];
-    }
-  | _, [spread_props]
-  (* take the first spreadProps only *)
-  | _, spread_props :: _ ->
-    {
-      pexp_desc = Pexp_record (fields, Some spread_props);
-      pexp_loc = loc;
-      pexp_attributes = [];
-    }
-
 (* make type params for make fn arguments *)
 (* let make = ({id, name, children}: props<'id, 'name, 'children>) *)
 let make_props_type_params_tvar named_type_list =
@@ -387,269 +249,6 @@ let make_props_record_type_sig ~core_type_of_attr ~external_
       make_type_decls_with_core_type props_name loc core_type
         typ_vars_of_core_type)
 
-let transform_uppercase_call3 ~config module_path mapper jsx_expr_loc
-    call_expr_loc attrs call_arguments =
-  let children, args_with_labels =
-    extract_children ~remove_last_position_unit:true ~loc:jsx_expr_loc
-      call_arguments
-  in
-  let args_for_make = args_with_labels in
-  let children_expr = transform_children_if_list_upper ~mapper children in
-  let recursively_transformed_args_for_make =
-    args_for_make
-    |> List.map (fun (label, expression) ->
-           (label, mapper.expr mapper expression, false))
-  in
-  let children_arg = ref None in
-  let args =
-    recursively_transformed_args_for_make
-    @
-    match children_expr with
-    | Exact children -> [(labelled "children", children, false)]
-    | ListLiteral {pexp_desc = Pexp_array list} when list = [] -> []
-    | ListLiteral expression -> (
-      (* this is a hack to support react components that introspect into their children *)
-      children_arg := Some expression;
-      match config.Jsx_common.mode with
-      | "automatic" ->
-        [
-          ( labelled "children",
-            Exp.apply
-              (Exp.ident
-                 {txt = module_access_name config "array"; loc = Location.none})
-              [(Nolabel, expression)],
-            false );
-        ]
-      | _ ->
-        [
-          ( labelled "children",
-            Exp.ident {loc = Location.none; txt = Ldot (Lident "React", "null")},
-            false );
-        ])
-  in
-
-  let is_cap str = String.capitalize_ascii str = str in
-  let ident ~suffix =
-    match module_path with
-    | Lident _ -> Ldot (module_path, suffix)
-    | Ldot (_modulePath, value) as full_path when is_cap value ->
-      Ldot (full_path, suffix)
-    | module_path -> module_path
-  in
-  let is_empty_record {pexp_desc} =
-    match pexp_desc with
-    | Pexp_record (label_decls, _) when List.length label_decls = 0 -> true
-    | _ -> false
-  in
-
-  (* handle key, ref, children *)
-  (* React.createElement(Component.make, props, ...children) *)
-  let record = record_from_props ~loc:jsx_expr_loc ~remove_key:true args in
-  let props =
-    if is_empty_record record then empty_record ~loc:jsx_expr_loc else record
-  in
-  let key_prop =
-    args
-    |> List.filter_map (fun (arg_label, e, _opt) ->
-           if "key" = get_label arg_label then Some (arg_label, e) else None)
-  in
-  let make_i_d =
-    Exp.ident ~loc:call_expr_loc
-      {txt = ident ~suffix:"make"; loc = call_expr_loc}
-  in
-  match config.mode with
-  (* The new jsx transform *)
-  | "automatic" ->
-    let jsx_expr, key_and_unit =
-      match (!children_arg, key_prop) with
-      | None, key :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = module_access_name config "jsxKeyed"},
-          [key; (nolabel, unit_expr ~loc:Location.none)] )
-      | None, [] ->
-        ( Exp.ident {loc = Location.none; txt = module_access_name config "jsx"},
-          [] )
-      | Some _, key :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = module_access_name config "jsxsKeyed"},
-          [key; (nolabel, unit_expr ~loc:Location.none)] )
-      | Some _, [] ->
-        ( Exp.ident {loc = Location.none; txt = module_access_name config "jsxs"},
-          [] )
-    in
-    Exp.apply ~loc:jsx_expr_loc ~attrs jsx_expr
-      ([(nolabel, make_i_d); (nolabel, props)] @ key_and_unit)
-  | _ -> (
-    match (!children_arg, key_prop) with
-    | None, key :: _ ->
-      Exp.apply ~loc:jsx_expr_loc ~attrs
-        (Exp.ident
-           {
-             loc = Location.none;
-             txt = Ldot (Lident "JsxPPXReactSupport", "createElementWithKey");
-           })
-        [key; (nolabel, make_i_d); (nolabel, props)]
-    | None, [] ->
-      Exp.apply ~loc:jsx_expr_loc ~attrs
-        (Exp.ident
-           {loc = Location.none; txt = Ldot (Lident "React", "createElement")})
-        [(nolabel, make_i_d); (nolabel, props)]
-    | Some children, key :: _ ->
-      Exp.apply ~loc:jsx_expr_loc ~attrs
-        (Exp.ident
-           {
-             loc = Location.none;
-             txt =
-               Ldot (Lident "JsxPPXReactSupport", "createElementVariadicWithKey");
-           })
-        [key; (nolabel, make_i_d); (nolabel, props); (nolabel, children)]
-    | Some children, [] ->
-      Exp.apply ~loc:jsx_expr_loc ~attrs
-        (Exp.ident
-           {
-             loc = Location.none;
-             txt = Ldot (Lident "React", "createElementVariadic");
-           })
-        [(nolabel, make_i_d); (nolabel, props); (nolabel, children)])
-
-let transform_lowercase_call3 ~config mapper jsx_expr_loc call_expr_loc attrs
-    call_arguments id =
-  let component_name_expr = constant_string ~loc:call_expr_loc id in
-  match config.Jsx_common.mode with
-  (* the new jsx transform *)
-  | "automatic" ->
-    let element_binding =
-      match config.module_ |> String.lowercase_ascii with
-      | "react" -> Lident "ReactDOM"
-      | _generic -> module_access_name config "Elements"
-    in
-
-    let children, non_children_props =
-      extract_children ~remove_last_position_unit:true ~loc:jsx_expr_loc
-        call_arguments
-    in
-    let args_for_make = non_children_props in
-    let children_expr = transform_children_if_list_upper ~mapper children in
-    let recursively_transformed_args_for_make =
-      args_for_make
-      |> List.map (fun (label, expression) ->
-             (label, mapper.expr mapper expression, false))
-    in
-    let children_arg = ref None in
-    let args =
-      recursively_transformed_args_for_make
-      @
-      match children_expr with
-      | Exact children ->
-        [
-          ( labelled "children",
-            Exp.apply
-              (Exp.ident
-                 {
-                   txt = Ldot (element_binding, "someElement");
-                   loc = Location.none;
-                 })
-              [(Nolabel, children)],
-            true );
-        ]
-      | ListLiteral {pexp_desc = Pexp_array list} when list = [] -> []
-      | ListLiteral expression ->
-        (* this is a hack to support react components that introspect into their children *)
-        children_arg := Some expression;
-        [
-          ( labelled "children",
-            Exp.apply
-              (Exp.ident
-                 {txt = module_access_name config "array"; loc = Location.none})
-              [(Nolabel, expression)],
-            false );
-        ]
-    in
-    let is_empty_record {pexp_desc} =
-      match pexp_desc with
-      | Pexp_record (label_decls, _) when List.length label_decls = 0 -> true
-      | _ -> false
-    in
-    let record = record_from_props ~loc:jsx_expr_loc ~remove_key:true args in
-    let props =
-      if is_empty_record record then empty_record ~loc:jsx_expr_loc else record
-    in
-    let key_prop =
-      args
-      |> List.filter_map (fun (arg_label, e, _opt) ->
-             if "key" = get_label arg_label then Some (arg_label, e) else None)
-    in
-    let jsx_expr, key_and_unit =
-      match (!children_arg, key_prop) with
-      | None, key :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (element_binding, "jsxKeyed")},
-          [key; (nolabel, unit_expr ~loc:Location.none)] )
-      | None, [] ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (element_binding, "jsx")},
-          [] )
-      | Some _, key :: _ ->
-        ( Exp.ident
-            {loc = Location.none; txt = Ldot (element_binding, "jsxsKeyed")},
-          [key; (nolabel, unit_expr ~loc:Location.none)] )
-      | Some _, [] ->
-        ( Exp.ident {loc = Location.none; txt = Ldot (element_binding, "jsxs")},
-          [] )
-    in
-    Exp.apply ~loc:jsx_expr_loc ~attrs jsx_expr
-      ([(nolabel, component_name_expr); (nolabel, props)] @ key_and_unit)
-  | _ ->
-    let children, non_children_props =
-      extract_children ~loc:jsx_expr_loc call_arguments
-    in
-    let children_expr = transform_children_if_list ~mapper children in
-    let create_element_call =
-      match children with
-      (* [@JSX] div(~children=[a]), coming from <div> a </div> *)
-      | {
-       pexp_desc =
-         ( Pexp_construct ({txt = Lident "::"}, Some {pexp_desc = Pexp_tuple _})
-         | Pexp_construct ({txt = Lident "[]"}, None) );
-      } ->
-        "createDOMElementVariadic"
-      (* [@JSX] div(~children= value), coming from <div> ...(value) </div> *)
-      | {pexp_loc} ->
-        Jsx_common.raise_error ~loc:pexp_loc
-          "A spread as a DOM element's children don't make sense written \
-           together. You can simply remove the spread."
-    in
-    let args =
-      match non_children_props with
-      | [_justTheUnitArgumentAtEnd] ->
-        [
-          (* "div" *)
-          (nolabel, component_name_expr);
-          (* [|moreCreateElementCallsHere|] *)
-          (nolabel, children_expr);
-        ]
-      | non_empty_props ->
-        let props_record =
-          record_from_props ~loc:Location.none ~remove_key:false
-            (non_empty_props |> List.map (fun (l, e) -> (l, e, false)))
-        in
-        [
-          (* "div" *)
-          (nolabel, component_name_expr);
-          (* ReactDOM.domProps(~className=blabla, ~foo=bar, ()) *)
-          (labelled "props", props_record);
-          (* [|moreCreateElementCallsHere|] *)
-          (nolabel, children_expr);
-        ]
-    in
-    Exp.apply ~loc:jsx_expr_loc ~attrs
-      (* ReactDOM.createElement *)
-      (Exp.ident
-         {
-           loc = Location.none;
-           txt = Ldot (Lident "ReactDOM", create_element_call);
-         })
-      args
-
 let rec recursively_transform_named_args_for_make expr args newtypes core_type =
   match expr.pexp_desc with
   (* TODO: make this show up with a loc. *)
@@ -1496,40 +1095,6 @@ let transform_signature_item ~config item =
         "Only one JSX component call can exist on a component at one time")
   | _ -> [item]
 
-let _transform_jsx_call ~config mapper call_expression call_arguments
-    jsx_expr_loc attrs =
-  match call_expression.pexp_desc with
-  | Pexp_ident caller -> (
-    match caller with
-    | {txt = Lident "createElement"; loc} ->
-      Jsx_common.raise_error ~loc
-        "JSX: `createElement` should be preceeded by a module name."
-    (* Foo.createElement(~prop1=foo, ~prop2=bar, ~children=[], ()) *)
-    | {loc; txt = Ldot (module_path, ("createElement" | "make"))} ->
-      transform_uppercase_call3 ~config module_path mapper jsx_expr_loc loc
-        attrs call_arguments
-    (* div(~prop1=foo, ~prop2=bar, ~children=[bla], ()) *)
-    (* turn that into
-       ReactDOM.createElement(~props=ReactDOM.props(~props1=foo, ~props2=bar, ()), [|bla|]) *)
-    | {loc; txt = Lident id} ->
-      transform_lowercase_call3 ~config mapper jsx_expr_loc loc attrs
-        call_arguments id
-    | {txt = Ldot (_, anything_not_create_element_or_make); loc} ->
-      Jsx_common.raise_error ~loc
-        "JSX: the JSX attribute should be attached to a \
-         `YourModuleName.createElement` or `YourModuleName.make` call. We saw \
-         `%s` instead"
-        anything_not_create_element_or_make
-    | {txt = Lapply _; loc} ->
-      (* don't think there's ever a case where this is reached *)
-      Jsx_common.raise_error ~loc
-        "JSX: encountered a weird case while processing the code. Please \
-         report this!")
-  | _ ->
-    Jsx_common.raise_error ~loc:call_expression.pexp_loc
-      "JSX: `createElement` should be preceeded by a simple, direct module \
-       name."
-
 let starts_with_lowercase s =
   if String.length s = 0 then false
   else
@@ -2077,70 +1642,6 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
   | "automatic" -> AutomaticExpr.expr ~config mapper expression
   | "classic" -> ClassicExpr.expr config mapper expression
   | _ -> default_mapper.expr mapper expression
-(*
-  match expression with
-  | {
-   pexp_desc = Pexp_jsx_fragment (_, children, _);
-   pexp_loc = loc;
-   pexp_attributes = attrs;
-  } ->
-    let loc = {loc with loc_ghost = true} in
-    let fragment =
-      match config.mode with
-      | "automatic" ->
-        Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
-      | "classic" | _ ->
-        Exp.ident ~loc {loc; txt = Ldot (Lident "React", "fragment")}
-    in
-    mk_react_create_element config mapper loc attrs fragment children
-  | {
-      pexp_desc =
-        Pexp_jsx_unary_element
-          {jsx_unary_element_tag_name = name; jsx_unary_element_props = props};
-      pexp_loc = loc;
-      pexp_attributes = attrs;
-    } as e ->
-    let elementTag =
-      match name.txt with
-      | Longident.Lident elementName when starts_with_lowercase elementName -> (
-        (* For example 'input' *)
-        let component_name_expr = constant_string ~loc:name.loc elementName in
-        match config.mode with
-        | "automatic" ->
-          let element_binding =
-            match config.module_ |> String.lowercase_ascii with
-            | "react" -> Lident "ReactDOM"
-            | _generic -> module_access_name config "Elements"
-          in
-          Exp.ident ~loc {loc; txt = Lident elementName}
-        | "classic" | _ -> ()
-      )
-      | _ ->
-        Jsx_common.raise_error ~loc
-          "JSX: element name is neither upper- or lowercase, got \"%s\""
-          (Longident.flatten name.txt |> String.concat ".")
-    in
-    e
-  (* Does the function application have the @JSX attribute? *)
-  | {
-   pexp_desc = Pexp_apply {funct = call_expression; args = call_arguments};
-   pexp_attributes;
-   pexp_loc;
-  } -> (
-    let jsx_attribute, non_jsx_attributes =
-      List.partition
-        (fun (attribute, _) -> attribute.txt = "JSX")
-        pexp_attributes
-    in
-    match (jsx_attribute, non_jsx_attributes) with
-    (* no JSX attribute *)
-    | [], _ -> default_mapper.expr mapper expression
-    | _, non_jsx_attributes ->
-      transform_jsx_call ~config mapper call_expression call_arguments pexp_loc
-        non_jsx_attributes)
-  (* Delegate to the default mapper, a deep identity traversal *)
-  | e -> default_mapper.expr mapper e
-*)
 
 let module_binding ~(config : Jsx_common.jsx_config) mapper module_binding =
   config.nested_modules <- module_binding.pmb_name.txt :: config.nested_modules;

From a273f2efe732d096e8dc6f3845496dcc827df61f Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 11:50:25 +0100
Subject: [PATCH 18/99] Improve recovery of incomplete jsx tags. Port frontend
 completion.

---
 analysis/src/CompletionFrontEnd.ml           | 23 ++++++-
 analysis/src/CompletionJsx.ml                | 69 ++++++++++----------
 analysis/src/Utils.ml                        |  2 +
 compiler/syntax/src/res_core.ml              | 26 +++-----
 compiler/syntax/src/res_parsetree_viewer.ml  | 20 +-----
 compiler/syntax/src/res_parsetree_viewer.mli |  1 -
 compiler/syntax/src/res_printer.ml           |  5 +-
 7 files changed, 70 insertions(+), 76 deletions(-)

diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
index 1ba52807d1..54fb18a63d 100644
--- a/analysis/src/CompletionFrontEnd.ml
+++ b/analysis/src/CompletionFrontEnd.ml
@@ -1325,10 +1325,27 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
                         inJsx = !inJsxContext;
                       }))
             | None -> ())
-        | Pexp_apply {funct = {pexp_desc = Pexp_ident compName}; args}
-          when Res_parsetree_viewer.is_jsx_expression expr ->
+        | Pexp_jsx_unary_element
+            {
+              jsx_unary_element_tag_name = compName;
+              jsx_unary_element_props = props;
+            }
+        | Pexp_jsx_container_element
+            {
+              jsx_container_element_tag_name_start = compName;
+              jsx_container_element_props = props;
+            } ->
           inJsxContext := true;
-          let jsxProps = CompletionJsx.extractJsxProps ~compName ~args in
+          let children =
+            match expr.pexp_desc with
+            | Pexp_jsx_container_element
+                {jsx_container_element_children = children} ->
+              children
+            | _ -> JSXChildrenItems []
+          in
+          let jsxProps =
+            CompletionJsx.extractJsxProps ~compName ~props ~children
+          in
           let compNamePath = flattenLidCheckDot ~jsx:true compName in
           if debug then
             Printf.printf "JSX <%s:%s %s> _children:%s\n"
diff --git a/analysis/src/CompletionJsx.ml b/analysis/src/CompletionJsx.ml
index 5014a665c8..7feca33b90 100644
--- a/analysis/src/CompletionJsx.ml
+++ b/analysis/src/CompletionJsx.ml
@@ -455,40 +455,39 @@ let findJsxPropsCompletable ~jsxProps ~endPos ~posBeforeCursor
   in
   loop jsxProps.props
 
-let extractJsxProps ~(compName : Longident.t Location.loc) ~args =
-  let thisCaseShouldNotHappen =
-    {
-      compName = Location.mknoloc (Longident.Lident "");
-      props = [];
-      childrenStart = None;
-    }
+let extractJsxProps ~(compName : Longident.t Location.loc) ~props ~children =
+  let open Parsetree in
+  let childrenStart =
+    match children with
+    | JSXChildrenItems [] -> None
+    | JSXChildrenSpreading child | JSXChildrenItems (child :: _) ->
+      if child.pexp_loc.loc_ghost then None else Some (Loc.start child.pexp_loc)
   in
-  let rec processProps ~acc args =
-    match args with
-    | (Asttypes.Labelled {txt = "children"}, {Parsetree.pexp_loc}) :: _ ->
-      {
-        compName;
-        props = List.rev acc;
-        childrenStart =
-          (if pexp_loc.loc_ghost then None else Some (Loc.start pexp_loc));
-      }
-    | ( (Labelled {txt = s; loc} | Optional {txt = s; loc}),
-        (eProp : Parsetree.expression) )
-      :: rest -> (
-      let namedArgLoc = if loc = Location.none then None else Some loc in
-      match namedArgLoc with
-      | Some loc ->
-        processProps
-          ~acc:
-            ({
-               name = s;
-               posStart = Loc.start loc;
-               posEnd = Loc.end_ loc;
-               exp = eProp;
-             }
-            :: acc)
-          rest
-      | None -> processProps ~acc rest)
-    | _ -> thisCaseShouldNotHappen
+  let props =
+    props
+    |> List.map (function
+         | JSXPropPunning (_, name) ->
+           {
+             name = name.txt;
+             posStart = Loc.start name.loc;
+             posEnd = Loc.end_ name.loc;
+             exp =
+               Ast_helper.Exp.ident
+                 {txt = Longident.Lident name.txt; loc = name.loc};
+           }
+         | JSXPropValue (name, _, value) ->
+           {
+             name = name.txt;
+             posStart = Loc.start name.loc;
+             posEnd = Loc.end_ name.loc;
+             exp = value;
+           }
+         | JSXPropSpreading (loc, expr) ->
+           {
+             name = "_spreadProps";
+             posStart = Loc.start loc;
+             posEnd = Loc.end_ loc;
+             exp = expr;
+           })
   in
-  args |> processProps ~acc:[]
+  {compName; props; childrenStart}
diff --git a/analysis/src/Utils.ml b/analysis/src/Utils.ml
index 1a068afedb..3892a7b188 100644
--- a/analysis/src/Utils.ml
+++ b/analysis/src/Utils.ml
@@ -112,6 +112,8 @@ let identifyPexp pexp =
   | Pexp_extension _ -> "Pexp_extension"
   | Pexp_open _ -> "Pexp_open"
   | Pexp_jsx_fragment _ -> "Pexp_jsx_fragment"
+  | Pexp_jsx_unary_element _ -> "Pexp_jsx_unary_element"
+  | Pexp_jsx_container_element _ -> "Pexp_jsx_container_element"
 
 let identifyPpat pat =
   match pat with
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 1904e2d525..216e06e045 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -145,7 +145,6 @@ module InExternal = struct
   let status = ref false
 end
 
-(* let jsx_attr = (Location.mknoloc "JSX", Parsetree.PStr []) *)
 let ternary_attr = (Location.mknoloc "res.ternary", Parsetree.PStr [])
 let if_let_attr = (Location.mknoloc "res.iflet", Parsetree.PStr [])
 let make_await_attr loc = (Location.mkloc "res.await" loc, Parsetree.PStr [])
@@ -2598,11 +2597,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
     Parser.expect GreaterThan p;
     let loc = mk_loc jsx_start_pos p.Parser.start_pos in
     (* Ast_helper.Exp.make_list_expression loc [] None no children *)
-    let desc =
-      Parsetree.Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = name; jsx_unary_element_props = jsx_props}
-    in
-    {pexp_desc = desc; pexp_loc = loc; pexp_attributes = []}
+    Ast_helper.Exp.jsx_unary_element ~loc name jsx_props
   | GreaterThan -> (
     (* <foo a=b> bar </foo> *)
     (* let children_start_pos = p.Parser.start_pos in *)
@@ -2623,15 +2618,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
       Scanner.pop_mode p.scanner Jsx;
       Parser.expect GreaterThan p;
       let loc = mk_loc jsx_start_pos p.Parser.start_pos in
-      let desc =
-        Parsetree.Pexp_jsx_container_element
-          {
-            jsx_container_element_tag_name_start = name;
-            jsx_container_element_props = jsx_props;
-            jsx_container_element_children = children;
-          }
-      in
-      {pexp_desc = desc; pexp_loc = loc; pexp_attributes = []}
+      Ast_helper.Exp.jsx_container_element ~loc name jsx_props children
       (* let loc = mk_loc children_start_pos children_end_pos in
       match (spread, children) with
       | true, child :: _ -> child
@@ -2653,12 +2640,17 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
             (Diagnostics.message msg);
           Parser.expect GreaterThan p
       in
-      Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None
+      Ast_helper.Exp.jsx_container_element
+        ~loc:(mk_loc jsx_start_pos p.end_pos)
+        name jsx_props children
+    (* Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None *)
     )
   | token ->
     Scanner.pop_mode p.scanner Jsx;
     Parser.err p (Diagnostics.unexpected token p.breadcrumbs);
-    Ast_helper.Exp.make_list_expression Location.none [] None
+    Ast_helper.Exp.jsx_unary_element
+      ~loc:(mk_loc jsx_start_pos p.end_pos)
+      name jsx_props
 
 (* and parse_jsx_opening_or_self_closing_element_old ~start_pos p =
   let jsx_start_pos = p.Parser.start_pos in
diff --git a/compiler/syntax/src/res_parsetree_viewer.ml b/compiler/syntax/src/res_parsetree_viewer.ml
index ff33dd4156..0826bfca4a 100644
--- a/compiler/syntax/src/res_parsetree_viewer.ml
+++ b/compiler/syntax/src/res_parsetree_viewer.ml
@@ -485,26 +485,12 @@ let filter_fragile_match_attributes attrs =
     attrs
 
 let is_jsx_expression expr =
-  let rec loop attrs =
-    match attrs with
-    | [] -> false
-    | ({Location.txt = "JSX"}, _) :: _ -> true
-    | _ :: attrs -> loop attrs
-  in
   match expr.pexp_desc with
-  | Pexp_jsx_fragment _ -> true
-  | Pexp_apply _ -> loop expr.Parsetree.pexp_attributes
+  | Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
+  | Pexp_jsx_container_element _ ->
+    true
   | _ -> false
 
-let has_jsx_attribute attributes =
-  let rec loop attrs =
-    match attrs with
-    | [] -> false
-    | ({Location.txt = "JSX"}, _) :: _ -> true
-    | _ :: attrs -> loop attrs
-  in
-  loop attributes
-
 let should_indent_binary_expr expr =
   let same_precedence_sub_expression operator sub_expression =
     match sub_expression with
diff --git a/compiler/syntax/src/res_parsetree_viewer.mli b/compiler/syntax/src/res_parsetree_viewer.mli
index e74233eda9..89ec4a2b38 100644
--- a/compiler/syntax/src/res_parsetree_viewer.mli
+++ b/compiler/syntax/src/res_parsetree_viewer.mli
@@ -88,7 +88,6 @@ val filter_fragile_match_attributes :
   Parsetree.attributes -> Parsetree.attributes
 
 val is_jsx_expression : Parsetree.expression -> bool
-val has_jsx_attribute : Parsetree.attributes -> bool
 
 val should_indent_binary_expr : Parsetree.expression -> bool
 val should_inline_rhs_binary_expr : Parsetree.expression -> bool
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index a5237de235..dc327a5dd3 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -3420,9 +3420,8 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
     | Pexp_ifthenelse _ ->
       true
     | Pexp_match _ when ParsetreeViewer.is_if_let_expr e -> true
-    | Pexp_jsx_fragment _ -> true
-    | Pexp_construct _ when ParsetreeViewer.has_jsx_attribute e.pexp_attributes
-      ->
+    | Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
+    | Pexp_jsx_container_element _ ->
       true
     | _ -> false
   in

From 998edbec03faf226dd79c3d924097ea17f156109 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 12:20:53 +0100
Subject: [PATCH 19/99] Correct range of incomplete jsx elements

---
 analysis/src/CompletionJsx.ml   | 2 +-
 compiler/syntax/src/res_core.ml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/analysis/src/CompletionJsx.ml b/analysis/src/CompletionJsx.ml
index 7feca33b90..0c49ae0086 100644
--- a/analysis/src/CompletionJsx.ml
+++ b/analysis/src/CompletionJsx.ml
@@ -472,7 +472,7 @@ let extractJsxProps ~(compName : Longident.t Location.loc) ~props ~children =
              posStart = Loc.start name.loc;
              posEnd = Loc.end_ name.loc;
              exp =
-               Ast_helper.Exp.ident
+               Ast_helper.Exp.ident ~loc:name.loc
                  {txt = Longident.Lident name.txt; loc = name.loc};
            }
          | JSXPropValue (name, _, value) ->
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 216e06e045..857ef51f2c 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2641,7 +2641,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
           Parser.expect GreaterThan p
       in
       Ast_helper.Exp.jsx_container_element
-        ~loc:(mk_loc jsx_start_pos p.end_pos)
+        ~loc:(mk_loc jsx_start_pos p.prev_end_pos)
         name jsx_props children
     (* Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None *)
     )
@@ -2649,7 +2649,7 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
     Scanner.pop_mode p.scanner Jsx;
     Parser.err p (Diagnostics.unexpected token p.breadcrumbs);
     Ast_helper.Exp.jsx_unary_element
-      ~loc:(mk_loc jsx_start_pos p.end_pos)
+      ~loc:(mk_loc jsx_start_pos p.prev_end_pos)
       name jsx_props
 
 (* and parse_jsx_opening_or_self_closing_element_old ~start_pos p =

From fcf2d90f16d65a6ae661a24bc1def5a7095bd4d0 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 17:40:04 +0100
Subject: [PATCH 20/99] Update semantic tokens

---
 analysis/src/SemanticTokens.ml                | 83 +++++++++----------
 compiler/frontend/bs_ast_mapper.ml            |  7 +-
 compiler/ml/ast_helper.ml                     |  8 +-
 compiler/ml/ast_helper.mli                    |  4 +
 compiler/ml/ast_mapper.ml                     |  7 +-
 compiler/ml/parsetree.ml                      | 11 ++-
 compiler/syntax/src/res_core.ml               | 41 +++++----
 .../tests/src/expected/Highlight.res.txt      | 28 +++++--
 8 files changed, 113 insertions(+), 76 deletions(-)

diff --git a/analysis/src/SemanticTokens.ml b/analysis/src/SemanticTokens.ml
index cbd435a5c4..2e4c532ae7 100644
--- a/analysis/src/SemanticTokens.ml
+++ b/analysis/src/SemanticTokens.ml
@@ -120,9 +120,7 @@ let emitLongident ?(backwards = false) ?(jsx = false)
   let rec flatten acc lid =
     match lid with
     | Longident.Lident txt -> txt :: acc
-    | Ldot (lid, txt) ->
-      let acc = if jsx && txt = "createElement" then acc else txt :: acc in
-      flatten acc lid
+    | Ldot (lid, txt) -> flatten (txt :: acc) lid
     | _ -> acc
   in
   let rec loop pos segments =
@@ -247,8 +245,7 @@ let command ~debug ~emitter ~path =
                ~posEnd:(Some (Loc.end_ loc))
                ~lid ~debug;
       Ast_iterator.default_iterator.expr iterator e
-    | Pexp_apply {funct = {pexp_desc = Pexp_ident lident; pexp_loc}; args}
-      when Res_parsetree_viewer.is_jsx_expression e ->
+    | Pexp_jsx_unary_element {jsx_unary_element_tag_name = lident} ->
       (*
          Angled brackets:
           - These are handled in the grammar:  <>  </>  </  />
@@ -258,46 +255,42 @@ let command ~debug ~emitter ~path =
           - handled like other Longitent.t, except lowercase id is marked Token.JsxLowercase
       *)
       emitter (* --> <div... *)
-      |> emitJsxTag ~debug ~name:"<"
-           ~pos:
-             (let pos = Loc.start e.pexp_loc in
-              (fst pos, snd pos - 1 (* the AST skips the loc of < somehow *)));
-      emitter |> emitJsxOpen ~lid:lident.txt ~debug ~loc:pexp_loc;
-
-      let posOfGreatherthanAfterProps =
-        let rec loop = function
-          | (Asttypes.Labelled {txt = "children"}, {Parsetree.pexp_loc}) :: _ ->
-            Loc.start pexp_loc
-          | _ :: args -> loop args
-          | [] -> (* should not happen *) (-1, -1)
-        in
-
-        loop args
-      in
-      let posOfFinalGreatherthan =
-        let pos = Loc.end_ e.pexp_loc in
-        (fst pos, snd pos - 1)
-      in
-      let selfClosing =
-        fst posOfGreatherthanAfterProps == fst posOfFinalGreatherthan
-        && snd posOfGreatherthanAfterProps + 1 == snd posOfFinalGreatherthan
-        (* there's an off-by one somehow in the AST *)
-      in
-      (if not selfClosing then
-         let lineStart, colStart = Loc.start pexp_loc in
-         let lineEnd, colEnd = Loc.end_ pexp_loc in
-         let length = if lineStart = lineEnd then colEnd - colStart else 0 in
-         let lineEndWhole, colEndWhole = Loc.end_ e.pexp_loc in
-         if length > 0 && colEndWhole > length then (
-           emitter
-           |> emitJsxClose ~debug ~lid:lident.txt
-                ~pos:(lineEndWhole, colEndWhole - 1);
-           emitter (* <foo ...props > <-- *)
-           |> emitJsxTag ~debug ~name:">" ~pos:posOfGreatherthanAfterProps;
-           emitter (* <foo> ... </foo> <-- *)
-           |> emitJsxTag ~debug ~name:">" ~pos:posOfFinalGreatherthan));
-
-      args |> List.iter (fun (_lbl, arg) -> iterator.expr iterator arg)
+      |> emitJsxTag ~debug ~name:"<" ~pos:(Loc.start e.pexp_loc);
+      emitter |> emitJsxOpen ~lid:lident.txt ~debug ~loc:lident.loc;
+      let closing_line, closing_column = Loc.end_ e.pexp_loc in
+      emitter (* <foo ...props /> <-- *)
+      |> emitJsxTag ~debug ~name:"/>" ~pos:(closing_line, closing_column - 2)
+      (* minus two for /> *)
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = lident;
+          jsx_container_element_opening_tag_end = posOfGreatherthanAfterProps;
+          jsx_container_element_children = children;
+          jsx_container_element_closing_tag_start = closing_less_than;
+          jsx_container_element_tag_name_end = tag_name_end;
+          jsx_container_element_closing_tag_end = final_greather_than;
+        } ->
+      ((* opening tag *)
+       emitter (* --> <div... *)
+       |> emitJsxTag ~debug ~name:"<" ~pos:(Loc.start e.pexp_loc);
+       emitter |> emitJsxOpen ~lid:lident.txt ~debug ~loc:lident.loc;
+       emitter (* <foo ...props > <-- *)
+       |> emitJsxTag ~debug ~name:">"
+            ~pos:(Pos.ofLexing posOfGreatherthanAfterProps);
+
+       (* children *)
+       match children with
+       | Parsetree.JSXChildrenSpreading child -> iterator.expr iterator child
+       | Parsetree.JSXChildrenItems children ->
+         List.iter (iterator.expr iterator) children);
+
+      (* closing tag *)
+      emitter
+      |> emitJsxTag ~debug ~name:"</" ~pos:(Pos.ofLexing closing_less_than);
+      emitter
+      |> emitJsxClose ~debug ~lid:lident.txt ~pos:(Loc.start tag_name_end.loc);
+      emitter (* <foo> ... </foo> <-- *)
+      |> emitJsxTag ~debug ~name:">" ~pos:(Pos.ofLexing final_greather_than)
     | Pexp_apply
         {
           funct =
diff --git a/compiler/frontend/bs_ast_mapper.ml b/compiler/frontend/bs_ast_mapper.ml
index b170d9b82b..6368cb5739 100644
--- a/compiler/frontend/bs_ast_mapper.ml
+++ b/compiler/frontend/bs_ast_mapper.ml
@@ -388,11 +388,16 @@ module E = struct
     | Pexp_jsx_container_element
         {
           jsx_container_element_tag_name_start = name;
+          jsx_container_element_opening_tag_end = ote;
           jsx_container_element_props = props;
           jsx_container_element_children = children;
+          jsx_container_element_closing_tag_start = cts;
+          jsx_container_element_tag_name_end = tag_name_end;
+          jsx_container_element_closing_tag_end = cte;
         } ->
-      jsx_container_element ~loc ~attrs name (map_jsx_props sub props)
+      jsx_container_element ~loc ~attrs name (map_jsx_props sub props) ote
         (map_jsx_children sub children)
+        cts tag_name_end cte
 end
 
 module P = struct
diff --git a/compiler/ml/ast_helper.ml b/compiler/ml/ast_helper.ml
index 2a3fdb1b92..b64b7e6d83 100644
--- a/compiler/ml/ast_helper.ml
+++ b/compiler/ml/ast_helper.ml
@@ -187,13 +187,17 @@ module Exp = struct
       (Pexp_jsx_unary_element
          {jsx_unary_element_tag_name = a; jsx_unary_element_props = b})
 
-  let jsx_container_element ?loc ?attrs a b c =
+  let jsx_container_element ?loc ?attrs a b c d e f g =
     mk ?loc ?attrs
       (Pexp_jsx_container_element
          {
            jsx_container_element_tag_name_start = a;
            jsx_container_element_props = b;
-           jsx_container_element_children = c;
+           jsx_container_element_opening_tag_end = c;
+           jsx_container_element_children = d;
+           jsx_container_element_closing_tag_start = e;
+           jsx_container_element_tag_name_end = f;
+           jsx_container_element_closing_tag_end = g;
          })
 
   let case lhs ?guard rhs = {pc_lhs = lhs; pc_guard = guard; pc_rhs = rhs}
diff --git a/compiler/ml/ast_helper.mli b/compiler/ml/ast_helper.mli
index 245edfbade..d7a3317efb 100644
--- a/compiler/ml/ast_helper.mli
+++ b/compiler/ml/ast_helper.mli
@@ -226,7 +226,11 @@ module Exp : sig
     ?attrs:attrs ->
     Longident.t Location.loc ->
     Parsetree.jsx_props ->
+    Lexing.position ->
     Parsetree.jsx_children ->
+    Lexing.position ->
+    Longident.t Location.loc ->
+    Lexing.position ->
     expression
 
   val case : pattern -> ?guard:expression -> expression -> case
diff --git a/compiler/ml/ast_mapper.ml b/compiler/ml/ast_mapper.ml
index abd505ea3e..228c0dac0d 100644
--- a/compiler/ml/ast_mapper.ml
+++ b/compiler/ml/ast_mapper.ml
@@ -351,12 +351,17 @@ module E = struct
     | Pexp_jsx_container_element
         {
           jsx_container_element_tag_name_start = name;
+          jsx_container_element_opening_tag_end = ote;
           jsx_container_element_props = props;
           jsx_container_element_children = children;
+          jsx_container_element_closing_tag_start = cts;
+          jsx_container_element_tag_name_end = tag_name_end;
+          jsx_container_element_closing_tag_end = cte;
         } ->
       jsx_container_element ~loc ~attrs (map_loc sub name)
-        (map_jsx_props sub props)
+        (map_jsx_props sub props) ote
         (map_jsx_children sub children)
+        cts (map_loc sub tag_name_end) cte
 end
 
 module P = struct
diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index 603d972768..bcab205d2a 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -336,12 +336,15 @@ and jsx_unary_element = {
 and jsx_container_element = {
   (* jsx_container_element_opening_tag_start: Lexing.position; *)
   jsx_container_element_tag_name_start: Longident.t loc;
-  (* jsx_container_element_opening_tag_end: Lexing.position; *)
+  (* > *)
+  jsx_container_element_opening_tag_end: Lexing.position;
   jsx_container_element_props: jsx_props;
   jsx_container_element_children: jsx_children;
-      (* jsx_container_element_closing_tag_start: Lexing.position; *)
-      (* jsx_container_element_tag_name_end: string loc; *)
-      (* jsx_container_element_closing_tag_end: Lexing.position; *)
+  (* </ *)
+  jsx_container_element_closing_tag_start: Lexing.position;
+  jsx_container_element_tag_name_end: Longident.t loc;
+  (* > *)
+  jsx_container_element_closing_tag_end: Lexing.position;
 }
 
 and jsx_prop =
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 857ef51f2c..ca7a14ce1f 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2582,9 +2582,8 @@ and parse_jsx_name p : Longident.t Location.loc =
 (* in
   Ast_helper.Exp.ident ~loc:longident.loc longident *)
 
-and parse_jsx_opening_or_self_closing_element ~start_pos p :
-    Parsetree.expression =
-  let jsx_start_pos = p.Parser.start_pos in
+and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
+    ~start_pos p : Parsetree.expression =
   let name = parse_jsx_name p in
   let jsx_props = parse_jsx_props p in
   match p.Parser.token with
@@ -2594,36 +2593,49 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
     Parser.next p;
     (* let children_end_pos = p.Parser.start_pos in *)
     Scanner.pop_mode p.scanner Jsx;
+    let jsx_end_pos = p.end_pos in
     Parser.expect GreaterThan p;
-    let loc = mk_loc jsx_start_pos p.Parser.start_pos in
+    let loc = mk_loc start_pos jsx_end_pos in
     (* Ast_helper.Exp.make_list_expression loc [] None no children *)
     Ast_helper.Exp.jsx_unary_element ~loc name jsx_props
   | GreaterThan -> (
     (* <foo a=b> bar </foo> *)
     (* let children_start_pos = p.Parser.start_pos in *)
+    let opening_tag_end = p.Parser.start_pos in
     Parser.next p;
     let children = parse_jsx_children p in
     (* let children_end_pos = p.Parser.start_pos in *)
-    let () =
+    let closing_tag_start =
       match p.token with
-      | LessThanSlash -> Parser.next p
+      | LessThanSlash ->
+        let pos = p.start_pos in
+        Parser.next p;
+        pos
       | LessThan ->
+        let pos = p.start_pos in
         Parser.next p;
-        Parser.expect Forwardslash p
-      | token when Grammar.is_structure_item_start token -> ()
-      | _ -> Parser.expect LessThanSlash p
+        Parser.expect Forwardslash p;
+        pos
+      | token when Grammar.is_structure_item_start token -> p.end_pos
+      | _ ->
+        Parser.expect LessThanSlash p;
+        p.end_pos
     in
     match p.Parser.token with
     | (Lident _ | Uident _) when verify_jsx_opening_closing_name p name ->
+      let end_tag_name = {name with loc = mk_loc p.start_pos p.end_pos} in
       Scanner.pop_mode p.scanner Jsx;
+      let closing_tag_end = p.start_pos in
       Parser.expect GreaterThan p;
-      let loc = mk_loc jsx_start_pos p.Parser.start_pos in
-      Ast_helper.Exp.jsx_container_element ~loc name jsx_props children
+      let loc = mk_loc start_pos p.Parser.start_pos in
+      Ast_helper.Exp.jsx_container_element ~loc name jsx_props opening_tag_end
+        children closing_tag_start end_tag_name closing_tag_end
       (* let loc = mk_loc children_start_pos children_end_pos in
       match (spread, children) with
       | true, child :: _ -> child
       | _ -> Ast_helper.Exp.make_list_expression loc children None) *)
     | token ->
+      let end_tag_name = {name with loc = mk_loc p.start_pos p.end_pos} in
       Scanner.pop_mode p.scanner Jsx;
       let () =
         if Grammar.is_structure_item_start token then
@@ -2641,15 +2653,16 @@ and parse_jsx_opening_or_self_closing_element ~start_pos p :
           Parser.expect GreaterThan p
       in
       Ast_helper.Exp.jsx_container_element
-        ~loc:(mk_loc jsx_start_pos p.prev_end_pos)
-        name jsx_props children
+        ~loc:(mk_loc start_pos p.prev_end_pos)
+        name jsx_props opening_tag_end children closing_tag_start end_tag_name
+        p.end_pos
     (* Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None *)
     )
   | token ->
     Scanner.pop_mode p.scanner Jsx;
     Parser.err p (Diagnostics.unexpected token p.breadcrumbs);
     Ast_helper.Exp.jsx_unary_element
-      ~loc:(mk_loc jsx_start_pos p.prev_end_pos)
+      ~loc:(mk_loc start_pos p.prev_end_pos)
       name jsx_props
 
 (* and parse_jsx_opening_or_self_closing_element_old ~start_pos p =
diff --git a/tests/analysis_tests/tests/src/expected/Highlight.res.txt b/tests/analysis_tests/tests/src/expected/Highlight.res.txt
index db7155bfdd..6ee7e2e800 100644
--- a/tests/analysis_tests/tests/src/expected/Highlight.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Highlight.res.txt
@@ -6,32 +6,37 @@ Lident: Component 1:13 Namespace
 Variable: _c [4:4->4:6]
 JsxTag <: 4:9
 Lident: Component 4:10 Namespace
+JsxTag />: 4:20
 Variable: _mc [6:4->6:7]
 JsxTag <: 6:10
 Ldot: M 6:11 Namespace
 Lident: C 6:13 Namespace
+JsxTag />: 6:15
 Variable: _d [8:4->8:6]
 JsxTag <: 8:9
 Lident: div 8:10 JsxLowercase
+JsxTag />: 8:14
 Variable: _d2 [10:4->10:7]
 JsxTag <: 11:2
 Lident: div 11:3 JsxLowercase
-Lident: div 16:4 JsxLowercase
 JsxTag >: 11:6
-JsxTag >: 16:7
 Ldot: React 12:5 Namespace
 Lident: string 12:11 Variable
 JsxTag <: 13:4
 Lident: div 13:5 JsxLowercase
-Lident: div 13:34 JsxLowercase
 JsxTag >: 13:8
-JsxTag >: 13:37
 Ldot: React 13:11 Namespace
 Lident: string 13:17 Variable
+JsxTag </: 13:32
+Lident: div 13:34 JsxLowercase
+JsxTag >: 13:37
 Ldot: React 14:5 Namespace
 Lident: string 14:11 Variable
 Ldot: React 15:5 Namespace
 Lident: string 15:11 Variable
+JsxTag </: 16:2
+Lident: div 16:4 JsxLowercase
+JsxTag >: 16:7
 Lident: pair 18:5 Type
 Lident: looooooooooooooooooooooooooooooooooooooong_int 20:5 Type
 Lident: int 20:54 Type
@@ -84,11 +89,13 @@ Lident: world 69:39 Variable
 Lident: add 71:8 Variable
 JsxTag <: 73:8
 Lident: div 73:9 JsxLowercase
-Lident: div 73:36 JsxLowercase
 JsxTag >: 73:24
-JsxTag >: 73:39
 JsxTag <: 73:26
 Lident: div 73:27 JsxLowercase
+JsxTag />: 73:31
+JsxTag </: 73:34
+Lident: div 73:36 JsxLowercase
+JsxTag >: 73:39
 Lident: SomeComponent 75:7 Namespace
 Lident: Nested 76:9 Namespace
 Variable: make [78:8->78:12]
@@ -97,12 +104,14 @@ Lident: children 79:10 Variable
 JsxTag <: 84:8
 Ldot: SomeComponent 84:9 Namespace
 Lident: Nested 84:23 Namespace
-Ldot: SomeComponent 84:41 Namespace
-Lident: Nested 84:55 Namespace
 JsxTag >: 84:29
-JsxTag >: 84:61
 JsxTag <: 84:31
 Lident: div 84:32 JsxLowercase
+JsxTag />: 84:36
+JsxTag </: 84:39
+Ldot: SomeComponent 84:41 Namespace
+Lident: Nested 84:55 Namespace
+JsxTag >: 84:61
 Variable: toAs [90:4->90:8]
 Variable: x [90:19->90:20]
 Lident: x 90:25 Variable
@@ -121,6 +130,7 @@ Lident: int 101:14 Variable
 Lident: to 101:18 Variable
 JsxTag <: 104:8
 Lident: ToAsProp 104:9 Namespace
+JsxTag />: 104:23
 Variable: true [107:4->107:11]
 Lident: true 108:8->108:15 Variable
 Variable: enumInModule [110:4->110:16]

From 162b7a28c1ba4690572faa55be63d24cd1bfcf78 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 20:05:53 +0100
Subject: [PATCH 21/99] Make the closing tag optional for
 jsx_container_element.

---
 analysis/src/CompletionFrontEnd.ml | 15 +++++---
 analysis/src/SemanticTokens.ml     | 57 ++++++++++++++++++------------
 compiler/frontend/bs_ast_mapper.ml |  6 ++--
 compiler/ml/ast_helper.ml          |  6 ++--
 compiler/ml/ast_helper.mli         |  4 +--
 compiler/ml/ast_mapper.ml          |  6 ++--
 compiler/ml/parsetree.ml           | 14 +++++---
 compiler/syntax/src/res_core.ml    | 25 ++++++++-----
 8 files changed, 79 insertions(+), 54 deletions(-)

diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
index 54fb18a63d..d8b05baddf 100644
--- a/analysis/src/CompletionFrontEnd.ml
+++ b/analysis/src/CompletionFrontEnd.ml
@@ -1232,6 +1232,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
                          then ValueOrField
                          else Value);
                     }))
+          (* todo: remove *)
         | Pexp_construct ({txt = Lident ("::" | "()")}, _) | Pexp_jsx_fragment _
           ->
           (* Ignore list expressions, used in JSX, unit, and more *) ()
@@ -1362,10 +1363,16 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
               | None -> "None"
               | Some childrenPosStart -> Pos.toString childrenPosStart);
           let jsxCompletable =
-            CompletionJsx.findJsxPropsCompletable ~jsxProps
-              ~endPos:(Loc.end_ expr.pexp_loc) ~posBeforeCursor
-              ~posAfterCompName:(Loc.end_ compName.loc)
-              ~firstCharBeforeCursorNoWhite ~charAtCursor
+            match expr.pexp_desc with
+            | Pexp_jsx_container_element
+                {jsx_container_element_closing_tag = None} ->
+              (* This is a weird edge case where there is no closing tag *)
+              None
+            | _ ->
+              CompletionJsx.findJsxPropsCompletable ~jsxProps
+                ~endPos:(Loc.end_ expr.pexp_loc) ~posBeforeCursor
+                ~posAfterCompName:(Loc.end_ compName.loc)
+                ~firstCharBeforeCursorNoWhite ~charAtCursor
           in
           if jsxCompletable <> None then setResultOpt jsxCompletable
           else if compName.loc |> Loc.hasPos ~pos:posBeforeCursor then
diff --git a/analysis/src/SemanticTokens.ml b/analysis/src/SemanticTokens.ml
index 2e4c532ae7..d43cef6963 100644
--- a/analysis/src/SemanticTokens.ml
+++ b/analysis/src/SemanticTokens.ml
@@ -266,31 +266,44 @@ let command ~debug ~emitter ~path =
           jsx_container_element_tag_name_start = lident;
           jsx_container_element_opening_tag_end = posOfGreatherthanAfterProps;
           jsx_container_element_children = children;
-          jsx_container_element_closing_tag_start = closing_less_than;
-          jsx_container_element_tag_name_end = tag_name_end;
-          jsx_container_element_closing_tag_end = final_greather_than;
+          jsx_container_element_closing_tag = closing_tag_opt;
         } ->
-      ((* opening tag *)
-       emitter (* --> <div... *)
-       |> emitJsxTag ~debug ~name:"<" ~pos:(Loc.start e.pexp_loc);
-       emitter |> emitJsxOpen ~lid:lident.txt ~debug ~loc:lident.loc;
-       emitter (* <foo ...props > <-- *)
-       |> emitJsxTag ~debug ~name:">"
-            ~pos:(Pos.ofLexing posOfGreatherthanAfterProps);
-
-       (* children *)
-       match children with
-       | Parsetree.JSXChildrenSpreading child -> iterator.expr iterator child
-       | Parsetree.JSXChildrenItems children ->
-         List.iter (iterator.expr iterator) children);
+      (* opening tag *)
+      emitter (* --> <div... *)
+      |> emitJsxTag ~debug ~name:"<" ~pos:(Loc.start e.pexp_loc);
+      emitter |> emitJsxOpen ~lid:lident.txt ~debug ~loc:lident.loc;
+      emitter (* <foo ...props > <-- *)
+      |> emitJsxTag ~debug ~name:">"
+           ~pos:(Pos.ofLexing posOfGreatherthanAfterProps);
+
+      (* children *)
+      (match children with
+      | Parsetree.JSXChildrenSpreading child -> iterator.expr iterator child
+      | Parsetree.JSXChildrenItems children ->
+        List.iter (iterator.expr iterator) children);
 
       (* closing tag *)
-      emitter
-      |> emitJsxTag ~debug ~name:"</" ~pos:(Pos.ofLexing closing_less_than);
-      emitter
-      |> emitJsxClose ~debug ~lid:lident.txt ~pos:(Loc.start tag_name_end.loc);
-      emitter (* <foo> ... </foo> <-- *)
-      |> emitJsxTag ~debug ~name:">" ~pos:(Pos.ofLexing final_greather_than)
+      closing_tag_opt
+      |> Option.iter
+           (fun
+             {
+               (* </ *)
+               Parsetree.jsx_closing_container_tag_start = closing_less_than;
+               (* name *)
+               jsx_closing_container_tag_name = tag_name_end;
+               (* > *)
+               jsx_closing_container_tag_end = final_greather_than;
+             }
+           ->
+             emitter
+             |> emitJsxTag ~debug ~name:"</"
+                  ~pos:(Pos.ofLexing closing_less_than);
+             emitter
+             |> emitJsxClose ~debug ~lid:lident.txt
+                  ~pos:(Loc.start tag_name_end.loc);
+             emitter (* <foo> ... </foo> <-- *)
+             |> emitJsxTag ~debug ~name:">"
+                  ~pos:(Pos.ofLexing final_greather_than))
     | Pexp_apply
         {
           funct =
diff --git a/compiler/frontend/bs_ast_mapper.ml b/compiler/frontend/bs_ast_mapper.ml
index 6368cb5739..8d5c7e6d8a 100644
--- a/compiler/frontend/bs_ast_mapper.ml
+++ b/compiler/frontend/bs_ast_mapper.ml
@@ -391,13 +391,11 @@ module E = struct
           jsx_container_element_opening_tag_end = ote;
           jsx_container_element_props = props;
           jsx_container_element_children = children;
-          jsx_container_element_closing_tag_start = cts;
-          jsx_container_element_tag_name_end = tag_name_end;
-          jsx_container_element_closing_tag_end = cte;
+          jsx_container_element_closing_tag = closing_tag;
         } ->
       jsx_container_element ~loc ~attrs name (map_jsx_props sub props) ote
         (map_jsx_children sub children)
-        cts tag_name_end cte
+        closing_tag
 end
 
 module P = struct
diff --git a/compiler/ml/ast_helper.ml b/compiler/ml/ast_helper.ml
index b64b7e6d83..e44d8b2157 100644
--- a/compiler/ml/ast_helper.ml
+++ b/compiler/ml/ast_helper.ml
@@ -187,7 +187,7 @@ module Exp = struct
       (Pexp_jsx_unary_element
          {jsx_unary_element_tag_name = a; jsx_unary_element_props = b})
 
-  let jsx_container_element ?loc ?attrs a b c d e f g =
+  let jsx_container_element ?loc ?attrs a b c d e =
     mk ?loc ?attrs
       (Pexp_jsx_container_element
          {
@@ -195,9 +195,7 @@ module Exp = struct
            jsx_container_element_props = b;
            jsx_container_element_opening_tag_end = c;
            jsx_container_element_children = d;
-           jsx_container_element_closing_tag_start = e;
-           jsx_container_element_tag_name_end = f;
-           jsx_container_element_closing_tag_end = g;
+           jsx_container_element_closing_tag = e;
          })
 
   let case lhs ?guard rhs = {pc_lhs = lhs; pc_guard = guard; pc_rhs = rhs}
diff --git a/compiler/ml/ast_helper.mli b/compiler/ml/ast_helper.mli
index d7a3317efb..e876559c66 100644
--- a/compiler/ml/ast_helper.mli
+++ b/compiler/ml/ast_helper.mli
@@ -228,9 +228,7 @@ module Exp : sig
     Parsetree.jsx_props ->
     Lexing.position ->
     Parsetree.jsx_children ->
-    Lexing.position ->
-    Longident.t Location.loc ->
-    Lexing.position ->
+    Parsetree.jsx_closing_container_tag option ->
     expression
 
   val case : pattern -> ?guard:expression -> expression -> case
diff --git a/compiler/ml/ast_mapper.ml b/compiler/ml/ast_mapper.ml
index 228c0dac0d..2ade57832c 100644
--- a/compiler/ml/ast_mapper.ml
+++ b/compiler/ml/ast_mapper.ml
@@ -354,14 +354,12 @@ module E = struct
           jsx_container_element_opening_tag_end = ote;
           jsx_container_element_props = props;
           jsx_container_element_children = children;
-          jsx_container_element_closing_tag_start = cts;
-          jsx_container_element_tag_name_end = tag_name_end;
-          jsx_container_element_closing_tag_end = cte;
+          jsx_container_element_closing_tag = closing_tag;
         } ->
       jsx_container_element ~loc ~attrs (map_loc sub name)
         (map_jsx_props sub props) ote
         (map_jsx_children sub children)
-        cts (map_loc sub tag_name_end) cte
+        closing_tag
 end
 
 module P = struct
diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index bcab205d2a..d6c5f92094 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -340,11 +340,7 @@ and jsx_container_element = {
   jsx_container_element_opening_tag_end: Lexing.position;
   jsx_container_element_props: jsx_props;
   jsx_container_element_children: jsx_children;
-  (* </ *)
-  jsx_container_element_closing_tag_start: Lexing.position;
-  jsx_container_element_tag_name_end: Longident.t loc;
-  (* > *)
-  jsx_container_element_closing_tag_end: Lexing.position;
+  jsx_container_element_closing_tag: jsx_closing_container_tag option;
 }
 
 and jsx_prop =
@@ -370,6 +366,14 @@ and jsx_children =
 
 and jsx_props = jsx_prop list
 
+and jsx_closing_container_tag = {
+  (* </ *)
+  jsx_closing_container_tag_start: Lexing.position;
+  (* name *)
+  jsx_closing_container_tag_name: Longident.t loc; (* > *)
+  jsx_closing_container_tag_end: Lexing.position;
+}
+
 and case = {
   (* (P -> E) or (P when E0 -> E) *)
   pc_lhs: pattern;
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index ca7a14ce1f..bc2c1e2a54 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2610,16 +2610,16 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
       | LessThanSlash ->
         let pos = p.start_pos in
         Parser.next p;
-        pos
+        Some pos
       | LessThan ->
         let pos = p.start_pos in
         Parser.next p;
         Parser.expect Forwardslash p;
-        pos
-      | token when Grammar.is_structure_item_start token -> p.end_pos
+        Some pos
+      | token when Grammar.is_structure_item_start token -> None
       | _ ->
         Parser.expect LessThanSlash p;
-        p.end_pos
+        None
     in
     match p.Parser.token with
     | (Lident _ | Uident _) when verify_jsx_opening_closing_name p name ->
@@ -2628,14 +2628,24 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
       let closing_tag_end = p.start_pos in
       Parser.expect GreaterThan p;
       let loc = mk_loc start_pos p.Parser.start_pos in
+      let closing_tag =
+        closing_tag_start
+        |> Option.map (fun closing_tag_start ->
+               {
+                 Parsetree.jsx_closing_container_tag_start = closing_tag_start;
+                 jsx_closing_container_tag_name = end_tag_name;
+                 jsx_closing_container_tag_end = closing_tag_end;
+               })
+      in
+
       Ast_helper.Exp.jsx_container_element ~loc name jsx_props opening_tag_end
-        children closing_tag_start end_tag_name closing_tag_end
+        children closing_tag
+      (*  end_tag_name  *)
       (* let loc = mk_loc children_start_pos children_end_pos in
       match (spread, children) with
       | true, child :: _ -> child
       | _ -> Ast_helper.Exp.make_list_expression loc children None) *)
     | token ->
-      let end_tag_name = {name with loc = mk_loc p.start_pos p.end_pos} in
       Scanner.pop_mode p.scanner Jsx;
       let () =
         if Grammar.is_structure_item_start token then
@@ -2654,8 +2664,7 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
       in
       Ast_helper.Exp.jsx_container_element
         ~loc:(mk_loc start_pos p.prev_end_pos)
-        name jsx_props opening_tag_end children closing_tag_start end_tag_name
-        p.end_pos
+        name jsx_props opening_tag_end children None
     (* Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None *)
     )
   | token ->

From 9b815a06ac2d898c261b6aae4c63b52a8c9c152c Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 20:28:30 +0100
Subject: [PATCH 22/99] Add tighter pattern match for edge case in jsx props
 completion.

---
 analysis/src/CompletionFrontEnd.ml | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
index d8b05baddf..cd67542f5f 100644
--- a/analysis/src/CompletionFrontEnd.ml
+++ b/analysis/src/CompletionFrontEnd.ml
@@ -1365,8 +1365,12 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
           let jsxCompletable =
             match expr.pexp_desc with
             | Pexp_jsx_container_element
-                {jsx_container_element_closing_tag = None} ->
-              (* This is a weird edge case where there is no closing tag *)
+                {
+                  jsx_container_element_closing_tag = None;
+                  jsx_container_element_children =
+                    JSXChildrenSpreading _ | JSXChildrenItems (_ :: _);
+                } ->
+              (* This is a weird edge case where there is no closing tag but there are children *)
               None
             | _ ->
               CompletionJsx.findJsxPropsCompletable ~jsxProps

From 9408d061336a3a5b84bd392db0d303d881e396d6 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 20:29:59 +0100
Subject: [PATCH 23/99] Update analysis tests for jsx elements ast.

---
 analysis/src/CompletionFrontEnd.ml            |   4 -
 .../tests/src/expected/Completion.res.txt     |  10 +-
 .../CompletionFunctionArguments.res.txt       |   8 +-
 .../expected/CompletionInferValues.res.txt    |  20 +--
 .../tests/src/expected/CompletionJsx.res.txt  | 128 ++++++------------
 .../src/expected/CompletionJsxProps.res.txt   |  24 ++--
 .../tests/src/expected/Div.res.txt            |   2 +-
 .../tests/src/expected/Fragment.res.txt       |   4 +-
 .../tests/src/expected/Hover.res.txt          |   8 +-
 .../tests/src/expected/Jsx2.res.txt           |  97 +++++--------
 .../tests/src/expected/JsxV4.res.txt          |   2 +-
 .../tests/src/expected/RecoveryOnProp.res.txt |   2 +-
 12 files changed, 119 insertions(+), 190 deletions(-)

diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
index cd67542f5f..f55e24e1d8 100644
--- a/analysis/src/CompletionFrontEnd.ml
+++ b/analysis/src/CompletionFrontEnd.ml
@@ -1232,10 +1232,6 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
                          then ValueOrField
                          else Value);
                     }))
-          (* todo: remove *)
-        | Pexp_construct ({txt = Lident ("::" | "()")}, _) | Pexp_jsx_fragment _
-          ->
-          (* Ignore list expressions, used in JSX, unit, and more *) ()
         | Pexp_construct (lid, eOpt) -> (
           let lidPath = flattenLidCheckDot lid in
           if debug then
diff --git a/tests/analysis_tests/tests/src/expected/Completion.res.txt b/tests/analysis_tests/tests/src/expected/Completion.res.txt
index 5faec901af..f9d09f53f2 100644
--- a/tests/analysis_tests/tests/src/expected/Completion.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Completion.res.txt
@@ -699,7 +699,7 @@ XXX Not found!
 []
 
 Complete src/Completion.res 59:30
-posCursor:[59:30] posNoWhite:[59:29] Found expr:[59:15->59:30]
+posCursor:[59:30] posNoWhite:[59:29] Found expr:[59:14->59:30]
 JSX <O.Comp:[59:15->59:21] second[59:22->59:28]=...[59:29->59:30]> _children:None
 Completable: Cexpression CJsxPropValue [O, Comp] second=z
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -715,7 +715,7 @@ Path O.Comp.make
   }]
 
 Complete src/Completion.res 62:23
-posCursor:[62:23] posNoWhite:[62:22] Found expr:[62:15->62:23]
+posCursor:[62:23] posNoWhite:[62:22] Found expr:[62:14->62:23]
 JSX <O.Comp:[62:15->62:21] z[62:22->62:23]=...[62:22->62:23]> _children:None
 Completable: Cjsx([O, Comp], z, [z])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -1003,7 +1003,7 @@ Path Objects.object
   }]
 
 Complete src/Completion.res 151:6
-posCursor:[151:6] posNoWhite:[151:5] Found expr:[151:4->151:6]
+posCursor:[151:6] posNoWhite:[151:5] Found expr:[151:3->151:6]
 JSX <O.:[151:4->151:6] > _children:None
 Completable: Cpath Module[O, ""]
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -1109,7 +1109,7 @@ Path Lis
   }]
 
 Complete src/Completion.res 169:16
-posCursor:[169:16] posNoWhite:[169:15] Found expr:[169:4->169:16]
+posCursor:[169:16] posNoWhite:[169:15] Found expr:[169:3->169:16]
 JSX <WithChildren:[169:4->169:16] > _children:None
 Completable: Cpath Module[WithChildren]
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -1876,7 +1876,7 @@ Found type for function callback
   }]
 
 Complete src/Completion.res 339:26
-posCursor:[339:26] posNoWhite:[339:25] Found expr:[336:3->349:23]
+posCursor:[339:26] posNoWhite:[339:25] Found expr:[336:2->349:23]
 JSX <div:[336:3->336:6] onClick[337:4->337:11]=...[337:13->349:23]> _children:None
 posCursor:[339:26] posNoWhite:[339:25] Found expr:[337:13->349:23]
 posCursor:[339:26] posNoWhite:[339:25] Found expr:[337:13->341:6]
diff --git a/tests/analysis_tests/tests/src/expected/CompletionFunctionArguments.res.txt b/tests/analysis_tests/tests/src/expected/CompletionFunctionArguments.res.txt
index ae28106430..6c2529f079 100644
--- a/tests/analysis_tests/tests/src/expected/CompletionFunctionArguments.res.txt
+++ b/tests/analysis_tests/tests/src/expected/CompletionFunctionArguments.res.txt
@@ -424,8 +424,8 @@ Path fnTakingRecord
   }]
 
 Complete src/CompletionFunctionArguments.res 109:29
-posCursor:[109:29] posNoWhite:[109:28] Found expr:[105:3->114:4]
-JSX <div:[105:3->105:6] onMouseDown[106:4->106:15]=...[106:35->113:5]> _children:114:2
+posCursor:[109:29] posNoWhite:[109:28] Found expr:[105:2->114:4]
+JSX <div:[105:3->105:6] onMouseDown[106:4->106:15]=...[106:35->113:5]> _children:None
 posCursor:[109:29] posNoWhite:[109:28] Found expr:[106:35->113:5]
 posCursor:[109:29] posNoWhite:[109:28] Found expr:[107:6->109:29]
 posCursor:[109:29] posNoWhite:[109:28] Found expr:[108:6->109:29]
@@ -447,8 +447,8 @@ Path JsxEvent.Mouse.a
   }]
 
 Complete src/CompletionFunctionArguments.res 111:27
-posCursor:[111:27] posNoWhite:[111:26] Found expr:[105:3->114:4]
-JSX <div:[105:3->105:6] onMouseDown[106:4->106:15]=...[106:35->113:5]> _children:114:2
+posCursor:[111:27] posNoWhite:[111:26] Found expr:[105:2->114:4]
+JSX <div:[105:3->105:6] onMouseDown[106:4->106:15]=...[106:35->113:5]> _children:None
 posCursor:[111:27] posNoWhite:[111:26] Found expr:[106:35->113:5]
 posCursor:[111:27] posNoWhite:[111:26] Found expr:[107:6->111:27]
 posCursor:[111:27] posNoWhite:[111:26] Found expr:[108:6->111:27]
diff --git a/tests/analysis_tests/tests/src/expected/CompletionInferValues.res.txt b/tests/analysis_tests/tests/src/expected/CompletionInferValues.res.txt
index 8755e16516..afffa238ec 100644
--- a/tests/analysis_tests/tests/src/expected/CompletionInferValues.res.txt
+++ b/tests/analysis_tests/tests/src/expected/CompletionInferValues.res.txt
@@ -256,8 +256,8 @@ Path ReactEvent.Mouse.pr
   }]
 
 Complete src/CompletionInferValues.res 41:50
-posCursor:[41:50] posNoWhite:[41:49] Found expr:[41:12->41:56]
-JSX <div:[41:12->41:15] onMouseEnter[41:16->41:28]=...[41:36->41:52]> _children:41:54
+posCursor:[41:50] posNoWhite:[41:49] Found expr:[41:11->41:56]
+JSX <div:[41:12->41:15] onMouseEnter[41:16->41:28]=...[41:36->41:52]> _children:None
 posCursor:[41:50] posNoWhite:[41:49] Found expr:[41:36->41:52]
 posCursor:[41:50] posNoWhite:[41:49] Found expr:[41:41->41:50]
 Completable: Cpath Value[event]->pr <<jsx>>
@@ -281,8 +281,8 @@ Path JsxEvent.Mouse.pr
   }]
 
 Complete src/CompletionInferValues.res 44:50
-posCursor:[44:50] posNoWhite:[44:49] Found expr:[44:12->44:56]
-JSX <Div:[44:12->44:15] onMouseEnter[44:16->44:28]=...[44:36->44:52]> _children:44:54
+posCursor:[44:50] posNoWhite:[44:49] Found expr:[44:11->44:56]
+JSX <Div:[44:12->44:15] onMouseEnter[44:16->44:28]=...[44:36->44:52]> _children:None
 posCursor:[44:50] posNoWhite:[44:49] Found expr:[44:36->44:52]
 posCursor:[44:50] posNoWhite:[44:49] Found expr:[44:41->44:50]
 Completable: Cpath Value[event]->pr <<jsx>>
@@ -305,8 +305,8 @@ Path JsxEvent.Mouse.pr
   }]
 
 Complete src/CompletionInferValues.res 47:87
-posCursor:[47:87] posNoWhite:[47:86] Found expr:[47:12->47:93]
-JSX <div:[47:12->47:15] onMouseEnter[47:16->47:28]=...[47:36->47:89]> _children:47:91
+posCursor:[47:87] posNoWhite:[47:86] Found expr:[47:11->47:93]
+JSX <div:[47:12->47:15] onMouseEnter[47:16->47:28]=...[47:36->47:89]> _children:None
 posCursor:[47:87] posNoWhite:[47:86] Found expr:[47:36->47:89]
 posCursor:[47:87] posNoWhite:[47:86] Found expr:[47:41->47:87]
 posCursor:[47:87] posNoWhite:[47:86] Found expr:[47:81->47:87]
@@ -383,8 +383,8 @@ Path Stdlib.Int.t
   }]
 
 Complete src/CompletionInferValues.res 50:103
-posCursor:[50:103] posNoWhite:[50:102] Found expr:[50:12->50:109]
-JSX <div:[50:12->50:15] onMouseEnter[50:16->50:28]=...[50:36->50:105]> _children:50:107
+posCursor:[50:103] posNoWhite:[50:102] Found expr:[50:11->50:109]
+JSX <div:[50:12->50:15] onMouseEnter[50:16->50:28]=...[50:36->50:105]> _children:None
 posCursor:[50:103] posNoWhite:[50:102] Found expr:[50:36->50:105]
 posCursor:[50:103] posNoWhite:[50:102] Found expr:[50:41->50:103]
 posCursor:[50:103] posNoWhite:[50:102] Found expr:[50:95->50:103]
@@ -400,8 +400,8 @@ Path Int.toString
 []
 
 Complete src/CompletionInferValues.res 53:121
-posCursor:[53:121] posNoWhite:[53:120] Found expr:[53:12->53:127]
-JSX <div:[53:12->53:15] onMouseEnter[53:16->53:28]=...[53:36->53:123]> _children:53:125
+posCursor:[53:121] posNoWhite:[53:120] Found expr:[53:11->53:127]
+JSX <div:[53:12->53:15] onMouseEnter[53:16->53:28]=...[53:36->53:123]> _children:None
 posCursor:[53:121] posNoWhite:[53:120] Found expr:[53:36->53:123]
 posCursor:[53:121] posNoWhite:[53:120] Found expr:[53:41->53:121]
 posCursor:[53:121] posNoWhite:[53:120] Found expr:[53:114->53:121]
diff --git a/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt b/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
index 0fb67ddfcf..92ee7cd1a8 100644
--- a/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
+++ b/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
@@ -25,9 +25,9 @@ Complete src/CompletionJsx.res 13:21
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[8:13->33:3]
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[9:4->32:10]
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[10:4->32:10]
-posCursor:[13:21] posNoWhite:[13:20] Found expr:[11:4->32:10]
-posCursor:[13:21] posNoWhite:[13:20] Found expr:[12:4->32:10]
-posCursor:[13:21] posNoWhite:[13:20] Found expr:[13:7->32:10]
+posCursor:[13:21] posNoWhite:[13:20] Found expr:[11:4->33:2]
+posCursor:[13:21] posNoWhite:[13:20] Found expr:[12:4->33:2]
+posCursor:[13:21] posNoWhite:[13:20] Found expr:[13:7->33:2]
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[13:7->13:21]
 Completable: Cpath Value[someString]->st <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -62,16 +62,10 @@ Complete src/CompletionJsx.res 18:24
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[8:13->33:3]
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[9:4->32:10]
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[10:4->32:10]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[11:4->32:10]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[12:4->32:10]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[15:8->32:4]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[16:7->32:4]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[17:7->32:4]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[17:7->32:4]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[18:10->32:4]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[18:10->32:4]
+posCursor:[18:24] posNoWhite:[18:23] Found expr:[11:4->33:2]
+posCursor:[18:24] posNoWhite:[18:23] Found expr:[12:4->33:2]
+posCursor:[18:24] posNoWhite:[18:23] Found expr:[15:4->33:2]
+JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[18:10->18:24]
 Completable: Cpath Value[someString]->st <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -106,16 +100,10 @@ Complete src/CompletionJsx.res 20:27
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[8:13->33:3]
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[9:4->32:10]
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[10:4->32:10]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[11:4->32:10]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[12:4->32:10]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[15:8->32:4]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[16:7->32:4]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[17:7->32:4]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[17:7->32:4]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[20:10->32:4]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[20:10->32:4]
+posCursor:[20:27] posNoWhite:[20:26] Found expr:[11:4->33:2]
+posCursor:[20:27] posNoWhite:[20:26] Found expr:[12:4->33:2]
+posCursor:[20:27] posNoWhite:[20:26] Found expr:[15:4->33:2]
+JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[20:10->20:27]
 Completable: Cpath string->st <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -149,16 +137,10 @@ Complete src/CompletionJsx.res 22:40
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[8:13->33:3]
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[9:4->32:10]
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[10:4->32:10]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[11:4->32:10]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[12:4->32:10]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[15:8->32:4]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[16:7->32:4]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[17:7->32:4]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[17:7->32:4]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[22:10->32:4]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[22:10->32:4]
+posCursor:[22:40] posNoWhite:[22:39] Found expr:[11:4->33:2]
+posCursor:[22:40] posNoWhite:[22:39] Found expr:[12:4->33:2]
+posCursor:[22:40] posNoWhite:[22:39] Found expr:[15:4->33:2]
+JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[22:10->22:40]
 Completable: Cpath Value[String, trim](Nolabel)->st <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -194,16 +176,10 @@ Complete src/CompletionJsx.res 24:19
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[8:13->33:3]
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[9:4->32:10]
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[10:4->32:10]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[11:4->32:10]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[12:4->32:10]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[15:8->32:4]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[16:7->32:4]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[17:7->32:4]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[17:7->32:4]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[24:10->32:4]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[24:10->32:4]
+posCursor:[24:19] posNoWhite:[24:18] Found expr:[11:4->33:2]
+posCursor:[24:19] posNoWhite:[24:18] Found expr:[12:4->33:2]
+posCursor:[24:19] posNoWhite:[24:18] Found expr:[15:4->33:2]
+JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[24:10->0:-1]
 Completable: Cpath Value[someInt]-> <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -322,16 +298,10 @@ Complete src/CompletionJsx.res 26:14
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[8:13->33:3]
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[9:4->32:10]
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[10:4->32:10]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[11:4->32:10]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[12:4->32:10]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[15:8->32:4]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[16:7->32:4]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[17:7->32:4]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[17:7->32:4]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[26:10->32:4]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[26:10->32:4]
+posCursor:[26:14] posNoWhite:[26:13] Found expr:[11:4->33:2]
+posCursor:[26:14] posNoWhite:[26:13] Found expr:[12:4->33:2]
+posCursor:[26:14] posNoWhite:[26:13] Found expr:[15:4->33:2]
+JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[26:10->0:-1]
 Completable: Cpath int-> <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -449,16 +419,10 @@ Complete src/CompletionJsx.res 28:20
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[8:13->33:3]
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[9:4->32:10]
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[10:4->32:10]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[11:4->32:10]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[12:4->32:10]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[15:8->32:4]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[16:7->32:4]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[17:7->32:4]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[17:7->32:4]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[28:10->32:4]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[28:10->32:4]
+posCursor:[28:20] posNoWhite:[28:19] Found expr:[11:4->33:2]
+posCursor:[28:20] posNoWhite:[28:19] Found expr:[12:4->33:2]
+posCursor:[28:20] posNoWhite:[28:19] Found expr:[15:4->33:2]
+JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[28:10->28:20]
 Completable: Cpath Value[someArr]->a <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -489,16 +453,10 @@ posCursor:[30:12] posNoWhite:[30:11] Found expr:[9:4->32:10]
 posCursor:[30:12] posNoWhite:[30:11] Found expr:[10:4->32:10]
 posCursor:[30:12] posNoWhite:[30:11] Found expr:[11:4->32:10]
 posCursor:[30:12] posNoWhite:[30:11] Found expr:[12:4->32:10]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[15:5->32:10]
-JSX <div:[15:5->15:8] > _children:15:8
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[15:8->33:2]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[16:7->33:2]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[17:7->33:2]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[17:7->33:2]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[30:10->33:2]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[30:10->33:2]
-posCursor:[30:12] posNoWhite:[30:11] Found expr:[30:10->32:10]
-JSX <di:[30:10->30:12] div[32:6->32:9]=...[32:6->32:9]> _children:32:9
+posCursor:[30:12] posNoWhite:[30:11] Found expr:[15:4->32:10]
+JSX <div:[15:5->15:8] > _children:16:7
+posCursor:[30:12] posNoWhite:[30:11] Found expr:[30:9->32:10]
+JSX <di:[30:10->30:12] div[32:6->32:9]=...[32:6->32:9]> _children:None
 Completable: ChtmlElement <di
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
 Resolved opens 1 Stdlib
@@ -526,7 +484,7 @@ Resolved opens 1 Stdlib
   }]
 
 Complete src/CompletionJsx.res 45:23
-posCursor:[45:23] posNoWhite:[45:22] Found expr:[45:4->45:23]
+posCursor:[45:23] posNoWhite:[45:22] Found expr:[45:3->45:23]
 JSX <CompWithoutJsxPpx:[45:4->45:21] n[45:22->45:23]=...[45:22->45:23]> _children:None
 Completable: Cjsx([CompWithoutJsxPpx], n, [n])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -541,7 +499,7 @@ Path CompWithoutJsxPpx.make
   }]
 
 Complete src/CompletionJsx.res 48:27
-posCursor:[48:27] posNoWhite:[48:26] Found expr:[48:4->48:28]
+posCursor:[48:27] posNoWhite:[48:26] Found expr:[48:3->48:28]
 JSX <SomeComponent:[48:4->48:17] someProp[48:18->48:26]=...[48:18->48:26]> _children:None
 Completable: Cexpression CJsxPropValue [SomeComponent] someProp
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -560,7 +518,7 @@ Path SomeComponent.make
   }]
 
 Complete src/CompletionJsx.res 51:11
-posCursor:[51:11] posNoWhite:[51:10] Found expr:[51:4->51:11]
+posCursor:[51:11] posNoWhite:[51:10] Found expr:[51:3->51:11]
 JSX <h1:[51:4->51:6] hidd[51:7->51:11]=...[51:7->51:11]> _children:None
 Completable: Cjsx([h1], hidd, [hidd])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -576,7 +534,7 @@ Path JsxDOM.domProps
   }]
 
 Complete src/CompletionJsx.res 61:30
-posCursor:[61:30] posNoWhite:[61:28] Found expr:[61:4->61:29]
+posCursor:[61:30] posNoWhite:[61:28] Found expr:[61:3->61:29]
 JSX <IntrinsicElementLowercase:[61:4->61:29] > _children:None
 Completable: Cjsx([IntrinsicElementLowercase], "", [])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -603,7 +561,7 @@ Path IntrinsicElementLowercase.make
   }]
 
 Complete src/CompletionJsx.res 73:36
-posCursor:[73:36] posNoWhite:[73:35] Found expr:[73:4->73:41]
+posCursor:[73:36] posNoWhite:[73:35] Found expr:[73:3->73:41]
 JSX <MultiPropComp:[73:4->73:17] name[73:18->73:22]=...[73:23->73:30] time[73:31->73:35]=...[73:37->73:40]> _children:None
 Completable: Cexpression CJsxPropValue [MultiPropComp] time
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -629,7 +587,7 @@ Path MultiPropComp.make
   }]
 
 Complete src/CompletionJsx.res 76:36
-posCursor:[76:36] posNoWhite:[76:35] Found expr:[76:4->76:40]
+posCursor:[76:36] posNoWhite:[76:35] Found expr:[76:3->76:40]
 JSX <MultiPropComp:[76:4->76:17] name[76:18->76:22]=...[76:23->76:30] time[76:31->76:35]=...[76:37->76:40]> _children:None
 Completable: Cexpression CJsxPropValue [MultiPropComp] time
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -655,7 +613,7 @@ Path MultiPropComp.make
   }]
 
 Complete src/CompletionJsx.res 79:28
-posCursor:[79:28] posNoWhite:[79:27] Found expr:[79:4->79:32]
+posCursor:[79:28] posNoWhite:[79:27] Found expr:[79:3->79:32]
 JSX <MultiPropComp:[79:4->79:17] name[79:18->79:22]=...[79:18->79:22] time[79:23->79:27]=...[79:29->79:32]> _children:None
 Completable: Cexpression CJsxPropValue [MultiPropComp] time
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -681,8 +639,8 @@ Path MultiPropComp.make
   }]
 
 Complete src/CompletionJsx.res 89:26
-posCursor:[89:26] posNoWhite:[89:24] Found expr:[89:4->89:27]
-JSX <Info:[89:4->89:8] _type[89:9->89:14]=...[89:16->89:24]> _children:89:26
+posCursor:[89:26] posNoWhite:[89:24] Found expr:[89:3->89:27]
+JSX <Info:[89:4->89:8] _type[89:9->89:14]=...[89:16->89:24]> _children:None
 Completable: Cjsx([Info], "", [_type])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
 Resolved opens 1 Stdlib
@@ -696,10 +654,8 @@ Path Info.make
   }]
 
 Complete src/CompletionJsx.res 93:19
-posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:12->93:24]
-JSX <p:[93:12->93:13] > _children:93:13
-posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:13->93:20]
-posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:15->93:20]
+posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:11->96:0]
+JSX <p:[93:12->93:13] > _children:93:15
 posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:15->93:19]
 Pexp_field [93:15->93:17] s:[93:18->93:19]
 Completable: Cpath string.s
diff --git a/tests/analysis_tests/tests/src/expected/CompletionJsxProps.res.txt b/tests/analysis_tests/tests/src/expected/CompletionJsxProps.res.txt
index 11d4780017..9c5da2055e 100644
--- a/tests/analysis_tests/tests/src/expected/CompletionJsxProps.res.txt
+++ b/tests/analysis_tests/tests/src/expected/CompletionJsxProps.res.txt
@@ -1,5 +1,5 @@
 Complete src/CompletionJsxProps.res 0:47
-posCursor:[0:47] posNoWhite:[0:46] Found expr:[0:12->0:47]
+posCursor:[0:47] posNoWhite:[0:46] Found expr:[0:11->0:47]
 JSX <CompletionSupport.TestComponent:[0:12->0:43] on[0:44->0:46]=...__ghost__[0:-1->0:-1]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] on
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -21,7 +21,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 3:48
-posCursor:[3:48] posNoWhite:[3:47] Found expr:[3:12->3:48]
+posCursor:[3:48] posNoWhite:[3:47] Found expr:[3:11->3:48]
 JSX <CompletionSupport.TestComponent:[3:12->3:43] on[3:44->3:46]=...[3:47->3:48]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] on=t
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -44,7 +44,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 6:50
-posCursor:[6:50] posNoWhite:[6:49] Found expr:[6:12->6:50]
+posCursor:[6:50] posNoWhite:[6:49] Found expr:[6:11->6:50]
 JSX <CompletionSupport.TestComponent:[6:12->6:43] test[6:44->6:48]=...[6:49->6:50]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] test=T
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -134,7 +134,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 9:52
-posCursor:[9:52] posNoWhite:[9:51] Found expr:[9:12->9:52]
+posCursor:[9:52] posNoWhite:[9:51] Found expr:[9:11->9:52]
 JSX <CompletionSupport.TestComponent:[9:12->9:43] polyArg[9:44->9:51]=...__ghost__[0:-1->0:-1]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] polyArg
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -176,7 +176,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 12:54
-posCursor:[12:54] posNoWhite:[12:53] Found expr:[12:12->12:54]
+posCursor:[12:54] posNoWhite:[12:53] Found expr:[12:11->12:54]
 JSX <CompletionSupport.TestComponent:[12:12->12:43] polyArg[12:44->12:51]=...[12:52->12:54]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] polyArg=#t
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -210,7 +210,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 15:22
-posCursor:[15:22] posNoWhite:[15:21] Found expr:[15:12->15:25]
+posCursor:[15:22] posNoWhite:[15:21] Found expr:[15:11->15:25]
 JSX <div:[15:12->15:15] muted[15:16->15:21]=...__ghost__[0:-1->0:-1]> _children:None
 Completable: Cexpression CJsxPropValue [div] muted
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -233,7 +233,7 @@ Path JsxDOM.domProps
   }]
 
 Complete src/CompletionJsxProps.res 18:29
-posCursor:[18:29] posNoWhite:[18:28] Found expr:[18:12->18:32]
+posCursor:[18:29] posNoWhite:[18:28] Found expr:[18:11->18:32]
 JSX <div:[18:12->18:15] onMouseEnter[18:16->18:28]=...__ghost__[0:-1->0:-1]> _children:None
 Completable: Cexpression CJsxPropValue [div] onMouseEnter
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -253,7 +253,7 @@ Path JsxDOM.domProps
   }]
 
 Complete src/CompletionJsxProps.res 22:52
-posCursor:[22:52] posNoWhite:[22:51] Found expr:[22:12->22:52]
+posCursor:[22:52] posNoWhite:[22:51] Found expr:[22:11->22:52]
 JSX <CompletionSupport.TestComponent:[22:12->22:43] testArr[22:44->22:51]=...__ghost__[0:-1->0:-1]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] testArr
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -272,7 +272,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 26:54
-posCursor:[26:54] posNoWhite:[26:53] Found expr:[26:12->26:56]
+posCursor:[26:54] posNoWhite:[26:53] Found expr:[26:11->26:56]
 JSX <CompletionSupport.TestComponent:[26:12->26:43] testArr[26:44->26:51]=...[26:53->26:55]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] testArr->array
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -306,7 +306,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 31:53
-posCursor:[31:53] posNoWhite:[31:52] Found expr:[31:12->31:54]
+posCursor:[31:53] posNoWhite:[31:52] Found expr:[31:11->31:54]
 JSX <CompletionSupport.TestComponent:[31:12->31:43] polyArg[31:44->31:51]=...[31:52->31:54]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] polyArg->recordBody
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -348,7 +348,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 34:49
-posCursor:[34:49] posNoWhite:[34:48] Found expr:[34:12->34:50]
+posCursor:[34:49] posNoWhite:[34:48] Found expr:[34:11->34:50]
 JSX <CompletionSupport.TestComponent:[34:12->34:43] on[34:44->34:46]=...[34:48->34:49]> _children:None
 Completable: Cexpression CJsxPropValue [CompletionSupport, TestComponent] on=t->recordBody
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -376,7 +376,7 @@ Path CompletionSupport.TestComponent.make
   }]
 
 Complete src/CompletionJsxProps.res 44:44
-posCursor:[44:44] posNoWhite:[44:43] Found expr:[44:12->44:44]
+posCursor:[44:44] posNoWhite:[44:43] Found expr:[44:11->44:44]
 JSX <CompletableComponentLazy:[44:12->44:36] status[44:37->44:43]=...__ghost__[0:-1->0:-1]> _children:None
 Completable: Cexpression CJsxPropValue [CompletableComponentLazy] status
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
diff --git a/tests/analysis_tests/tests/src/expected/Div.res.txt b/tests/analysis_tests/tests/src/expected/Div.res.txt
index 1fb532b983..deb951ada8 100644
--- a/tests/analysis_tests/tests/src/expected/Div.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Div.res.txt
@@ -2,7 +2,7 @@ Hover src/Div.res 0:10
 {"contents": {"kind": "markdown", "value": "```rescript\nstring\n```"}}
 
 Complete src/Div.res 3:17
-posCursor:[3:17] posNoWhite:[3:16] Found expr:[3:4->3:17]
+posCursor:[3:17] posNoWhite:[3:16] Found expr:[3:3->3:17]
 JSX <div:[3:4->3:7] dangerous[3:8->3:17]=...[3:8->3:17]> _children:None
 Completable: Cjsx([div], dangerous, [dangerous])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
diff --git a/tests/analysis_tests/tests/src/expected/Fragment.res.txt b/tests/analysis_tests/tests/src/expected/Fragment.res.txt
index 6250ed882a..87e7339d50 100644
--- a/tests/analysis_tests/tests/src/expected/Fragment.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Fragment.res.txt
@@ -4,7 +4,7 @@ Hover src/Fragment.res 6:19
 Hover src/Fragment.res 9:56
 Nothing at that position. Now trying to use completion.
 posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:9->9:70]
-posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:13->9:66]
-JSX <SectionHeader:[9:13->9:26] > _children:9:26
+posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:12->9:67]
+JSX <SectionHeader:[9:13->9:26] > _children:9:29
 null
 
diff --git a/tests/analysis_tests/tests/src/expected/Hover.res.txt b/tests/analysis_tests/tests/src/expected/Hover.res.txt
index 8d692baed4..a35e59ff97 100644
--- a/tests/analysis_tests/tests/src/expected/Hover.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Hover.res.txt
@@ -50,14 +50,14 @@ Hover src/Hover.res 77:7
 
 Hover src/Hover.res 91:10
 Nothing at that position. Now trying to use completion.
-posCursor:[91:10] posNoWhite:[91:8] Found expr:[88:3->91:9]
-JSX <Comp:[88:3->88:7] > _children:88:7
+posCursor:[91:10] posNoWhite:[91:8] Found expr:[88:2->94:0]
+JSX <Comp:[88:3->88:7] > _children:89:4
 null
 
 Hover src/Hover.res 98:10
 Nothing at that position. Now trying to use completion.
-posCursor:[98:10] posNoWhite:[98:9] Found expr:[95:3->98:10]
-JSX <Comp1:[95:3->95:8] > _children:95:8
+posCursor:[98:10] posNoWhite:[98:9] Found expr:[95:2->101:0]
+JSX <Comp1:[95:3->95:8] > _children:96:4
 null
 
 Hover src/Hover.res 103:25
diff --git a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
index 2364cc159c..f88caacfcf 100644
--- a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
@@ -2,7 +2,7 @@ Definition src/Jsx2.res 5:9
 {"uri": "Jsx2.res", "range": {"start": {"line": 2, "character": 6}, "end": {"line": 2, "character": 10}}}
 
 Complete src/Jsx2.res 8:15
-posCursor:[8:15] posNoWhite:[8:14] Found expr:[8:4->8:15]
+posCursor:[8:15] posNoWhite:[8:14] Found expr:[8:3->8:15]
 JSX <M:[8:4->8:5] second[8:6->8:12]=...[8:13->8:15]> _children:None
 Completable: Cexpression CJsxPropValue [M] second=fi
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -12,7 +12,7 @@ Path M.make
 []
 
 Complete src/Jsx2.res 11:20
-posCursor:[11:20] posNoWhite:[11:19] Found expr:[11:4->11:20]
+posCursor:[11:20] posNoWhite:[11:19] Found expr:[11:3->11:20]
 JSX <M:[11:4->11:5] second[11:6->11:12]=...[11:13->11:18] f[11:19->11:20]=...[11:19->11:20]> _children:None
 Completable: Cjsx([M], f, [second, f])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -33,7 +33,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 14:13
-posCursor:[14:13] posNoWhite:[14:12] Found expr:[14:12->14:13]
+posCursor:[14:13] posNoWhite:[14:12] Found expr:[14:11->14:13]
 JSX <M:[14:12->14:13] > _children:None
 Completable: Cpath Module[M]
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -71,7 +71,7 @@ Path M
   }]
 
 Complete src/Jsx2.res 22:19
-posCursor:[22:19] posNoWhite:[22:18] Found expr:[22:4->22:19]
+posCursor:[22:19] posNoWhite:[22:18] Found expr:[22:3->22:19]
 JSX <M:[22:4->22:5] prop[22:6->22:10]=...[22:12->22:16] k[22:18->22:19]=...[22:18->22:19]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -86,7 +86,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 25:17
-posCursor:[25:17] posNoWhite:[25:16] Found expr:[25:4->25:17]
+posCursor:[25:17] posNoWhite:[25:16] Found expr:[25:3->25:17]
 JSX <M:[25:4->25:5] prop[25:6->25:10]=...[25:11->25:15] k[25:16->25:17]=...[25:16->25:17]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -101,7 +101,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 28:21
-posCursor:[28:21] posNoWhite:[28:20] Found expr:[28:4->28:21]
+posCursor:[28:21] posNoWhite:[28:20] Found expr:[28:3->28:21]
 JSX <M:[28:4->28:5] prop[28:6->28:10]=...[28:11->28:19] k[28:20->28:21]=...[28:20->28:21]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -116,7 +116,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 31:24
-posCursor:[31:24] posNoWhite:[31:23] Found expr:[31:4->31:24]
+posCursor:[31:24] posNoWhite:[31:23] Found expr:[31:3->31:24]
 JSX <M:[31:4->31:5] prop[31:6->31:10]=...[31:11->31:22] k[31:23->31:24]=...[31:23->31:24]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -131,8 +131,8 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 34:18
-posCursor:[34:18] posNoWhite:[34:17] Found expr:[34:4->34:18]
-JSX <M:[34:4->34:5] prop[34:6->34:10]=...[34:12->34:16] k[34:17->34:18]=...[34:17->34:18]> _children:None
+posCursor:[34:18] posNoWhite:[34:17] Found expr:[34:3->34:18]
+JSX <M:[34:4->34:5] prop[34:6->34:10]=...[34:11->34:16] k[34:17->34:18]=...[34:17->34:18]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
 Resolved opens 1 Stdlib
@@ -146,7 +146,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 37:16
-posCursor:[37:16] posNoWhite:[37:15] Found expr:[37:4->37:16]
+posCursor:[37:16] posNoWhite:[37:15] Found expr:[37:3->37:16]
 JSX <M:[37:4->37:5] prop[37:6->37:10]=...[37:11->37:14] k[37:15->37:16]=...[37:15->37:16]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -161,7 +161,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 40:17
-posCursor:[40:17] posNoWhite:[40:16] Found expr:[40:4->40:17]
+posCursor:[40:17] posNoWhite:[40:16] Found expr:[40:3->40:17]
 JSX <M:[40:4->40:5] prop[40:6->40:10]=...[40:11->40:15] k[40:16->40:17]=...[40:16->40:17]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -176,7 +176,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 43:18
-posCursor:[43:18] posNoWhite:[43:17] Found expr:[43:4->43:18]
+posCursor:[43:18] posNoWhite:[43:17] Found expr:[43:3->43:18]
 JSX <M:[43:4->43:5] prop[43:6->43:10]=...[43:11->43:16] k[43:17->43:18]=...[43:17->43:18]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -191,7 +191,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 46:16
-posCursor:[46:16] posNoWhite:[46:15] Found expr:[46:4->46:16]
+posCursor:[46:16] posNoWhite:[46:15] Found expr:[46:3->46:16]
 JSX <M:[46:4->46:5] prop[46:6->46:10]=...[46:11->46:14] k[46:15->46:16]=...[46:15->46:16]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -206,7 +206,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 49:27
-posCursor:[49:27] posNoWhite:[49:26] Found expr:[49:4->49:27]
+posCursor:[49:27] posNoWhite:[49:26] Found expr:[49:3->49:27]
 JSX <M:[49:4->49:5] prop[49:6->49:10]=...[49:11->49:25] k[49:26->49:27]=...[49:26->49:27]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -221,7 +221,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 52:38
-posCursor:[52:38] posNoWhite:[52:37] Found expr:[52:4->52:38]
+posCursor:[52:38] posNoWhite:[52:37] Found expr:[52:3->52:38]
 JSX <M:[52:4->52:5] prop[52:6->52:10]=...[52:11->52:36] k[52:37->52:38]=...[52:37->52:38]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -236,7 +236,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 55:25
-posCursor:[55:25] posNoWhite:[55:24] Found expr:[55:4->55:25]
+posCursor:[55:25] posNoWhite:[55:24] Found expr:[55:3->55:25]
 JSX <M:[55:4->55:5] prop[55:6->55:10]=...[55:11->55:23] k[55:24->55:25]=...[55:24->55:25]> _children:None
 Completable: Cjsx([M], k, [prop, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -254,7 +254,7 @@ Definition src/Jsx2.res 58:11
 {"uri": "Component.res", "range": {"start": {"line": 1, "character": 4}, "end": {"line": 1, "character": 8}}}
 
 Complete src/Jsx2.res 68:10
-posCursor:[68:10] posNoWhite:[68:9] Found expr:[68:4->68:10]
+posCursor:[68:10] posNoWhite:[68:9] Found expr:[68:3->68:10]
 JSX <Ext:[68:4->68:7] al[68:8->68:10]=...[68:8->68:10]> _children:None
 Completable: Cjsx([Ext], al, [al])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -269,7 +269,7 @@ Path Ext.make
   }]
 
 Complete src/Jsx2.res 71:11
-posCursor:[71:11] posNoWhite:[71:10] Found expr:[71:4->71:11]
+posCursor:[71:11] posNoWhite:[71:10] Found expr:[71:3->71:11]
 JSX <M:[71:4->71:5] first[71:6->71:11]=...[71:6->71:11]> _children:None
 Completable: Cjsx([M], first, [first])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -278,7 +278,7 @@ Path M.make
 []
 
 Complete src/Jsx2.res 74:16
-posCursor:[74:16] posNoWhite:[74:15] Found expr:[74:4->74:16]
+posCursor:[74:16] posNoWhite:[74:15] Found expr:[74:3->74:16]
 JSX <M:[74:4->74:5] first[74:6->74:11]=...[74:12->74:14] k[74:15->74:16]=...[74:15->74:16]> _children:None
 Completable: Cjsx([M], k, [first, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -293,7 +293,7 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 77:23
-posCursor:[77:23] posNoWhite:[77:22] Found expr:[77:4->77:23]
+posCursor:[77:23] posNoWhite:[77:22] Found expr:[77:3->77:23]
 JSX <M:[77:4->77:5] first[77:6->77:11]=...[77:19->77:21] k[77:22->77:23]=...[77:22->77:23]> _children:None
 Completable: Cjsx([M], k, [first, k])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -308,22 +308,16 @@ Path M.make
   }]
 
 Complete src/Jsx2.res 80:6
-posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:4->85:69]
-Pexp_apply ...[83:20->83:21] (...[80:4->83:19], ...[84:2->85:69])
-posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:4->83:19]
-JSX <M:[80:4->80:5] > _children:80:5
-posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:5->83:20]
-posCursor:[80:6] posNoWhite:[80:5] Found expr:__ghost__[80:5->83:20]
-Pexp_construct []:__ghost__[80:5->83:20] None
-posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:4->83:19]
-JSX <M:[80:4->80:5] > _children:80:5
-posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:5->83:20]
-posCursor:[80:6] posNoWhite:[80:5] Found expr:__ghost__[80:5->83:20]
-Pexp_construct []:__ghost__[80:5->83:20] None
+posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:3->85:69]
+Pexp_apply ...[83:20->83:21] (...[80:3->83:19], ...[84:2->85:69])
+posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:3->83:19]
+JSX <M:[80:4->80:5] > _children:83:0
+posCursor:[80:6] posNoWhite:[80:5] Found expr:[80:3->83:19]
+JSX <M:[80:4->80:5] > _children:83:0
 []
 
 Complete src/Jsx2.res 89:16
-posCursor:[89:16] posNoWhite:[89:15] Found expr:[89:4->89:16]
+posCursor:[89:16] posNoWhite:[89:15] Found expr:[89:3->89:16]
 JSX <WithChildren:[89:4->89:16] > _children:None
 Completable: Cpath Module[WithChildren]
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -339,7 +333,7 @@ Path WithChildren
   }]
 
 Complete src/Jsx2.res 91:18
-posCursor:[91:18] posNoWhite:[91:17] Found expr:[91:4->91:18]
+posCursor:[91:18] posNoWhite:[91:17] Found expr:[91:3->91:18]
 JSX <WithChildren:[91:4->91:16] n[91:17->91:18]=...[91:17->91:18]> _children:None
 Completable: Cjsx([WithChildren], n, [n])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -445,8 +439,8 @@ Path DefineSomeFields.th
   }]
 
 Complete src/Jsx2.res 122:20
-posCursor:[122:20] posNoWhite:[122:19] Found expr:[121:3->125:4]
-JSX <div:[121:3->121:6] x[122:5->122:6]=...[122:7->122:20] name[124:4->124:8]=...[124:9->124:11]> _children:125:2
+posCursor:[122:20] posNoWhite:[122:19] Found expr:[121:2->125:4]
+JSX <div:[121:3->121:6] x[122:5->122:6]=...[122:7->122:20] name[124:4->124:8]=...[124:9->124:11]> _children:None
 posCursor:[122:20] posNoWhite:[122:19] Found expr:[122:7->122:20]
 Pexp_ident Outer.Inner.h:[122:7->122:20]
 Completable: Cpath Value[Outer, Inner, h]
@@ -463,7 +457,7 @@ Path Outer.Inner.h
   }]
 
 Complete src/Jsx2.res 129:19
-posCursor:[129:19] posNoWhite:[129:18] Found expr:[128:3->131:9]
+posCursor:[129:19] posNoWhite:[129:18] Found expr:[128:2->131:9]
 JSX <div:[128:3->128:6] x[129:5->129:6]=...[129:7->131:8]> _children:None
 posCursor:[129:19] posNoWhite:[129:18] Found expr:[129:7->131:8]
 Pexp_ident Outer.Inner.:[129:7->131:8]
@@ -481,7 +475,7 @@ Path Outer.Inner.
   }]
 
 Complete src/Jsx2.res 136:7
-posCursor:[136:7] posNoWhite:[136:6] Found expr:[135:3->138:9]
+posCursor:[136:7] posNoWhite:[136:6] Found expr:[135:2->138:9]
 JSX <div:[135:3->135:6] x[136:5->136:6]=...[138:4->138:8]> _children:None
 Completable: Cexpression CJsxPropValue [div] x
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -501,8 +495,8 @@ Path JsxDOM.domProps
   }]
 
 Complete src/Jsx2.res 150:21
-posCursor:[150:21] posNoWhite:[150:20] Found expr:[150:12->150:32]
-JSX <Nested.Co:[150:12->150:21] name[150:22->150:26]=...[150:27->150:29]> _children:150:30
+posCursor:[150:21] posNoWhite:[150:20] Found expr:[150:11->150:32]
+JSX <Nested.Co:[150:12->150:21] name[150:22->150:26]=...[150:27->150:29]> _children:None
 Completable: Cpath Module[Nested, Co]
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
 Resolved opens 1 Stdlib
@@ -517,7 +511,7 @@ Path Nested.Co
   }]
 
 Complete src/Jsx2.res 153:19
-posCursor:[153:19] posNoWhite:[153:18] Found expr:[153:12->153:25]
+posCursor:[153:19] posNoWhite:[153:18] Found expr:[153:11->153:25]
 JSX <Nested.:[153:12->153:24] > _children:None
 Completable: Cpath Module[Nested, ""]
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -533,25 +527,8 @@ Path Nested.
   }]
 
 Hover src/Jsx2.res 162:12
-Nothing at that position. Now trying to use completion.
-posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:2->162:24]
-posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:6->162:20]
-JSX <Comp:[162:6->162:10] age[162:11->162:14]=...[162:15->162:17]> _children:162:18
-Completable: Cjsx([Comp], age, [age])
-Package opens Stdlib.place holder Pervasives.JsxModules.place holder
-Resolved opens 1 Stdlib
-Path Comp.make
-{"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
+{"contents": {"kind": "markdown", "value": "```rescript\nComp.props<int>\n```\n\n---\n\n```\n \n```\n```rescript\ntype Comp.props<'age> = {age: 'age}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.res%22%2C157%2C2%5D)\n"}}
 
 Hover src/Jsx2.res 167:16
-Nothing at that position. Now trying to use completion.
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:2->167:33]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:6->167:28]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:10->167:24]
-JSX <Comp:[167:10->167:14] age[167:15->167:18]=...[167:19->167:21]> _children:167:22
-Completable: Cjsx([Comp], age, [age])
-Package opens Stdlib.place holder Pervasives.JsxModules.place holder
-Resolved opens 1 Stdlib
-Path Comp.make
-{"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
+{"contents": {"kind": "markdown", "value": "```rescript\nComp.props<int>\n```\n\n---\n\n```\n \n```\n```rescript\ntype Comp.props<'age> = {age: 'age}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.res%22%2C157%2C2%5D)\n"}}
 
diff --git a/tests/analysis_tests/tests/src/expected/JsxV4.res.txt b/tests/analysis_tests/tests/src/expected/JsxV4.res.txt
index cca05ca41c..ba54c5d047 100644
--- a/tests/analysis_tests/tests/src/expected/JsxV4.res.txt
+++ b/tests/analysis_tests/tests/src/expected/JsxV4.res.txt
@@ -2,7 +2,7 @@ Definition src/JsxV4.res 8:9
 {"uri": "JsxV4.res", "range": {"start": {"line": 5, "character": 6}, "end": {"line": 5, "character": 10}}}
 
 Complete src/JsxV4.res 11:20
-posCursor:[11:20] posNoWhite:[11:19] Found expr:[11:4->11:20]
+posCursor:[11:20] posNoWhite:[11:19] Found expr:[11:3->11:20]
 JSX <M4:[11:4->11:6] first[11:7->11:12]=...[11:13->11:18] f[11:19->11:20]=...[11:19->11:20]> _children:None
 Completable: Cjsx([M4], f, [first, f])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
diff --git a/tests/analysis_tests/tests/src/expected/RecoveryOnProp.res.txt b/tests/analysis_tests/tests/src/expected/RecoveryOnProp.res.txt
index 2dc24193b4..14a39634d6 100644
--- a/tests/analysis_tests/tests/src/expected/RecoveryOnProp.res.txt
+++ b/tests/analysis_tests/tests/src/expected/RecoveryOnProp.res.txt
@@ -1,5 +1,5 @@
 Complete src/RecoveryOnProp.res 6:26
-posCursor:[6:26] posNoWhite:[6:25] Found expr:[3:3->11:8]
+posCursor:[6:26] posNoWhite:[6:25] Found expr:[3:2->11:8]
 JSX <div:[3:3->3:6] onClick[4:4->4:11]=...[4:13->0:-1]> _children:None
 posCursor:[6:26] posNoWhite:[6:25] Found expr:[4:13->8:6]
 posCursor:[6:26] posNoWhite:[6:25] Found expr:[5:6->8:5]

From cc5beb435130bd331a69c2e7045c3c5471c40a3d Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 11 Mar 2025 21:20:26 +0100
Subject: [PATCH 24/99] print_jsx_unary_tag

---
 compiler/syntax/src/res_printer.ml | 63 ++++++++++++++++++++++++++----
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index dc327a5dd3..f341a09dcd 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2098,7 +2098,12 @@ and print_value_binding ~state ~rec_flag (vb : Parsetree.value_binding) cmt_tbl
           | {pexp_desc = Pexp_newtype _} -> false
           | {pexp_attributes = [({Location.txt = "res.taggedTemplate"}, _)]} ->
             false
-          | {pexp_desc = Pexp_jsx_fragment _} -> true
+          | {
+           pexp_desc =
+             ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
+             | Pexp_jsx_container_element _ );
+          } ->
+            true
           | e ->
             ParsetreeViewer.has_attributes e.pexp_attributes
             || ParsetreeViewer.is_array_access e)
@@ -2790,7 +2795,10 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
         | JSXChildrenItems xs -> xs
       in
       print_jsx_fragment ~state o xs c e.pexp_loc cmt_tbl
-    | Pexp_jsx_unary_element _ -> failwith "Pexp_jsx_unary_element 4"
+    | Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
+      ->
+      print_jsx_unary_tag ~state tag_name props cmt_tbl
     | Pexp_jsx_container_element _ -> failwith "Pexp_jsx_container_element 4"
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
@@ -4313,7 +4321,7 @@ and print_pexp_apply ~state expr cmt_tbl =
 
 and print_jsx_expression ~state lident args cmt_tbl =
   let name = print_jsx_name lident in
-  let formatted_props, children = print_jsx_props ~state args cmt_tbl in
+  let formatted_props, children = print_jsx_props_old ~state args cmt_tbl in
   (* <div className="test" /> *)
   let has_children =
     match children with
@@ -4410,6 +4418,26 @@ and print_jsx_expression ~state lident args cmt_tbl =
               ]);
        ])
 
+and print_jsx_unary_tag ~state tag_name props cmt_tbl =
+  let name = print_jsx_name tag_name in
+  let formatted_props = print_jsx_props ~state props cmt_tbl in
+  Doc.group
+    (Doc.concat
+       [
+         Doc.group
+           (Doc.concat
+              [
+                print_comments
+                  (Doc.concat [Doc.less_than; name])
+                  cmt_tbl tag_name.Asttypes.loc;
+                Doc.space;
+                (* todo: might not be needed if no props?*)
+                Doc.join formatted_props ~sep:Doc.space;
+                Doc.text "/>";
+              ]);
+         Doc.nil;
+       ])
+
 and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
     (children : Parsetree.expression list)
     (closing_lesser_than : Lexing.position) (fragment_loc : Warnings.loc)
@@ -4541,7 +4569,8 @@ and print_jsx_children ~state (children_expr : Parsetree.expression) ~sep
         | Nothing -> expr_doc);
       ]
 
-and print_jsx_props ~state args cmt_tbl : Doc.t * Parsetree.expression option =
+and print_jsx_props_old ~state args cmt_tbl :
+    Doc.t * Parsetree.expression option =
   (* This function was introduced because we have different formatting behavior for self-closing tags and other tags
      we always put /> on a new line for self-closing tag when it breaks
      <A
@@ -4592,7 +4621,7 @@ and print_jsx_props ~state args cmt_tbl : Doc.t * Parsetree.expression option =
         | Nolabel -> expr.pexp_loc
       in
       let trailing_comments_present = has_trailing_comments cmt_tbl loc in
-      let prop_doc = print_jsx_prop ~state last_prop cmt_tbl in
+      let prop_doc = print_jsx_prop_old ~state last_prop cmt_tbl in
       let formatted_props =
         Doc.concat
           [
@@ -4613,12 +4642,12 @@ and print_jsx_props ~state args cmt_tbl : Doc.t * Parsetree.expression option =
       in
       (formatted_props, Some children)
     | arg :: args ->
-      let prop_doc = print_jsx_prop ~state arg cmt_tbl in
+      let prop_doc = print_jsx_prop_old ~state arg cmt_tbl in
       loop (prop_doc :: props) args
   in
   loop [] args
 
-and print_jsx_prop ~state arg cmt_tbl =
+and print_jsx_prop_old ~state arg cmt_tbl =
   match arg with
   | ( ((Asttypes.Labelled {txt = lbl_txt} | Optional {txt = lbl_txt}) as lbl),
       {
@@ -4674,6 +4703,26 @@ and print_jsx_prop ~state arg cmt_tbl =
     let full_loc = {arg_loc with loc_end = expr.pexp_loc.loc_end} in
     print_comments (Doc.concat [lbl_doc; expr_doc]) cmt_tbl full_loc
 
+and print_jsx_prop ~state prop cmt_tbl =
+  let open Parsetree in
+  match prop with
+  | JSXPropPunning (is_optional, name) ->
+    if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
+    else Doc.text name.txt
+  | JSXPropValue (name, is_optional, value) ->
+    let value =
+      if is_optional then
+        [Doc.question; print_expression_with_comments ~state value cmt_tbl]
+      else [print_expression_with_comments ~state value cmt_tbl]
+    in
+    Doc.concat [Doc.text name.txt; Doc.equal; Doc.group (Doc.concat value)]
+  | JSXPropSpreading (_, value) ->
+    Doc.concat
+      [Doc.dotdotdot; print_expression_with_comments ~state value cmt_tbl]
+
+and print_jsx_props ~state props cmt_tbl : Doc.t list =
+  props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
+
 (* div -> div.
  * Navabar.createElement -> Navbar
  * Staff.Users.createElement -> Staff.Users *)

From 5e060eaf1cfcb912338884b927badc10180022a9 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 12 Mar 2025 10:59:09 +0100
Subject: [PATCH 25/99] Rough print_jsx_container_tag

---
 compiler/syntax/src/res_printer.ml | 73 ++++++++++++++++++++++++++++--
 1 file changed, 70 insertions(+), 3 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index f341a09dcd..d8010b1156 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2799,7 +2799,13 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
         {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
       ->
       print_jsx_unary_tag ~state tag_name props cmt_tbl
-    | Pexp_jsx_container_element _ -> failwith "Pexp_jsx_container_element 4"
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = tag_name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      print_jsx_container_tag ~state tag_name props children cmt_tbl
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
       Doc.concat
@@ -4361,7 +4367,7 @@ and print_jsx_expression ~state lident args cmt_tbl =
                Doc.line;
                (match children with
                | Some children_expression ->
-                 print_jsx_children ~state children_expression ~sep:line_sep
+                 print_jsx_children_old ~state children_expression ~sep:line_sep
                    cmt_tbl
                | None -> Doc.nil);
              ]);
@@ -4438,6 +4444,54 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
          Doc.nil;
        ])
 
+and print_jsx_container_tag ~state tag_name props
+    (children : Parsetree.jsx_children) cmt_tbl =
+  let name = print_jsx_name tag_name in
+  let formatted_props = print_jsx_props ~state props cmt_tbl in
+  (* <div className="test" /> *)
+  let has_children =
+    match children with
+    | JSXChildrenSpreading _ | JSXChildrenItems (_ :: _) -> true
+    | JSXChildrenItems [] -> false
+  in
+  let line_sep = Doc.line in
+  let print_children children =
+    print_jsx_children ~sep:line_sep ~state children cmt_tbl
+    |> Doc.group |> Doc.indent
+  in
+
+  Doc.group
+    (Doc.concat
+       [
+         Doc.group
+           (Doc.concat
+              [
+                print_comments
+                  (Doc.concat [Doc.less_than; name])
+                  cmt_tbl tag_name.Asttypes.loc;
+                Doc.space;
+                (* todo: might not be needed if no props?*)
+                Doc.join formatted_props ~sep:Doc.space;
+                (* if tag A has trailing comments then put > on the next line
+                           <A
+                           // comments
+                           >
+                           </A>
+                        *)
+                (if has_trailing_comments cmt_tbl tag_name.Asttypes.loc then
+                   Doc.concat [Doc.soft_line; Doc.greater_than]
+                 else Doc.greater_than);
+              ]);
+         Doc.concat
+           [
+             (if has_children then Doc.line else Doc.nil);
+             (if has_children then print_children children else Doc.nil);
+             Doc.text "</";
+             name;
+             Doc.greater_than;
+           ];
+       ])
+
 and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
     (children : Parsetree.expression list)
     (closing_lesser_than : Lexing.position) (fragment_loc : Warnings.loc)
@@ -4498,7 +4552,7 @@ and print_jsx_child ~state (expr : Parsetree.expression) cmt_tbl =
   | Braced braces_loc ->
     print_comments (add_parens_or_braces expr_doc) cmt_tbl braces_loc
 
-and print_jsx_children ~state (children_expr : Parsetree.expression) ~sep
+and print_jsx_children_old ~state (children_expr : Parsetree.expression) ~sep
     cmt_tbl =
   match children_expr.pexp_desc with
   | Pexp_construct ({txt = Longident.Lident "::"}, _) ->
@@ -4569,6 +4623,19 @@ and print_jsx_children ~state (children_expr : Parsetree.expression) ~sep
         | Nothing -> expr_doc);
       ]
 
+and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
+    cmt_tbl =
+  let open Parsetree in
+  match children_expr with
+  | JSXChildrenSpreading child ->
+    Doc.concat
+      [Doc.dotdotdot; print_expression_with_comments ~state child cmt_tbl]
+  | JSXChildrenItems children ->
+    children
+    |> List.map (fun child ->
+           print_expression_with_comments ~state child cmt_tbl)
+    |> Doc.join ~sep
+
 and print_jsx_props_old ~state args cmt_tbl :
     Doc.t * Parsetree.expression option =
   (* This function was introduced because we have different formatting behavior for self-closing tags and other tags

From e57ab30fc3ffaaa1b5d9176aca3a35d517e7ae68 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 12 Mar 2025 12:32:33 +0100
Subject: [PATCH 26/99] Add ml printing

---
 compiler/ml/pprintast.ml | 43 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/compiler/ml/pprintast.ml b/compiler/ml/pprintast.ml
index daf00ce7aa..2a96bca746 100644
--- a/compiler/ml/pprintast.ml
+++ b/compiler/ml/pprintast.ml
@@ -794,17 +794,54 @@ and simple_expr ctxt f x =
       let expression = expression ctxt in
       pp f fmt (pattern ctxt) s expression e1 direction_flag df expression e2
         expression e3
+      (* TODO: what should this really be?
+        I miss some context why this print form even exists.
+        Can/should we improve the output here?
+        *)
     | Pexp_jsx_fragment (_, xs, _) ->
       pp f "<>%a</>" (list (simple_expr ctxt)) (collect_jsx_children xs)
-    | Pexp_jsx_unary_element _ -> failwith "TODO: Pexp_jsx_unary_element 2"
-    | Pexp_jsx_container_element _ ->
-      failwith "TODO: Pexp_jsx_container_element 2"
+    | Pexp_jsx_unary_element
+        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
+      -> (
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      match props with
+      | [] -> pp f "<%s />" name
+      | _ -> pp f "<%s %a />" name (print_jsx_props ctxt) props)
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = tag_name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } -> (
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      match props with
+      | [] ->
+        pp f "<%s>%a</%s>" name
+          (list (simple_expr ctxt))
+          (collect_jsx_children children)
+          name
+      | _ ->
+        pp f "<%s %a>%a</%s>" name (print_jsx_props ctxt) props
+          (list (simple_expr ctxt))
+          (collect_jsx_children children)
+          name)
     | _ -> paren true (expression ctxt) f x
 
 and collect_jsx_children = function
   | JSXChildrenSpreading e -> [e]
   | JSXChildrenItems xs -> xs
 
+and print_jsx_prop ctxt f = function
+  | JSXPropPunning (is_optional, name) ->
+    pp f "%s" (if is_optional then "?" ^ name.txt else name.txt)
+  | JSXPropValue (name, is_optional, value) ->
+    pp f "%s=%s%a" name.txt
+      (if is_optional then "?" else "")
+      (simple_expr ctxt) value
+  | JSXPropSpreading (_, expr) -> pp f "{...%a}" (simple_expr ctxt) expr
+
+and print_jsx_props ctxt f = list ~sep:" " (print_jsx_prop ctxt) f
+
 and attributes ctxt f l = List.iter (attribute ctxt f) l
 
 and item_attributes ctxt f l = List.iter (item_attribute ctxt f) l

From b6407d0347d49db59fba2ba5987bfae4c0c59b6b Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 17 Mar 2025 18:02:51 +0100
Subject: [PATCH 27/99] Wing the sexp thing

---
 compiler/syntax/src/res_ast_debugger.ml | 32 +++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/compiler/syntax/src/res_ast_debugger.ml b/compiler/syntax/src/res_ast_debugger.ml
index 75ef62aac4..471edd30d2 100644
--- a/compiler/syntax/src/res_ast_debugger.ml
+++ b/compiler/syntax/src/res_ast_debugger.ml
@@ -717,13 +717,37 @@ module SexpAst = struct
           [
             Sexp.atom "Pexp_jsx_fragment"; Sexp.list (map_empty ~f:expression xs);
           ]
-      | Pexp_jsx_unary_element _ ->
-        failwith "Pexp_jsx_unary_element is not supported"
-      | Pexp_jsx_container_element _ ->
-        failwith "Pexp_jsx_container_element is not supported"
+      | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
+        Sexp.list
+          [
+            Sexp.atom "Pexp_jsx_unary_element";
+            Sexp.list (map_empty ~f:jsx_prop props);
+          ]
+      | Pexp_jsx_container_element
+          {
+            jsx_container_element_props = props;
+            jsx_container_element_children = children;
+          } ->
+        let xs =
+          match children with
+          | JSXChildrenSpreading e -> [e]
+          | JSXChildrenItems xs -> xs
+        in
+        Sexp.list
+          [
+            Sexp.atom "Pexp_jsx_container_element";
+            Sexp.list (map_empty ~f:jsx_prop props);
+            Sexp.list (map_empty ~f:expression xs);
+          ]
     in
     Sexp.list [Sexp.atom "expression"; desc]
 
+  and jsx_prop = function
+    | JSXPropPunning (_, name) -> Sexp.atom name.txt
+    | JSXPropValue (name, _, expr) ->
+      Sexp.list [Sexp.atom name.txt; expression expr]
+    | JSXPropSpreading (_, expr) -> expression expr
+
   and case c =
     Sexp.list
       [

From e565ca7c7f1ecd10f8716f5795a905193cc53781 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 18 Mar 2025 18:03:48 +0100
Subject: [PATCH 28/99] First step towards ast mapping

---
 compiler/ml/ast_mapper_from0.ml |  9 ++++++++-
 compiler/ml/ast_mapper_to0.ml   | 27 +++++++++++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index e889b0ac74..55d25fe0ec 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -315,6 +315,9 @@ module E = struct
     let open Exp in
     let loc = sub.location sub loc in
     let attrs = sub.attributes sub attrs in
+    let has_jsx_attribute () =
+      attrs |> List.exists (fun ({txt}, _) -> txt = "JSX")
+    in
     match desc with
     | Pexp_ident x -> ident ~loc ~attrs (map_loc sub x)
     | Pexp_constant x -> constant ~loc ~attrs (map_constant x)
@@ -327,6 +330,10 @@ module E = struct
         (map_opt (sub.expr sub) def)
         (sub.pat sub p) (sub.expr sub e)
     | Pexp_function _ -> assert false
+    | Pexp_apply ({pexp_desc = Pexp_ident tag_name}, _args)
+      when has_jsx_attribute () ->
+      let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
+      jsx_unary_element ~loc ~attrs tag_name []
     | Pexp_apply (e, l) ->
       let e =
         match (e.pexp_desc, l) with
@@ -376,7 +383,7 @@ module E = struct
     | Pexp_tuple el -> tuple ~loc ~attrs (List.map (sub.expr sub) el)
     (* <></> *)
     | Pexp_construct ({txt = Longident.Lident "[]" | Longident.Lident "::"}, _)
-      when attrs |> List.exists (fun ({txt}, _) -> txt = "JSX") ->
+      when has_jsx_attribute () ->
       let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
       (* TODO: support spread *)
       jsx_fragment ~loc ~attrs loc.loc_start
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index 19eae3bf14..09642aeb1a 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -281,6 +281,9 @@ module M = struct
 end
 
 module E = struct
+  let jsx_attr sub =
+    sub.attribute sub (Location.mknoloc "JSX", Parsetree.PStr [])
+
   (* Value expressions for the core language *)
 
   let map sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
@@ -420,11 +423,27 @@ module E = struct
       in
       let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
       let mapped = sub.expr sub list_expr in
-      let jsx_attr =
-        sub.attribute sub (Location.mknoloc "JSX", Parsetree.PStr [])
+
+      {mapped with pexp_attributes = jsx_attr sub :: attrs}
+    | Pexp_jsx_unary_element
+        {
+          jsx_unary_element_tag_name = tag_name;
+          jsx_unary_element_props = _props;
+        } ->
+      let tag_ident = map_loc sub tag_name in
+      let children_expr =
+        Ast_helper0.Exp.construct ~loc {txt = Lident "()"; loc} None
+      in
+      let unit_expr =
+        Ast_helper0.Exp.construct ~loc:!Ast_helper0.default_loc
+          {txt = Lident "()"; loc = !Ast_helper0.default_loc}
+          None
       in
-      {mapped with pexp_attributes = jsx_attr :: attrs}
-    | Pexp_jsx_unary_element _ -> failwith "TODO: Pexp_jsx_unary_element 1"
+      apply ~loc ~attrs:(jsx_attr sub :: attrs) (ident tag_ident)
+        [
+          (Asttypes.Noloc.Labelled "children", children_expr);
+          (Asttypes.Noloc.Nolabel, unit_expr);
+        ]
     | Pexp_jsx_container_element _ ->
       failwith "TODO: Pexp_jsx_container_element 1"
 end

From 84e9cbef5b3c4053d5f4c79e587e4a53a7262242 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 08:55:59 +0100
Subject: [PATCH 29/99] prop punning conversion

---
 compiler/ml/ast_mapper_from0.ml | 33 ++++++++++++++++--
 compiler/ml/ast_mapper_to0.ml   | 62 ++++++++++++++++++++++++++++-----
 2 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index 55d25fe0ec..712b190dcf 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -310,6 +310,10 @@ module E = struct
     in
     visit e
 
+  let skip_last_two_elements elements =
+    let length = List.length elements in
+    List.filteri (fun i _ -> i < length - 2) elements
+
   let map sub e =
     let {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} = e in
     let open Exp in
@@ -330,10 +334,35 @@ module E = struct
         (map_opt (sub.expr sub) def)
         (sub.pat sub p) (sub.expr sub e)
     | Pexp_function _ -> assert false
-    | Pexp_apply ({pexp_desc = Pexp_ident tag_name}, _args)
+    | Pexp_apply ({pexp_desc = Pexp_ident tag_name}, args)
       when has_jsx_attribute () ->
       let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
-      jsx_unary_element ~loc ~attrs tag_name []
+      let props =
+        args
+        (* The last args are children and unit *)
+        |> skip_last_two_elements
+        |> List.filter_map (fun (lbl, e) ->
+               match (lbl, e) with
+               | ( Asttypes.Noloc.Labelled name,
+                   {
+                     pexp_desc = Pexp_ident {txt = Longident.Lident v};
+                     pexp_loc = name_loc;
+                   } )
+                 when name = v ->
+                 Some
+                   (Parsetree.JSXPropPunning
+                      (false, {txt = name; loc = name_loc}))
+               | ( Asttypes.Noloc.Optional name,
+                   {
+                     pexp_desc = Pexp_ident {txt = Longident.Lident v};
+                     pexp_loc = name_loc;
+                   } )
+                 when name = v ->
+                 Some
+                   (Parsetree.JSXPropPunning (true, {txt = name; loc = name_loc}))
+               | _ -> None)
+      in
+      jsx_unary_element ~loc ~attrs tag_name props
     | Pexp_apply (e, l) ->
       let e =
         match (e.pexp_desc, l) with
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index 09642aeb1a..7921a69c41 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -284,6 +284,29 @@ module E = struct
   let jsx_attr sub =
     sub.attribute sub (Location.mknoloc "JSX", Parsetree.PStr [])
 
+  let offset_position (pos : Lexing.position) (offset : int) : Lexing.position =
+    if offset <= 0 then pos
+    else
+      let open Lexing in
+      let rec aux pos offset =
+        if offset <= 0 then pos
+        else if offset <= pos.pos_cnum - pos.pos_bol then
+          (* We're on the same line *)
+          {pos with pos_cnum = pos.pos_cnum - offset}
+        else
+          (* Move to previous line and continue *)
+          let remaining = offset - (pos.pos_cnum - pos.pos_bol) in
+          aux
+            {
+              pos with
+              pos_lnum = pos.pos_lnum - 1;
+              pos_cnum = pos.pos_bol;
+              pos_bol = max 0 (pos.pos_bol - remaining);
+            }
+            remaining
+      in
+      aux pos offset
+
   (* Value expressions for the core language *)
 
   let map sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
@@ -426,13 +449,33 @@ module E = struct
 
       {mapped with pexp_attributes = jsx_attr sub :: attrs}
     | Pexp_jsx_unary_element
-        {
-          jsx_unary_element_tag_name = tag_name;
-          jsx_unary_element_props = _props;
-        } ->
+        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
+      ->
       let tag_ident = map_loc sub tag_name in
+      let props =
+        props
+        |> List.map (function
+             | JSXPropPunning (is_optional, name) ->
+               let ident =
+                 ident ~loc:name.loc
+                   {txt = Longident.Lident name.txt; loc = name.loc}
+               in
+               let label =
+                 if is_optional then Asttypes.Noloc.Optional name.txt
+                 else Asttypes.Noloc.Labelled name.txt
+               in
+               (label, ident)
+             | _ -> failwith "todo")
+      in
       let children_expr =
-        Ast_helper0.Exp.construct ~loc {txt = Lident "()"; loc} None
+        let loc =
+          {
+            loc_ghost = true;
+            loc_start = offset_position loc.loc_end 2;
+            loc_end = offset_position loc.loc_end 1;
+          }
+        in
+        Ast_helper0.Exp.construct ~loc {txt = Lident "[]"; loc} None
       in
       let unit_expr =
         Ast_helper0.Exp.construct ~loc:!Ast_helper0.default_loc
@@ -440,10 +483,11 @@ module E = struct
           None
       in
       apply ~loc ~attrs:(jsx_attr sub :: attrs) (ident tag_ident)
-        [
-          (Asttypes.Noloc.Labelled "children", children_expr);
-          (Asttypes.Noloc.Nolabel, unit_expr);
-        ]
+        (props
+        @ [
+            (Asttypes.Noloc.Labelled "children", children_expr);
+            (Asttypes.Noloc.Nolabel, unit_expr);
+          ])
     | Pexp_jsx_container_element _ ->
       failwith "TODO: Pexp_jsx_container_element 1"
 end

From bbfe8162b45ee536b60ca1b29c862b6b40c9abb7 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 10:40:24 +0100
Subject: [PATCH 30/99] Map prop value

---
 compiler/ml/ast_mapper_from0.ml | 10 ++++++++++
 compiler/ml/ast_mapper_to0.ml   |  6 ++++++
 2 files changed, 16 insertions(+)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index 712b190dcf..cc8a0a1f49 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -360,6 +360,16 @@ module E = struct
                  when name = v ->
                  Some
                    (Parsetree.JSXPropPunning (true, {txt = name; loc = name_loc}))
+               | Asttypes.Noloc.Labelled name, exp ->
+                 Some
+                   (Parsetree.JSXPropValue
+                      ( {txt = name; loc = Location.none},
+                        false,
+                        sub.expr sub exp ))
+               | Asttypes.Noloc.Optional name, exp ->
+                 Some
+                   (Parsetree.JSXPropValue
+                      ({txt = name; loc = Location.none}, true, sub.expr sub exp))
                | _ -> None)
       in
       jsx_unary_element ~loc ~attrs tag_name props
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index 7921a69c41..54a7aa5ac4 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -465,6 +465,12 @@ module E = struct
                  else Asttypes.Noloc.Labelled name.txt
                in
                (label, ident)
+             | JSXPropValue (name, is_optional, value) ->
+               let label =
+                 if is_optional then Asttypes.Noloc.Optional name.txt
+                 else Asttypes.Noloc.Labelled name.txt
+               in
+               (label, sub.expr sub value)
              | _ -> failwith "todo")
       in
       let children_expr =

From 63fc87b6a98a5e01cf39122b944ad7585fe71faa Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 10:49:09 +0100
Subject: [PATCH 31/99] Map prop spreading

---
 compiler/ml/ast_mapper_from0.ml | 3 +++
 compiler/ml/ast_mapper_to0.ml   | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index cc8a0a1f49..d3112c5877 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -343,6 +343,9 @@ module E = struct
         |> skip_last_two_elements
         |> List.filter_map (fun (lbl, e) ->
                match (lbl, e) with
+               | Asttypes.Noloc.Labelled "_spreadProps", expr ->
+                 Some
+                   (Parsetree.JSXPropSpreading (Location.none, sub.expr sub expr))
                | ( Asttypes.Noloc.Labelled name,
                    {
                      pexp_desc = Pexp_ident {txt = Longident.Lident v};
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index 54a7aa5ac4..c5524a132c 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -471,7 +471,8 @@ module E = struct
                  else Asttypes.Noloc.Labelled name.txt
                in
                (label, sub.expr sub value)
-             | _ -> failwith "todo")
+             | JSXPropSpreading (_, value) ->
+               (Asttypes.Noloc.Labelled "_spreadProps", sub.expr sub value))
       in
       let children_expr =
         let loc =

From d6c9fa87e7f84d67096370019d56fa7639ac2752 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 11:53:02 +0100
Subject: [PATCH 32/99] Initial container element mapping.

---
 compiler/ml/ast_mapper_from0.ml | 89 +++++++++++++++++----------------
 compiler/ml/ast_mapper_to0.ml   | 85 +++++++++++++++++++------------
 2 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index d3112c5877..ced342903a 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -310,9 +310,45 @@ module E = struct
     in
     visit e
 
-  let skip_last_two_elements elements =
-    let length = List.length elements in
-    List.filteri (fun i _ -> i < length - 2) elements
+  let try_map_jsx_prop (sub : mapper) (lbl : Asttypes.Noloc.arg_label)
+      (e : expression) : Parsetree.jsx_prop option =
+    match (lbl, e) with
+    | Asttypes.Noloc.Labelled "_spreadProps", expr ->
+      Some (Parsetree.JSXPropSpreading (Location.none, sub.expr sub expr))
+    | ( Asttypes.Noloc.Labelled name,
+        {pexp_desc = Pexp_ident {txt = Longident.Lident v}; pexp_loc = name_loc}
+      )
+      when name = v ->
+      Some (Parsetree.JSXPropPunning (false, {txt = name; loc = name_loc}))
+    | ( Asttypes.Noloc.Optional name,
+        {pexp_desc = Pexp_ident {txt = Longident.Lident v}; pexp_loc = name_loc}
+      )
+      when name = v ->
+      Some (Parsetree.JSXPropPunning (true, {txt = name; loc = name_loc}))
+    | Asttypes.Noloc.Labelled name, exp ->
+      Some
+        (Parsetree.JSXPropValue
+           ({txt = name; loc = Location.none}, false, sub.expr sub exp))
+    | Asttypes.Noloc.Optional name, exp ->
+      Some
+        (Parsetree.JSXPropValue
+           ({txt = name; loc = Location.none}, true, sub.expr sub exp))
+    | _ -> None
+
+  let extract_props_and_children (sub : mapper) items =
+    let rec visit props items =
+      match items with
+      | [] | [_] -> (List.rev props, None)
+      | [(Asttypes.Noloc.Labelled "children", children_expr); _] ->
+        ( List.rev props,
+          Some (Parsetree.JSXChildrenItems (map_jsx_list sub children_expr)) )
+      | (lbl, e) :: rest -> (
+        match try_map_jsx_prop sub lbl e with
+        | Some prop -> visit (prop :: props) rest
+        | None -> visit props rest)
+    in
+    let props, children = visit [] items in
+    (props, children)
 
   let map sub e =
     let {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} = e in
@@ -335,47 +371,14 @@ module E = struct
         (sub.pat sub p) (sub.expr sub e)
     | Pexp_function _ -> assert false
     | Pexp_apply ({pexp_desc = Pexp_ident tag_name}, args)
-      when has_jsx_attribute () ->
+      when has_jsx_attribute () -> (
       let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
-      let props =
-        args
-        (* The last args are children and unit *)
-        |> skip_last_two_elements
-        |> List.filter_map (fun (lbl, e) ->
-               match (lbl, e) with
-               | Asttypes.Noloc.Labelled "_spreadProps", expr ->
-                 Some
-                   (Parsetree.JSXPropSpreading (Location.none, sub.expr sub expr))
-               | ( Asttypes.Noloc.Labelled name,
-                   {
-                     pexp_desc = Pexp_ident {txt = Longident.Lident v};
-                     pexp_loc = name_loc;
-                   } )
-                 when name = v ->
-                 Some
-                   (Parsetree.JSXPropPunning
-                      (false, {txt = name; loc = name_loc}))
-               | ( Asttypes.Noloc.Optional name,
-                   {
-                     pexp_desc = Pexp_ident {txt = Longident.Lident v};
-                     pexp_loc = name_loc;
-                   } )
-                 when name = v ->
-                 Some
-                   (Parsetree.JSXPropPunning (true, {txt = name; loc = name_loc}))
-               | Asttypes.Noloc.Labelled name, exp ->
-                 Some
-                   (Parsetree.JSXPropValue
-                      ( {txt = name; loc = Location.none},
-                        false,
-                        sub.expr sub exp ))
-               | Asttypes.Noloc.Optional name, exp ->
-                 Some
-                   (Parsetree.JSXPropValue
-                      ({txt = name; loc = Location.none}, true, sub.expr sub exp))
-               | _ -> None)
-      in
-      jsx_unary_element ~loc ~attrs tag_name props
+      let props, children = extract_props_and_children sub args in
+      match children with
+      | None -> jsx_unary_element ~loc ~attrs tag_name props
+      | Some children ->
+        jsx_container_element ~loc ~attrs tag_name props Lexing.dummy_pos
+          children None)
     | Pexp_apply (e, l) ->
       let e =
         match (e.pexp_desc, l) with
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index c5524a132c..ec8b55e4bd 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -307,6 +307,42 @@ module E = struct
       in
       aux pos offset
 
+  let jsx_unit_expr =
+    Ast_helper0.Exp.construct ~loc:!Ast_helper0.default_loc
+      {txt = Lident "()"; loc = !Ast_helper0.default_loc}
+      None
+
+  let map_jsx_props sub props =
+    props
+    |> List.map (function
+         | JSXPropPunning (is_optional, name) ->
+           let ident =
+             Exp.ident ~loc:name.loc
+               {txt = Longident.Lident name.txt; loc = name.loc}
+           in
+           let label =
+             if is_optional then Asttypes.Noloc.Optional name.txt
+             else Asttypes.Noloc.Labelled name.txt
+           in
+           (label, ident)
+         | JSXPropValue (name, is_optional, value) ->
+           let label =
+             if is_optional then Asttypes.Noloc.Optional name.txt
+             else Asttypes.Noloc.Labelled name.txt
+           in
+           (label, sub.expr sub value)
+         | JSXPropSpreading (_, value) ->
+           (Asttypes.Noloc.Labelled "_spreadProps", sub.expr sub value))
+
+  let map_jsx_children sub loc children =
+    let xs =
+      match children with
+      | JSXChildrenSpreading e -> [e]
+      | JSXChildrenItems xs -> xs
+    in
+    let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
+    sub.expr sub list_expr
+
   (* Value expressions for the core language *)
 
   let map sub {pexp_loc = loc; pexp_desc = desc; pexp_attributes = attrs} =
@@ -439,41 +475,13 @@ module E = struct
          This is not the case in the old AST. There it is from >...</
       *)
       let loc = {loc with loc_start = o; loc_end = c} in
-      let xs =
-        match children with
-        | JSXChildrenSpreading e -> [e]
-        | JSXChildrenItems xs -> xs
-      in
-      let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
-      let mapped = sub.expr sub list_expr in
-
+      let mapped = map_jsx_children sub loc children in
       {mapped with pexp_attributes = jsx_attr sub :: attrs}
     | Pexp_jsx_unary_element
         {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
       ->
       let tag_ident = map_loc sub tag_name in
-      let props =
-        props
-        |> List.map (function
-             | JSXPropPunning (is_optional, name) ->
-               let ident =
-                 ident ~loc:name.loc
-                   {txt = Longident.Lident name.txt; loc = name.loc}
-               in
-               let label =
-                 if is_optional then Asttypes.Noloc.Optional name.txt
-                 else Asttypes.Noloc.Labelled name.txt
-               in
-               (label, ident)
-             | JSXPropValue (name, is_optional, value) ->
-               let label =
-                 if is_optional then Asttypes.Noloc.Optional name.txt
-                 else Asttypes.Noloc.Labelled name.txt
-               in
-               (label, sub.expr sub value)
-             | JSXPropSpreading (_, value) ->
-               (Asttypes.Noloc.Labelled "_spreadProps", sub.expr sub value))
-      in
+      let props = map_jsx_props sub props in
       let children_expr =
         let loc =
           {
@@ -495,8 +503,21 @@ module E = struct
             (Asttypes.Noloc.Labelled "children", children_expr);
             (Asttypes.Noloc.Nolabel, unit_expr);
           ])
-    | Pexp_jsx_container_element _ ->
-      failwith "TODO: Pexp_jsx_container_element 1"
+    | Pexp_jsx_container_element
+        {
+          jsx_container_element_tag_name_start = tag_name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      let tag_ident = map_loc sub tag_name in
+      let props = map_jsx_props sub props in
+      let children_expr = map_jsx_children sub loc children in
+      apply ~loc ~attrs:(jsx_attr sub :: attrs) (ident tag_ident)
+        (props
+        @ [
+            (Asttypes.Noloc.Labelled "children", children_expr);
+            (Asttypes.Noloc.Nolabel, jsx_unit_expr);
+          ])
 end
 
 module P = struct

From e446ae1513f8f5057b50605d80b6bcb64951f568 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 12:04:35 +0100
Subject: [PATCH 33/99] Try support children spreading

---
 compiler/ml/ast_mapper_from0.ml | 14 ++++++++------
 compiler/ml/ast_mapper_to0.ml   | 12 +++++-------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index ced342903a..3e0749920d 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -295,7 +295,7 @@ end
 module E = struct
   (* Value expressions for the core language *)
 
-  let map_jsx_list sub (e : expression) : Pt.expression list =
+  let map_jsx_children sub (e : expression) : Pt.jsx_children =
     let rec visit (e : expression) : Pt.expression list =
       match e.pexp_desc with
       | Pexp_construct
@@ -308,7 +308,11 @@ module E = struct
         | Some e -> visit e)
       | _ -> [sub.expr sub e]
     in
-    visit e
+    match e.pexp_desc with
+    | Pexp_construct ({txt = Longident.Lident "[]" | Longident.Lident "::"}, _)
+      ->
+      JSXChildrenItems (visit e)
+    | _ -> JSXChildrenSpreading (sub.expr sub e)
 
   let try_map_jsx_prop (sub : mapper) (lbl : Asttypes.Noloc.arg_label)
       (e : expression) : Parsetree.jsx_prop option =
@@ -340,8 +344,7 @@ module E = struct
       match items with
       | [] | [_] -> (List.rev props, None)
       | [(Asttypes.Noloc.Labelled "children", children_expr); _] ->
-        ( List.rev props,
-          Some (Parsetree.JSXChildrenItems (map_jsx_list sub children_expr)) )
+        (List.rev props, Some (map_jsx_children sub children_expr))
       | (lbl, e) :: rest -> (
         match try_map_jsx_prop sub lbl e with
         | Some prop -> visit (prop :: props) rest
@@ -431,8 +434,7 @@ module E = struct
       when has_jsx_attribute () ->
       let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
       (* TODO: support spread *)
-      jsx_fragment ~loc ~attrs loc.loc_start
-        (Parsetree.JSXChildrenItems (map_jsx_list sub e))
+      jsx_fragment ~loc ~attrs loc.loc_start (map_jsx_children sub e)
         loc.loc_end
     | Pexp_construct (lid, arg) -> (
       let lid1 = map_loc sub lid in
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index ec8b55e4bd..824e7451b4 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -335,13 +335,11 @@ module E = struct
            (Asttypes.Noloc.Labelled "_spreadProps", sub.expr sub value))
 
   let map_jsx_children sub loc children =
-    let xs =
-      match children with
-      | JSXChildrenSpreading e -> [e]
-      | JSXChildrenItems xs -> xs
-    in
-    let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
-    sub.expr sub list_expr
+    match children with
+    | JSXChildrenSpreading e -> sub.expr sub e
+    | JSXChildrenItems xs ->
+      let list_expr = Ast_helper.Exp.make_list_expression loc xs None in
+      sub.expr sub list_expr
 
   (* Value expressions for the core language *)
 

From 5fef33724e839d4e9db31418b9be6dec1d0c51e1 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 13:26:48 +0100
Subject: [PATCH 34/99] Only print space when there are props

---
 compiler/ml/ast_mapper_from0.ml    | 1 -
 compiler/syntax/src/res_printer.ml | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
index 3e0749920d..d88f25103a 100644
--- a/compiler/ml/ast_mapper_from0.ml
+++ b/compiler/ml/ast_mapper_from0.ml
@@ -433,7 +433,6 @@ module E = struct
     | Pexp_construct ({txt = Longident.Lident "[]" | Longident.Lident "::"}, _)
       when has_jsx_attribute () ->
       let attrs = attrs |> List.filter (fun ({txt}, _) -> txt <> "JSX") in
-      (* TODO: support spread *)
       jsx_fragment ~loc ~attrs loc.loc_start (map_jsx_children sub e)
         loc.loc_end
     | Pexp_construct (lid, arg) -> (
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index d8010b1156..3e0232bcc5 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4469,7 +4469,8 @@ and print_jsx_container_tag ~state tag_name props
                 print_comments
                   (Doc.concat [Doc.less_than; name])
                   cmt_tbl tag_name.Asttypes.loc;
-                Doc.space;
+                (if not (List.is_empty formatted_props) then Doc.space
+                 else Doc.nil);
                 (* todo: might not be needed if no props?*)
                 Doc.join formatted_props ~sep:Doc.space;
                 (* if tag A has trailing comments then put > on the next line

From 251244b76ee625ecf3725a071e2e218c9ebbe461 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 19 Mar 2025 13:46:25 +0100
Subject: [PATCH 35/99] Add space after children.

---
 compiler/syntax/src/res_printer.ml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 3e0232bcc5..cd8219d81b 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4456,8 +4456,8 @@ and print_jsx_container_tag ~state tag_name props
   in
   let line_sep = Doc.line in
   let print_children children =
-    print_jsx_children ~sep:line_sep ~state children cmt_tbl
-    |> Doc.group |> Doc.indent
+    Doc.group
+      (Doc.indent (print_jsx_children ~sep:line_sep ~state children cmt_tbl))
   in
 
   Doc.group
@@ -4487,6 +4487,7 @@ and print_jsx_container_tag ~state tag_name props
            [
              (if has_children then Doc.line else Doc.nil);
              (if has_children then print_children children else Doc.nil);
+             (if has_children then Doc.line else Doc.nil);
              Doc.text "</";
              name;
              Doc.greater_than;
@@ -4631,6 +4632,7 @@ and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
   | JSXChildrenSpreading child ->
     Doc.concat
       [Doc.dotdotdot; print_expression_with_comments ~state child cmt_tbl]
+  | JSXChildrenItems [] -> Doc.nil
   | JSXChildrenItems children ->
     children
     |> List.map (fun child ->

From aec0d8ea7fe063ec1e49c2b5f0fbbb08ea442276 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 20 Mar 2025 09:20:34 +0100
Subject: [PATCH 36/99] Restore braces in props and children

---
 compiler/syntax/src/res_printer.ml | 56 +++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index cd8219d81b..e497215868 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4628,16 +4628,30 @@ and print_jsx_children_old ~state (children_expr : Parsetree.expression) ~sep
 and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
     cmt_tbl =
   let open Parsetree in
+  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
   match children_expr with
-  | JSXChildrenSpreading child ->
-    Doc.concat
-      [Doc.dotdotdot; print_expression_with_comments ~state child cmt_tbl]
+  | JSXChildrenSpreading child -> Doc.concat [Doc.dotdotdot; print_expr child]
   | JSXChildrenItems [] -> Doc.nil
   | JSXChildrenItems children ->
-    children
-    |> List.map (fun child ->
-           print_expression_with_comments ~state child cmt_tbl)
-    |> Doc.join ~sep
+    children |> List.map print_expr |> Doc.join ~sep
 
 and print_jsx_props_old ~state args cmt_tbl :
     Doc.t * Parsetree.expression option =
@@ -4780,15 +4794,31 @@ and print_jsx_prop ~state prop cmt_tbl =
     if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
     else Doc.text name.txt
   | JSXPropValue (name, is_optional, value) ->
-    let value =
-      if is_optional then
-        [Doc.question; print_expression_with_comments ~state value cmt_tbl]
-      else [print_expression_with_comments ~state value cmt_tbl]
+    let value_doc =
+      let v =
+        Doc.concat
+          [
+            (if is_optional then Doc.question else Doc.nil);
+            print_expression_with_comments ~state value cmt_tbl;
+          ]
+      in
+      match Parens.jsx_prop_expr value with
+      | Parenthesized | Braced _ ->
+        let inner_doc = if Parens.braced_expr value then add_parens v else v in
+        if has_leading_line_comment cmt_tbl value.pexp_loc then
+          add_braces inner_doc
+        else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
+      | _ -> v
     in
-    Doc.concat [Doc.text name.txt; Doc.equal; Doc.group (Doc.concat value)]
+    Doc.concat [Doc.text name.txt; Doc.equal; Doc.group value_doc]
   | JSXPropSpreading (_, value) ->
     Doc.concat
-      [Doc.dotdotdot; print_expression_with_comments ~state value cmt_tbl]
+      [
+        Doc.lbrace;
+        Doc.dotdotdot;
+        print_expression_with_comments ~state value cmt_tbl;
+        Doc.rbrace;
+      ]
 
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)

From 6a3f4c970418aa66ec4b01e00eda2655c6c6214a Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Fri, 21 Mar 2025 12:08:32 +0100
Subject: [PATCH 37/99] Inline is_jsx_expression and remove old code

---
 compiler/syntax/src/res_comments_table.ml    |  96 ++----
 compiler/syntax/src/res_parens.ml            |  17 +-
 compiler/syntax/src/res_parsetree_viewer.ml  |   7 -
 compiler/syntax/src/res_parsetree_viewer.mli |   2 -
 compiler/syntax/src/res_printer.ml           | 331 +------------------
 5 files changed, 56 insertions(+), 397 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 126473a90c..ee4a6ce83d 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1397,67 +1397,21 @@ and walk_expression expr t comments =
         walk_expression call_expr t inside;
         after)
     in
-    if ParsetreeViewer.is_jsx_expression expr then (
-      let props =
-        arguments
-        |> List.filter (fun (label, _) ->
-               match label with
-               | Asttypes.Labelled {txt = "children"} -> false
-               | Asttypes.Nolabel -> false
-               | _ -> true)
-      in
-      let maybe_children =
-        arguments
-        |> List.find_opt (fun (label, _) ->
-               match label with
-               | Asttypes.Labelled {txt = "children"} -> true
-               | _ -> false)
-      in
-      match maybe_children with
-      (* There is no need to deal with this situation as the children cannot be NONE *)
-      | None -> ()
-      | Some (_, children) ->
-        let leading, inside, _ = partition_by_loc after children.pexp_loc in
-        if props = [] then
-          (* All comments inside a tag are trailing comments of the tag if there are no props
-             <A
-             // comment
-             // comment
-             />
-          *)
-          let after_expr, _ =
-            partition_adjacent_trailing call_expr.pexp_loc after
-          in
-          attach t.trailing call_expr.pexp_loc after_expr
-        else
-          walk_list
-            (props
-            |> List.map (fun (lbl, expr) ->
-                   let loc =
-                     match lbl with
-                     | Asttypes.Labelled {loc} | Optional {loc} ->
-                       {loc with loc_end = expr.Parsetree.pexp_loc.loc_end}
-                     | _ -> expr.pexp_loc
-                   in
-                   ExprArgument {expr; loc}))
-            t leading;
-        walk_expression children t inside)
-    else
-      let after_expr, rest =
-        partition_adjacent_trailing call_expr.pexp_loc after
-      in
-      attach t.trailing call_expr.pexp_loc after_expr;
-      walk_list
-        (arguments
-        |> List.map (fun (lbl, expr) ->
-               let loc =
-                 match lbl with
-                 | Asttypes.Labelled {loc} | Optional {loc} ->
-                   {loc with loc_end = expr.Parsetree.pexp_loc.loc_end}
-                 | _ -> expr.pexp_loc
-               in
-               ExprArgument {expr; loc}))
-        t rest
+    let after_expr, rest =
+      partition_adjacent_trailing call_expr.pexp_loc after
+    in
+    attach t.trailing call_expr.pexp_loc after_expr;
+    walk_list
+      (arguments
+      |> List.map (fun (lbl, expr) ->
+             let loc =
+               match lbl with
+               | Asttypes.Labelled {loc} | Optional {loc} ->
+                 {loc with loc_end = expr.Parsetree.pexp_loc.loc_end}
+               | _ -> expr.pexp_loc
+             in
+             ExprArgument {expr; loc}))
+      t rest
   | Pexp_fun _ | Pexp_newtype _ -> (
     let _, parameters, return_expr = fun_expr expr in
     let comments =
@@ -1518,8 +1472,24 @@ and walk_expression expr t comments =
     in
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
-  | Pexp_jsx_unary_element _ -> failwith "Pexp_jsx_unary_element 3"
-  | Pexp_jsx_container_element _ -> failwith "Pexp_jsx_container_element 3"
+  | Pexp_jsx_unary_element _ ->
+    (* TODO: save me shulhi, not sure what needs to be done here *)
+    ()
+  | Pexp_jsx_container_element
+      {
+        jsx_container_element_opening_tag_end = opening_greater_than;
+        jsx_container_element_children = children;
+      } ->
+    let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
+    let on_same_line, rest = partition_by_on_same_line opening_token comments in
+    attach t.trailing opening_token on_same_line;
+    let exprs =
+      match children with
+      | Parsetree.JSXChildrenSpreading e -> [e]
+      | Parsetree.JSXChildrenItems xs -> xs
+    in
+    let xs = exprs |> List.map (fun e -> Expression e) in
+    walk_list xs t rest
   | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =
diff --git a/compiler/syntax/src/res_parens.ml b/compiler/syntax/src/res_parens.ml
index b9dc6a8c80..fa10257a74 100644
--- a/compiler/syntax/src/res_parens.ml
+++ b/compiler/syntax/src/res_parens.ml
@@ -66,9 +66,13 @@ let structure_expr expr =
   | Some ({Location.loc = braces_loc}, _) -> Braced braces_loc
   | None -> (
     match expr with
-    | _
-      when ParsetreeViewer.has_attributes expr.pexp_attributes
-           && not (ParsetreeViewer.is_jsx_expression expr) ->
+    | {
+     pexp_desc =
+       ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
+       | Pexp_jsx_container_element _ );
+    } ->
+      Nothing
+    | _ when ParsetreeViewer.has_attributes expr.pexp_attributes ->
       Parenthesized
     | {
      Parsetree.pexp_desc =
@@ -396,7 +400,12 @@ let jsx_child_expr expr =
        pexp_attributes = [];
       } ->
         Nothing
-      | expr when ParsetreeViewer.is_jsx_expression expr -> Nothing
+      | {
+       pexp_desc =
+         ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
+         | Pexp_jsx_container_element _ );
+      } ->
+        Nothing
       | _ -> Parenthesized))
 
 let binary_expr expr =
diff --git a/compiler/syntax/src/res_parsetree_viewer.ml b/compiler/syntax/src/res_parsetree_viewer.ml
index 0826bfca4a..cfe4b8bc30 100644
--- a/compiler/syntax/src/res_parsetree_viewer.ml
+++ b/compiler/syntax/src/res_parsetree_viewer.ml
@@ -484,13 +484,6 @@ let filter_fragile_match_attributes attrs =
       | _ -> true)
     attrs
 
-let is_jsx_expression expr =
-  match expr.pexp_desc with
-  | Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
-  | Pexp_jsx_container_element _ ->
-    true
-  | _ -> false
-
 let should_indent_binary_expr expr =
   let same_precedence_sub_expression operator sub_expression =
     match sub_expression with
diff --git a/compiler/syntax/src/res_parsetree_viewer.mli b/compiler/syntax/src/res_parsetree_viewer.mli
index 89ec4a2b38..a146c68491 100644
--- a/compiler/syntax/src/res_parsetree_viewer.mli
+++ b/compiler/syntax/src/res_parsetree_viewer.mli
@@ -87,8 +87,6 @@ val filter_ternary_attributes : Parsetree.attributes -> Parsetree.attributes
 val filter_fragile_match_attributes :
   Parsetree.attributes -> Parsetree.attributes
 
-val is_jsx_expression : Parsetree.expression -> bool
-
 val should_indent_binary_expr : Parsetree.expression -> bool
 val should_inline_rhs_binary_expr : Parsetree.expression -> bool
 val has_printable_attributes : Parsetree.attributes -> bool
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index e497215868..5c137fa24c 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -58,18 +58,6 @@ let has_comment_below tbl loc =
   | [] -> false
   | exception Not_found -> false
 
-let has_nested_jsx_or_more_than_one_child expr =
-  let rec loop in_recursion expr =
-    match expr.Parsetree.pexp_desc with
-    | Pexp_construct
-        ({txt = Longident.Lident "::"}, Some {pexp_desc = Pexp_tuple [hd; tail]})
-      ->
-      if in_recursion || ParsetreeViewer.is_jsx_expression hd then true
-      else loop true tail
-    | _ -> false
-  in
-  loop false expr
-
 let has_comments_inside tbl loc =
   match Hashtbl.find_opt tbl.CommentTable.inside loc with
   | None -> false
@@ -4258,10 +4246,6 @@ and print_pexp_apply ~state expr cmt_tbl =
               Doc.indent (Doc.concat [Doc.line; target_expr])
             else Doc.concat [Doc.space; target_expr]);
          ])
-  (* TODO: cleanup, are those branches even remotely performant? *)
-  | Pexp_apply {funct = {pexp_desc = Pexp_ident lident}; args}
-    when ParsetreeViewer.is_jsx_expression expr ->
-    print_jsx_expression ~state lident args cmt_tbl
   | Pexp_apply {funct = call_expr; args; partial} ->
     let args =
       List.map
@@ -4325,105 +4309,6 @@ and print_pexp_apply ~state expr cmt_tbl =
         [print_attributes ~state attrs cmt_tbl; call_expr_doc; args_doc]
   | _ -> assert false
 
-and print_jsx_expression ~state lident args cmt_tbl =
-  let name = print_jsx_name lident in
-  let formatted_props, children = print_jsx_props_old ~state args cmt_tbl in
-  (* <div className="test" /> *)
-  let has_children =
-    match children with
-    | Some
-        {
-          Parsetree.pexp_desc =
-            Pexp_construct ({txt = Longident.Lident "[]"}, None);
-        } ->
-      false
-    | None -> false
-    | _ -> true
-  in
-  let is_self_closing =
-    match children with
-    | Some
-        {
-          Parsetree.pexp_desc =
-            Pexp_construct ({txt = Longident.Lident "[]"}, None);
-          pexp_loc = loc;
-        } ->
-      not (has_comments_inside cmt_tbl loc)
-    | _ -> false
-  in
-  let print_children children =
-    let line_sep =
-      match children with
-      | Some expr ->
-        if has_nested_jsx_or_more_than_one_child expr then Doc.hard_line
-        else Doc.line
-      | None -> Doc.line
-    in
-    Doc.concat
-      [
-        Doc.indent
-          (Doc.concat
-             [
-               Doc.line;
-               (match children with
-               | Some children_expression ->
-                 print_jsx_children_old ~state children_expression ~sep:line_sep
-                   cmt_tbl
-               | None -> Doc.nil);
-             ]);
-        line_sep;
-      ]
-  in
-  Doc.group
-    (Doc.concat
-       [
-         Doc.group
-           (Doc.concat
-              [
-                print_comments
-                  (Doc.concat [Doc.less_than; name])
-                  cmt_tbl lident.Asttypes.loc;
-                formatted_props;
-                (match children with
-                | Some
-                    {
-                      Parsetree.pexp_desc =
-                        Pexp_construct ({txt = Longident.Lident "[]"}, None);
-                    }
-                  when is_self_closing ->
-                  Doc.text "/>"
-                | _ ->
-                  (* if tag A has trailing comments then put > on the next line
-                     <A
-                     // comments
-                     >
-                     </A>
-                  *)
-                  if has_trailing_comments cmt_tbl lident.Asttypes.loc then
-                    Doc.concat [Doc.soft_line; Doc.greater_than]
-                  else Doc.greater_than);
-              ]);
-         (if is_self_closing then Doc.nil
-          else
-            Doc.concat
-              [
-                (if has_children then print_children children
-                 else
-                   match children with
-                   | Some
-                       {
-                         Parsetree.pexp_desc =
-                           Pexp_construct ({txt = Longident.Lident "[]"}, None);
-                         pexp_loc = loc;
-                       } ->
-                     print_comments_inside cmt_tbl loc
-                   | _ -> Doc.nil);
-                Doc.text "</";
-                name;
-                Doc.greater_than;
-              ]);
-       ])
-
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
@@ -4511,7 +4396,16 @@ and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
   let line_sep =
     if
       List.length children > 1
-      || List.exists ParsetreeViewer.is_jsx_expression children
+      || List.exists
+           (function
+             | {
+                 Parsetree.pexp_desc =
+                   ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
+                   | Pexp_jsx_container_element _ );
+               } ->
+               true
+             | _ -> false)
+           children
     then Doc.hard_line
     else Doc.line
   in
@@ -4554,77 +4448,6 @@ and print_jsx_child ~state (expr : Parsetree.expression) cmt_tbl =
   | Braced braces_loc ->
     print_comments (add_parens_or_braces expr_doc) cmt_tbl braces_loc
 
-and print_jsx_children_old ~state (children_expr : Parsetree.expression) ~sep
-    cmt_tbl =
-  match children_expr.pexp_desc with
-  | Pexp_construct ({txt = Longident.Lident "::"}, _) ->
-    let children, _ = ParsetreeViewer.collect_list_expressions children_expr in
-    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
-    in
-    let expr_doc =
-      print_expression_with_comments ~state children_expr cmt_tbl
-    in
-    Doc.concat
-      [
-        Doc.dotdotdot;
-        (match Parens.jsx_child_expr children_expr with
-        | Parenthesized | Braced _ ->
-          let inner_doc =
-            if Parens.braced_expr children_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]
-        | Nothing -> expr_doc);
-      ]
-
 and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
     cmt_tbl =
   let open Parsetree in
@@ -4653,140 +4476,6 @@ and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
   | JSXChildrenItems children ->
     children |> List.map print_expr |> Doc.join ~sep
 
-and print_jsx_props_old ~state args cmt_tbl :
-    Doc.t * Parsetree.expression option =
-  (* This function was introduced because we have different formatting behavior for self-closing tags and other tags
-     we always put /> on a new line for self-closing tag when it breaks
-     <A
-      a=""
-     />
-
-     <A
-     a="">
-      <B />
-     </A>
-     we should remove this function once the format is unified
-  *)
-  let is_self_closing children =
-    match children with
-    | {
-     Parsetree.pexp_desc = Pexp_construct ({txt = Longident.Lident "[]"}, None);
-     pexp_loc = loc;
-    } ->
-      not (has_comments_inside cmt_tbl loc)
-    | _ -> false
-  in
-  let rec loop props args =
-    match args with
-    | [] -> (Doc.nil, None)
-    | [
-     (Asttypes.Labelled {txt = "children"}, children);
-     ( Asttypes.Nolabel,
-       {
-         Parsetree.pexp_desc =
-           Pexp_construct ({txt = Longident.Lident "()"}, None);
-       } );
-    ] ->
-      let doc = if is_self_closing children then Doc.line else Doc.nil in
-      (doc, Some children)
-    | ((e_lbl, expr) as last_prop)
-      :: [
-           (Asttypes.Labelled {txt = "children"}, children);
-           ( Asttypes.Nolabel,
-             {
-               Parsetree.pexp_desc =
-                 Pexp_construct ({txt = Longident.Lident "()"}, None);
-             } );
-         ] ->
-      let loc =
-        match e_lbl with
-        | Asttypes.Labelled {loc} | Asttypes.Optional {loc} ->
-          {loc with loc_end = expr.pexp_loc.loc_end}
-        | Nolabel -> expr.pexp_loc
-      in
-      let trailing_comments_present = has_trailing_comments cmt_tbl loc in
-      let prop_doc = print_jsx_prop_old ~state last_prop cmt_tbl in
-      let formatted_props =
-        Doc.concat
-          [
-            Doc.indent
-              (Doc.concat
-                 [
-                   Doc.line;
-                   Doc.group
-                     (Doc.join ~sep:Doc.line (prop_doc :: props |> List.rev));
-                 ]);
-            (* print > on new line if the last prop has trailing comments *)
-            (match (is_self_closing children, trailing_comments_present) with
-            (* we always put /> on a new line when a self-closing tag breaks *)
-            | true, _ -> Doc.line
-            | false, true -> Doc.soft_line
-            | false, false -> Doc.nil);
-          ]
-      in
-      (formatted_props, Some children)
-    | arg :: args ->
-      let prop_doc = print_jsx_prop_old ~state arg cmt_tbl in
-      loop (prop_doc :: props) args
-  in
-  loop [] args
-
-and print_jsx_prop_old ~state arg cmt_tbl =
-  match arg with
-  | ( ((Asttypes.Labelled {txt = lbl_txt} | Optional {txt = lbl_txt}) as lbl),
-      {
-        pexp_attributes = [];
-        pexp_desc = Pexp_ident {txt = Longident.Lident ident};
-      } )
-    when lbl_txt = ident (* jsx punning *) -> (
-    match lbl with
-    | Nolabel -> Doc.nil
-    | Labelled {loc} -> print_comments (print_ident_like ident) cmt_tbl loc
-    | Optional {loc} ->
-      let doc = Doc.concat [Doc.question; print_ident_like ident] in
-      print_comments doc cmt_tbl loc)
-  | ( ((Asttypes.Labelled {txt = lbl_txt} | Optional {txt = lbl_txt}) as lbl),
-      {
-        Parsetree.pexp_attributes = [];
-        pexp_desc = Pexp_ident {txt = Longident.Lident ident};
-      } )
-    when lbl_txt = ident (* jsx punning when printing from Reason *) -> (
-    match lbl with
-    | Nolabel -> Doc.nil
-    | Labelled _lbl -> print_ident_like ident
-    | Optional _lbl -> Doc.concat [Doc.question; print_ident_like ident])
-  | Asttypes.Labelled {txt = "_spreadProps"}, expr ->
-    let doc = print_expression_with_comments ~state expr cmt_tbl in
-    Doc.concat [Doc.lbrace; Doc.dotdotdot; doc; Doc.rbrace]
-  | lbl, expr ->
-    let arg_loc, lbl_doc =
-      match lbl with
-      | Asttypes.Labelled {txt = lbl; loc} ->
-        let lbl = print_comments (print_ident_like lbl) cmt_tbl loc in
-        (loc, Doc.concat [lbl; Doc.equal])
-      | Asttypes.Optional {txt = lbl; loc} ->
-        let lbl = print_comments (print_ident_like lbl) cmt_tbl loc in
-        (loc, Doc.concat [lbl; Doc.equal; Doc.question])
-      | Nolabel -> (Location.none, Doc.nil)
-    in
-    let expr_doc =
-      let leading_line_comment_present =
-        has_leading_line_comment cmt_tbl expr.pexp_loc
-      in
-      let doc = print_expression_with_comments ~state expr cmt_tbl in
-      match Parens.jsx_prop_expr expr with
-      | Parenthesized | Braced _ ->
-        (* {(20: int)} make sure that we also protect the expression inside *)
-        let inner_doc =
-          if Parens.braced_expr expr then add_parens doc else doc
-        in
-        if leading_line_comment_present then add_braces inner_doc
-        else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
-      | _ -> doc
-    in
-    let full_loc = {arg_loc with loc_end = expr.pexp_loc.loc_end} in
-    print_comments (Doc.concat [lbl_doc; expr_doc]) cmt_tbl full_loc
-
 and print_jsx_prop ~state prop cmt_tbl =
   let open Parsetree in
   match prop with

From 506dda39f6862170eb18a36c15e621be18e40f39 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Fri, 21 Mar 2025 13:40:32 +0100
Subject: [PATCH 38/99] Better indentation of children

---
 compiler/syntax/src/res_printer.ml | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 5c137fa24c..2d16601d3c 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4342,7 +4342,16 @@ and print_jsx_container_tag ~state tag_name props
   let line_sep = Doc.line in
   let print_children children =
     Doc.group
-      (Doc.indent (print_jsx_children ~sep:line_sep ~state children cmt_tbl))
+      (Doc.concat
+         [
+           Doc.indent
+             (Doc.concat
+                [
+                  Doc.line;
+                  print_jsx_children ~sep:line_sep ~state children cmt_tbl;
+                ]);
+           Doc.line;
+         ])
   in
 
   Doc.group
@@ -4370,9 +4379,7 @@ and print_jsx_container_tag ~state tag_name props
               ]);
          Doc.concat
            [
-             (if has_children then Doc.line else Doc.nil);
              (if has_children then print_children children else Doc.nil);
-             (if has_children then Doc.line else Doc.nil);
              Doc.text "</";
              name;
              Doc.greater_than;

From 96839f46e624679b6f0f97480f02b3f6241b3e56 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 07:19:57 +0800
Subject: [PATCH 39/99] Handle unary tag

---
 compiler/syntax/src/res_printer.ml | 32 +++++++++++++-----------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 2d16601d3c..c3a7c02f1b 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4311,23 +4311,17 @@ and print_pexp_apply ~state expr cmt_tbl =
 
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
-  let formatted_props = print_jsx_props ~state props cmt_tbl in
+  let formatted_props = print_jsx_props ~state ~isUnary:true props cmt_tbl in
   Doc.group
-    (Doc.concat
-       [
-         Doc.group
-           (Doc.concat
-              [
-                print_comments
-                  (Doc.concat [Doc.less_than; name])
-                  cmt_tbl tag_name.Asttypes.loc;
-                Doc.space;
-                (* todo: might not be needed if no props?*)
-                Doc.join formatted_props ~sep:Doc.space;
-                Doc.text "/>";
-              ]);
-         Doc.nil;
-       ])
+   (Doc.concat
+      [
+        print_comments
+          (Doc.concat [Doc.less_than; name])
+          cmt_tbl tag_name.Asttypes.loc;
+        Doc.space;
+        (* todo: might not be needed if no props?*)
+        Doc.indent (Doc.group (Doc.join formatted_props ~sep:Doc.line));
+      ]);
 
 and print_jsx_container_tag ~state tag_name props
     (children : Parsetree.jsx_children) cmt_tbl =
@@ -4516,8 +4510,10 @@ and print_jsx_prop ~state prop cmt_tbl =
         Doc.rbrace;
       ]
 
-and print_jsx_props ~state props cmt_tbl : Doc.t list =
-  props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
+and print_jsx_props ~state ?(isUnary=false) props cmt_tbl : Doc.t list =
+  let props = props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl) in
+  if isUnary then props @ [Doc.text "/>"] else props
+
 
 (* div -> div.
  * Navabar.createElement -> Navbar

From ff1bb65d25290bb359af2935f430bb169b30745b Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 07:26:11 +0800
Subject: [PATCH 40/99] Refactor

---
 compiler/syntax/src/res_printer.ml | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index c3a7c02f1b..614c0345ac 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4311,7 +4311,8 @@ and print_pexp_apply ~state expr cmt_tbl =
 
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
-  let formatted_props = print_jsx_props ~state ~isUnary:true props cmt_tbl in
+  let formatted_props = print_jsx_props ~state props cmt_tbl in
+  let formatted_props = formatted_props @ [Doc.text "/>"] in
   Doc.group
    (Doc.concat
       [
@@ -4319,7 +4320,6 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
           (Doc.concat [Doc.less_than; name])
           cmt_tbl tag_name.Asttypes.loc;
         Doc.space;
-        (* todo: might not be needed if no props?*)
         Doc.indent (Doc.group (Doc.join formatted_props ~sep:Doc.line));
       ]);
 
@@ -4510,9 +4510,8 @@ and print_jsx_prop ~state prop cmt_tbl =
         Doc.rbrace;
       ]
 
-and print_jsx_props ~state ?(isUnary=false) props cmt_tbl : Doc.t list =
-  let props = props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl) in
-  if isUnary then props @ [Doc.text "/>"] else props
+and print_jsx_props ~state props cmt_tbl : Doc.t list =
+  props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
 
 
 (* div -> div.

From 91c283ee356ffc0e5e62d80cb233d901ec641a35 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 08:48:17 +0800
Subject: [PATCH 41/99] WIP: Fix unary tag comments handling

---
 compiler/syntax/src/res_comments_table.ml | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index ee4a6ce83d..a441e74f3c 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -24,7 +24,7 @@ let copy tbl =
 
 let empty = make ()
 
-let print_loc (k : Warnings.loc) =
+let print_location (k : Warnings.loc) =
   Doc.concat
     [
       Doc.lbracket;
@@ -41,7 +41,7 @@ let print_loc (k : Warnings.loc) =
 let print_entries tbl =
   Hashtbl.fold
     (fun (k : Location.t) (v : Comment.t list) acc ->
-      let loc = print_loc k in
+      let loc = print_location k in
       let doc =
         Doc.breakable_group ~force_break:true
           (Doc.concat
@@ -1472,9 +1472,22 @@ and walk_expression expr t comments =
     in
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
-  | Pexp_jsx_unary_element _ ->
-    (* TODO: save me shulhi, not sure what needs to be done here *)
-    ()
+  | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
+      let xs = List.filter_map (fun prop -> 
+      match prop with 
+      | Parsetree.JSXPropPunning (_, _) -> None
+      | Parsetree.JSXPropValue ({txt; loc}, _, expr) -> 
+          let () = print_endline txt in
+          let () = print_location loc |> Doc.to_string ~width:80 |> print_endline in
+          let () = print_location expr.pexp_loc|> Doc.to_string ~width:80 |> print_endline in
+          let () = log t in
+          let (_leading, _inside, trailing) = partition_by_loc comments expr.pexp_loc in
+          let after_expr, _ = partition_adjacent_trailing expr.pexp_loc trailing in
+          attach t.trailing expr.pexp_loc after_expr;
+          Some (Expression expr)
+      | Parsetree.JSXPropSpreading (_loc, expr) -> Some (Expression expr)
+      ) props in
+      walk_list xs t []
   | Pexp_jsx_container_element
       {
         jsx_container_element_opening_tag_end = opening_greater_than;

From 2b9b5cefbaed755f8679c220cf2a9c595c5ea10c Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 08:57:36 +0800
Subject: [PATCH 42/99] Fix comments inside prop expression

---
 compiler/syntax/src/res_comments_table.ml | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index a441e74f3c..e9f6f93c15 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1473,21 +1473,16 @@ and walk_expression expr t comments =
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
   | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
-      let xs = List.filter_map (fun prop -> 
+      let _ = List.map (fun prop -> 
       match prop with 
-      | Parsetree.JSXPropPunning (_, _) -> None
-      | Parsetree.JSXPropValue ({txt; loc}, _, expr) -> 
-          let () = print_endline txt in
-          let () = print_location loc |> Doc.to_string ~width:80 |> print_endline in
-          let () = print_location expr.pexp_loc|> Doc.to_string ~width:80 |> print_endline in
-          let () = log t in
-          let (_leading, _inside, trailing) = partition_by_loc comments expr.pexp_loc in
+      | Parsetree.JSXPropPunning (_, _) -> ()
+      | Parsetree.JSXPropValue (_, _, expr) -> 
+          let (_leading, inside, trailing) = partition_by_loc comments expr.pexp_loc in
           let after_expr, _ = partition_adjacent_trailing expr.pexp_loc trailing in
           attach t.trailing expr.pexp_loc after_expr;
-          Some (Expression expr)
-      | Parsetree.JSXPropSpreading (_loc, expr) -> Some (Expression expr)
-      ) props in
-      walk_list xs t []
+          walk_expression expr t inside;
+      | Parsetree.JSXPropSpreading (_loc, _expr) -> ()
+      ) props in ()
   | Pexp_jsx_container_element
       {
         jsx_container_element_opening_tag_end = opening_greater_than;

From 0133f91e2ad2c4ef01b933a242b3d2666eadd1bd Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 09:24:00 +0800
Subject: [PATCH 43/99] Formats

---
 compiler/syntax/src/res_comments_table.ml | 28 +++++++++++++++--------
 compiler/syntax/src/res_printer.ml        | 18 +++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index e9f6f93c15..a59c0fef79 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1473,16 +1473,24 @@ and walk_expression expr t comments =
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
   | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
-      let _ = List.map (fun prop -> 
-      match prop with 
-      | Parsetree.JSXPropPunning (_, _) -> ()
-      | Parsetree.JSXPropValue (_, _, expr) -> 
-          let (_leading, inside, trailing) = partition_by_loc comments expr.pexp_loc in
-          let after_expr, _ = partition_adjacent_trailing expr.pexp_loc trailing in
-          attach t.trailing expr.pexp_loc after_expr;
-          walk_expression expr t inside;
-      | Parsetree.JSXPropSpreading (_loc, _expr) -> ()
-      ) props in ()
+    let _ =
+      List.map
+        (fun prop ->
+          match prop with
+          | Parsetree.JSXPropPunning (_, _) -> ()
+          | Parsetree.JSXPropValue (_, _, expr) ->
+            let _leading, inside, trailing =
+              partition_by_loc comments expr.pexp_loc
+            in
+            let after_expr, _ =
+              partition_adjacent_trailing expr.pexp_loc trailing
+            in
+            attach t.trailing expr.pexp_loc after_expr;
+            walk_expression expr t inside
+          | Parsetree.JSXPropSpreading (_loc, _expr) -> ())
+        props
+    in
+    ()
   | Pexp_jsx_container_element
       {
         jsx_container_element_opening_tag_end = opening_greater_than;
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 614c0345ac..69e5b7ad00 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4314,14 +4314,15 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let formatted_props = print_jsx_props ~state props cmt_tbl in
   let formatted_props = formatted_props @ [Doc.text "/>"] in
   Doc.group
-   (Doc.concat
-      [
-        print_comments
-          (Doc.concat [Doc.less_than; name])
-          cmt_tbl tag_name.Asttypes.loc;
-        Doc.space;
-        Doc.indent (Doc.group (Doc.join formatted_props ~sep:Doc.line));
-      ]);
+    (Doc.concat
+       [
+         print_comments
+           (Doc.concat [Doc.less_than; name])
+           cmt_tbl tag_name.Asttypes.loc;
+         Doc.indent
+           (Doc.concat
+              [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)]);
+       ])
 
 and print_jsx_container_tag ~state tag_name props
     (children : Parsetree.jsx_children) cmt_tbl =
@@ -4513,7 +4514,6 @@ and print_jsx_prop ~state prop cmt_tbl =
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
 
-
 (* div -> div.
  * Navabar.createElement -> Navbar
  * Staff.Users.createElement -> Staff.Users *)

From aaef8ac6e0da9d5082420e2f0ab23f896549a0ed Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 09:30:54 +0800
Subject: [PATCH 44/99] Fix closing tag indentation

---
 compiler/syntax/src/res_comments_table.ml | 33 +++++++++++------------
 compiler/syntax/src/res_printer.ml        |  3 ++-
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index a59c0fef79..7286c0a557 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1473,24 +1473,21 @@ and walk_expression expr t comments =
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
   | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
-    let _ =
-      List.map
-        (fun prop ->
-          match prop with
-          | Parsetree.JSXPropPunning (_, _) -> ()
-          | Parsetree.JSXPropValue (_, _, expr) ->
-            let _leading, inside, trailing =
-              partition_by_loc comments expr.pexp_loc
-            in
-            let after_expr, _ =
-              partition_adjacent_trailing expr.pexp_loc trailing
-            in
-            attach t.trailing expr.pexp_loc after_expr;
-            walk_expression expr t inside
-          | Parsetree.JSXPropSpreading (_loc, _expr) -> ())
-        props
-    in
-    ()
+    List.iter
+      (fun prop ->
+        match prop with
+        | Parsetree.JSXPropPunning (_, _) -> ()
+        | Parsetree.JSXPropValue (_, _, expr) ->
+          let _leading, inside, trailing =
+            partition_by_loc comments expr.pexp_loc
+          in
+          let after_expr, _ =
+            partition_adjacent_trailing expr.pexp_loc trailing
+          in
+          attach t.trailing expr.pexp_loc after_expr;
+          walk_expression expr t inside
+        | Parsetree.JSXPropSpreading (_loc, _expr) -> ())
+      props
   | Pexp_jsx_container_element
       {
         jsx_container_element_opening_tag_end = opening_greater_than;
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 69e5b7ad00..7caf50466e 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4312,7 +4312,6 @@ and print_pexp_apply ~state expr cmt_tbl =
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
-  let formatted_props = formatted_props @ [Doc.text "/>"] in
   Doc.group
     (Doc.concat
        [
@@ -4322,6 +4321,8 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
          Doc.indent
            (Doc.concat
               [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)]);
+         Doc.soft_line;
+         Doc.text "/>";
        ])
 
 and print_jsx_container_tag ~state tag_name props

From b863888126fd9d4f12daba4b4160822450e333a7 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 10:10:43 +0800
Subject: [PATCH 45/99] Fix closing tag indentation for cases with break vs
 inline

---
 compiler/syntax/src/res_printer.ml | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 7caf50466e..8eeed7c499 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4312,17 +4312,26 @@ and print_pexp_apply ~state expr cmt_tbl =
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
+  let props_doc =
+    match props with
+    | [] -> Doc.nil
+    | _ ->
+      Doc.indent
+        (Doc.concat
+           [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)])
+  in
+  let closing_tag =
+    if Doc.will_break props_doc then Doc.concat [Doc.soft_line; Doc.text "/>"]
+    else Doc.concat [Doc.space; Doc.text "/>"]
+  in
   Doc.group
     (Doc.concat
        [
          print_comments
            (Doc.concat [Doc.less_than; name])
            cmt_tbl tag_name.Asttypes.loc;
-         Doc.indent
-           (Doc.concat
-              [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)]);
-         Doc.soft_line;
-         Doc.text "/>";
+         props_doc;
+         closing_tag;
        ])
 
 and print_jsx_container_tag ~state tag_name props

From 7f8bf01700c93d7d9811b9ac4a2efb41c37c4639 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 14:02:40 +0800
Subject: [PATCH 46/99] Handle some edge cases

---
 compiler/syntax/src/res_comments_table.ml |  8 +++++++-
 compiler/syntax/src/res_printer.ml        | 24 +++++++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 7286c0a557..ab9931eb70 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1472,7 +1472,13 @@ and walk_expression expr t comments =
     in
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
-  | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
+  | Pexp_jsx_unary_element
+      {jsx_unary_element_tag_name = tag; jsx_unary_element_props = props} ->
+    (* handles the comments at the tag *)
+    let _, _, trailing = partition_by_loc comments tag.loc in
+    let after_expr, _ = partition_adjacent_trailing tag.loc trailing in
+    attach t.trailing tag.loc after_expr;
+    (* handles the comments for the actual props *)
     List.iter
       (fun prop ->
         match prop with
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 8eeed7c499..e2bb6f3371 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4312,6 +4312,7 @@ and print_pexp_apply ~state expr cmt_tbl =
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
+  let has_no_props = List.is_empty props in
   let props_doc =
     match props with
     | [] -> Doc.nil
@@ -4320,17 +4321,32 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
         (Doc.concat
            [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)])
   in
+  let tag_has_trailing_comment = has_trailing_comments cmt_tbl tag_name.loc in
+  let opening_tag =
+    print_comments
+      (Doc.concat [Doc.less_than; name])
+      cmt_tbl tag_name.Asttypes.loc
+  in
+  let opening_tag =
+    if tag_has_trailing_comment && not has_no_props then Doc.indent opening_tag
+    else opening_tag
+  in
   let closing_tag =
     if Doc.will_break props_doc then Doc.concat [Doc.soft_line; Doc.text "/>"]
-    else Doc.concat [Doc.space; Doc.text "/>"]
+    else
+      Doc.concat
+        [
+          (if tag_has_trailing_comment && has_no_props then Doc.nil else Doc.line);
+          Doc.text "/>";
+        ]
   in
   Doc.group
     (Doc.concat
        [
-         print_comments
-           (Doc.concat [Doc.less_than; name])
-           cmt_tbl tag_name.Asttypes.loc;
+         opening_tag;
          props_doc;
+         (if tag_has_trailing_comment && has_no_props then Doc.hard_line
+          else Doc.nil);
          closing_tag;
        ])
 

From 4e0951c0075d1ff3c2ae296733878dbcec1d4181 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sat, 22 Mar 2025 14:21:29 +0800
Subject: [PATCH 47/99] Refactor

---
 compiler/syntax/src/res_printer.ml | 38 ++++++++++++++++--------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index e2bb6f3371..b176f1edd1 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4312,42 +4312,44 @@ and print_pexp_apply ~state expr cmt_tbl =
 and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
-  let has_no_props = List.is_empty props in
+  let tag_has_trailing_comment = has_trailing_comments cmt_tbl tag_name.loc in
+  let tag_has_no_props = List.is_empty props in
   let props_doc =
-    match props with
-    | [] -> Doc.nil
-    | _ ->
+    if tag_has_no_props then Doc.nil
+    else
       Doc.indent
         (Doc.concat
            [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)])
   in
-  let tag_has_trailing_comment = has_trailing_comments cmt_tbl tag_name.loc in
   let opening_tag =
     print_comments
       (Doc.concat [Doc.less_than; name])
       cmt_tbl tag_name.Asttypes.loc
   in
-  let opening_tag =
-    if tag_has_trailing_comment && not has_no_props then Doc.indent opening_tag
+  let opening_tag_doc =
+    if tag_has_trailing_comment && not tag_has_no_props then
+      Doc.indent opening_tag
     else opening_tag
   in
-  let closing_tag =
-    if Doc.will_break props_doc then Doc.concat [Doc.soft_line; Doc.text "/>"]
-    else
-      Doc.concat
-        [
-          (if tag_has_trailing_comment && has_no_props then Doc.nil else Doc.line);
-          Doc.text "/>";
-        ]
+  let closing_tag_doc =
+    let sep =
+      match
+        (Doc.will_break props_doc, tag_has_trailing_comment, tag_has_no_props)
+      with
+      | true, _, _ -> Doc.soft_line
+      | false, true, true -> Doc.nil
+      | false, _, _ -> Doc.line
+    in
+    Doc.concat [sep; Doc.text "/>"]
   in
   Doc.group
     (Doc.concat
        [
-         opening_tag;
+         opening_tag_doc;
          props_doc;
-         (if tag_has_trailing_comment && has_no_props then Doc.hard_line
+         (if tag_has_trailing_comment && tag_has_no_props then Doc.hard_line
           else Doc.nil);
-         closing_tag;
+         closing_tag_doc;
        ])
 
 and print_jsx_container_tag ~state tag_name props

From 9e68c1a43dccf6c772274f3f5a63a87d799a6249 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sun, 23 Mar 2025 07:11:39 +0800
Subject: [PATCH 48/99] WIP: Handle punning

---
 compiler/syntax/src/res_comments_table.ml |  5 ++++-
 compiler/syntax/src/res_printer.ml        | 11 +++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index ab9931eb70..0f7574deed 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1482,7 +1482,10 @@ and walk_expression expr t comments =
     List.iter
       (fun prop ->
         match prop with
-        | Parsetree.JSXPropPunning (_, _) -> ()
+        | Parsetree.JSXPropPunning (_, {loc}) ->
+          let _leading, _inside, trailing = partition_by_loc comments loc in
+          let after_expr, _ = partition_adjacent_trailing loc trailing in
+          attach t.trailing loc after_expr
         | Parsetree.JSXPropValue (_, _, expr) ->
           let _leading, inside, trailing =
             partition_by_loc comments expr.pexp_loc
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index b176f1edd1..62960525e6 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4510,8 +4510,15 @@ and print_jsx_prop ~state prop cmt_tbl =
   let open Parsetree in
   match prop with
   | JSXPropPunning (is_optional, name) ->
-    if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
-    else Doc.text name.txt
+    let prop_has_trailing_comment = has_trailing_comments cmt_tbl name.loc in
+    let () = CommentTable.print_location name.loc |> Doc.to_string ~width:80 |> print_endline in
+    let () = CommentTable.log cmt_tbl in
+    let doc =
+      if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
+      else Doc.text name.txt
+    in
+    let doc = print_comments doc cmt_tbl name.loc in 
+    if prop_has_trailing_comment then Doc.group (Doc.concat [Doc.break_parent; doc]) else doc
   | JSXPropValue (name, is_optional, value) ->
     let value_doc =
       let v =

From 53616a747172eaa34160746ea858da710a3b6a62 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Sun, 23 Mar 2025 07:20:57 +0800
Subject: [PATCH 49/99] Fix optional printing with braces

---
 compiler/syntax/src/res_printer.ml | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 62960525e6..f381f1d763 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4511,29 +4511,31 @@ and print_jsx_prop ~state prop cmt_tbl =
   match prop with
   | JSXPropPunning (is_optional, name) ->
     let prop_has_trailing_comment = has_trailing_comments cmt_tbl name.loc in
-    let () = CommentTable.print_location name.loc |> Doc.to_string ~width:80 |> print_endline in
+    let () =
+      CommentTable.print_location name.loc
+      |> Doc.to_string ~width:80 |> print_endline
+    in
     let () = CommentTable.log cmt_tbl in
     let doc =
       if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
       else Doc.text name.txt
     in
-    let doc = print_comments doc cmt_tbl name.loc in 
-    if prop_has_trailing_comment then Doc.group (Doc.concat [Doc.break_parent; doc]) else doc
+    let doc = print_comments doc cmt_tbl name.loc in
+    if prop_has_trailing_comment then
+      Doc.group (Doc.concat [Doc.break_parent; doc])
+    else doc
   | JSXPropValue (name, is_optional, value) ->
     let value_doc =
-      let v =
-        Doc.concat
-          [
-            (if is_optional then Doc.question else Doc.nil);
-            print_expression_with_comments ~state value cmt_tbl;
-          ]
-      in
+      let v = print_expression_with_comments ~state value cmt_tbl in
       match Parens.jsx_prop_expr value with
       | Parenthesized | Braced _ ->
         let inner_doc = if Parens.braced_expr value then add_parens v else v in
-        if has_leading_line_comment cmt_tbl value.pexp_loc then
-          add_braces inner_doc
-        else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
+        let doc =
+          if has_leading_line_comment cmt_tbl value.pexp_loc then
+            add_braces inner_doc
+          else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
+        in
+        Doc.concat [(if is_optional then Doc.question else Doc.nil); doc]
       | _ -> v
     in
     Doc.concat [Doc.text name.txt; Doc.equal; Doc.group value_doc]

From 25e20b8d13d0aeb252c647b3efb8c00191e0c55e Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Mon, 24 Mar 2025 06:03:20 +0800
Subject: [PATCH 50/99] WIP: Handle comments attachment in a different way

---
 compiler/syntax/src/res_comments_table.ml | 35 ++++++++---------------
 compiler/syntax/src/res_printer.ml        | 23 +++++++--------
 2 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 0f7574deed..8bd0469c32 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1474,29 +1474,18 @@ and walk_expression expr t comments =
     walk_list xs t rest
   | Pexp_jsx_unary_element
       {jsx_unary_element_tag_name = tag; jsx_unary_element_props = props} ->
-    (* handles the comments at the tag *)
-    let _, _, trailing = partition_by_loc comments tag.loc in
-    let after_expr, _ = partition_adjacent_trailing tag.loc trailing in
-    attach t.trailing tag.loc after_expr;
-    (* handles the comments for the actual props *)
-    List.iter
-      (fun prop ->
-        match prop with
-        | Parsetree.JSXPropPunning (_, {loc}) ->
-          let _leading, _inside, trailing = partition_by_loc comments loc in
-          let after_expr, _ = partition_adjacent_trailing loc trailing in
-          attach t.trailing loc after_expr
-        | Parsetree.JSXPropValue (_, _, expr) ->
-          let _leading, inside, trailing =
-            partition_by_loc comments expr.pexp_loc
-          in
-          let after_expr, _ =
-            partition_adjacent_trailing expr.pexp_loc trailing
-          in
-          attach t.trailing expr.pexp_loc after_expr;
-          walk_expression expr t inside
-        | Parsetree.JSXPropSpreading (_loc, _expr) -> ())
-      props
+    let _leading, inside, trailing = partition_by_loc comments tag.loc in
+    walk_list
+      (props
+      |> List.filter_map (fun prop ->
+             match prop with
+             | Parsetree.JSXPropPunning (_, _) -> None
+             | Parsetree.JSXPropValue ({loc}, _, expr) ->
+               let loc = {loc with loc_end = expr.pexp_loc.loc_end} in
+               Some (ExprArgument {expr; loc})
+             | Parsetree.JSXPropSpreading (_, _) -> None))
+      t trailing;
+    walk_expression expr t inside
   | Pexp_jsx_container_element
       {
         jsx_container_element_opening_tag_end = opening_greater_than;
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index f381f1d763..809962d74c 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4511,11 +4511,6 @@ and print_jsx_prop ~state prop cmt_tbl =
   match prop with
   | JSXPropPunning (is_optional, name) ->
     let prop_has_trailing_comment = has_trailing_comments cmt_tbl name.loc in
-    let () =
-      CommentTable.print_location name.loc
-      |> Doc.to_string ~width:80 |> print_endline
-    in
-    let () = CommentTable.log cmt_tbl in
     let doc =
       if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
       else Doc.text name.txt
@@ -4525,20 +4520,23 @@ and print_jsx_prop ~state prop cmt_tbl =
       Doc.group (Doc.concat [Doc.break_parent; doc])
     else doc
   | JSXPropValue (name, is_optional, value) ->
+    let value =
+      {
+        value with
+        pexp_loc = {value.pexp_loc with loc_start = name.loc.loc_start};
+      }
+    in
     let value_doc =
-      let v = print_expression_with_comments ~state value cmt_tbl in
+      let v = print_expression ~state value cmt_tbl in
       match Parens.jsx_prop_expr value with
       | Parenthesized | Braced _ ->
         let inner_doc = if Parens.braced_expr value then add_parens v else v in
-        let doc =
-          if has_leading_line_comment cmt_tbl value.pexp_loc then
-            add_braces inner_doc
-          else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
-        in
+        let doc = Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace] in
         Doc.concat [(if is_optional then Doc.question else Doc.nil); doc]
       | _ -> v
     in
-    Doc.concat [Doc.text name.txt; Doc.equal; Doc.group value_doc]
+    let doc = Doc.concat [Doc.text name.txt; Doc.equal; Doc.group value_doc] in
+    print_comments doc cmt_tbl value.pexp_loc
   | JSXPropSpreading (_, value) ->
     Doc.concat
       [
@@ -4549,6 +4547,7 @@ and print_jsx_prop ~state prop cmt_tbl =
       ]
 
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
+  let () = CommentTable.log cmt_tbl in
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
 
 (* div -> div.

From ad72bf243dfc5e95e6632dbeea5417b3012f91bc Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Mon, 24 Mar 2025 06:27:55 +0800
Subject: [PATCH 51/99] Handle empty props

---
 compiler/syntax/src/res_comments_table.ml | 5 +++++
 compiler/syntax/src/res_printer.ml        | 1 -
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 8bd0469c32..889ff43ae3 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1472,6 +1472,11 @@ and walk_expression expr t comments =
     in
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
+  | Pexp_jsx_unary_element
+      {jsx_unary_element_tag_name = tag; jsx_unary_element_props = []} ->
+    let _, _, trailing = partition_by_loc comments tag.loc in
+    let after_expr, _ = partition_adjacent_trailing tag.loc trailing in
+    attach t.trailing tag.loc after_expr
   | Pexp_jsx_unary_element
       {jsx_unary_element_tag_name = tag; jsx_unary_element_props = props} ->
     let _leading, inside, trailing = partition_by_loc comments tag.loc in
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 809962d74c..b064c2a026 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4547,7 +4547,6 @@ and print_jsx_prop ~state prop cmt_tbl =
       ]
 
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
-  let () = CommentTable.log cmt_tbl in
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
 
 (* div -> div.

From 7ba4996f53e7b9a95794e1ecb10a8136c5b31dc3 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Mon, 24 Mar 2025 11:12:04 +0800
Subject: [PATCH 52/99] Handle props spread

---
 compiler/syntax/src/res_comments_table.ml |  7 +++++--
 compiler/syntax/src/res_printer.ml        | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 889ff43ae3..164b5acc50 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1484,11 +1484,14 @@ and walk_expression expr t comments =
       (props
       |> List.filter_map (fun prop ->
              match prop with
-             | Parsetree.JSXPropPunning (_, _) -> None
+             | Parsetree.JSXPropPunning (_, {loc}) ->
+               Some (ExprArgument {expr; loc})
              | Parsetree.JSXPropValue ({loc}, _, expr) ->
                let loc = {loc with loc_end = expr.pexp_loc.loc_end} in
                Some (ExprArgument {expr; loc})
-             | Parsetree.JSXPropSpreading (_, _) -> None))
+             | Parsetree.JSXPropSpreading (loc, expr) ->
+               let loc = {loc with loc_end = expr.pexp_loc.loc_end} in
+               Some (ExprArgument {expr; loc})))
       t trailing;
     walk_expression expr t inside
   | Pexp_jsx_container_element
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index b064c2a026..ba2e78713f 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4537,14 +4537,18 @@ and print_jsx_prop ~state prop cmt_tbl =
     in
     let doc = Doc.concat [Doc.text name.txt; Doc.equal; Doc.group value_doc] in
     print_comments doc cmt_tbl value.pexp_loc
-  | JSXPropSpreading (_, value) ->
-    Doc.concat
-      [
-        Doc.lbrace;
-        Doc.dotdotdot;
-        print_expression_with_comments ~state value cmt_tbl;
-        Doc.rbrace;
-      ]
+  | JSXPropSpreading (loc, value) ->
+    let value =
+      {value with pexp_loc = {value.pexp_loc with loc_start = loc.loc_start}}
+    in
+    Doc.group
+      (Doc.concat
+         [
+           Doc.lbrace;
+           Doc.dotdotdot;
+           print_expression_with_comments ~state value cmt_tbl;
+           Doc.rbrace;
+         ])
 
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)

From f09cd7036889aa264d4d355cf76001f8b16d2f49 Mon Sep 17 00:00:00 2001
From: Shulhi Sapli <shulhi@gmail.com>
Date: Mon, 24 Mar 2025 12:13:17 +0800
Subject: [PATCH 53/99] Fix optional with punning

---
 compiler/syntax/src/res_printer.ml | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index ba2e78713f..5b3423f8ef 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4531,11 +4531,18 @@ and print_jsx_prop ~state prop cmt_tbl =
       match Parens.jsx_prop_expr value with
       | Parenthesized | Braced _ ->
         let inner_doc = if Parens.braced_expr value then add_parens v else v in
-        let doc = Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace] in
-        Doc.concat [(if is_optional then Doc.question else Doc.nil); doc]
+        Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
       | _ -> v
     in
-    let doc = Doc.concat [Doc.text name.txt; Doc.equal; Doc.group value_doc] in
+    let doc =
+      Doc.concat
+        [
+          Doc.text name.txt;
+          Doc.equal;
+          (if is_optional then Doc.question else Doc.nil);
+          Doc.group value_doc;
+        ]
+    in
     print_comments doc cmt_tbl value.pexp_loc
   | JSXPropSpreading (loc, value) ->
     let value =

From 0ee7601a350ba73e421d811b47d408caefe14dcb Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 24 Mar 2025 08:43:03 +0100
Subject: [PATCH 54/99] Indent props if they don't fit on one line.

---
 compiler/syntax/src/res_printer.ml | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 5b3423f8ef..9ea88469e8 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4386,10 +4386,14 @@ and print_jsx_container_tag ~state tag_name props
                 print_comments
                   (Doc.concat [Doc.less_than; name])
                   cmt_tbl tag_name.Asttypes.loc;
-                (if not (List.is_empty formatted_props) then Doc.space
-                 else Doc.nil);
-                (* todo: might not be needed if no props?*)
-                Doc.join formatted_props ~sep:Doc.space;
+                (if List.is_empty formatted_props then Doc.nil
+                 else
+                   Doc.indent
+                     (Doc.concat
+                        [
+                          Doc.line;
+                          Doc.group (Doc.join formatted_props ~sep:Doc.line);
+                        ]));
                 (* if tag A has trailing comments then put > on the next line
                            <A
                            // comments

From bd45146bb98733c98d96e6106c322b60b9ecd8c8 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 24 Mar 2025 09:16:09 +0100
Subject: [PATCH 55/99] Fix indentation of children when props are multiline.

---
 compiler/syntax/src/res_printer.ml | 52 ++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 9ea88469e8..7685da46de 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4362,19 +4362,37 @@ and print_jsx_container_tag ~state tag_name props
     | JSXChildrenSpreading _ | JSXChildrenItems (_ :: _) -> true
     | JSXChildrenItems [] -> false
   in
-  let line_sep = Doc.line in
+  let line_sep =
+    let children =
+      match children with
+      | JSXChildrenItems children -> children
+      | JSXChildrenSpreading child -> [child]
+    in
+    if
+      List.length children > 1
+      || List.exists
+           (function
+             | {
+                 Parsetree.pexp_desc =
+                   ( Pexp_jsx_container_element _ | Pexp_jsx_fragment _
+                   | Pexp_jsx_unary_element _ );
+               } ->
+               true
+             | _ -> false)
+           children
+    then Doc.hard_line
+    else Doc.line
+  in
   let print_children children =
-    Doc.group
-      (Doc.concat
-         [
-           Doc.indent
-             (Doc.concat
-                [
-                  Doc.line;
-                  print_jsx_children ~sep:line_sep ~state children cmt_tbl;
-                ]);
-           Doc.line;
-         ])
+    Doc.concat
+      [
+        Doc.indent
+          (Doc.concat
+             [
+               Doc.line; print_jsx_children ~sep:line_sep ~state children cmt_tbl;
+             ]);
+        line_sep;
+      ]
   in
 
   Doc.group
@@ -4395,11 +4413,11 @@ and print_jsx_container_tag ~state tag_name props
                           Doc.group (Doc.join formatted_props ~sep:Doc.line);
                         ]));
                 (* if tag A has trailing comments then put > on the next line
-                           <A
-                           // comments
-                           >
-                           </A>
-                        *)
+                <A
+                // comments
+                >
+                </A>
+             *)
                 (if has_trailing_comments cmt_tbl tag_name.Asttypes.loc then
                    Doc.concat [Doc.soft_line; Doc.greater_than]
                  else Doc.greater_than);

From 2d50ff8b0b2cdbf637a20df66eb681a25eca73c6 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 26 Mar 2025 14:57:55 +0100
Subject: [PATCH 56/99] Refactor to Pexp_jsx_element

---
 analysis/src/CompletionFrontEnd.ml        |  39 ++++----
 analysis/src/SemanticTokens.ml            |  18 ++--
 analysis/src/Utils.ml                     |  11 +--
 compiler/frontend/bs_ast_mapper.ml        |  31 +++---
 compiler/ml/ast_helper.ml                 |  31 +++---
 compiler/ml/ast_iterator.ml               |  22 +++--
 compiler/ml/ast_mapper.ml                 |  31 +++---
 compiler/ml/ast_mapper_to0.ml             |  30 ++++--
 compiler/ml/depend.ml                     |  22 +++--
 compiler/ml/parsetree.ml                  |  22 +++--
 compiler/ml/pprintast.ml                  |  30 +++---
 compiler/ml/printast.ml                   |  21 ++--
 compiler/ml/typecore.ml                   |  28 +++---
 compiler/syntax/src/jsx_v4.ml             | 114 ++++++++++------------
 compiler/syntax/src/res_ast_debugger.ml   |  16 +--
 compiler/syntax/src/res_comments_table.ml |  29 ++++--
 compiler/syntax/src/res_parens.ml         |  16 +--
 compiler/syntax/src/res_printer.ml        |  55 +++++------
 18 files changed, 297 insertions(+), 269 deletions(-)

diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
index f55e24e1d8..99c472015b 100644
--- a/analysis/src/CompletionFrontEnd.ml
+++ b/analysis/src/CompletionFrontEnd.ml
@@ -1322,21 +1322,23 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
                         inJsx = !inJsxContext;
                       }))
             | None -> ())
-        | Pexp_jsx_unary_element
-            {
-              jsx_unary_element_tag_name = compName;
-              jsx_unary_element_props = props;
-            }
-        | Pexp_jsx_container_element
-            {
-              jsx_container_element_tag_name_start = compName;
-              jsx_container_element_props = props;
-            } ->
+        | Pexp_jsx_element
+            ( Jsx_unary_element
+                {
+                  jsx_unary_element_tag_name = compName;
+                  jsx_unary_element_props = props;
+                }
+            | Jsx_container_element
+                {
+                  jsx_container_element_tag_name_start = compName;
+                  jsx_container_element_props = props;
+                } ) ->
           inJsxContext := true;
           let children =
             match expr.pexp_desc with
-            | Pexp_jsx_container_element
-                {jsx_container_element_children = children} ->
+            | Pexp_jsx_element
+                (Jsx_container_element
+                   {jsx_container_element_children = children}) ->
               children
             | _ -> JSXChildrenItems []
           in
@@ -1360,12 +1362,13 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
               | Some childrenPosStart -> Pos.toString childrenPosStart);
           let jsxCompletable =
             match expr.pexp_desc with
-            | Pexp_jsx_container_element
-                {
-                  jsx_container_element_closing_tag = None;
-                  jsx_container_element_children =
-                    JSXChildrenSpreading _ | JSXChildrenItems (_ :: _);
-                } ->
+            | Pexp_jsx_element
+                (Jsx_container_element
+                   {
+                     jsx_container_element_closing_tag = None;
+                     jsx_container_element_children =
+                       JSXChildrenSpreading _ | JSXChildrenItems (_ :: _);
+                   }) ->
               (* This is a weird edge case where there is no closing tag but there are children *)
               None
             | _ ->
diff --git a/analysis/src/SemanticTokens.ml b/analysis/src/SemanticTokens.ml
index d43cef6963..10219f1b54 100644
--- a/analysis/src/SemanticTokens.ml
+++ b/analysis/src/SemanticTokens.ml
@@ -245,7 +245,8 @@ let command ~debug ~emitter ~path =
                ~posEnd:(Some (Loc.end_ loc))
                ~lid ~debug;
       Ast_iterator.default_iterator.expr iterator e
-    | Pexp_jsx_unary_element {jsx_unary_element_tag_name = lident} ->
+    | Pexp_jsx_element (Jsx_unary_element {jsx_unary_element_tag_name = lident})
+      ->
       (*
          Angled brackets:
           - These are handled in the grammar:  <>  </>  </  />
@@ -261,13 +262,14 @@ let command ~debug ~emitter ~path =
       emitter (* <foo ...props /> <-- *)
       |> emitJsxTag ~debug ~name:"/>" ~pos:(closing_line, closing_column - 2)
       (* minus two for /> *)
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = lident;
-          jsx_container_element_opening_tag_end = posOfGreatherthanAfterProps;
-          jsx_container_element_children = children;
-          jsx_container_element_closing_tag = closing_tag_opt;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = lident;
+             jsx_container_element_opening_tag_end = posOfGreatherthanAfterProps;
+             jsx_container_element_children = children;
+             jsx_container_element_closing_tag = closing_tag_opt;
+           }) ->
       (* opening tag *)
       emitter (* --> <div... *)
       |> emitJsxTag ~debug ~name:"<" ~pos:(Loc.start e.pexp_loc);
diff --git a/analysis/src/Utils.ml b/analysis/src/Utils.ml
index 3892a7b188..a2d1252ba6 100644
--- a/analysis/src/Utils.ml
+++ b/analysis/src/Utils.ml
@@ -111,9 +111,7 @@ let identifyPexp pexp =
   | Pexp_pack _ -> "Pexp_pack"
   | Pexp_extension _ -> "Pexp_extension"
   | Pexp_open _ -> "Pexp_open"
-  | Pexp_jsx_fragment _ -> "Pexp_jsx_fragment"
-  | Pexp_jsx_unary_element _ -> "Pexp_jsx_unary_element"
-  | Pexp_jsx_container_element _ -> "Pexp_jsx_container_element"
+  | Pexp_jsx_element _ -> "Pexp_jsx_element"
 
 let identifyPpat pat =
   match pat with
@@ -153,13 +151,8 @@ let rec unwrapIfOption (t : Types.type_expr) =
   | _ -> t
 
 let isJsxComponent (vb : Parsetree.value_binding) =
-  vb.pvb_attributes
-  |> List.exists (function
-       | {Location.txt = "react.component" | "jsx.component"}, _payload -> true
-       | _ -> false)
-  ||
   match vb.pvb_expr.pexp_desc with
-  | Parsetree.Pexp_jsx_fragment _ -> true
+  | Parsetree.Pexp_jsx_element _ -> true
   | _ -> false
 
 let checkName name ~prefix ~exact =
diff --git a/compiler/frontend/bs_ast_mapper.ml b/compiler/frontend/bs_ast_mapper.ml
index 8d5c7e6d8a..202bad5e6f 100644
--- a/compiler/frontend/bs_ast_mapper.ml
+++ b/compiler/frontend/bs_ast_mapper.ml
@@ -380,19 +380,28 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
-    | Pexp_jsx_fragment (o, children, c) ->
+    | Pexp_jsx_element
+        (Jsx_fragment
+           {
+             jsx_fragment_opening = o;
+             jsx_fragment_children = children;
+             jsx_fragment_closing = c;
+           }) ->
       jsx_fragment o (map_jsx_children sub children) c
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+    | Pexp_jsx_element
+        (Jsx_unary_element
+           {jsx_unary_element_tag_name = name; jsx_unary_element_props = props})
+      ->
       jsx_unary_element ~loc ~attrs name (map_jsx_props sub props)
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = name;
-          jsx_container_element_opening_tag_end = ote;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-          jsx_container_element_closing_tag = closing_tag;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = name;
+             jsx_container_element_opening_tag_end = ote;
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+             jsx_container_element_closing_tag = closing_tag;
+           }) ->
       jsx_container_element ~loc ~attrs name (map_jsx_props sub props) ote
         (map_jsx_children sub children)
         closing_tag
diff --git a/compiler/ml/ast_helper.ml b/compiler/ml/ast_helper.ml
index e44d8b2157..91ee799886 100644
--- a/compiler/ml/ast_helper.ml
+++ b/compiler/ml/ast_helper.ml
@@ -181,22 +181,31 @@ module Exp = struct
   let open_ ?loc ?attrs a b c = mk ?loc ?attrs (Pexp_open (a, b, c))
   let extension ?loc ?attrs a = mk ?loc ?attrs (Pexp_extension a)
   let jsx_fragment ?loc ?attrs a b c =
-    mk ?loc ?attrs (Pexp_jsx_fragment (a, b, c))
+    mk ?loc ?attrs
+      (Pexp_jsx_element
+         (Jsx_fragment
+            {
+              jsx_fragment_opening = a;
+              jsx_fragment_children = b;
+              jsx_fragment_closing = c;
+            }))
   let jsx_unary_element ?loc ?attrs a b =
     mk ?loc ?attrs
-      (Pexp_jsx_unary_element
-         {jsx_unary_element_tag_name = a; jsx_unary_element_props = b})
+      (Pexp_jsx_element
+         (Jsx_unary_element
+            {jsx_unary_element_tag_name = a; jsx_unary_element_props = b}))
 
   let jsx_container_element ?loc ?attrs a b c d e =
     mk ?loc ?attrs
-      (Pexp_jsx_container_element
-         {
-           jsx_container_element_tag_name_start = a;
-           jsx_container_element_props = b;
-           jsx_container_element_opening_tag_end = c;
-           jsx_container_element_children = d;
-           jsx_container_element_closing_tag = e;
-         })
+      (Pexp_jsx_element
+         (Jsx_container_element
+            {
+              jsx_container_element_tag_name_start = a;
+              jsx_container_element_props = b;
+              jsx_container_element_opening_tag_end = c;
+              jsx_container_element_children = d;
+              jsx_container_element_closing_tag = e;
+            }))
 
   let case lhs ?guard rhs = {pc_lhs = lhs; pc_guard = guard; pc_rhs = rhs}
 
diff --git a/compiler/ml/ast_iterator.ml b/compiler/ml/ast_iterator.ml
index b59e701512..a048ad68fc 100644
--- a/compiler/ml/ast_iterator.ml
+++ b/compiler/ml/ast_iterator.ml
@@ -357,17 +357,21 @@ module E = struct
       iter_loc sub lid;
       sub.expr sub e
     | Pexp_extension x -> sub.extension sub x
-    | Pexp_jsx_fragment (_, children, _) -> iter_jsx_children sub children
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+    | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
+      iter_jsx_children sub children
+    | Pexp_jsx_element
+        (Jsx_unary_element
+           {jsx_unary_element_tag_name = name; jsx_unary_element_props = props})
+      ->
       iter_loc sub name;
       iter_jsx_props sub props
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = name;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = name;
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+           }) ->
       iter_loc sub name;
       iter_jsx_props sub props;
       iter_jsx_children sub children
diff --git a/compiler/ml/ast_mapper.ml b/compiler/ml/ast_mapper.ml
index 2ade57832c..07bb835520 100644
--- a/compiler/ml/ast_mapper.ml
+++ b/compiler/ml/ast_mapper.ml
@@ -343,19 +343,28 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
-    | Pexp_jsx_fragment (o, children, c) ->
+    | Pexp_jsx_element
+        (Jsx_fragment
+           {
+             jsx_fragment_opening = o;
+             jsx_fragment_children = children;
+             jsx_fragment_closing = c;
+           }) ->
       jsx_fragment ~loc ~attrs o (map_jsx_children sub children) c
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+    | Pexp_jsx_element
+        (Jsx_unary_element
+           {jsx_unary_element_tag_name = name; jsx_unary_element_props = props})
+      ->
       jsx_unary_element ~loc ~attrs (map_loc sub name) (map_jsx_props sub props)
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = name;
-          jsx_container_element_opening_tag_end = ote;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-          jsx_container_element_closing_tag = closing_tag;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = name;
+             jsx_container_element_opening_tag_end = ote;
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+             jsx_container_element_closing_tag = closing_tag;
+           }) ->
       jsx_container_element ~loc ~attrs (map_loc sub name)
         (map_jsx_props sub props) ote
         (map_jsx_children sub children)
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
index 824e7451b4..c1842da021 100644
--- a/compiler/ml/ast_mapper_to0.ml
+++ b/compiler/ml/ast_mapper_to0.ml
@@ -467,7 +467,13 @@ module E = struct
     | Pexp_open (ovf, lid, e) ->
       open_ ~loc ~attrs ovf (map_loc sub lid) (sub.expr sub e)
     | Pexp_extension x -> extension ~loc ~attrs (sub.extension sub x)
-    | Pexp_jsx_fragment (o, children, c) ->
+    | Pexp_jsx_element
+        (Jsx_fragment
+           {
+             jsx_fragment_opening = o;
+             jsx_fragment_children = children;
+             jsx_fragment_closing = c;
+           }) ->
       (*
          The location of  Pexp_jsx_fragment is from the start of < till the end of />.
          This is not the case in the old AST. There it is from >...</
@@ -475,9 +481,12 @@ module E = struct
       let loc = {loc with loc_start = o; loc_end = c} in
       let mapped = map_jsx_children sub loc children in
       {mapped with pexp_attributes = jsx_attr sub :: attrs}
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
-      ->
+    | Pexp_jsx_element
+        (Jsx_unary_element
+           {
+             jsx_unary_element_tag_name = tag_name;
+             jsx_unary_element_props = props;
+           }) ->
       let tag_ident = map_loc sub tag_name in
       let props = map_jsx_props sub props in
       let children_expr =
@@ -501,12 +510,13 @@ module E = struct
             (Asttypes.Noloc.Labelled "children", children_expr);
             (Asttypes.Noloc.Nolabel, unit_expr);
           ])
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = tag_name;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = tag_name;
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+           }) ->
       let tag_ident = map_loc sub tag_name in
       let props = map_jsx_props sub props in
       let children_expr = map_jsx_children sub loc children in
diff --git a/compiler/ml/depend.ml b/compiler/ml/depend.ml
index 79a5e76516..7a6810322e 100644
--- a/compiler/ml/depend.ml
+++ b/compiler/ml/depend.ml
@@ -289,17 +289,21 @@ let rec add_expr bv exp =
     | Pstr_eval ({pexp_desc = Pexp_construct (c, None)}, _) -> add bv c
     | _ -> handle_extension e)
   | Pexp_extension e -> handle_extension e
-  | Pexp_jsx_fragment (_, children, _) -> add_jsx_children bv children
-  | Pexp_jsx_unary_element
-      {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+  | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
+    add_jsx_children bv children
+  | Pexp_jsx_element
+      (Jsx_unary_element
+         {jsx_unary_element_tag_name = name; jsx_unary_element_props = props})
+    ->
     add bv name;
     and_jsx_props bv props
-  | Pexp_jsx_container_element
-      {
-        jsx_container_element_tag_name_start = name;
-        jsx_container_element_props = props;
-        jsx_container_element_children = children;
-      } ->
+  | Pexp_jsx_element
+      (Jsx_container_element
+         {
+           jsx_container_element_tag_name_start = name;
+           jsx_container_element_props = props;
+           jsx_container_element_children = children;
+         }) ->
     add bv name;
     and_jsx_props bv props;
     add_jsx_children bv children
diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index d6c5f92094..e92afee400 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -315,16 +315,18 @@ and expression_desc =
   | Pexp_extension of extension
   (* [%id] *)
   (* . *)
-  (* represents <> foo </> , the entire range is stored in the expression , we keep track of >, children and </ *)
-  | Pexp_jsx_fragment of
-      (* > *) Lexing.position
-      * (* children *)
-        jsx_children
-      * (* </ *) Lexing.position
-  (* represents <input type_="text" /> *)
-  | Pexp_jsx_unary_element of jsx_unary_element
-  (* represents <div className={v}>{children}</div> *)
-  | Pexp_jsx_container_element of jsx_container_element
+  | Pexp_jsx_element of jsx_element
+
+and jsx_element =
+  | Jsx_fragment of jsx_fragment
+  | Jsx_unary_element of jsx_unary_element
+  | Jsx_container_element of jsx_container_element
+
+and jsx_fragment = {
+  (* > *) jsx_fragment_opening: Lexing.position;
+  (* children *) jsx_fragment_children: jsx_children;
+  (* </ *) jsx_fragment_closing: Lexing.position;
+}
 
 and jsx_unary_element = {
   (* jsx_unary_element_opening: Lexing.position; *)
diff --git a/compiler/ml/pprintast.ml b/compiler/ml/pprintast.ml
index 2a96bca746..81df78d65a 100644
--- a/compiler/ml/pprintast.ml
+++ b/compiler/ml/pprintast.ml
@@ -794,25 +794,25 @@ and simple_expr ctxt f x =
       let expression = expression ctxt in
       pp f fmt (pattern ctxt) s expression e1 direction_flag df expression e2
         expression e3
-      (* TODO: what should this really be?
-        I miss some context why this print form even exists.
-        Can/should we improve the output here?
-        *)
-    | Pexp_jsx_fragment (_, xs, _) ->
-      pp f "<>%a</>" (list (simple_expr ctxt)) (collect_jsx_children xs)
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
-      -> (
+    | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
+      pp f "<>%a</>" (list (simple_expr ctxt)) (collect_jsx_children children)
+    | Pexp_jsx_element
+        (Jsx_unary_element
+           {
+             jsx_unary_element_tag_name = tag_name;
+             jsx_unary_element_props = props;
+           }) -> (
       let name = Longident.flatten tag_name.txt |> String.concat "." in
       match props with
       | [] -> pp f "<%s />" name
       | _ -> pp f "<%s %a />" name (print_jsx_props ctxt) props)
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = tag_name;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-        } -> (
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = tag_name;
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+           }) -> (
       let name = Longident.flatten tag_name.txt |> String.concat "." in
       match props with
       | [] ->
diff --git a/compiler/ml/printast.ml b/compiler/ml/printast.ml
index b80e53ef29..a61141b5cf 100644
--- a/compiler/ml/printast.ml
+++ b/compiler/ml/printast.ml
@@ -345,19 +345,22 @@ and expression i ppf x =
   | Pexp_extension (s, arg) ->
     line i ppf "Pexp_extension \"%s\"\n" s.txt;
     payload i ppf arg
-  | Pexp_jsx_fragment (_, children, _) ->
+  | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
     line i ppf "Pexp_jsx_fragment";
     jsx_children i ppf children
-  | Pexp_jsx_unary_element
-      {jsx_unary_element_tag_name = name; jsx_unary_element_props = props} ->
+  | Pexp_jsx_element
+      (Jsx_unary_element
+         {jsx_unary_element_tag_name = name; jsx_unary_element_props = props})
+    ->
     line i ppf "Pexp_jsx_unary_element %a\n" fmt_longident_loc name;
     jsx_props i ppf props
-  | Pexp_jsx_container_element
-      {
-        jsx_container_element_tag_name_start = name;
-        jsx_container_element_props = props;
-        jsx_container_element_children = children;
-      } ->
+  | Pexp_jsx_element
+      (Jsx_container_element
+         {
+           jsx_container_element_tag_name_start = name;
+           jsx_container_element_props = props;
+           jsx_container_element_children = children;
+         }) ->
     line i ppf "Pexp_jsx_container_element %a\n" fmt_longident_loc name;
     jsx_props i ppf props;
     jsx_children i ppf children
diff --git a/compiler/ml/typecore.ml b/compiler/ml/typecore.ml
index f47922a774..aca722d1af 100644
--- a/compiler/ml/typecore.ml
+++ b/compiler/ml/typecore.ml
@@ -178,16 +178,16 @@ let iter_expression f e =
       expr e;
       module_expr me
     | Pexp_pack me -> module_expr me
-    | Pexp_jsx_fragment (_, children, _) -> iter_jsx_children children
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = _; jsx_unary_element_props = props} ->
+    | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
+      iter_jsx_children children
+    | Pexp_jsx_element (Jsx_unary_element {jsx_unary_element_props = props}) ->
       iter_jsx_props props
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = _;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+           }) ->
       iter_jsx_props props;
       iter_jsx_children children
   and case {pc_lhs = _; pc_guard; pc_rhs} =
@@ -3213,14 +3213,8 @@ and type_expect_ ?type_clash_context ?in_function ?(recarg = Rejected) env sexp
     | _ -> raise (Error (loc, env, Invalid_extension_constructor_payload)))
   | Pexp_extension ext ->
     raise (Error_forward (Builtin_attributes.error_of_extension ext))
-  | Pexp_jsx_fragment _ ->
-    failwith "Pexp_jsx_fragment is expected to be transformed at this point"
-  | Pexp_jsx_unary_element _ ->
-    failwith
-      "Pexp_jsx_unary_element is expected to be transformed at this point"
-  | Pexp_jsx_container_element _ ->
-    failwith
-      "Pexp_jsx_container_element is expected to be transformed at this point"
+  | Pexp_jsx_element _ ->
+    failwith "Pexp_jsx_element is expected to be transformed at this point"
 
 and type_function ?in_function ~arity ~async loc attrs env ty_expected_ l
     caselist =
diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index eb46a24d2e..b69427ec99 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1282,73 +1282,65 @@ let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
 let expr ~(config : Jsx_common.jsx_config) mapper expression =
   match expression with
   | {
-   pexp_desc = Pexp_jsx_fragment (_, children, _);
+   pexp_desc = Pexp_jsx_element jsx_element;
    pexp_loc = loc;
    pexp_attributes = attrs;
-  } ->
-    let loc = {loc with loc_ghost = true} in
-    let fragment =
-      Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
-    in
-    mk_react_jsx config mapper loc attrs FragmentComponent fragment [] children
-  | {
-   pexp_desc =
-     Pexp_jsx_unary_element
-       {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props};
-   pexp_loc = loc;
-   pexp_attributes = attrs;
-  } ->
+  } -> (
     let loc = {loc with loc_ghost = true} in
-    let name = Longident.flatten tag_name.txt |> String.concat "." in
-    if starts_with_lowercase name then
-      (* For example 'input' *)
-      let component_name_expr = constant_string ~loc:tag_name.loc name in
-      mk_react_jsx config mapper loc attrs LowercasedComponent
-        component_name_expr props (JSXChildrenItems [])
-    else if starts_with_uppercase name then
-      (* MyModule.make *)
-      let make_id =
-        Exp.ident ~loc:tag_name.loc
-          {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
+    match jsx_element with
+    | Jsx_fragment {jsx_fragment_children = children} ->
+      let fragment =
+        Exp.ident ~loc {loc; txt = module_access_name config "jsxFragment"}
       in
-      mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
-        (JSXChildrenItems [])
-    else
-      Jsx_common.raise_error ~loc
-        "JSX: element name is neither upper- or lowercase, got \"%s\""
-        (Longident.flatten tag_name.txt |> String.concat ".")
-  | {
-   pexp_desc =
-     Pexp_jsx_container_element
-       {
-         jsx_container_element_tag_name_start = tag_name;
-         jsx_container_element_props = props;
-         jsx_container_element_children = children;
-       };
-   pexp_loc = loc;
-   pexp_attributes = attrs;
-  } ->
-    let loc = {loc with loc_ghost = true} in
-    let name = Longident.flatten tag_name.txt |> String.concat "." in
-    (* For example: <div> <h1></h1> <br /> </div>
+      mk_react_jsx config mapper loc attrs FragmentComponent fragment []
+        children
+    | Jsx_unary_element
+        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
+      ->
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      if starts_with_lowercase name then
+        (* For example 'input' *)
+        let component_name_expr = constant_string ~loc:tag_name.loc name in
+        mk_react_jsx config mapper loc attrs LowercasedComponent
+          component_name_expr props (JSXChildrenItems [])
+      else if starts_with_uppercase name then
+        (* MyModule.make *)
+        let make_id =
+          Exp.ident ~loc:tag_name.loc
+            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
+        in
+        mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
+          (JSXChildrenItems [])
+      else
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten tag_name.txt |> String.concat ".")
+    | Jsx_container_element
+        {
+          jsx_container_element_tag_name_start = tag_name;
+          jsx_container_element_props = props;
+          jsx_container_element_children = children;
+        } ->
+      let name = Longident.flatten tag_name.txt |> String.concat "." in
+      (* For example: <div> <h1></h1> <br /> </div>
          This has an impact if we want to use ReactDOM.jsx or ReactDOM.jsxs
            *)
-    if starts_with_lowercase name then
-      let component_name_expr = constant_string ~loc:tag_name.loc name in
-      mk_react_jsx config mapper loc attrs LowercasedComponent
-        component_name_expr props children
-    else if starts_with_uppercase name then
-      (* MyModule.make *)
-      let make_id =
-        Exp.ident ~loc:tag_name.loc
-          {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
-      in
-      mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
-        children
-    else
-      Jsx_common.raise_error ~loc
-        "JSX: element name is neither upper- or lowercase, got \"%s\""
-        (Longident.flatten tag_name.txt |> String.concat ".")
+      if starts_with_lowercase name then
+        let component_name_expr = constant_string ~loc:tag_name.loc name in
+        mk_react_jsx config mapper loc attrs LowercasedComponent
+          component_name_expr props children
+      else if starts_with_uppercase name then
+        (* MyModule.make *)
+        let make_id =
+          Exp.ident ~loc:tag_name.loc
+            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
+        in
+        mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
+          children
+      else
+        Jsx_common.raise_error ~loc
+          "JSX: element name is neither upper- or lowercase, got \"%s\""
+          (Longident.flatten tag_name.txt |> String.concat "."))
   | e -> default_mapper.expr mapper e
 
 let module_binding ~(config : Jsx_common.jsx_config) mapper module_binding =
diff --git a/compiler/syntax/src/res_ast_debugger.ml b/compiler/syntax/src/res_ast_debugger.ml
index 471edd30d2..237db778e3 100644
--- a/compiler/syntax/src/res_ast_debugger.ml
+++ b/compiler/syntax/src/res_ast_debugger.ml
@@ -707,7 +707,7 @@ module SexpAst = struct
           ]
       | Pexp_extension ext ->
         Sexp.list [Sexp.atom "Pexp_extension"; extension ext]
-      | Pexp_jsx_fragment (_, children, _) ->
+      | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
         let xs =
           match children with
           | JSXChildrenSpreading e -> [e]
@@ -717,17 +717,19 @@ module SexpAst = struct
           [
             Sexp.atom "Pexp_jsx_fragment"; Sexp.list (map_empty ~f:expression xs);
           ]
-      | Pexp_jsx_unary_element {jsx_unary_element_props = props} ->
+      | Pexp_jsx_element (Jsx_unary_element {jsx_unary_element_props = props})
+        ->
         Sexp.list
           [
             Sexp.atom "Pexp_jsx_unary_element";
             Sexp.list (map_empty ~f:jsx_prop props);
           ]
-      | Pexp_jsx_container_element
-          {
-            jsx_container_element_props = props;
-            jsx_container_element_children = children;
-          } ->
+      | Pexp_jsx_element
+          (Jsx_container_element
+             {
+               jsx_container_element_props = props;
+               jsx_container_element_children = children;
+             }) ->
         let xs =
           match children with
           | JSXChildrenSpreading e -> [e]
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 164b5acc50..e6fc6c6e7a 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1461,7 +1461,13 @@ and walk_expression expr t comments =
         attach t.leading return_expr.pexp_loc leading;
         walk_expression return_expr t inside;
         attach t.trailing return_expr.pexp_loc trailing)
-  | Pexp_jsx_fragment (opening_greater_than, children, _closing_lesser_than) ->
+  | Pexp_jsx_element
+      (Jsx_fragment
+         {
+           jsx_fragment_opening = opening_greater_than;
+           jsx_fragment_children = children;
+           jsx_fragment_closing = _closing_lesser_than;
+         }) ->
     let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
     let on_same_line, rest = partition_by_on_same_line opening_token comments in
     attach t.trailing opening_token on_same_line;
@@ -1472,13 +1478,15 @@ and walk_expression expr t comments =
     in
     let xs = exprs |> List.map (fun e -> Expression e) in
     walk_list xs t rest
-  | Pexp_jsx_unary_element
-      {jsx_unary_element_tag_name = tag; jsx_unary_element_props = []} ->
+  | Pexp_jsx_element
+      (Jsx_unary_element
+         {jsx_unary_element_tag_name = tag; jsx_unary_element_props = []}) ->
     let _, _, trailing = partition_by_loc comments tag.loc in
     let after_expr, _ = partition_adjacent_trailing tag.loc trailing in
     attach t.trailing tag.loc after_expr
-  | Pexp_jsx_unary_element
-      {jsx_unary_element_tag_name = tag; jsx_unary_element_props = props} ->
+  | Pexp_jsx_element
+      (Jsx_unary_element
+         {jsx_unary_element_tag_name = tag; jsx_unary_element_props = props}) ->
     let _leading, inside, trailing = partition_by_loc comments tag.loc in
     walk_list
       (props
@@ -1494,11 +1502,12 @@ and walk_expression expr t comments =
                Some (ExprArgument {expr; loc})))
       t trailing;
     walk_expression expr t inside
-  | Pexp_jsx_container_element
-      {
-        jsx_container_element_opening_tag_end = opening_greater_than;
-        jsx_container_element_children = children;
-      } ->
+  | Pexp_jsx_element
+      (Jsx_container_element
+         {
+           jsx_container_element_opening_tag_end = opening_greater_than;
+           jsx_container_element_children = children;
+         }) ->
     let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
     let on_same_line, rest = partition_by_on_same_line opening_token comments in
     attach t.trailing opening_token on_same_line;
diff --git a/compiler/syntax/src/res_parens.ml b/compiler/syntax/src/res_parens.ml
index fa10257a74..7ad3bd9ab4 100644
--- a/compiler/syntax/src/res_parens.ml
+++ b/compiler/syntax/src/res_parens.ml
@@ -66,12 +66,7 @@ let structure_expr expr =
   | Some ({Location.loc = braces_loc}, _) -> Braced braces_loc
   | None -> (
     match expr with
-    | {
-     pexp_desc =
-       ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
-       | Pexp_jsx_container_element _ );
-    } ->
-      Nothing
+    | {pexp_desc = Pexp_jsx_element _} -> Nothing
     | _ when ParsetreeViewer.has_attributes expr.pexp_attributes ->
       Parenthesized
     | {
@@ -389,7 +384,7 @@ let jsx_child_expr expr =
          ( Pexp_ident _ | Pexp_constant _ | Pexp_field _ | Pexp_construct _
          | Pexp_variant _ | Pexp_array _ | Pexp_pack _ | Pexp_record _
          | Pexp_extension _ | Pexp_letmodule _ | Pexp_letexception _
-         | Pexp_open _ | Pexp_sequence _ | Pexp_let _ | Pexp_jsx_fragment _ );
+         | Pexp_open _ | Pexp_sequence _ | Pexp_let _ | Pexp_jsx_element _ );
        pexp_attributes = [];
       } ->
         Nothing
@@ -400,12 +395,7 @@ let jsx_child_expr expr =
        pexp_attributes = [];
       } ->
         Nothing
-      | {
-       pexp_desc =
-         ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
-         | Pexp_jsx_container_element _ );
-      } ->
-        Nothing
+      | {pexp_desc = Pexp_jsx_element _} -> Nothing
       | _ -> Parenthesized))
 
 let binary_expr expr =
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 7685da46de..b3c21942fd 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2086,12 +2086,7 @@ and print_value_binding ~state ~rec_flag (vb : Parsetree.value_binding) cmt_tbl
           | {pexp_desc = Pexp_newtype _} -> false
           | {pexp_attributes = [({Location.txt = "res.taggedTemplate"}, _)]} ->
             false
-          | {
-           pexp_desc =
-             ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
-             | Pexp_jsx_container_element _ );
-          } ->
-            true
+          | {pexp_desc = Pexp_jsx_element _} -> true
           | e ->
             ParsetreeViewer.has_attributes e.pexp_attributes
             || ParsetreeViewer.is_array_access e)
@@ -2776,23 +2771,33 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
     | Pexp_fun _ | Pexp_newtype _ -> print_arrow e
     | Parsetree.Pexp_constant c ->
       print_constant ~template_literal:(ParsetreeViewer.is_template_literal e) c
-    | Pexp_jsx_fragment (o, children, c) ->
+    | Pexp_jsx_element
+        (Jsx_fragment
+           {
+             jsx_fragment_opening = o;
+             jsx_fragment_children = children;
+             jsx_fragment_closing = c;
+           }) ->
       let xs =
         match children with
         | JSXChildrenSpreading e -> [e]
         | JSXChildrenItems xs -> xs
       in
       print_jsx_fragment ~state o xs c e.pexp_loc cmt_tbl
-    | Pexp_jsx_unary_element
-        {jsx_unary_element_tag_name = tag_name; jsx_unary_element_props = props}
-      ->
+    | Pexp_jsx_element
+        (Jsx_unary_element
+           {
+             jsx_unary_element_tag_name = tag_name;
+             jsx_unary_element_props = props;
+           }) ->
       print_jsx_unary_tag ~state tag_name props cmt_tbl
-    | Pexp_jsx_container_element
-        {
-          jsx_container_element_tag_name_start = tag_name;
-          jsx_container_element_props = props;
-          jsx_container_element_children = children;
-        } ->
+    | Pexp_jsx_element
+        (Jsx_container_element
+           {
+             jsx_container_element_tag_name_start = tag_name;
+             jsx_container_element_props = props;
+             jsx_container_element_children = children;
+           }) ->
       print_jsx_container_tag ~state tag_name props children cmt_tbl
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
@@ -3422,9 +3427,7 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
     | Pexp_ifthenelse _ ->
       true
     | Pexp_match _ when ParsetreeViewer.is_if_let_expr e -> true
-    | Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
-    | Pexp_jsx_container_element _ ->
-      true
+    | Pexp_jsx_element _ -> true
     | _ -> false
   in
   match e.pexp_attributes with
@@ -4372,12 +4375,7 @@ and print_jsx_container_tag ~state tag_name props
       List.length children > 1
       || List.exists
            (function
-             | {
-                 Parsetree.pexp_desc =
-                   ( Pexp_jsx_container_element _ | Pexp_jsx_fragment _
-                   | Pexp_jsx_unary_element _ );
-               } ->
-               true
+             | {Parsetree.pexp_desc = Pexp_jsx_element _} -> true
              | _ -> false)
            children
     then Doc.hard_line
@@ -4450,12 +4448,7 @@ and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
       List.length children > 1
       || List.exists
            (function
-             | {
-                 Parsetree.pexp_desc =
-                   ( Pexp_jsx_fragment _ | Pexp_jsx_unary_element _
-                   | Pexp_jsx_container_element _ );
-               } ->
-               true
+             | {Parsetree.pexp_desc = Pexp_jsx_element _} -> true
              | _ -> false)
            children
     then Doc.hard_line

From ddcdaa2e7761bd11c010c50c79e12b4db83da392 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 26 Mar 2025 15:35:33 +0100
Subject: [PATCH 57/99] Don't always append make when uppercase component

---
 compiler/syntax/src/jsx_v4.ml | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index b69427ec99..e07eb90ec8 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1279,6 +1279,20 @@ let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
   let args = [(nolabel, elementTag); (nolabel, props_record)] @ key_and_unit in
   Exp.apply ~loc ~attrs jsx_expr args
 
+(* In most situations, the component name is the make function from a module. 
+    However, if the name contains a lowercase letter, it means it probably an external component.
+    In this case, we use the name as is.
+    See tests/syntax_tests/data/ppx/react/externalWithCustomName.res
+*)
+let mk_uppercase_tag_name_expr tag_name =
+  let tag_identifier : Longident.t =
+    if Longident.flatten tag_name.txt |> List.for_all starts_with_uppercase then
+      (* All parts are uppercase, so we append .make *)
+      Ldot (tag_name.txt, "make")
+    else tag_name.txt
+  in
+  Exp.ident ~loc:tag_name.loc {txt = tag_identifier; loc = tag_name.loc}
+
 let expr ~(config : Jsx_common.jsx_config) mapper expression =
   match expression with
   | {
@@ -1305,10 +1319,7 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
           component_name_expr props (JSXChildrenItems [])
       else if starts_with_uppercase name then
         (* MyModule.make *)
-        let make_id =
-          Exp.ident ~loc:tag_name.loc
-            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
-        in
+        let make_id = mk_uppercase_tag_name_expr tag_name in
         mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
           (JSXChildrenItems [])
       else
@@ -1331,10 +1342,7 @@ let expr ~(config : Jsx_common.jsx_config) mapper expression =
           component_name_expr props children
       else if starts_with_uppercase name then
         (* MyModule.make *)
-        let make_id =
-          Exp.ident ~loc:tag_name.loc
-            {txt = Ldot (tag_name.txt, "make"); loc = tag_name.loc}
-        in
+        let make_id = mk_uppercase_tag_name_expr tag_name in
         mk_react_jsx config mapper loc attrs UppercasedComponent make_id props
           children
       else

From 52ecf03facf607cd8adfd067541c0e4e8b6f2660 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 26 Mar 2025 16:58:37 +0100
Subject: [PATCH 58/99] Use Doc.line for child spreading

---
 compiler/syntax/src/res_printer.ml | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index fc6695b03d..33e2da6059 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4414,20 +4414,18 @@ and print_jsx_container_tag ~state tag_name props
     | JSXChildrenItems [] -> false
   in
   let line_sep =
-    let children =
-      match children with
-      | JSXChildrenItems children -> children
-      | JSXChildrenSpreading child -> [child]
-    in
-    if
-      List.length children > 1
-      || List.exists
-           (function
-             | {Parsetree.pexp_desc = Pexp_jsx_element _} -> true
-             | _ -> false)
-           children
-    then Doc.hard_line
-    else Doc.line
+    match children with
+    | JSXChildrenSpreading _ -> Doc.line
+    | JSXChildrenItems children ->
+      if
+        List.length children > 1
+        || List.exists
+             (function
+               | {Parsetree.pexp_desc = Pexp_jsx_element _} -> true
+               | _ -> false)
+             children
+      then Doc.hard_line
+      else Doc.line
   in
   let print_children children =
     Doc.concat

From cd9059f15e95adce949cbe229c75d2d5b697880b Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 26 Mar 2025 17:04:51 +0100
Subject: [PATCH 59/99] Exotic prop name

---
 compiler/syntax/src/res_printer.ml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 33e2da6059..02f535fcf7 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4573,8 +4573,8 @@ and print_jsx_prop ~state prop cmt_tbl =
   | JSXPropPunning (is_optional, name) ->
     let prop_has_trailing_comment = has_trailing_comments cmt_tbl name.loc in
     let doc =
-      if is_optional then Doc.concat [Doc.question; Doc.text name.txt]
-      else Doc.text name.txt
+      if is_optional then Doc.concat [Doc.question; print_ident_like name.txt]
+      else print_ident_like name.txt
     in
     let doc = print_comments doc cmt_tbl name.loc in
     if prop_has_trailing_comment then
@@ -4598,7 +4598,7 @@ and print_jsx_prop ~state prop cmt_tbl =
     let doc =
       Doc.concat
         [
-          Doc.text name.txt;
+          print_ident_like name.txt;
           Doc.equal;
           (if is_optional then Doc.question else Doc.nil);
           Doc.group value_doc;

From 2e9fb66150baedad7cf9dd7f9b989aaf7961d9ea Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 26 Mar 2025 17:22:53 +0100
Subject: [PATCH 60/99] Don't create record if only spreading prop, use that
 expression instead.

---
 compiler/syntax/src/jsx_v4.ml | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index e07eb90ec8..96ec2369b8 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1173,11 +1173,15 @@ let mk_record_from_props mapper
              "JSX: use {...p} {x: v} not {x: v} {...p} \n\
              \     multiple spreads {...p} {...p} not allowed.")
   in
-  {
-    pexp_desc = Pexp_record (record_fields, spread_props);
-    pexp_loc = loc;
-    pexp_attributes = [];
-  }
+  match (record_fields, spread_props) with
+  | [], Some spread_props ->
+    {pexp_desc = spread_props.pexp_desc; pexp_loc = loc; pexp_attributes = []}
+  | record_fields, spread_props ->
+    {
+      pexp_desc = Pexp_record (record_fields, spread_props);
+      pexp_loc = loc;
+      pexp_attributes = [];
+    }
 
 let try_find_key_prop (props : jsx_props) : (arg_label * expression) option =
   props

From 37755ae8fc98209892d2affa977047e14a71b603 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 27 Mar 2025 08:41:44 +0100
Subject: [PATCH 61/99] Key prop can be optional

---
 compiler/syntax/src/jsx_v4.ml | 29 ++++++++++++-----------------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 96ec2369b8..cfae48fe18 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1113,12 +1113,8 @@ let loc_from_prop = function
   | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
   | JSXPropSpreading (loc, _) -> loc
 
-let mk_record_from_props mapper
-    (* automatic mode always will filter this out. 
-      Upper case components for classic mode as well.
-    *)
-      (filter_key : bool) (jsx_expr_loc : Location.t) (props : jsx_props) :
-    expression =
+let mk_record_from_props mapper (jsx_expr_loc : Location.t) (props : jsx_props)
+    : expression =
   (* Create an artificial range from the first till the last prop *)
   let loc =
     match props with
@@ -1140,14 +1136,12 @@ let mk_record_from_props mapper
   in
   (* key should be filtered out *)
   let props =
-    if not filter_key then props
-    else
-      props
-      |> List.filter (function
-           | JSXPropPunning (_, {txt = "key"})
-           | JSXPropValue ({txt = "key"}, _, _) ->
-             false
-           | _ -> true)
+    props
+    |> List.filter (function
+         | JSXPropPunning (_, {txt = "key"}) | JSXPropValue ({txt = "key"}, _, _)
+           ->
+           false
+         | _ -> true)
   in
   let props, spread_props =
     match props with
@@ -1186,8 +1180,9 @@ let mk_record_from_props mapper
 let try_find_key_prop (props : jsx_props) : (arg_label * expression) option =
   props
   |> List.find_map (function
-       | JSXPropPunning (_, ({txt = "key"} as name)) ->
-         Some (Labelled name, Exp.ident {txt = Lident "key"; loc = name.loc})
+       | JSXPropPunning (is_optional, ({txt = "key"} as name)) ->
+         let arg_label = if is_optional then Optional name else Labelled name in
+         Some (arg_label, Exp.ident {txt = Lident "key"; loc = name.loc})
        | JSXPropValue (({txt = "key"} as name), is_optional, expr) ->
          let arg_label = if is_optional then Optional name else Labelled name in
          Some (arg_label, expr)
@@ -1247,7 +1242,7 @@ let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
   let props_with_children =
     append_children_prop config mapper component_description props children
   in
-  let props_record = mk_record_from_props mapper true loc props_with_children in
+  let props_record = mk_record_from_props mapper loc props_with_children in
   let jsx_expr, key_and_unit =
     let mk_element_bind (jsx_part : string) : Longident.t =
       match component_description with

From 3a434c92feda18c4e824ea18785a48d2fc276b69 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 27 Mar 2025 08:58:40 +0100
Subject: [PATCH 62/99] Keep comment after opening greater than

---
 compiler/syntax/src/res_printer.ml            | 21 +++++++++++--------
 .../data/printer/expr/expected/switch.res.txt |  3 +--
 .../syntax_tests/data/printer/expr/switch.res |  2 +-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 02f535fcf7..dc147c8751 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2843,10 +2843,12 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
         (Jsx_container_element
            {
              jsx_container_element_tag_name_start = tag_name;
+             jsx_container_element_opening_tag_end = opening_greater_than;
              jsx_container_element_props = props;
              jsx_container_element_children = children;
            }) ->
-      print_jsx_container_tag ~state tag_name props children cmt_tbl
+      print_jsx_container_tag ~state tag_name opening_greater_than props
+        children e.pexp_loc cmt_tbl
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
       Doc.concat
@@ -4403,9 +4405,14 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
          closing_tag_doc;
        ])
 
-and print_jsx_container_tag ~state tag_name props
-    (children : Parsetree.jsx_children) cmt_tbl =
+and print_jsx_container_tag ~state tag_name
+    (opening_greater_than : Lexing.position) props
+    (children : Parsetree.jsx_children) (pexp_loc : Location.t) cmt_tbl =
   let name = print_jsx_name tag_name in
+  let opening_greater_than_doc =
+    let loc = {pexp_loc with loc_end = opening_greater_than} in
+    print_comments Doc.greater_than cmt_tbl loc
+  in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
   (* <div className="test" /> *)
   let has_children =
@@ -4463,8 +4470,8 @@ and print_jsx_container_tag ~state tag_name props
                 </A>
              *)
                 (if has_trailing_comments cmt_tbl tag_name.Asttypes.loc then
-                   Doc.concat [Doc.soft_line; Doc.greater_than]
-                 else Doc.greater_than);
+                   Doc.concat [Doc.soft_line; opening_greater_than_doc]
+                 else opening_greater_than_doc);
               ]);
          Doc.concat
            [
@@ -4621,15 +4628,11 @@ and print_jsx_prop ~state prop cmt_tbl =
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)
 
-(* div -> div.
- * Navabar.createElement -> Navbar
- * Staff.Users.createElement -> Staff.Users *)
 and print_jsx_name {txt = lident} =
   let print_ident = print_ident_like ~allow_uident:true ~allow_hyphen:true in
   let rec flatten acc lident =
     match lident with
     | Longident.Lident txt -> print_ident txt :: acc
-    | Ldot (lident, "createElement") -> flatten acc lident
     | Ldot (lident, txt) -> flatten (print_ident txt :: acc) lident
     | _ -> acc
   in
diff --git a/tests/syntax_tests/data/printer/expr/expected/switch.res.txt b/tests/syntax_tests/data/printer/expr/expected/switch.res.txt
index 80b1a07044..acfb416794 100644
--- a/tests/syntax_tests/data/printer/expr/expected/switch.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/switch.res.txt
@@ -43,8 +43,7 @@ switch count {
 
 switch route {
 | A =>
-  <div>
-    // div tag moves to the next line
+  <div> // div tag stays after >
     <div> {React.string("First A div")} </div>
     <div> {React.string("Second A div")} </div>
   </div>
diff --git a/tests/syntax_tests/data/printer/expr/switch.res b/tests/syntax_tests/data/printer/expr/switch.res
index 6887e3adb5..107a9e6d4c 100644
--- a/tests/syntax_tests/data/printer/expr/switch.res
+++ b/tests/syntax_tests/data/printer/expr/switch.res
@@ -40,7 +40,7 @@ switch count {
 }
 
 switch route {
-| A => <div> // div tag moves to the next line
+| A => <div> // div tag stays after >
     <div> {React.string("First A div")} </div>
     <div> {React.string("Second A div")} </div>
   </div>

From 6cf1e71d275e35dfa86f7b3950305926af63977f Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 27 Mar 2025 09:12:04 +0100
Subject: [PATCH 63/99] Print prop value with comments

---
 compiler/syntax/src/res_printer.ml | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index dc147c8751..dbb28c8174 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4588,19 +4588,20 @@ and print_jsx_prop ~state prop cmt_tbl =
       Doc.group (Doc.concat [Doc.break_parent; doc])
     else doc
   | JSXPropValue (name, is_optional, value) ->
-    let value =
-      {
-        value with
-        pexp_loc = {value.pexp_loc with loc_start = name.loc.loc_start};
-      }
-    in
     let value_doc =
-      let v = print_expression ~state value cmt_tbl in
+      let leading_line_comment_present =
+        has_leading_line_comment cmt_tbl value.pexp_loc
+      in
+      let doc = print_expression_with_comments ~state value cmt_tbl in
       match Parens.jsx_prop_expr value with
       | Parenthesized | Braced _ ->
-        let inner_doc = if Parens.braced_expr value then add_parens v else v in
-        Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
-      | _ -> v
+        (* {(20: int)} make sure that we also protect the expression inside *)
+        let inner_doc =
+          if Parens.braced_expr value then add_parens doc else doc
+        in
+        if leading_line_comment_present then add_braces inner_doc
+        else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
+      | _ -> doc
     in
     let doc =
       Doc.concat

From ae9b4289b4049ede6d502b624e9a1b226f9fa214 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 27 Mar 2025 16:18:17 +0100
Subject: [PATCH 64/99] Update generic jsx completion tests

---
 .../src/expected/GenericJsxCompletion.res.txt      | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt b/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt
index 05f269144a..99b4c66a47 100644
--- a/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt
+++ b/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt
@@ -1,5 +1,5 @@
 Complete src/GenericJsxCompletion.res 0:8
-posCursor:[0:8] posNoWhite:[0:6] Found expr:[0:4->0:7]
+posCursor:[0:8] posNoWhite:[0:6] Found expr:[0:3->0:7]
 JSX <div:[0:4->0:7] > _children:None
 Completable: Cjsx([div], "", [])
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -26,7 +26,7 @@ Path GenericJsx.Elements.props
   }]
 
 Complete src/GenericJsxCompletion.res 3:17
-posCursor:[3:17] posNoWhite:[3:16] Found expr:[3:4->3:18]
+posCursor:[3:17] posNoWhite:[3:16] Found expr:[3:3->3:18]
 JSX <div:[3:4->3:7] testing[3:8->3:15]=...[3:16->3:18]> _children:None
 Completable: Cexpression CJsxPropValue [div] testing->recordBody
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -93,14 +93,8 @@ posCursor:[20:24] posNoWhite:[20:23] Found expr:[11:4->22:10]
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[12:4->22:10]
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[13:4->22:10]
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[16:4->22:10]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[17:5->22:10]
-JSX <div:[17:5->17:8] > _children:17:8
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[17:8->22:4]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[18:7->22:4]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[19:7->22:4]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[19:7->22:4]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[20:10->22:4]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[20:10->22:4]
+posCursor:[20:24] posNoWhite:[20:23] Found expr:[17:4->23:2]
+JSX <div:[17:5->17:8] > _children:18:7
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[20:10->20:24]
 Completable: Cpath Value[someString]->st <<jsx>>
 Raw opens: 1 GenericJsx.place holder

From f3b96df3c4d083aa13f04c1de8569c6c371949a0 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 27 Mar 2025 16:18:42 +0100
Subject: [PATCH 65/99] Revert isJsxComponent

---
 analysis/src/Utils.ml | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/analysis/src/Utils.ml b/analysis/src/Utils.ml
index a2d1252ba6..8418834abf 100644
--- a/analysis/src/Utils.ml
+++ b/analysis/src/Utils.ml
@@ -151,9 +151,10 @@ let rec unwrapIfOption (t : Types.type_expr) =
   | _ -> t
 
 let isJsxComponent (vb : Parsetree.value_binding) =
-  match vb.pvb_expr.pexp_desc with
-  | Parsetree.Pexp_jsx_element _ -> true
-  | _ -> false
+  vb.pvb_attributes
+  |> List.exists (function
+       | {Location.txt = "react.component" | "jsx.component"}, _payload -> true
+       | _ -> false)
 
 let checkName name ~prefix ~exact =
   if exact then name = prefix else startsWith name prefix

From b1f8dfe18e369f59b4df2675ac6db2da5dab39c9 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sat, 29 Mar 2025 18:26:49 +0100
Subject: [PATCH 66/99] Assign comment to the opening element tag name.

---
 compiler/ml/printast.ml                   |   2 +
 compiler/syntax/src/res_comments_table.ml | 120 +++++++++++++++++++++-
 compiler/syntax/src/res_core.ml           |   3 +
 3 files changed, 122 insertions(+), 3 deletions(-)

diff --git a/compiler/ml/printast.ml b/compiler/ml/printast.ml
index a61141b5cf..6b5cc56539 100644
--- a/compiler/ml/printast.ml
+++ b/compiler/ml/printast.ml
@@ -359,10 +359,12 @@ and expression i ppf x =
          {
            jsx_container_element_tag_name_start = name;
            jsx_container_element_props = props;
+           jsx_container_element_opening_tag_end = gt;
            jsx_container_element_children = children;
          }) ->
     line i ppf "Pexp_jsx_container_element %a\n" fmt_longident_loc name;
     jsx_props i ppf props;
+    if !Clflags.dump_location then line i ppf "> %a\n" (fmt_position false) gt;
     jsx_children i ppf children
 
 and jsx_children i ppf children =
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index e6fc6c6e7a..6792369020 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -85,6 +85,28 @@ let attach tbl loc comments =
   | [] -> ()
   | comments -> Hashtbl.replace tbl loc comments
 
+(* Partitions a list of comments into three groups based on their position relative to a location:
+ * - leading: comments that end before the location's start position
+ * - inside: comments that overlap with the location
+ * - trailing: comments that start after the location's end position
+ *
+ * For example, given code:
+ *   /* comment1 */ let x = /* comment2 */ 5 /* comment3 */
+ *
+ * When splitting around the location of `x = 5`:
+ * - leading: [comment1]
+ * - inside: [comment2]  
+ * - trailing: [comment3]
+ * 
+ * This is the primary comment partitioning function used for associating comments
+ * with AST nodes during the tree traversal.
+ *
+ * Parameters:
+ * - comments: list of comments to partition
+ * - loc: location to split around
+ *
+ * Returns: (leading_comments, inside_comments, trailing_comments)
+ *)
 let partition_by_loc comments loc =
   let rec loop (leading, inside, trailing) comments =
     let open Location in
@@ -100,6 +122,23 @@ let partition_by_loc comments loc =
   in
   loop ([], [], []) comments
 
+(* Splits a list of comments into two groups based on their position relative to a location:
+ * - leading: comments that end before the location's start
+ * - trailing: comments that start at or after the location's start
+ *
+ * For example, given the code:
+ *   /* comment1 */ let /* comment2 */ x = 1 /* comment3 */
+ *
+ * When splitting around `x`'s location:
+ * - leading: [comment1, comment2]
+ * - trailing: [comment3]
+ *
+ * Parameters:
+ * - comments: list of comments to partition
+ * - loc: location to split around
+ *
+ * Returns: (leading_comments, trailing_comments)
+ *)
 let partition_leading_trailing comments loc =
   let rec loop (leading, trailing) comments =
     let open Location in
@@ -141,6 +180,51 @@ let partition_adjacent_trailing loc1 comments =
   in
   loop ~prev_end_pos:loc1.loc_end [] comments
 
+(* Splits comments that follow a location but come before another token.
+ * This is particularly useful for handling comments between two tokens
+ * where traditional leading/trailing partitioning isn't precise enough.
+ *
+ * For example, given code:
+ *   let x = 1 /* comment */ + 2
+ *
+ * When splitting comments between `1` and `+`:
+ * - first_part: [/* comment */]  (comments on same line as loc and before next_token)
+ * - rest: []                     (remaining comments)
+ *
+ * Parameters:
+ * - loc: location of the reference token
+ * - next_token: location of the next token
+ * - comments: list of comments to partition
+ *
+ * Returns: (first_part, rest) where first_part contains comments on the same line as loc
+ * that appear entirely before next_token, and rest contains all other comments.
+ *
+ * This function is useful for precisely attaching comments between specific tokens
+ * in constructs like JSX props, function arguments, and other multi-token expressions.
+ *)
+let partition_adjacent_trailing_before_next_token (loc : Warnings.loc)
+    (next_token : Warnings.loc) (comments : Comment.t list) :
+    Comment.t list * Comment.t list =
+  let open Location in
+  let open Lexing in
+  let rec loop after_loc comments =
+    match comments with
+    | [] -> (List.rev after_loc, [])
+    | comment :: rest ->
+      (* Check if the comment is on the same line as the loc, and is entirely before the next_token *)
+      let cmt_loc = Comment.loc comment in
+      if
+        (* Same line *)
+        cmt_loc.loc_start.pos_lnum == loc.loc_end.pos_lnum
+        (* comment after loc *)
+        && cmt_loc.loc_start.pos_cnum > loc.loc_end.pos_cnum
+        (* comment before next_token *)
+        && cmt_loc.loc_end.pos_cnum < next_token.loc_start.pos_cnum
+      then loop (comment :: after_loc) rest
+      else (List.rev after_loc, comments)
+  in
+  loop [] comments
+
 let rec collect_list_patterns acc pattern =
   let open Parsetree in
   match pattern.ppat_desc with
@@ -392,6 +476,13 @@ let get_loc node =
   | TypeDeclaration td -> td.ptype_loc
   | ValueBinding vb -> vb.pvb_loc
 
+let get_jsx_prop_loc = function
+  | Parsetree.JSXPropPunning (_, name) -> name.loc
+  | Parsetree.JSXPropValue (name, _, value) ->
+    {name.loc with loc_end = value.pexp_loc.loc_end}
+  | Parsetree.JSXPropSpreading (dots, expr) ->
+    {dots with loc_end = expr.pexp_loc.loc_end}
+
 let rec walk_structure s t comments =
   match s with
   | _ when comments = [] -> ()
@@ -1505,10 +1596,33 @@ and walk_expression expr t comments =
   | Pexp_jsx_element
       (Jsx_container_element
          {
+           jsx_container_element_tag_name_start = tag_name_start;
+           jsx_container_element_props = props;
            jsx_container_element_opening_tag_end = opening_greater_than;
-           jsx_container_element_children = children;
+           jsx_container_element_children = _children;
          }) ->
-    let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
+    let opening_greater_than_loc =
+      {
+        loc_start = opening_greater_than;
+        loc_end = opening_greater_than;
+        loc_ghost = false;
+      }
+    in
+    let after_opening_tag_name, _rest =
+      (* Either the first prop or the closing > token *)
+      let next_token =
+        match props with
+        | [] -> opening_greater_than_loc
+        | head :: _ -> get_jsx_prop_loc head
+      in
+      partition_adjacent_trailing_before_next_token tag_name_start.loc
+        next_token comments
+    in
+    (* Only attach comments to the element name if they are on the same line *)
+    attach t.trailing tag_name_start.loc after_opening_tag_name;
+    ()
+    (* attach t.leading expr.pexp_loc leading; *)
+    (* let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
     let on_same_line, rest = partition_by_on_same_line opening_token comments in
     attach t.trailing opening_token on_same_line;
     let exprs =
@@ -1517,7 +1631,7 @@ and walk_expression expr t comments =
       | Parsetree.JSXChildrenItems xs -> xs
     in
     let xs = exprs |> List.map (fun e -> Expression e) in
-    walk_list xs t rest
+    walk_list xs t rest *)
   | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 303a53b03a..5f53f342ab 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2863,6 +2863,9 @@ and parse_jsx_prop p : Parsetree.jsx_prop option =
     | DotDotDot -> (
       Scanner.pop_mode p.scanner Jsx;
       Parser.next p;
+      (* TODO: is this loc even correct? 
+        Should this be the dots or the entire thing?
+      *)
       let loc = mk_loc p.Parser.start_pos p.prev_end_pos in
       let attr_expr = parse_primary_expr ~operand:(parse_expr p) p in
       (* using label "spreadProps" to distinguish from others *)

From 64001e2659690a83716439f194502e8bdf932acb Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 14:41:40 +0200
Subject: [PATCH 67/99] Attach comments to closing > and closing tag

---
 compiler/ml/parsetree.ml                  |  3 +-
 compiler/syntax/src/res_comments_table.ml | 60 ++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index e92afee400..e2d64bc04d 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -372,7 +372,8 @@ and jsx_closing_container_tag = {
   (* </ *)
   jsx_closing_container_tag_start: Lexing.position;
   (* name *)
-  jsx_closing_container_tag_name: Longident.t loc; (* > *)
+  jsx_closing_container_tag_name: Longident.t loc;
+  (* > *)
   jsx_closing_container_tag_end: Lexing.position;
 }
 
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 6792369020..c4c92c1c2e 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -152,6 +152,28 @@ let partition_leading_trailing comments loc =
   in
   loop ([], []) comments
 
+(* Splits comments into two groups based on whether they start on the same line as a location's end position.
+ *
+ * This is particularly useful for handling comments that appear on the same line as a syntax element
+ * versus comments that appear on subsequent lines.
+ *
+ * For example, given code:
+ *   let x = 1 /* same line comment */
+ *   /* different line comment */
+ *
+ * When splitting around `x = 1`'s location:
+ * - on_same_line: [/* same line comment */]
+ * - on_other_line: [/* different line comment */]
+ *
+ * This function is often used for formatting decisions where comments on the same line
+ * should be treated differently than comments on different lines (like in JSX elements).
+ *
+ * Parameters:
+ * - loc: location to compare line numbers against
+ * - comments: list of comments to partition
+ *
+ * Returns: (on_same_line_comments, on_other_line_comments)
+ *)
 let partition_by_on_same_line loc comments =
   let rec loop (on_same_line, on_other_line) comments =
     let open Location in
@@ -483,6 +505,13 @@ let get_jsx_prop_loc = function
   | Parsetree.JSXPropSpreading (dots, expr) ->
     {dots with loc_end = expr.pexp_loc.loc_end}
 
+let closing_tag_loc (tag : Parsetree.jsx_closing_container_tag) =
+  {
+    tag.jsx_closing_container_tag_name.loc with
+    loc_start = tag.jsx_closing_container_tag_start;
+    loc_end = tag.jsx_closing_container_tag_end;
+  }
+
 let rec walk_structure s t comments =
   match s with
   | _ when comments = [] -> ()
@@ -1599,7 +1628,8 @@ and walk_expression expr t comments =
            jsx_container_element_tag_name_start = tag_name_start;
            jsx_container_element_props = props;
            jsx_container_element_opening_tag_end = opening_greater_than;
-           jsx_container_element_children = _children;
+           jsx_container_element_children = children;
+           jsx_container_element_closing_tag = closing_tag;
          }) ->
     let opening_greater_than_loc =
       {
@@ -1608,7 +1638,7 @@ and walk_expression expr t comments =
         loc_ghost = false;
       }
     in
-    let after_opening_tag_name, _rest =
+    let after_opening_tag_name, rest =
       (* Either the first prop or the closing > token *)
       let next_token =
         match props with
@@ -1620,6 +1650,32 @@ and walk_expression expr t comments =
     in
     (* Only attach comments to the element name if they are on the same line *)
     attach t.trailing tag_name_start.loc after_opening_tag_name;
+    let _rest =
+      match props with
+      | [] ->
+        let before_greater_than, rest =
+          partition_leading_trailing rest opening_greater_than_loc
+        in
+        (* attach comments to the closing > token *)
+        attach t.leading opening_greater_than_loc before_greater_than;
+        rest
+      | _ -> rest
+    in
+    let _rest =
+      match (children, closing_tag) with
+      | JSXChildrenItems [], Some closing_tag ->
+        (* There are no children, comments after '>' on the same line should be attached *)
+        let after_opening_greater_than, rest =
+          partition_by_on_same_line opening_greater_than_loc rest
+        in
+        attach t.trailing opening_greater_than_loc after_opening_greater_than;
+        let before_closing_tag, rest =
+          partition_leading_trailing rest (closing_tag_loc closing_tag)
+        in
+        attach t.leading (closing_tag_loc closing_tag) before_closing_tag;
+        rest
+      | _ -> rest
+    in
     ()
     (* attach t.leading expr.pexp_loc leading; *)
     (* let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in

From 8148cf58df2bd9d3b154a50a6ecfc22156fa467a Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 14:55:30 +0200
Subject: [PATCH 68/99] Extract helpers to parsetree_viewer

---
 compiler/syntax/src/res_comments_table.ml    | 22 +++++---------------
 compiler/syntax/src/res_parsetree_viewer.ml  | 14 +++++++++++++
 compiler/syntax/src/res_parsetree_viewer.mli |  4 ++++
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index c4c92c1c2e..e19dbb12f2 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -498,20 +498,6 @@ let get_loc node =
   | TypeDeclaration td -> td.ptype_loc
   | ValueBinding vb -> vb.pvb_loc
 
-let get_jsx_prop_loc = function
-  | Parsetree.JSXPropPunning (_, name) -> name.loc
-  | Parsetree.JSXPropValue (name, _, value) ->
-    {name.loc with loc_end = value.pexp_loc.loc_end}
-  | Parsetree.JSXPropSpreading (dots, expr) ->
-    {dots with loc_end = expr.pexp_loc.loc_end}
-
-let closing_tag_loc (tag : Parsetree.jsx_closing_container_tag) =
-  {
-    tag.jsx_closing_container_tag_name.loc with
-    loc_start = tag.jsx_closing_container_tag_start;
-    loc_end = tag.jsx_closing_container_tag_end;
-  }
-
 let rec walk_structure s t comments =
   match s with
   | _ when comments = [] -> ()
@@ -1643,7 +1629,7 @@ and walk_expression expr t comments =
       let next_token =
         match props with
         | [] -> opening_greater_than_loc
-        | head :: _ -> get_jsx_prop_loc head
+        | head :: _ -> ParsetreeViewer.get_jsx_prop_loc head
       in
       partition_adjacent_trailing_before_next_token tag_name_start.loc
         next_token comments
@@ -1669,10 +1655,12 @@ and walk_expression expr t comments =
           partition_by_on_same_line opening_greater_than_loc rest
         in
         attach t.trailing opening_greater_than_loc after_opening_greater_than;
+        (* attach everything else that came before the closing tag to the closing tag *)
+        let closing_tag_loc = ParsetreeViewer.closing_tag_loc closing_tag in
         let before_closing_tag, rest =
-          partition_leading_trailing rest (closing_tag_loc closing_tag)
+          partition_leading_trailing rest closing_tag_loc
         in
-        attach t.leading (closing_tag_loc closing_tag) before_closing_tag;
+        attach t.leading closing_tag_loc before_closing_tag;
         rest
       | _ -> rest
     in
diff --git a/compiler/syntax/src/res_parsetree_viewer.ml b/compiler/syntax/src/res_parsetree_viewer.ml
index 72b61e536b..a97942f81f 100644
--- a/compiler/syntax/src/res_parsetree_viewer.ml
+++ b/compiler/syntax/src/res_parsetree_viewer.ml
@@ -739,3 +739,17 @@ let is_tuple_array (expr : Parsetree.expression) =
   match expr with
   | {pexp_desc = Pexp_array items} -> List.for_all is_plain_tuple items
   | _ -> false
+
+let get_jsx_prop_loc = function
+  | Parsetree.JSXPropPunning (_, name) -> name.loc
+  | Parsetree.JSXPropValue (name, _, value) ->
+    {name.loc with loc_end = value.pexp_loc.loc_end}
+  | Parsetree.JSXPropSpreading (dots, expr) ->
+    {dots with loc_end = expr.pexp_loc.loc_end}
+
+let closing_tag_loc (tag : Parsetree.jsx_closing_container_tag) =
+  {
+    tag.jsx_closing_container_tag_name.loc with
+    loc_start = tag.jsx_closing_container_tag_start;
+    loc_end = tag.jsx_closing_container_tag_end;
+  }
diff --git a/compiler/syntax/src/res_parsetree_viewer.mli b/compiler/syntax/src/res_parsetree_viewer.mli
index 263c0cbbeb..32aaa006e9 100644
--- a/compiler/syntax/src/res_parsetree_viewer.mli
+++ b/compiler/syntax/src/res_parsetree_viewer.mli
@@ -155,3 +155,7 @@ val is_rewritten_underscore_apply_sugar : Parsetree.expression -> bool
 val is_fun_newtype : Parsetree.expression -> bool
 
 val is_tuple_array : Parsetree.expression -> bool
+
+val get_jsx_prop_loc : Parsetree.jsx_prop -> Warnings.loc
+
+val closing_tag_loc : Parsetree.jsx_closing_container_tag -> Warnings.loc

From cfc4669b8fd671b093146887c3d171fca1c020a5 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 15:13:33 +0200
Subject: [PATCH 69/99] setup to walk jsx props

---
 compiler/syntax/src/res_comments_table.ml | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index e19dbb12f2..adf9cf1662 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -24,6 +24,11 @@ let copy tbl =
 
 let empty = make ()
 
+let rec list_last = function
+  | [] -> failwith "list_last: empty list"
+  | [x] -> x
+  | _ :: rest -> list_last rest
+
 let print_location (k : Warnings.loc) =
   Doc.concat
     [
@@ -457,6 +462,7 @@ type node =
   | StructureItem of Parsetree.structure_item
   | TypeDeclaration of Parsetree.type_declaration
   | ValueBinding of Parsetree.value_binding
+  | JsxProp of Parsetree.jsx_prop
 
 let get_loc node =
   let open Parsetree in
@@ -497,6 +503,7 @@ let get_loc node =
   | StructureItem si -> si.pstr_loc
   | TypeDeclaration td -> td.ptype_loc
   | ValueBinding vb -> vb.pvb_loc
+  | JsxProp prop -> ParsetreeViewer.get_jsx_prop_loc prop
 
 let rec walk_structure s t comments =
   match s with
@@ -676,6 +683,7 @@ and walk_node node tbl comments =
   | StructureItem si -> walk_structure_item si tbl comments
   | TypeDeclaration td -> walk_type_declaration td tbl comments
   | ValueBinding vb -> walk_value_binding vb tbl comments
+  | JsxProp prop -> walk_jsx_prop prop tbl comments
 
 and walk_list : ?prev_loc:Location.t -> node list -> t -> Comment.t list -> unit
     =
@@ -1645,7 +1653,13 @@ and walk_expression expr t comments =
         (* attach comments to the closing > token *)
         attach t.leading opening_greater_than_loc before_greater_than;
         rest
-      | _ -> rest
+      | props ->
+        let comments_for_props, rest =
+          partition_leading_trailing rest opening_greater_than_loc
+        in
+        let prop_nodes = List.map (fun prop -> JsxProp prop) props in
+        walk_list prop_nodes t comments_for_props;
+        rest
     in
     let _rest =
       match (children, closing_tag) with
@@ -2183,3 +2197,5 @@ and walk_payload payload t comments =
   match payload with
   | PStr s -> walk_structure s t comments
   | _ -> ()
+
+and walk_jsx_prop prop t comments = ()

From 2946ea0382af7c287858dea1f70ca3f8a00ca71a Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 15:46:27 +0200
Subject: [PATCH 70/99] Correct range for prop spreading

---
 compiler/ml/printast.ml                   | 7 ++++---
 compiler/syntax/src/res_comments_table.ml | 2 +-
 compiler/syntax/src/res_core.ml           | 7 +++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/compiler/ml/printast.ml b/compiler/ml/printast.ml
index 6b5cc56539..9a0c5cee61 100644
--- a/compiler/ml/printast.ml
+++ b/compiler/ml/printast.ml
@@ -379,9 +379,10 @@ and jsx_prop i ppf = function
   | JSXPropValue (name, opt, expr) ->
     line i ppf "%s=%s" name.txt (if opt then "?" else "");
     expression i ppf expr
-  | JSXPropSpreading (_, e) ->
-    line i ppf "...";
-    expression i ppf e
+  | JSXPropSpreading (loc, e) ->
+    line i ppf "{... %a\n" fmt_location loc;
+    expression (i + 1) ppf e;
+    line i ppf "}\n"
 
 and jsx_props i ppf xs =
   line i ppf "jsx_props =\n";
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index adf9cf1662..9fd3f25de8 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -2198,4 +2198,4 @@ and walk_payload payload t comments =
   | PStr s -> walk_structure s t comments
   | _ -> ()
 
-and walk_jsx_prop prop t comments = ()
+and walk_jsx_prop _prop _t _comments = ()
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 5f53f342ab..1aee16946d 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2858,20 +2858,19 @@ and parse_jsx_prop p : Parsetree.jsx_prop option =
   (* {...props} *)
   | Lbrace -> (
     Scanner.pop_mode p.scanner Jsx;
+    let spread_start = p.Parser.start_pos in
     Parser.next p;
     match p.Parser.token with
     | DotDotDot -> (
       Scanner.pop_mode p.scanner Jsx;
       Parser.next p;
-      (* TODO: is this loc even correct? 
-        Should this be the dots or the entire thing?
-      *)
-      let loc = mk_loc p.Parser.start_pos p.prev_end_pos in
       let attr_expr = parse_primary_expr ~operand:(parse_expr p) p in
       (* using label "spreadProps" to distinguish from others *)
       (* let label = Asttypes.Labelled {txt = "_spreadProps"; loc} in *)
       match p.Parser.token with
       | Rbrace ->
+        let spread_end = p.Parser.end_pos in
+        let loc = mk_loc spread_start spread_end in
         Parser.next p;
         Scanner.set_jsx_mode p.scanner;
         Some (Parsetree.JSXPropSpreading (loc, attr_expr))

From 4fcc3ce0f707edba1930b19efc5ab26902208791 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 17:26:21 +0200
Subject: [PATCH 71/99] Complete walk_jsx_prop

---
 compiler/ml/parsetree.ml                    |  5 ++++-
 compiler/syntax/src/res_comments_table.ml   | 22 +++++++++++++++++++--
 compiler/syntax/src/res_parsetree_viewer.ml |  3 +--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index e2d64bc04d..5cf9bf17d6 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -360,7 +360,10 @@ and jsx_prop =
   (*
    *   |  {...jsx_expr}
    *)
-  | JSXPropSpreading of Location.t * expression
+  | JSXPropSpreading of
+      (* entire {...expr} location *)
+      Location.t
+      * expression
 
 and jsx_children =
   | JSXChildrenSpreading of expression
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 9fd3f25de8..798f3d94a9 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1644,7 +1644,7 @@ and walk_expression expr t comments =
     in
     (* Only attach comments to the element name if they are on the same line *)
     attach t.trailing tag_name_start.loc after_opening_tag_name;
-    let _rest =
+    let rest =
       match props with
       | [] ->
         let before_greater_than, rest =
@@ -2198,4 +2198,22 @@ and walk_payload payload t comments =
   | PStr s -> walk_structure s t comments
   | _ -> ()
 
-and walk_jsx_prop _prop _t _comments = ()
+and walk_jsx_prop prop t comments =
+  match prop with
+  | Parsetree.JSXPropPunning _ ->
+    (* this is covered by walk_list, as the location for the prop is cover there. *)
+    ()
+  | Parsetree.JSXPropValue (name, _, value) ->
+    if name.loc.loc_end.pos_lnum == value.pexp_loc.loc_start.pos_lnum then
+      (* In the rare case that comments are found between name=value,
+         where both are on the same line,
+         we assign them to the value, and not to the name. *)
+      walk_list [Expression value] t comments
+    else
+      (* otherwise we attach comments that come directly after the name to the name *)
+      let after_name, rest = partition_by_on_same_line name.loc comments in
+      attach t.trailing name.loc after_name;
+      walk_list [Expression value] t rest
+  | Parsetree.JSXPropSpreading (_, value) ->
+    (* We assign all comments to the spreaded expression *)
+    walk_list [Expression value] t comments
diff --git a/compiler/syntax/src/res_parsetree_viewer.ml b/compiler/syntax/src/res_parsetree_viewer.ml
index a97942f81f..596156e376 100644
--- a/compiler/syntax/src/res_parsetree_viewer.ml
+++ b/compiler/syntax/src/res_parsetree_viewer.ml
@@ -744,8 +744,7 @@ let get_jsx_prop_loc = function
   | Parsetree.JSXPropPunning (_, name) -> name.loc
   | Parsetree.JSXPropValue (name, _, value) ->
     {name.loc with loc_end = value.pexp_loc.loc_end}
-  | Parsetree.JSXPropSpreading (dots, expr) ->
-    {dots with loc_end = expr.pexp_loc.loc_end}
+  | Parsetree.JSXPropSpreading (loc, _) -> loc
 
 let closing_tag_loc (tag : Parsetree.jsx_closing_container_tag) =
   {

From 161b12c9dfba93e6e5b3d8758dea9bf8608c31e0 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 17:47:49 +0200
Subject: [PATCH 72/99] Finish comment assignment for container elements

---
 compiler/syntax/src/res_comments_table.ml | 51 +++++++++++------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 798f3d94a9..71f1109723 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -229,7 +229,7 @@ let partition_adjacent_trailing loc1 comments =
  * This function is useful for precisely attaching comments between specific tokens
  * in constructs like JSX props, function arguments, and other multi-token expressions.
  *)
-let partition_adjacent_trailing_before_next_token (loc : Warnings.loc)
+let partition_adjacent_trailing_before_next_token_on_same_line (loc : Warnings.loc)
     (next_token : Warnings.loc) (comments : Comment.t list) :
     Comment.t list * Comment.t list =
   let open Location in
@@ -1639,7 +1639,7 @@ and walk_expression expr t comments =
         | [] -> opening_greater_than_loc
         | head :: _ -> ParsetreeViewer.get_jsx_prop_loc head
       in
-      partition_adjacent_trailing_before_next_token tag_name_start.loc
+      partition_adjacent_trailing_before_next_token_on_same_line tag_name_start.loc
         next_token comments
     in
     (* Only attach comments to the element name if they are on the same line *)
@@ -1661,35 +1661,32 @@ and walk_expression expr t comments =
         walk_list prop_nodes t comments_for_props;
         rest
     in
-    let _rest =
-      match (children, closing_tag) with
-      | JSXChildrenItems [], Some closing_tag ->
-        (* There are no children, comments after '>' on the same line should be attached *)
-        let after_opening_greater_than, rest =
-          partition_by_on_same_line opening_greater_than_loc rest
-        in
-        attach t.trailing opening_greater_than_loc after_opening_greater_than;
-        (* attach everything else that came before the closing tag to the closing tag *)
+
+    (* comments after '>' on the same line should be attached to '>' *)
+    let after_opening_greater_than, rest =
+      partition_by_on_same_line opening_greater_than_loc rest
+    in
+    attach t.trailing opening_greater_than_loc after_opening_greater_than;
+
+    let comments_for_children, _rest =
+      match closing_tag with
+      | None -> (rest, [])
+      | Some closing_tag ->
         let closing_tag_loc = ParsetreeViewer.closing_tag_loc closing_tag in
-        let before_closing_tag, rest =
-          partition_leading_trailing rest closing_tag_loc
-        in
-        attach t.leading closing_tag_loc before_closing_tag;
-        rest
-      | _ -> rest
+        partition_leading_trailing rest closing_tag_loc
     in
-    ()
-    (* attach t.leading expr.pexp_loc leading; *)
-    (* let opening_token = {expr.pexp_loc with loc_end = opening_greater_than} in
-    let on_same_line, rest = partition_by_on_same_line opening_token comments in
-    attach t.trailing opening_token on_same_line;
-    let exprs =
+
+    let children_nodes =
       match children with
-      | Parsetree.JSXChildrenSpreading e -> [e]
-      | Parsetree.JSXChildrenItems xs -> xs
+      | Parsetree.JSXChildrenSpreading e -> [Expression e]
+      | Parsetree.JSXChildrenItems xs -> List.map (fun e -> Expression e) xs
     in
-    let xs = exprs |> List.map (fun e -> Expression e) in
-    walk_list xs t rest *)
+
+    walk_list children_nodes t comments_for_children
+    (* It is less likely that there are comments inside the closing tag, 
+       so we don't process them right now,
+       if you ever need this, feel free to update process _rest. 
+       Comments after the closing tag will already be taking into account by the parent node. *)
   | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =

From cd98c9f5f0ff0d545bc286841f4e35f4d37141f5 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Sun, 30 Mar 2025 18:37:42 +0200
Subject: [PATCH 73/99] Revisit comment attachment for unary tags

---
 compiler/syntax/src/res_comments_table.ml    | 72 ++++++++++++--------
 compiler/syntax/src/res_parsetree_viewer.ml  | 15 +++-
 compiler/syntax/src/res_parsetree_viewer.mli |  5 +-
 3 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 71f1109723..9e9f0400e0 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -229,9 +229,9 @@ let partition_adjacent_trailing loc1 comments =
  * This function is useful for precisely attaching comments between specific tokens
  * in constructs like JSX props, function arguments, and other multi-token expressions.
  *)
-let partition_adjacent_trailing_before_next_token_on_same_line (loc : Warnings.loc)
-    (next_token : Warnings.loc) (comments : Comment.t list) :
-    Comment.t list * Comment.t list =
+let partition_adjacent_trailing_before_next_token_on_same_line
+    (loc : Warnings.loc) (next_token : Warnings.loc) (comments : Comment.t list)
+    : Comment.t list * Comment.t list =
   let open Location in
   let open Lexing in
   let rec loop after_loc comments =
@@ -1594,28 +1594,42 @@ and walk_expression expr t comments =
     walk_list xs t rest
   | Pexp_jsx_element
       (Jsx_unary_element
-         {jsx_unary_element_tag_name = tag; jsx_unary_element_props = []}) ->
-    let _, _, trailing = partition_by_loc comments tag.loc in
-    let after_expr, _ = partition_adjacent_trailing tag.loc trailing in
-    attach t.trailing tag.loc after_expr
-  | Pexp_jsx_element
-      (Jsx_unary_element
-         {jsx_unary_element_tag_name = tag; jsx_unary_element_props = props}) ->
-    let _leading, inside, trailing = partition_by_loc comments tag.loc in
-    walk_list
-      (props
-      |> List.filter_map (fun prop ->
-             match prop with
-             | Parsetree.JSXPropPunning (_, {loc}) ->
-               Some (ExprArgument {expr; loc})
-             | Parsetree.JSXPropValue ({loc}, _, expr) ->
-               let loc = {loc with loc_end = expr.pexp_loc.loc_end} in
-               Some (ExprArgument {expr; loc})
-             | Parsetree.JSXPropSpreading (loc, expr) ->
-               let loc = {loc with loc_end = expr.pexp_loc.loc_end} in
-               Some (ExprArgument {expr; loc})))
-      t trailing;
-    walk_expression expr t inside
+         {
+           jsx_unary_element_tag_name = tag_name;
+           jsx_unary_element_props = props;
+         }) -> (
+    let closing_token_loc =
+      ParsetreeViewer.unary_element_closing_token expr.pexp_loc
+    in
+
+    let after_opening_tag_name, rest =
+      (* Either the first prop or the closing /> token *)
+      let next_token =
+        match props with
+        | [] -> closing_token_loc
+        | head :: _ -> ParsetreeViewer.get_jsx_prop_loc head
+      in
+      partition_adjacent_trailing_before_next_token_on_same_line tag_name.loc
+        next_token comments
+    in
+
+    (* Only attach comments to the element name if they are on the same line *)
+    attach t.trailing tag_name.loc after_opening_tag_name;
+    match props with
+    | [] ->
+      let before_closing_token, _rest =
+        partition_leading_trailing rest closing_token_loc
+      in
+      (* attach comments to the closing /> token *)
+      attach t.leading closing_token_loc before_closing_token
+      (* the _rest comments are going to be attached after the entire expression,
+         dealt with in the parent node. *)
+    | props ->
+      let comments_for_props, _rest =
+        partition_leading_trailing rest closing_token_loc
+      in
+      let prop_nodes = List.map (fun prop -> JsxProp prop) props in
+      walk_list prop_nodes t comments_for_props)
   | Pexp_jsx_element
       (Jsx_container_element
          {
@@ -1639,8 +1653,8 @@ and walk_expression expr t comments =
         | [] -> opening_greater_than_loc
         | head :: _ -> ParsetreeViewer.get_jsx_prop_loc head
       in
-      partition_adjacent_trailing_before_next_token_on_same_line tag_name_start.loc
-        next_token comments
+      partition_adjacent_trailing_before_next_token_on_same_line
+        tag_name_start.loc next_token comments
     in
     (* Only attach comments to the element name if they are on the same line *)
     attach t.trailing tag_name_start.loc after_opening_tag_name;
@@ -1672,7 +1686,9 @@ and walk_expression expr t comments =
       match closing_tag with
       | None -> (rest, [])
       | Some closing_tag ->
-        let closing_tag_loc = ParsetreeViewer.closing_tag_loc closing_tag in
+        let closing_tag_loc =
+          ParsetreeViewer.container_element_closing_tag_loc closing_tag
+        in
         partition_leading_trailing rest closing_tag_loc
     in
 
diff --git a/compiler/syntax/src/res_parsetree_viewer.ml b/compiler/syntax/src/res_parsetree_viewer.ml
index 596156e376..a8f03b7ab4 100644
--- a/compiler/syntax/src/res_parsetree_viewer.ml
+++ b/compiler/syntax/src/res_parsetree_viewer.ml
@@ -746,9 +746,22 @@ let get_jsx_prop_loc = function
     {name.loc with loc_end = value.pexp_loc.loc_end}
   | Parsetree.JSXPropSpreading (loc, _) -> loc
 
-let closing_tag_loc (tag : Parsetree.jsx_closing_container_tag) =
+let container_element_closing_tag_loc
+    (tag : Parsetree.jsx_closing_container_tag) =
   {
     tag.jsx_closing_container_tag_name.loc with
     loc_start = tag.jsx_closing_container_tag_start;
     loc_end = tag.jsx_closing_container_tag_end;
   }
+
+(** returns the location of the /> token in a unary element *)
+let unary_element_closing_token (expression_loc : Warnings.loc) =
+  {
+    expression_loc with
+    loc_start =
+      {
+        expression_loc.loc_end with
+        pos_cnum = expression_loc.loc_end.pos_cnum - 2;
+        pos_bol = expression_loc.loc_end.pos_bol - 2;
+      };
+  }
diff --git a/compiler/syntax/src/res_parsetree_viewer.mli b/compiler/syntax/src/res_parsetree_viewer.mli
index 32aaa006e9..fd3f8b3707 100644
--- a/compiler/syntax/src/res_parsetree_viewer.mli
+++ b/compiler/syntax/src/res_parsetree_viewer.mli
@@ -158,4 +158,7 @@ val is_tuple_array : Parsetree.expression -> bool
 
 val get_jsx_prop_loc : Parsetree.jsx_prop -> Warnings.loc
 
-val closing_tag_loc : Parsetree.jsx_closing_container_tag -> Warnings.loc
+val container_element_closing_tag_loc :
+  Parsetree.jsx_closing_container_tag -> Warnings.loc
+
+val unary_element_closing_token : Warnings.loc -> Warnings.loc

From 67da647cb16b4a7ff4e6cf7d47d13f0d0b358dc6 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 09:36:45 +0200
Subject: [PATCH 74/99] Improve behaviour for comments in unary tag

---
 compiler/syntax/src/res_printer.ml | 114 ++++++++++++++---------------
 1 file changed, 53 insertions(+), 61 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index dbb28c8174..a294d570b4 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4370,9 +4370,13 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
   let props_doc =
     if tag_has_no_props then Doc.nil
     else
-      Doc.indent
-        (Doc.concat
-           [Doc.line; Doc.group (Doc.join formatted_props ~sep:Doc.line)])
+      Doc.concat
+        [
+          Doc.indent
+            (Doc.concat
+               [Doc.line; Doc.group (Doc.join ~sep:Doc.line formatted_props)]);
+          Doc.line;
+        ]
   in
   let opening_tag =
     print_comments
@@ -4384,23 +4388,13 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
       Doc.indent opening_tag
     else opening_tag
   in
-  let closing_tag_doc =
-    let sep =
-      match
-        (Doc.will_break props_doc, tag_has_trailing_comment, tag_has_no_props)
-      with
-      | true, _, _ -> Doc.soft_line
-      | false, true, true -> Doc.nil
-      | false, _, _ -> Doc.line
-    in
-    Doc.concat [sep; Doc.text "/>"]
-  in
+  let closing_tag_doc = Doc.text "/>" in
   Doc.group
     (Doc.concat
        [
          opening_tag_doc;
          props_doc;
-         (if tag_has_trailing_comment && tag_has_no_props then Doc.hard_line
+         (if tag_has_trailing_comment && tag_has_no_props then Doc.space
           else Doc.nil);
          closing_tag_doc;
        ])
@@ -4576,55 +4570,53 @@ and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
 
 and print_jsx_prop ~state prop cmt_tbl =
   let open Parsetree in
-  match prop with
-  | JSXPropPunning (is_optional, name) ->
-    let prop_has_trailing_comment = has_trailing_comments cmt_tbl name.loc in
-    let doc =
+  let prop_loc = ParsetreeViewer.get_jsx_prop_loc prop in
+  let doc =
+    match prop with
+    | JSXPropPunning (is_optional, name) ->
+      (* We don't print any comments here because they will be attached to the entire prop_loc *)
       if is_optional then Doc.concat [Doc.question; print_ident_like name.txt]
       else print_ident_like name.txt
-    in
-    let doc = print_comments doc cmt_tbl name.loc in
-    if prop_has_trailing_comment then
-      Doc.group (Doc.concat [Doc.break_parent; doc])
-    else doc
-  | JSXPropValue (name, is_optional, value) ->
-    let value_doc =
-      let leading_line_comment_present =
-        has_leading_line_comment cmt_tbl value.pexp_loc
-      in
-      let doc = print_expression_with_comments ~state value cmt_tbl in
-      match Parens.jsx_prop_expr value with
-      | Parenthesized | Braced _ ->
-        (* {(20: int)} make sure that we also protect the expression inside *)
-        let inner_doc =
-          if Parens.braced_expr value then add_parens doc else doc
+    | JSXPropValue (name, is_optional, value) ->
+      let value_doc =
+        let leading_line_comment_present =
+          has_leading_line_comment cmt_tbl value.pexp_loc
         in
-        if leading_line_comment_present then add_braces inner_doc
-        else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
-      | _ -> doc
-    in
-    let doc =
-      Doc.concat
-        [
-          print_ident_like name.txt;
-          Doc.equal;
-          (if is_optional then Doc.question else Doc.nil);
-          Doc.group value_doc;
-        ]
-    in
-    print_comments doc cmt_tbl value.pexp_loc
-  | JSXPropSpreading (loc, value) ->
-    let value =
-      {value with pexp_loc = {value.pexp_loc with loc_start = loc.loc_start}}
-    in
-    Doc.group
-      (Doc.concat
-         [
-           Doc.lbrace;
-           Doc.dotdotdot;
-           print_expression_with_comments ~state value cmt_tbl;
-           Doc.rbrace;
-         ])
+        let doc = print_expression_with_comments ~state value cmt_tbl in
+        match Parens.jsx_prop_expr value with
+        | Parenthesized | Braced _ ->
+          (* {(20: int)} make sure that we also protect the expression inside *)
+          let inner_doc =
+            if Parens.braced_expr value then add_parens doc else doc
+          in
+          if leading_line_comment_present then add_braces inner_doc
+          else Doc.concat [Doc.lbrace; inner_doc; Doc.rbrace]
+        | _ -> doc
+      in
+      let doc =
+        Doc.concat
+          [
+            print_ident_like name.txt;
+            Doc.equal;
+            (if is_optional then Doc.question else Doc.nil);
+            Doc.group value_doc;
+          ]
+      in
+      print_comments doc cmt_tbl value.pexp_loc
+    | JSXPropSpreading (loc, value) ->
+      let value =
+        {value with pexp_loc = {value.pexp_loc with loc_start = loc.loc_start}}
+      in
+      Doc.group
+        (Doc.concat
+           [
+             Doc.lbrace;
+             Doc.dotdotdot;
+             print_expression_with_comments ~state value cmt_tbl;
+             Doc.rbrace;
+           ])
+  in
+  print_comments doc cmt_tbl prop_loc
 
 and print_jsx_props ~state props cmt_tbl : Doc.t list =
   props |> List.map (fun prop -> print_jsx_prop ~state prop cmt_tbl)

From 86fea57c68fef0e6ac1afb0aa5fe499f37833241 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 10:50:12 +0200
Subject: [PATCH 75/99] Keep location as is for prop spreading

---
 compiler/syntax/src/res_printer.ml | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index a294d570b4..9a565eeecf 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4603,10 +4603,7 @@ and print_jsx_prop ~state prop cmt_tbl =
           ]
       in
       print_comments doc cmt_tbl value.pexp_loc
-    | JSXPropSpreading (loc, value) ->
-      let value =
-        {value with pexp_loc = {value.pexp_loc with loc_start = loc.loc_start}}
-      in
+    | JSXPropSpreading (_, value) ->
       Doc.group
         (Doc.concat
            [

From f10bc55b8a565607192e3a3dfa8c9c877b277a2d Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 11:06:01 +0200
Subject: [PATCH 76/99] print leading comments of closing unary token

---
 compiler/syntax/src/res_printer.ml | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 9a565eeecf..f3b18f887a 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -68,6 +68,11 @@ let has_trailing_comments tbl loc =
   | None -> false
   | _ -> true
 
+let has_leading_comments tbl loc =
+  match Hashtbl.find_opt tbl.CommentTable.leading loc with
+  | None -> false
+  | _ -> true
+
 let print_multiline_comment_content txt =
   (* Turns
    *         |* first line
@@ -2838,7 +2843,7 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
              jsx_unary_element_tag_name = tag_name;
              jsx_unary_element_props = props;
            }) ->
-      print_jsx_unary_tag ~state tag_name props cmt_tbl
+      print_jsx_unary_tag ~state tag_name props e.pexp_loc cmt_tbl
     | Pexp_jsx_element
         (Jsx_container_element
            {
@@ -4362,13 +4367,19 @@ and print_pexp_apply ~state expr cmt_tbl =
         [print_attributes ~state attrs cmt_tbl; call_expr_doc; args_doc]
   | _ -> assert false
 
-and print_jsx_unary_tag ~state tag_name props cmt_tbl =
+and print_jsx_unary_tag ~state tag_name props expr_loc cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
   let tag_has_trailing_comment = has_trailing_comments cmt_tbl tag_name.loc in
   let tag_has_no_props = List.is_empty props in
+  let closing_token_loc =
+    ParsetreeViewer.unary_element_closing_token expr_loc
+  in
   let props_doc =
-    if tag_has_no_props then Doc.nil
+    if tag_has_no_props then
+      if has_leading_comments cmt_tbl closing_token_loc then Doc.soft_line
+      else if tag_has_trailing_comment then Doc.nil
+      else Doc.space
     else
       Doc.concat
         [
@@ -4388,7 +4399,9 @@ and print_jsx_unary_tag ~state tag_name props cmt_tbl =
       Doc.indent opening_tag
     else opening_tag
   in
-  let closing_tag_doc = Doc.text "/>" in
+  let closing_tag_doc =
+    print_comments (Doc.text "/>") cmt_tbl closing_token_loc
+  in
   Doc.group
     (Doc.concat
        [

From b40c019228866ba461f6dd2808c0b560334f642f Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 11:21:31 +0200
Subject: [PATCH 77/99] Attach comments between empty container tag

---
 compiler/syntax/src/res_comments_table.ml | 29 ++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 9e9f0400e0..a0e2f1a535 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1638,7 +1638,7 @@ and walk_expression expr t comments =
            jsx_container_element_opening_tag_end = opening_greater_than;
            jsx_container_element_children = children;
            jsx_container_element_closing_tag = closing_tag;
-         }) ->
+         }) -> (
     let opening_greater_than_loc =
       {
         loc_start = opening_greater_than;
@@ -1691,18 +1691,31 @@ and walk_expression expr t comments =
         in
         partition_leading_trailing rest closing_tag_loc
     in
+    match children with
+    | Parsetree.JSXChildrenItems [] -> (
+      (* attach all comments to the closing tag if there are no children *)
+      match closing_tag with
+      | None ->
+        (* if there is no closing tag, the comments will attached after the expression *)
+        ()
+      | Some closing_tag ->
+        let closing_tag_loc =
+          ParsetreeViewer.container_element_closing_tag_loc closing_tag
+        in
+        attach t.leading closing_tag_loc comments_for_children)
+    | children ->
+      let children_nodes =
+        match children with
+        | Parsetree.JSXChildrenSpreading e -> [Expression e]
+        | Parsetree.JSXChildrenItems xs -> List.map (fun e -> Expression e) xs
+      in
 
-    let children_nodes =
-      match children with
-      | Parsetree.JSXChildrenSpreading e -> [Expression e]
-      | Parsetree.JSXChildrenItems xs -> List.map (fun e -> Expression e) xs
-    in
-
-    walk_list children_nodes t comments_for_children
+      walk_list children_nodes t comments_for_children
     (* It is less likely that there are comments inside the closing tag, 
        so we don't process them right now,
        if you ever need this, feel free to update process _rest. 
        Comments after the closing tag will already be taking into account by the parent node. *)
+    )
   | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =

From 28497d214e578ec0779cb317beaa4eed8ca19c6e Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 11:56:02 +0200
Subject: [PATCH 78/99] comments between opening and closing tag

---
 compiler/syntax/src/res_comments_table.ml | 63 ++++++++++++++++++++++-
 compiler/syntax/src/res_printer.ml        | 28 +++++++---
 2 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index a0e2f1a535..e945afc1f1 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -252,6 +252,47 @@ let partition_adjacent_trailing_before_next_token_on_same_line
   in
   loop [] comments
 
+(* Extracts comments that appear between two specified line numbers in a source file.
+ *
+ * This function is particularly useful for handling comments that should be preserved
+ * between two syntax elements that appear on different lines, such as comments between
+ * opening and closing tags in JSX elements.
+ *
+ * For example, given code:
+ *   <div>
+ *     // comment 1
+ *     // comment 2
+ *   </div>
+ *
+ * When calling partition_between_lines with the line numbers of the opening and closing tags:
+ * - between_comments: [comment 1, comment 2]
+ * - rest: any comments that appear before or after the specified lines
+ *
+ * Parameters:
+ * - start_line: the line number after which to start collecting comments
+ * - end_line: the line number before which to stop collecting comments
+ * - comments: list of comments to partition
+ *
+ * Returns: (between_comments, rest) where between_comments contains all comments
+ * entirely between the start_line and end_line, and rest contains all other comments.
+ *)
+let partition_between_lines start_line end_line comments =
+  let open Location in
+  let open Lexing in
+  let rec loop between_comments comments =
+    match comments with
+    | [] -> (List.rev between_comments, [])
+    | comment :: rest ->
+      (* Check if the comment is between the start_line and end_line *)
+      let cmt_loc = Comment.loc comment in
+      if
+        cmt_loc.loc_start.pos_lnum > start_line
+        && cmt_loc.loc_end.pos_lnum < end_line
+      then loop (comment :: between_comments) rest
+      else (List.rev between_comments, comments)
+  in
+  loop [] comments
+
 let rec collect_list_patterns acc pattern =
   let open Parsetree in
   match pattern.ppat_desc with
@@ -1702,7 +1743,27 @@ and walk_expression expr t comments =
         let closing_tag_loc =
           ParsetreeViewer.container_element_closing_tag_loc closing_tag
         in
-        attach t.leading closing_tag_loc comments_for_children)
+        if
+          opening_greater_than_loc.loc_end.pos_lnum
+          < closing_tag_loc.loc_start.pos_lnum + 1
+        then (
+          (* In this case, there are no children but there are comments between the opening and closing tag,
+             We can attach these the inside table, to easily print them later as indented comments
+             For example:
+             <div>
+                // comment 1
+                // comment 2
+            </div>
+          *)
+          let inside_comments, leading_for_closing_tag =
+            partition_between_lines opening_greater_than_loc.loc_end.pos_lnum
+              closing_tag_loc.loc_start.pos_lnum comments_for_children
+          in
+          attach t.inside expr.pexp_loc inside_comments;
+          attach t.leading closing_tag_loc leading_for_closing_tag)
+        else
+          (* if the closing tag is on the same line, attach comments to the opening tag *)
+          attach t.leading closing_tag_loc comments_for_children)
     | children ->
       let children_nodes =
         match children with
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index f3b18f887a..df72ef7de7 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2851,9 +2851,10 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
              jsx_container_element_opening_tag_end = opening_greater_than;
              jsx_container_element_props = props;
              jsx_container_element_children = children;
+             jsx_container_element_closing_tag = closing_tag;
            }) ->
       print_jsx_container_tag ~state tag_name opening_greater_than props
-        children e.pexp_loc cmt_tbl
+        children closing_tag e.pexp_loc cmt_tbl
     | Pexp_construct ({txt = Longident.Lident "()"}, _) -> Doc.text "()"
     | Pexp_construct ({txt = Longident.Lident "[]"}, _) ->
       Doc.concat
@@ -4414,7 +4415,9 @@ and print_jsx_unary_tag ~state tag_name props expr_loc cmt_tbl =
 
 and print_jsx_container_tag ~state tag_name
     (opening_greater_than : Lexing.position) props
-    (children : Parsetree.jsx_children) (pexp_loc : Location.t) cmt_tbl =
+    (children : Parsetree.jsx_children)
+    (closing_tag : Parsetree.jsx_closing_container_tag option)
+    (pexp_loc : Location.t) cmt_tbl =
   let name = print_jsx_name tag_name in
   let opening_greater_than_doc =
     let loc = {pexp_loc with loc_end = opening_greater_than} in
@@ -4453,6 +4456,19 @@ and print_jsx_container_tag ~state tag_name
       ]
   in
 
+  (* comments between the opening and closing tag *)
+  let has_comments_inside = has_comments_inside cmt_tbl pexp_loc in
+  let closing_element_doc =
+    match closing_tag with
+    | None -> Doc.nil
+    | Some closing_tag ->
+      let closing_tag_loc =
+        ParsetreeViewer.container_element_closing_tag_loc closing_tag
+      in
+      print_comments
+        (Doc.concat [Doc.text "</"; name; Doc.greater_than])
+        cmt_tbl closing_tag_loc
+  in
   Doc.group
     (Doc.concat
        [
@@ -4482,10 +4498,10 @@ and print_jsx_container_tag ~state tag_name
               ]);
          Doc.concat
            [
-             (if has_children then print_children children else Doc.nil);
-             Doc.text "</";
-             name;
-             Doc.greater_than;
+             (if has_children then print_children children
+              else if not has_comments_inside then Doc.soft_line
+              else print_comments_inside cmt_tbl pexp_loc);
+             closing_element_doc;
            ];
        ])
 

From e7bf344331f7793fbef65328fdd7187a38439876 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 11:58:56 +0200
Subject: [PATCH 79/99] Correct opening_greater_than_doc

---
 compiler/syntax/src/res_printer.ml | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index df72ef7de7..a3cdec2d9f 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4420,8 +4420,15 @@ and print_jsx_container_tag ~state tag_name
     (pexp_loc : Location.t) cmt_tbl =
   let name = print_jsx_name tag_name in
   let opening_greater_than_doc =
-    let loc = {pexp_loc with loc_end = opening_greater_than} in
-    print_comments Doc.greater_than cmt_tbl loc
+    let open Warnings in
+    let opening_greater_than_loc =
+      {
+        loc_start = opening_greater_than;
+        loc_end = opening_greater_than;
+        loc_ghost = false;
+      }
+    in
+    print_comments Doc.greater_than cmt_tbl opening_greater_than_loc
   in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
   (* <div className="test" /> *)

From b8d609ea3677ac85e21ab6e9126d4e6a278b4ed3 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 15:06:52 +0200
Subject: [PATCH 80/99] Deal with container element comment edge cases.

---
 compiler/syntax/src/res_comments_table.ml |  2 +-
 compiler/syntax/src/res_printer.ml        | 77 ++++++++++++++++++-----
 2 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index e945afc1f1..181d00a1a7 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -246,7 +246,7 @@ let partition_adjacent_trailing_before_next_token_on_same_line
         (* comment after loc *)
         && cmt_loc.loc_start.pos_cnum > loc.loc_end.pos_cnum
         (* comment before next_token *)
-        && cmt_loc.loc_end.pos_cnum < next_token.loc_start.pos_cnum
+        && cmt_loc.loc_end.pos_cnum <= next_token.loc_start.pos_cnum
       then loop (comment :: after_loc) rest
       else (List.rev after_loc, comments)
   in
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index a3cdec2d9f..0d45861f18 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -50,6 +50,11 @@ let has_leading_line_comment tbl loc =
   | Some comment -> Comment.is_single_line_comment comment
   | None -> false
 
+let has_trailing_single_line_comment tbl loc =
+  match Hashtbl.find_opt tbl.CommentTable.trailing loc with
+  | Some (comment :: _) -> Comment.is_single_line_comment comment
+  | _ -> false
+
 let has_comment_below tbl loc =
   match Hashtbl.find tbl.CommentTable.trailing loc with
   | comment :: _ ->
@@ -4419,16 +4424,32 @@ 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 in
-  let opening_greater_than_doc =
-    let open Warnings in
-    let opening_greater_than_loc =
-      {
-        loc_start = opening_greater_than;
-        loc_end = opening_greater_than;
-        loc_ghost = false;
-      }
+  let last_prop_has_comment_after =
+    let rec visit props =
+      match props with
+      | [] -> None
+      | [x] -> Some x
+      | _ :: xs -> visit xs
     in
-    print_comments Doc.greater_than cmt_tbl opening_greater_than_loc
+    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 has_leading_comments =
+      has_leading_comments cmt_tbl opening_greater_than_loc
+    in
+    ( has_leading_comments,
+      print_comments Doc.greater_than cmt_tbl opening_greater_than_loc )
   in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
   (* <div className="test" /> *)
@@ -4493,14 +4514,40 @@ and print_jsx_container_tag ~state tag_name
                           Doc.line;
                           Doc.group (Doc.join formatted_props ~sep:Doc.line);
                         ]));
-                (* if tag A has trailing comments then put > on the next line
-                <A
-                // comments
+                (* 
+                if the element name has a single comment on the same line
+
+                <A // foo
                 >
                 </A>
-             *)
-                (if has_trailing_comments cmt_tbl tag_name.Asttypes.loc then
-                   Doc.concat [Doc.soft_line; opening_greater_than_doc]
+
+                We need to force a newline.
+               *)
+                (if
+                   has_trailing_single_line_comment cmt_tbl
+                     tag_name.Asttypes.loc
+                 then Doc.concat [Doc.hard_line; opening_greater_than_doc]
+                   (*
+                  if the last prop has trailing comment
+
+                  <A
+                    prop=value
+                    // comments
+                  >
+                  </A>
+
+                  or there are leading comments before `>`
+
+                  <A
+                    // comments
+                  >
+
+                  then put > on the next line
+                 *)
+                 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);
               ]);
          Doc.concat

From 6d153699ac7530eb61956af0a84fb5289a360b70 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:27:19 +0200
Subject: [PATCH 81/99] Ensure comments inside braced property values are
 correct.

---
 compiler/syntax/src/res_core.ml    | 22 +---------------------
 compiler/syntax/src/res_printer.ml | 10 +++++++++-
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 1aee16946d..fdcc77e934 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2825,9 +2825,6 @@ and parse_jsx_prop p : Parsetree.jsx_prop option =
     let name, loc = parse_lident p in
     (* optional punning: <foo ?a /> *)
     if optional then Some (Parsetree.JSXPropPunning (true, {txt = name; loc}))
-      (* ( Asttypes.Optional {txt = name; loc},
-          Ast_helper.Exp.ident ~loc (Location.mkloc (Longident.Lident name) loc)
-        ) *)
     else
       match p.Parser.token with
       | Equal ->
@@ -2836,25 +2833,8 @@ and parse_jsx_prop p : Parsetree.jsx_prop option =
         let optional = Parser.optional p Question in
         Scanner.pop_mode p.scanner Jsx;
         let attr_expr = parse_primary_expr ~operand:(parse_atomic_expr p) p in
-        (* let label =
-          if optional then Asttypes.Optional {txt = name; loc}
-          else Asttypes.Labelled {txt = name; loc}
-        in *)
         Some (Parsetree.JSXPropValue ({txt = name; loc}, optional, attr_expr))
-        (* Some (label, attr_expr) *)
-      | _ -> Some (Parsetree.JSXPropPunning (false, {txt = name; loc}))
-    (* let label =
-          if optional then Asttypes.Optional {txt = name; loc}
-          else Asttypes.Labelled {txt = name; loc}
-        let attr_expr =
-          Ast_helper.Exp.ident ~loc (Location.mkloc (Longident.Lident name) loc)
-        in
-        let label =
-          if optional then Asttypes.Optional {txt = name; loc}
-          else Asttypes.Labelled {txt = name; loc}
-        in
-        Some (label, attr_expr)) *)
-    )
+      | _ -> Some (Parsetree.JSXPropPunning (false, {txt = name; loc})))
   (* {...props} *)
   | Lbrace -> (
     Scanner.pop_mode p.scanner Jsx;
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 0d45861f18..239b24176f 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4663,7 +4663,15 @@ and print_jsx_prop ~state prop cmt_tbl =
     | JSXPropValue (name, is_optional, value) ->
       let value_doc =
         let leading_line_comment_present =
-          has_leading_line_comment cmt_tbl value.pexp_loc
+          (* If the value expression has braces, these will be representend as an attribute containing the brace range *)
+          (* comment assignment is a little weird that this point, it will be assigned to a child node of the value expression *)
+          match (Parens.jsx_prop_expr value, value.pexp_desc) with
+          | ( Braced _,
+              Parsetree.Pexp_apply {funct = fun_expr; args = (_, head_arg) :: _}
+            ) ->
+            has_leading_line_comment cmt_tbl fun_expr.pexp_loc
+            || has_leading_line_comment cmt_tbl head_arg.pexp_loc
+          | _ -> has_leading_line_comment cmt_tbl value.pexp_loc
         in
         let doc = print_expression_with_comments ~state value cmt_tbl in
         match Parens.jsx_prop_expr value with

From 88534bac4fbb7d59024e22615b4cd770f680abfa Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:29:48 +0200
Subject: [PATCH 82/99] More accurate locations

---
 compiler/syntax/src/jsx_v4.ml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index cfae48fe18..febc245f21 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -1109,8 +1109,9 @@ type componentDescription =
   | FragmentComponent
 
 let loc_from_prop = function
-  | JSXPropPunning (_, {loc}) -> loc
-  | JSXPropValue (_, _, {pexp_loc}) -> pexp_loc
+  | JSXPropPunning (_, name) -> name.loc
+  | JSXPropValue (name, _, value) ->
+    {name.loc with loc_end = value.pexp_loc.loc_end}
   | JSXPropSpreading (loc, _) -> loc
 
 let mk_record_from_props mapper (jsx_expr_loc : Location.t) (props : jsx_props)

From 210fa879ed4a72e78727584e854b5319b6c46ae2 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:38:38 +0200
Subject: [PATCH 83/99] Update syntax roundtrip test files

---
 .../expected/implementation.res.txt           |   3 +-
 .../errors/expressions/expected/jsx.res.txt   |  16 +-
 .../expected/binaryNoEs6Arrow.res.txt         |   5 +-
 .../grammar/expressions/expected/jsx.res.txt  | 758 +++++++-----------
 .../expected/parenthesized.res.txt            |   2 +-
 .../expected/jsxChildren.res.txt              |   2 +-
 .../data/printer/expr/expected/jsx.res.txt    |   9 +-
 7 files changed, 313 insertions(+), 482 deletions(-)

diff --git a/tests/syntax_tests/data/parsing/errors/expressions/expected/implementation.res.txt b/tests/syntax_tests/data/parsing/errors/expressions/expected/implementation.res.txt
index 76dd17499a..a22e3718b2 100644
--- a/tests/syntax_tests/data/parsing/errors/expressions/expected/implementation.res.txt
+++ b/tests/syntax_tests/data/parsing/errors/expressions/expected/implementation.res.txt
@@ -12,7 +12,6 @@
 
 module InstallerDownload =
   struct
-    let make [arity:1]() = ((div ~children:[] ())[@res.braces ][@JSX ])
-      [@@react.component ]
+    let make [arity:1]() = ((<div />)[@res.braces ])[@@react.component ]
   end
 module LicenseList = struct  end
\ No newline at end of file
diff --git a/tests/syntax_tests/data/parsing/errors/expressions/expected/jsx.res.txt b/tests/syntax_tests/data/parsing/errors/expressions/expected/jsx.res.txt
index 2853150fe2..09444d5759 100644
--- a/tests/syntax_tests/data/parsing/errors/expressions/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/parsing/errors/expressions/expected/jsx.res.txt
@@ -56,13 +56,9 @@
 
   I'm not sure what to parse here when looking at ".".
 
-let x = ((di-v ~children:[] ())[@JSX ])
-let x = ((Unclosed.createElement ~children:[] ())[@JSX ])
-let x =
-  ((Foo.Bar.createElement ~children:[] ())[@JSX ]) > ([%rescript.exprhole ])
-let x =
-  ((Foo.Bar.Baz.createElement ~children:[] ())[@JSX ]) >
-    ([%rescript.exprhole ])
-let x =
-  ((Foo.bar.createElement ~children:[] ())[@JSX ]) > ([%rescript.exprhole ])
-let x = ((Foo.bar.createElement ~baz ~children:[] ())[@JSX ])
\ No newline at end of file
+let x = <di-v />
+let x = <Unclosed></Unclosed>
+let x = <Foo.Bar></Foo.Bar> > ([%rescript.exprhole ])
+let x = <Foo.Bar.Baz></Foo.Bar.Baz> > ([%rescript.exprhole ])
+let x = <Foo.bar></Foo.bar> > ([%rescript.exprhole ])
+let x = <Foo.bar baz />
\ No newline at end of file
diff --git a/tests/syntax_tests/data/parsing/grammar/expressions/expected/binaryNoEs6Arrow.res.txt b/tests/syntax_tests/data/parsing/grammar/expressions/expected/binaryNoEs6Arrow.res.txt
index 71c6ce2066..260cca36aa 100644
--- a/tests/syntax_tests/data/parsing/grammar/expressions/expected/binaryNoEs6Arrow.res.txt
+++ b/tests/syntax_tests/data/parsing/grammar/expressions/expected/binaryNoEs6Arrow.res.txt
@@ -21,13 +21,12 @@
     ((color === Black) && (color === Red)) &&
       ((sibling === None) || (parent === None))
     do () done
-;;((div
-      ~onClick:((fun [arity:1]event ->
+;;<div onClick=((fun [arity:1]event ->
                    ((match videoContainerRect with
                      | Some videoContainerRect ->
                          let newChapter =
                            ({ startTime = (percent *. duration) } : Video.chapter) in
                          { a; b } -> onChange
                      | _ -> ())
-                   [@res.braces ]))[@res.braces ]) ~children:[] ())[@JSX ])
+                   [@res.braces ]))[@res.braces ]) />
 ;;if inclusions.(index) <- (uid, url) then onChange inclusions
\ No newline at end of file
diff --git a/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt b/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt
index b4004d3d06..cb73356815 100644
--- a/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/parsing/grammar/expressions/expected/jsx.res.txt
@@ -1,162 +1,106 @@
-let _ = ((div ~children:[] ())[@JSX ])
-let _ = ((div ~children:[] ())[@JSX ])
-let _ = ((div ~className:{js|menu|js} ~children:[] ())[@JSX ])
-let _ = ((div ~className:{js|menu|js} ~children:[] ())[@JSX ])
-let _ = ((div ~className:{js|menu|js} ~children:[] ())[@JSX ])
-let _ = ((div ~className:{js|menu|js} ~children:[] ())[@JSX ])
-let _ =
-  ((div ~className:{js|menu|js}
-      ~onClick:((fun [arity:1]_ -> Js.log {js|click|js})[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div ~className:{js|menu|js}
-      ~onClick:((fun [arity:1]_ -> Js.log {js|click|js})[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
-let _ = ((Navbar.createElement ~children:[] ())[@JSX ])
-let _ = ((Navbar.createElement ~children:[] ())[@JSX ])
-let _ = ((Navbar.createElement ~children:[] ())[@JSX ])
-let _ = ((Navbar.createElement ~className:{js|menu|js} ~children:[] ())
-  [@JSX ])
-let _ = ((Dot.Up.createElement ~children:[] ())[@JSX ])
-let _ = ((Dot.Up.createElement ~children:[] ())[@JSX ])
-let _ = ((Dot.Up.createElement ~children:[] ())[@JSX ])
-let _ =
-  ((Dot.Up.createElement
-      ~children:[((Dot.low.createElement ~children:[] ())[@JSX ])] ())
-  [@JSX ])
-let _ =
-  ((Dot.Up.createElement
-      ~children:[((Dot.Up.createElement ~children:[] ())[@JSX ])] ())
-  [@JSX ])
-let _ = ((Dot.Up.createElement ~className:{js|menu|js} ~children:[] ())
-  [@JSX ])
-let _ = ((Dot.low.createElement ~children:[] ())[@JSX ])
-let _ = ((Dot.low.createElement ~children:[] ())[@JSX ])
-let _ = ((Dot.low.createElement ~children:[] ())[@JSX ])
-let _ =
-  ((Dot.low.createElement
-      ~children:[((Dot.Up.createElement ~children:[] ())[@JSX ])] ())
-  [@JSX ])
-let _ =
-  ((Dot.low.createElement
-      ~children:[((Dot.low.createElement ~children:[] ())[@JSX ])] ())
-  [@JSX ])
-let _ = ((Dot.low.createElement ~className:{js|menu|js} ~children:[] ())
-  [@JSX ])
-let _ = ((el ~punned ~children:[] ())[@JSX ])
-let _ = ((el ?punned ~children:[] ())[@JSX ])
-let _ = ((el ~punned ~children:[] ())[@JSX ])
-let _ = ((el ?punned ~children:[] ())[@JSX ])
-let _ = ((el ?a:b ~children:[] ())[@JSX ])
-let _ = ((el ?a:b ~children:[] ())[@JSX ])
+let _ = <div></div>
+let _ = <div></div>
+let _ = <div className={js|menu|js}></div>
+let _ = <div className={js|menu|js}></div>
+let _ = <div className={js|menu|js}></div>
+let _ = <div className={js|menu|js}></div>
+let _ =
+  <div className={js|menu|js} onClick=((fun [arity:1]_ ->
+                                          Js.log {js|click|js})
+  [@res.braces ])></div>
+let _ =
+  <div className={js|menu|js} onClick=((fun [arity:1]_ ->
+                                          Js.log {js|click|js})
+  [@res.braces ])></div>
+let _ = <Navbar />
+let _ = <Navbar></Navbar>
+let _ = <Navbar></Navbar>
+let _ = <Navbar className={js|menu|js}></Navbar>
+let _ = <Dot.Up />
+let _ = <Dot.Up></Dot.Up>
+let _ = <Dot.Up></Dot.Up>
+let _ = <Dot.Up><Dot.low /></Dot.Up>
+let _ = <Dot.Up><Dot.Up /></Dot.Up>
+let _ = <Dot.Up className={js|menu|js}></Dot.Up>
+let _ = <Dot.low />
+let _ = <Dot.low></Dot.low>
+let _ = <Dot.low></Dot.low>
+let _ = <Dot.low><Dot.Up /></Dot.low>
+let _ = <Dot.low><Dot.low /></Dot.low>
+let _ = <Dot.low className={js|menu|js}></Dot.low>
+let _ = <el punned></el>
+let _ = <el ?punned></el>
+let _ = <el punned />
+let _ = <el ?punned />
+let _ = <el a=?b></el>
+let _ = <el a=?b />
 let _ = <></>
 let _ = <></>
-let _ =
-  ((div ~className:{js|menu|js}
-      ~children:[((div ~className:{js|submenu|js} ~children:[sub1] ())
-                [@JSX ]);
-                ((div ~className:{js|submenu|js} ~children:[sub2] ())
-                [@JSX ])] ())
-  [@JSX ])
-let _ =
-  ((div ~className:{js|menu|js}
-      ~children:[((div ~className:{js|submenu|js} ~children:[sub1] ())
-                [@JSX ]);
-                ((div ~className:{js|submenu|js} ~children:[sub2] ())
-                [@JSX ])] ())
-  [@JSX ])
-let _ = ((div ~children:child ())[@JSX ])
-let _ = ((Foo.createElement ~children:(fun [arity:1]a -> 1) ())[@JSX ])
-let _ =
-  ((Foo.createElement ~children:((Foo2.createElement ~children:[] ())
-      [@JSX ]) ())
-  [@JSX ])
-let _ = ((Foo.createElement ~children:[|a|] ())[@JSX ])
-let _ = ((Foo.createElement ~children:(1, 2) ())[@JSX ])
-let _ = ((Foo.createElement ~children:(1, 2) ())[@JSX ])
-let _ =
-  ((div ~children:[ident; [|1;2;3|]; ((call a b)[@res.braces ]); (x.y).z] ())
-  [@JSX ])
-let _ =
-  ((Outer.createElement ~inner:((Inner.createElement ~children:[] ())
-      [@JSX ]) ~children:[] ())
-  [@JSX ])
-let _ = ((div ~onClick:onClickHandler ~children:[<>{js|foobar|js}</>] ())
-  [@JSX ])
-let _ =
-  ((Window.createElement
-      ~style:{
-               width = 10;
-               height = 10;
-               paddingTop = 10;
-               paddingLeft = 10;
-               paddingRight = 10;
-               paddingBottom = 10
-             } ~children:[] ())
-  [@JSX ])
-let _ = ((OverEager.createElement ~fiber:Metal.fiber ~children:[] ())[@JSX ])
+let _ = <div className={js|menu|js}><div className={js|submenu|js}>sub1</div>
+  <div className={js|submenu|js}>sub2</div></div>
+let _ = <div className={js|menu|js}><div className={js|submenu|js}>sub1</div>
+  <div className={js|submenu|js}>sub2</div></div>
+let _ = <div>child</div>
+let _ = <Foo>(fun [arity:1]a -> 1)</Foo>
+let _ = <Foo><Foo2 /></Foo>
+let _ = <Foo>[|a|]</Foo>
+let _ = <Foo>(1, 2)</Foo>
+let _ = <Foo>(1, 2)</Foo>
+let _ = <div>ident [|1;2;3|] ((call a b)[@res.braces ]) ((x.y).z)</div>
+let _ = <Outer inner=<Inner /> />
+let _ = <div onClick=onClickHandler><>{js|foobar|js}</></div>
+let _ =
+  <Window style={
+                  width = 10;
+                  height = 10;
+                  paddingTop = 10;
+                  paddingLeft = 10;
+                  paddingRight = 10;
+                  paddingBottom = 10
+                } />
+let _ = <OverEager fiber=Metal.fiber />
 let arrayOfListOfJsx = [|<></>|]
-let arrayOfListOfJsx = [|<>((Foo.createElement ~children:[] ())[@JSX ])</>|]
-let arrayOfListOfJsx =
-  [|<>((Foo.createElement ~children:[] ())
-    [@JSX ])</>;<>((Bar.createElement ~children:[] ())[@JSX ])</>|]
+let arrayOfListOfJsx = [|<><Foo></Foo></>|]
+let arrayOfListOfJsx = [|<><Foo /></>;<><Bar /></>|]
 let sameButWithSpaces = [|<></>|]
-let sameButWithSpaces = [|<>((Foo.createElement ~children:[] ())[@JSX ])</>|]
-let sameButWithSpaces =
-  [|<>((Foo.createElement ~children:[] ())
-    [@JSX ])</>;<>((Bar.createElement ~children:[] ())[@JSX ])</>|]
-let sameButWithSpaces =
-  [|<>((Foo.createElement ~children:[] ())
-    [@JSX ])</>;<>((Bar.createElement ~children:[] ())[@JSX ])</>|]
+let sameButWithSpaces = [|<><Foo /></>|]
+let sameButWithSpaces = [|<><Foo /></>;<><Bar /></>|]
+let sameButWithSpaces = [|<><Foo /></>;<><Bar /></>|]
 let arrayOfJsx = [||]
-let arrayOfJsx = [|((Foo.createElement ~children:[] ())[@JSX ])|]
-let arrayOfJsx =
-  [|((Foo.createElement ~children:[] ())
-    [@JSX ]);((Bar.createElement ~children:[] ())[@JSX ])|]
+let arrayOfJsx = [|<Foo></Foo>|]
+let arrayOfJsx = [|<Foo />;<Bar />|]
 let sameButWithSpaces = [||]
-let sameButWithSpaces = [|((Foo.createElement ~children:[] ())[@JSX ])|]
-let sameButWithSpaces =
-  [|((Foo.createElement ~children:[] ())
-    [@JSX ]);((Bar.createElement ~children:[] ())[@JSX ])|]
-let _ = ((a ~children:[] ())[@JSX ]) < ((b ~children:[] ())[@JSX ])
-let _ = ((a ~children:[] ())[@JSX ]) > ((b ~children:[] ())[@JSX ])
-let _ = ((a ~children:[] ())[@JSX ]) < ((b ~children:[] ())[@JSX ])
-let _ = ((a ~children:[] ())[@JSX ]) > ((b ~children:[] ())[@JSX ])
+let sameButWithSpaces = [|<Foo />|]
+let sameButWithSpaces = [|<Foo />;<Bar />|]
+let _ = <a /> < <b />
+let _ = <a /> > <b />
+let _ = <a></a> < <b></b>
+let _ = <a></a> > <b></b>
 let y =
-  ((Routes.createElement ~path:(Routes.stateToPath state) ~isHistorical:true
-      ~onHashChange:((fun [arity:3]_oldPath ->
-                        fun _oldUrl ->
-                          fun newUrl ->
-                            updater
-                              (fun [arity:2]latestComponentBag ->
-                                 fun _ ->
-                                   ((let currentActualPath =
-                                       Routes.hashOfUri newUrl in
-                                     let pathFromState =
-                                       Routes.stateToPath
-                                         latestComponentBag.state in
-                                     ((if currentActualPath == pathFromState
-                                       then None
-                                       else
-                                         dispatchEventless
-                                           (State.UriNavigated
-                                              currentActualPath)
-                                           latestComponentBag ())
-                                       [@res.ternary ]))
-                                   [@res.braces ])) ())[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
+  <Routes path=(Routes.stateToPath state) isHistorical=true onHashChange=((
+  fun [arity:3]_oldPath ->
+    fun _oldUrl ->
+      fun newUrl ->
+        updater
+          (fun [arity:2]latestComponentBag ->
+             fun _ ->
+               ((let currentActualPath = Routes.hashOfUri newUrl in
+                 let pathFromState =
+                   Routes.stateToPath latestComponentBag.state in
+                 ((if currentActualPath == pathFromState
+                   then None
+                   else
+                     dispatchEventless (State.UriNavigated currentActualPath)
+                       latestComponentBag ())
+                   [@res.ternary ]))
+               [@res.braces ])) ())
+  [@res.braces ]) />
 let z =
-  ((div
-      ~style:(ReactDOMRe.Style.make ~width ~height ~color ~backgroundColor
-                ~margin ~padding ~border ~borderColor ~someOtherAttribute ())
-      ~key:(string_of_int 1) ~children:[] ())
-  [@JSX ])
+  <div style=(ReactDOMRe.Style.make ~width ~height ~color ~backgroundColor
+                ~margin ~padding ~border ~borderColor ~someOtherAttribute ()) key=(
+  string_of_int 1) />
 let omega =
-  ((div
-      ~aList:[width;
+  <div aList=[width;
              height;
              color;
              backgroundColor;
@@ -164,339 +108,235 @@ let omega =
              padding;
              border;
              borderColor;
-             someOtherAttribute] ~key:(string_of_int 1) ~children:[] ())
-  [@JSX ])
+             someOtherAttribute] key=(string_of_int 1) />
 let someArray =
-  ((div
-      ~anArray:[|width;height;color;backgroundColor;margin;padding;border;borderColor;someOtherAttribute|]
-      ~key:(string_of_int 1) ~children:[] ())
-  [@JSX ])
+  <div anArray=[|width;height;color;backgroundColor;margin;padding;border;borderColor;someOtherAttribute|] key=(
+  string_of_int 1) />
 let tuples =
-  ((div
-      ~aTuple:(width, height, color, backgroundColor, margin, padding,
-                border, borderColor, someOtherAttribute, definitelyBreakere)
-      ~key:(string_of_int 1) ~children:[] ())
-  [@JSX ])
+  <div aTuple=(width, height, color, backgroundColor, margin, padding,
+                border, borderColor, someOtherAttribute, definitelyBreakere) key=(
+  string_of_int 1) />
 let icon =
-  ((Icon.createElement
-      ~name:((match state.volume with
-              | v when v < 0.1 -> {js|sound-off|js}
-              | v when v < 0.11 -> {js|sound-min|js}
-              | v when v < 0.51 -> {js|sound-med|js}
-              | _ -> {js|sound-max|js})[@res.braces ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((MessengerSharedPhotosAlbumViewPhotoReact.createElement
-      ?ref:((if foo#bar === baz
-             then Some (foooooooooooooooooooooooo setRefChild)
-             else None)[@res.ternary ]) ~key:(node#legacy_attachment_id)
-      ~children:[] ())
-  [@JSX ])
-let _ = ((Foo.createElement ~bar ~children:[] ())[@JSX ])
-let _ = ((Foo.createElement ?bar ~children:[] ())[@JSX ])
-let _ = ((Foo.createElement ?bar:Baz.bar ~children:[] ())[@JSX ])
-let x = ((div ~children:[] ())[@JSX ])
-let _ = ((div ~asd:1 ~children:[] ())[@JSX ])
-;;foo#bar #= ((bar ~children:[] ())[@JSX ])
-;;foo #= ((bar ~children:[] ())[@JSX ])
-;;foo #= ((bar ~children:[] ())[@JSX ])
-let x = [|((div ~children:[] ())[@JSX ])|]
-let z = ((div ~children:[] ())[@JSX ])
+  <Icon name=((match state.volume with
+               | v when v < 0.1 -> {js|sound-off|js}
+               | v when v < 0.11 -> {js|sound-min|js}
+               | v when v < 0.51 -> {js|sound-med|js}
+               | _ -> {js|sound-max|js})
+  [@res.braces ]) />
+let _ =
+  <MessengerSharedPhotosAlbumViewPhotoReact ref=?((if foo#bar === baz
+                                                   then
+                                                     Some
+                                                       (foooooooooooooooooooooooo
+                                                          setRefChild)
+                                                   else None)
+  [@res.ternary ]) key=(node#legacy_attachment_id) />
+let _ = <Foo bar />
+let _ = <Foo bar=?bar />
+let _ = <Foo bar=?Baz.bar />
+let x = <div />
+let _ = <div asd=1></div>
+;;foo#bar #= <bar />
+;;foo #= <bar />
+;;foo #= <bar />
+let x = [|<div />|]
+let z = <div />
 let z =
-  (((Button.createElement ~onClick:handleStaleClick ~children:[] ())[@JSX ]),
-    ((Button.createElement ~onClick:handleStaleClick ~children:[] ())
-    [@JSX ]))
-let y = [|((div ~children:[] ())[@JSX ]);((div ~children:[] ())[@JSX ])|]
+  (<Button onClick=handleStaleClick />, <Button onClick=handleStaleClick />)
+let y = [|<div />;<div />|]
 let y =
-  [|((Button.createElement ~onClick:handleStaleClick ~children:[] ())
-    [@JSX ]);((Button.createElement ~onClick:handleStaleClick ~children:[] ())
-    [@JSX ])|]
-let _ =
-  ((Description.createElement
-      ~term:((Text.createElement ~text:{js|Age|js} ~children:[] ())
-      [@res.braces ][@JSX ]) ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((Description.createElement
-      ~term:((Text.createElement ~text:{js|Age|js} ~children:[||] ())
-      [@res.braces ]) ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((Description.createElement
-      ~term:((Text.createElement ~text:{js|Age|js} ())[@res.braces ][@JSX ])
-      ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((Description.createElement
-      ~term:((Text.createElement ~superLongPunnedProp
-                ~anotherSuperLongOneCrazyLongThingHere ~text:{js|Age|js}
-                ~children:[] ())[@res.braces ][@JSX ]) ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((Foo.createElement
-      ~bar:((Baz.createElement ~superLongPunnedProp
-               ~anotherSuperLongOneCrazyLongThingHere ~children:[] ())
-      [@res.braces ][@JSX ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div ~children:[((span ~children:[str {js|hello|js}] ())[@JSX ])] ())
-  [@JSX ])
-let _ =
-  ((description ~term:((text ~text:{js|Age|js} ~children:[] ())
-      [@res.braces ][@JSX ]) ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((description ~term:((text ~text:{js|Age|js} ~children:[||] ())
-      [@res.braces ]) ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((description ~term:((text ~text:{js|Age|js} ~children:[||])
-      [@res.braces ][@JSX ]) ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((description ~term:((text ~text:{js|Age|js} ())[@res.braces ][@JSX ])
-      ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((description
-      ~term:((div ~superLongPunnedProp ~anotherSuperLongOneCrazyLongThingHere
-                ~text:{js|Age|js} ~children:[] ())[@res.braces ][@JSX ])
-      ~children:[child] ())
-  [@JSX ])
-let _ =
-  ((div ~onClick:((fun [arity:1]event -> handleChange event)[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div
-      ~onClick:((fun [arity:1]eventWithLongIdent ->
-                   handleChange eventWithLongIdent)[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div
-      ~onClick:((fun [arity:1]event -> ((Js.log event; handleChange event)
-                   [@res.braces ]))[@res.braces ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((StaticDiv.createElement
-      ~onClick:((fun [arity:5]foo ->
-                   fun bar ->
-                     fun baz ->
-                       fun lineBreak ->
-                         fun identifier ->
-                           ((doStuff foo bar baz; bar lineBreak identifier)
-                           [@res.braces ]))[@res.braces ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((AttrDiv.createElement
-      ~onClick:((fun [arity:1]event -> handleChange event)
-      [@res.braces ][@bar ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((AttrDiv.createElement
-      ~onClick:((fun [arity:1]eventLongIdentifier ->
-                   handleChange eventLongIdentifier)[@res.braces ][@bar ])
-      ~children:[] ())
-  [@JSX ])
-let _ =
-  ((StaticDivNamed.createElement
-      ~onClick:((fun [arity:6]~foo ->
-                   fun ~bar ->
-                     fun ~baz ->
-                       fun ~lineBreak ->
-                         fun ~identifier ->
-                           fun () -> bar lineBreak identifier)[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div
-      ~onClick:((fun [arity:1]e -> (((doStuff (); bar foo)
-                   [@res.braces ]) : event))[@res.braces ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div
-      ~onClick:((fun [arity:2]e ->
+  [|<Button onClick=handleStaleClick />;<Button onClick=handleStaleClick />|]
+let _ = <Description term=((<Text text={js|Age|js} />)
+  [@res.braces ])>child</Description>
+let _ =
+  <Description term=((Text.createElement ~text:{js|Age|js} ~children:[||] ())
+  [@res.braces ])>child</Description>
+let _ = <Description term=((Text.createElement ~text:{js|Age|js} ())
+  [@res.braces ][@JSX ])>child</Description>
+let _ =
+  <Description term=((<Text superLongPunnedProp anotherSuperLongOneCrazyLongThingHere text={js|Age|js} />)
+  [@res.braces ])>child</Description>
+let _ =
+  <Foo bar=((<Baz superLongPunnedProp anotherSuperLongOneCrazyLongThingHere />)
+  [@res.braces ]) />
+let _ = <div><span>(str {js|hello|js})</span></div>
+let _ = <description term=((<text text={js|Age|js} />)
+  [@res.braces ])>child</description>
+let _ = <description term=((text ~text:{js|Age|js} ~children:[||] ())
+  [@res.braces ])>child</description>
+let _ = <description term=((text ~text:{js|Age|js} ~children:[||])
+  [@res.braces ][@JSX ])>child</description>
+let _ = <description term=((text ~text:{js|Age|js} ())
+  [@res.braces ][@JSX ])>child</description>
+let _ =
+  <description term=((<div superLongPunnedProp anotherSuperLongOneCrazyLongThingHere text={js|Age|js} />)
+  [@res.braces ])>child</description>
+let _ = <div onClick=((fun [arity:1]event -> handleChange event)
+  [@res.braces ]) />
+let _ =
+  <div onClick=((fun [arity:1]eventWithLongIdent ->
+                   handleChange eventWithLongIdent)
+  [@res.braces ]) />
+let _ =
+  <div onClick=((fun [arity:1]event -> ((Js.log event; handleChange event)
+                   [@res.braces ]))
+  [@res.braces ]) />
+let _ =
+  <StaticDiv onClick=((fun [arity:5]foo ->
+                         fun bar ->
+                           fun baz ->
+                             fun lineBreak ->
+                               fun identifier ->
+                                 ((doStuff foo bar baz;
+                                   bar lineBreak identifier)
+                                 [@res.braces ]))
+  [@res.braces ]) />
+let _ = <AttrDiv onClick=((fun [arity:1]event -> handleChange event)
+  [@res.braces ][@bar ]) />
+let _ =
+  <AttrDiv onClick=((fun [arity:1]eventLongIdentifier ->
+                       handleChange eventLongIdentifier)
+  [@res.braces ][@bar ]) />
+let _ =
+  <StaticDivNamed onClick=((fun [arity:6]~foo ->
+                              fun ~bar ->
+                                fun ~baz ->
+                                  fun ~lineBreak ->
+                                    fun ~identifier ->
+                                      fun () -> bar lineBreak identifier)
+  [@res.braces ]) />
+let _ =
+  <div onClick=((fun [arity:1]e -> (((doStuff (); bar foo)
+                   [@res.braces ]) : event))
+  [@res.braces ]) />
+let _ =
+  <div onClick=((fun [arity:2]e ->
                    fun e2 -> (((doStuff (); bar foo)[@res.braces ]) : event))
-      [@res.braces ]) ~children:[] ())
-  [@JSX ])
+  [@res.braces ]) />
 let _ =
-  ((div
-      ~onClick:((fun [arity:5]foo ->
+  <div onClick=((fun [arity:5]foo ->
                    fun bar ->
                      fun baz ->
                        fun superLongIdent ->
                          fun breakLine -> (((doStuff (); bar foo)
                            [@res.braces ]) : (event * event2 * event3 *
                                                event4 * event5)))
-      [@res.braces ]) ~children:[] ())
-  [@JSX ])
+  [@res.braces ]) />
 let _ =
-  ((div
-      ~onClick:((fun [arity:5]foo ->
+  <div onClick=((fun [arity:5]foo ->
                    fun bar ->
                      fun baz ->
                        fun superLongIdent ->
                          fun breakLine ->
                            (doStuff () : (event * event2 * event3 * event4 *
-                                           event5)))[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
+                                           event5)))
+  [@res.braces ]) />
 let _ =
-  ((div
-      ~children:[(((match color with
-                    | Black -> ReasonReact.string {js|black|js}
-                    | Red -> ReasonReact.string {js|red|js}))
-                [@res.braces ])] ())
-  [@JSX ])
+  <div>((match color with
+         | Black -> ReasonReact.string {js|black|js}
+         | Red -> ReasonReact.string {js|red|js})
+  [@res.braces ])</div>
 let _ =
-  ((div
-      ~style:((ReactDOMRe.Style.make ~width:{js|20px|js} ~height:{js|20px|js}
+  <div style=((ReactDOMRe.Style.make ~width:{js|20px|js} ~height:{js|20px|js}
                  ~borderRadius:{js|100%|js} ~backgroundColor:{js|red|js})
-      [@res.braces ][@foo ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((Animated.createElement ~initialValue:0.0 ~value
-      ~children:((ReactDOMRe.Style.make ~width:{js|20px|js}
-                    ~height:{js|20px|js} ~borderRadius:{js|100%|js}
-                    ~backgroundColor:{js|red|js})[@res.braces ]) ())
-  [@JSX ])
-let _ =
-  ((Animated.createElement ~initialValue:0.0 ~value
-      ~children:((fun [arity:1]value ->
-                    ((div
-                        ~style:((ReactDOMRe.Style.make ~width:{js|20px|js}
-                                   ~height:{js|20px|js}
-                                   ~borderRadius:{js|100%|js}
-                                   ~backgroundColor:{js|red|js})
-                        [@res.braces ]) ~children:[] ())
-                    [@JSX ]))[@res.braces ]) ())
-  [@JSX ])
-let _ =
-  ((Animated.createElement ~initialValue:0.0 ~value
-      ~children:((fun [arity:1]value ->
-                    (((div
-                         ~style:((ReactDOMRe.Style.make ~width:{js|20px|js}
-                                    ~height:{js|20px|js}
-                                    ~borderRadius:{js|100%|js}
-                                    ~backgroundColor:{js|red|js})
-                         [@res.braces ]) ~children:[] ())
-                    [@JSX ]) : ReasonReact.element))[@res.braces ]) ())
-  [@JSX ])
-let _ =
-  ((Animated.createElement ~initialValue:0.0 ~value
-      ~children:((fun [arity:1]value ->
-                    ((div
-                        ~style:((ReactDOMRe.Style.make ~width:{js|20px|js}
-                                   ~height:{js|20px|js}
-                                   ~borderRadius:{js|100%|js}
-                                   ~backgroundColor:{js|red|js})
-                        [@res.braces ]) ~children:[] ())
-                    [@res.braces ][@JSX ]))[@res.braces ][@foo ]) ())
-  [@JSX ])
-let _ =
-  ((Animated.createElement ~initialValue:0.0 ~value
-      ~children:((fun [arity:1]value ->
-                    ((let width = {js|20px|js} in
-                      let height = {js|20px|js} in
-                      ((div
-                          ~style:((ReactDOMRe.Style.make ~width ~height
-                                     ~borderRadius:{js|100%|js}
-                                     ~backgroundColor:{js|red|js})
-                          [@res.braces ]) ~children:[] ())
-                        [@JSX ]))
-                    [@res.braces ]))[@res.braces ]) ())
-  [@JSX ])
-let _ =
-  ((div ~callback:((reduce (fun [arity:1]() -> not state))[@res.braces ])
-      ~children:[] ())
-  [@JSX ])
-let _ =
-  ((button ?id ~className:((Cn.make [|{js|button|js};{js|is-fullwidth|js}|])
-      [@res.braces ]) ~onClick
-      ~children:[((ste {js|Submit|js})[@res.braces ])] ())
-  [@JSX ])
-let _ =
-  ((button ?id ~className:((Cn.make [{js|button|js}; {js|is-fullwidth|js}])
-      [@res.braces ]) ~onClick
-      ~children:[((ste {js|Submit|js})[@res.braces ])] ())
-  [@JSX ])
-let _ =
-  ((button ?id ~className:((Cn.make ({js|button|js}, {js|is-fullwidth|js}))
-      [@res.braces ]) ~onClick
-      ~children:[((ste {js|Submit|js})[@res.braces ])] ())
-  [@JSX ])
-let _ =
-  ((button ?id ~className:((Cn.make { a = b })[@res.braces ]) ~onClick
-      ~children:[((ste {js|Submit|js})[@res.braces ])] ())
-  [@JSX ])
-let _ =
-  ((X.createElement ~y:((z -> (Belt.Option.getWithDefault {js||js}))
-      [@res.braces ]) ~children:[] ())
-  [@JSX ])
-let _ =
-  ((div ~style:((getStyle ())[@res.braces ])
-      ~children:[((ReasonReact.string {js|BugTest|js})[@res.braces ])] ())
-  [@JSX ])
-let _ =
-  ((div
-      ~children:[(((let left = limit -> Int.toString in
-                    (((((({js||js})[@res.template ]) ++ left)
-                        [@res.template ]) ++ (({js| characters left|js})
-                        [@res.template ]))
-                      [@res.template ]) -> React.string))
-                [@res.braces ])] ())
-  [@JSX ])
-let _ =
-  ((View.createElement ~style:(styles#backgroundImageWrapper)
-      ~children:[(((let uri = {js|/images/header-background.png|js} in
-                    ((Image.createElement ~resizeMode:Contain
-                        ~style:(styles#backgroundImage) ~uri ~children:[] ())
-                      [@JSX ])))
-                [@res.braces ])] ())
-  [@JSX ])
-;;((div
-      ~children:[((ReasonReact.array
-                     (Array.of_list
-                        (List.map
-                           (fun [arity:1]possibleGradeValue ->
-                              ((option
-                                  ~key:((string_of_int possibleGradeValue)
-                                  [@res.braces ])
-                                  ~value:((string_of_int possibleGradeValue)
-                                  [@res.braces ])
-                                  ~children:[((str
-                                                 (string_of_int
-                                                    possibleGradeValue))
-                                            [@res.braces ])] ())
-                              [@JSX ]))
-                           (List.filter
-                              (fun [arity:1]g -> g <= state.maxGrade)
-                              possibleGradeValues))))
-                [@res.braces ])] ())[@JSX ])
-;;((div ~children:[((Js.log (a <= 10))[@res.braces ])] ())[@JSX ])
-;;((div
-      ~children:[((div ~children:[((Js.log (a <= 10))[@res.braces ])] ())
-                [@JSX ])] ())[@JSX ])
-;;((div
-      ~children:[((div ~onClick:((fun [arity:1]_ -> Js.log (a <= 10))
-                     [@res.braces ])
-                     ~children:[((div
-                                    ~children:[((Js.log (a <= 10))
-                                              [@res.braces ])] ())
-                               [@JSX ])] ())
-                [@JSX ])] ())[@JSX ])
-;;((div ~children:element ())[@JSX ])
-;;((div ~children:((fun [arity:1]a -> 1)[@res.braces ]) ())[@JSX ])
-;;((div ~children:((span ~children:[] ())[@JSX ]) ())[@JSX ])
-;;((div ~children:[|a|] ())[@JSX ])
-;;((div ~children:(1, 2) ())[@JSX ])
-;;((div ~children:((array -> f)[@res.braces ]) ())[@JSX ])
+  [@res.braces ][@foo ]) />
+let _ =
+  <Animated initialValue=0.0 value>((ReactDOMRe.Style.make
+                                       ~width:{js|20px|js}
+                                       ~height:{js|20px|js}
+                                       ~borderRadius:{js|100%|js}
+                                       ~backgroundColor:{js|red|js})
+  [@res.braces ])</Animated>
+let _ =
+  <Animated initialValue=0.0 value>((fun [arity:1]value ->
+                                       <div style=((ReactDOMRe.Style.make
+                                                      ~width:{js|20px|js}
+                                                      ~height:{js|20px|js}
+                                                      ~borderRadius:{js|100%|js}
+                                                      ~backgroundColor:{js|red|js})
+                                       [@res.braces ]) />)
+  [@res.braces ])</Animated>
+let _ =
+  <Animated initialValue=0.0 value>((fun [arity:1]value ->
+                                       (<div style=((ReactDOMRe.Style.make
+                                                       ~width:{js|20px|js}
+                                                       ~height:{js|20px|js}
+                                                       ~borderRadius:{js|100%|js}
+                                                       ~backgroundColor:{js|red|js})
+                                       [@res.braces ]) /> : ReasonReact.element))
+  [@res.braces ])</Animated>
+let _ =
+  <Animated initialValue=0.0 value>((fun [arity:1]value ->
+                                       ((<div style=((ReactDOMRe.Style.make
+                                                        ~width:{js|20px|js}
+                                                        ~height:{js|20px|js}
+                                                        ~borderRadius:{js|100%|js}
+                                                        ~backgroundColor:{js|red|js})
+                                       [@res.braces ]) />)[@res.braces ]))
+  [@res.braces ][@foo ])</Animated>
+let _ =
+  <Animated initialValue=0.0 value>((fun [arity:1]value ->
+                                       ((let width = {js|20px|js} in
+                                         let height = {js|20px|js} in
+                                         <div style=((ReactDOMRe.Style.make
+                                                        ~width ~height
+                                                        ~borderRadius:{js|100%|js}
+                                                        ~backgroundColor:{js|red|js})
+                                           [@res.braces ]) />)
+                                       [@res.braces ]))
+  [@res.braces ])</Animated>
+let _ = <div callback=((reduce (fun [arity:1]() -> not state))
+  [@res.braces ]) />
+let _ =
+  <button ?id className=((Cn.make [|{js|button|js};{js|is-fullwidth|js}|])
+  [@res.braces ]) onClick>((ste {js|Submit|js})[@res.braces ])</button>
+let _ =
+  <button ?id className=((Cn.make [{js|button|js}; {js|is-fullwidth|js}])
+  [@res.braces ]) onClick>((ste {js|Submit|js})[@res.braces ])</button>
+let _ =
+  <button ?id className=((Cn.make ({js|button|js}, {js|is-fullwidth|js}))
+  [@res.braces ]) onClick>((ste {js|Submit|js})[@res.braces ])</button>
+let _ = <button ?id className=((Cn.make { a = b })
+  [@res.braces ]) onClick>((ste {js|Submit|js})[@res.braces ])</button>
+let _ = <X y=((z -> (Belt.Option.getWithDefault {js||js}))[@res.braces ]) />
+let _ = <div style=((getStyle ())
+  [@res.braces ])>((ReasonReact.string {js|BugTest|js})[@res.braces ])</div>
+let _ =
+  <div>((let left = limit -> Int.toString in
+         (((((({js||js})[@res.template ]) ++ left)[@res.template ]) ++
+             (({js| characters left|js})[@res.template ]))
+           [@res.template ]) -> React.string)
+  [@res.braces ])</div>
+let _ =
+  <View style=(styles#backgroundImageWrapper)>((let uri =
+                                                  {js|/images/header-background.png|js} in
+                                                <Image resizeMode=Contain style=(
+                                                  styles#backgroundImage) uri />)
+  [@res.braces ])</View>
+;;<div>((ReasonReact.array
+           (Array.of_list
+              (List.map
+                 (fun [arity:1]possibleGradeValue ->
+                    <option key=((string_of_int possibleGradeValue)
+                    [@res.braces ]) value=((string_of_int possibleGradeValue)
+                    [@res.braces ])>((str (string_of_int possibleGradeValue))
+                    [@res.braces ])</option>)
+                 (List.filter (fun [arity:1]g -> g <= state.maxGrade)
+                    possibleGradeValues))))[@res.braces ])</div>
+;;<div>((Js.log (a <= 10))[@res.braces ])</div>
+;;<div><div>((Js.log (a <= 10))[@res.braces ])</div></div>
+;;<div><div onClick=((fun [arity:1]_ -> Js.log (a <= 10))
+  [@res.braces ])><div>((Js.log (a <= 10))[@res.braces ])</div></div></div>
+;;<div>element</div>
+;;<div>((fun [arity:1]a -> 1)[@res.braces ])</div>
+;;<div><span /></div>
+;;<div>[|a|]</div>
+;;<div>(1, 2)</div>
+;;<div>((array -> f)[@res.braces ])</div>
 ;;<>element</>
 ;;<>((fun [arity:1]a -> 1)[@res.braces ])</>
-;;<>((span ~children:[] ())[@JSX ])</>
+;;<><span /></>
 ;;<>[|a|]</>
 ;;<>(1, 2)</>
 ;;<>((array -> f)[@res.braces ])</>
-let _ = ((A.createElement ~x:{js|y|js} ~_spreadProps:str ~children:[] ())
-  [@JSX ])
\ No newline at end of file
+let _ = <A x={js|y|js} {...str} />
\ No newline at end of file
diff --git a/tests/syntax_tests/data/parsing/grammar/expressions/expected/parenthesized.res.txt b/tests/syntax_tests/data/parsing/grammar/expressions/expected/parenthesized.res.txt
index 9640bcb5fe..6c21a3bff9 100644
--- a/tests/syntax_tests/data/parsing/grammar/expressions/expected/parenthesized.res.txt
+++ b/tests/syntax_tests/data/parsing/grammar/expressions/expected/parenthesized.res.txt
@@ -16,7 +16,7 @@ let aTuple = (1, 2)
 let aRecord = { name = {js|steve|js}; age = 30 }
 let blockExpression = ((let a = 1 in let b = 2 in a + b)[@res.braces ])
 let assertSmthing = assert true
-let jsx = ((div ~className:{js|cx|js} ~children:[foo] ())[@JSX ])
+let jsx = <div className={js|cx|js}>foo</div>
 let ifExpr = if true then Js.log true else Js.log false
 let forExpr = for p = 0 to 10 do () done
 let whileExpr = while true do doSomeImperativeThing () done
diff --git a/tests/syntax_tests/data/parsing/infiniteLoops/expected/jsxChildren.res.txt b/tests/syntax_tests/data/parsing/infiniteLoops/expected/jsxChildren.res.txt
index 2aedc083a2..bc2fbd3a60 100644
--- a/tests/syntax_tests/data/parsing/infiniteLoops/expected/jsxChildren.res.txt
+++ b/tests/syntax_tests/data/parsing/infiniteLoops/expected/jsxChildren.res.txt
@@ -20,7 +20,7 @@
 
 type nonrec action =
   | AddUser 
-;;((string ~children:[] ())[@JSX ])
+;;<string></string>
 let (a : action) = AddUser {js|test|js}
 ;;etype
 ;;s = { x = ((list < i) > ([%rescript.exprhole ])) }
\ No newline at end of file
diff --git a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
index 5df8ca4e5a..0d15fd2c54 100644
--- a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
@@ -333,7 +333,9 @@ module App = {
   amount={
     // ->BN.new_("86400")
     // There are 86400 seconds in a day.
-    amount->BN.div(BN.new_("86400"))->BN.toString
+    amount
+    ->BN.div(BN.new_("86400"))
+    ->BN.toString
   }
 />
 
@@ -351,7 +353,6 @@ module App = {
     // comment
     content
   }
-
   {
     // comment
     if condition() {
@@ -472,7 +473,6 @@ let x =
       world()
       world()
     }
-
     {
       hello()
       hello()
@@ -489,7 +489,6 @@ let x =
         ()
       }}
     />
-
     // Comment 2
 
     <span
@@ -505,7 +504,6 @@ let x =
           ()
         }}
       />
-
       // Comment
       <span
         id="2-2"
@@ -514,7 +512,6 @@ let x =
           ()
         }}
       />
-
       <span id="2-3" />
     </span>
     <span

From 8373814492f204202b59c163cf6209ab6ab4c878 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:39:52 +0200
Subject: [PATCH 84/99] Update mapping test results

---
 .../ast-mapping/expected/JSXElements.res.txt  | 14 +++++++++++--
 .../ast-mapping/expected/JSXFragments.res.txt | 14 +++++++++++--
 .../data/ppx/react/expected/fragment.res.txt  | 21 ++++++++++++++++---
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/tests/syntax_tests/data/ast-mapping/expected/JSXElements.res.txt b/tests/syntax_tests/data/ast-mapping/expected/JSXElements.res.txt
index f151681291..b09e877523 100644
--- a/tests/syntax_tests/data/ast-mapping/expected/JSXElements.res.txt
+++ b/tests/syntax_tests/data/ast-mapping/expected/JSXElements.res.txt
@@ -2,9 +2,19 @@ let emptyUnary = ReactDOM.jsx("input", {})
 
 let emptyNonunary = ReactDOM.jsx("div", {})
 
-let emptyUnaryWithAttributes = ReactDOM.jsx("input", {type_: "text"})
+let emptyUnaryWithAttributes = ReactDOM.jsx(
+  "input",
+  {
+    type_: "text",
+  },
+)
 
-let emptyNonunaryWithAttributes = ReactDOM.jsx("div", {className: "container"})
+let emptyNonunaryWithAttributes = ReactDOM.jsx(
+  "div",
+  {
+    className: "container",
+  },
+)
 
 let elementWithChildren = ReactDOM.jsxs(
   "div",
diff --git a/tests/syntax_tests/data/ast-mapping/expected/JSXFragments.res.txt b/tests/syntax_tests/data/ast-mapping/expected/JSXFragments.res.txt
index 6ed9d65c47..1762c37f26 100644
--- a/tests/syntax_tests/data/ast-mapping/expected/JSXFragments.res.txt
+++ b/tests/syntax_tests/data/ast-mapping/expected/JSXFragments.res.txt
@@ -1,6 +1,11 @@
 let empty = React.jsx(React.jsxFragment, {})
 
-let fragmentWithBracedExpresssion = React.jsx(React.jsxFragment, {children: {React.int(1 + 2)}})
+let fragmentWithBracedExpresssion = React.jsx(
+  React.jsxFragment,
+  {
+    children: {React.int(1 + 2)},
+  },
+)
 
 let fragmentWithJSXElements = React.jsxs(
   React.jsxFragment,
@@ -18,7 +23,12 @@ let nestedFragments = React.jsxs(
     children: React.array([
       ReactDOM.jsx("h1", {children: ?ReactDOM.someElement({React.string("Hi")})}),
       ReactDOM.jsx("p", {children: ?ReactDOM.someElement({React.string("Hello")})}),
-      React.jsx(React.jsxFragment, {children: {React.string("Bye")}}),
+      React.jsx(
+        React.jsxFragment,
+        {
+          children: {React.string("Bye")},
+        },
+      ),
     ]),
   },
 )
diff --git a/tests/syntax_tests/data/ppx/react/expected/fragment.res.txt b/tests/syntax_tests/data/ppx/react/expected/fragment.res.txt
index 80c3bb1d86..225a99a4c0 100644
--- a/tests/syntax_tests/data/ppx/react/expected/fragment.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/fragment.res.txt
@@ -1,14 +1,29 @@
 @@jsxConfig({version: 4})
 
 let _ = React.jsx(React.jsxFragment, {})
-let _ = React.jsx(React.jsxFragment, {children: ReactDOM.jsx("div", {})})
+let _ = React.jsx(
+  React.jsxFragment,
+  {
+    children: ReactDOM.jsx("div", {}),
+  },
+)
 let _ = React.jsxs(
   React.jsxFragment,
   {children: React.array([ReactDOM.jsx("div", {}), ReactDOM.jsx("div", {})])},
 )
-let _ = React.jsx(React.jsxFragment, {children: React.jsx(React.jsxFragment, {})})
+let _ = React.jsx(
+  React.jsxFragment,
+  {
+    children: React.jsx(React.jsxFragment, {}),
+  },
+)
 let _ = React.jsx(Z.make, {})
-let _ = React.jsx(Z.make, {children: ReactDOM.jsx("div", {})})
+let _ = React.jsx(
+  Z.make,
+  {
+    children: ReactDOM.jsx("div", {}),
+  },
+)
 let _ = React.jsx(Z.make, {a: "a", children: ReactDOM.jsx("div", {})})
 let _ = React.jsxs(
   Z.make,

From d92d7c534d51174f879087fde03758c60aecc378 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:49:05 +0200
Subject: [PATCH 85/99] comment after prop name

---
 compiler/syntax/src/res_printer.ml | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 239b24176f..d9e74e1568 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4661,6 +4661,9 @@ and print_jsx_prop ~state prop cmt_tbl =
       if is_optional then Doc.concat [Doc.question; print_ident_like name.txt]
       else print_ident_like name.txt
     | JSXPropValue (name, is_optional, value) ->
+      let has_trailing_comment_after_name =
+        has_trailing_single_line_comment cmt_tbl name.loc
+      in
       let value_doc =
         let leading_line_comment_present =
           (* If the value expression has braces, these will be representend as an attribute containing the brace range *)
@@ -4687,9 +4690,10 @@ and print_jsx_prop ~state prop cmt_tbl =
       let doc =
         Doc.concat
           [
-            print_ident_like name.txt;
+            print_comments (print_ident_like name.txt) cmt_tbl name.loc;
             Doc.equal;
             (if is_optional then Doc.question else Doc.nil);
+            (if has_trailing_comment_after_name then Doc.hard_line else Doc.nil);
             Doc.group value_doc;
           ]
       in

From d9b59ddacd72dfc12a98bfe8a7fd3367beff0402 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:54:07 +0200
Subject: [PATCH 86/99] For them older camls

---
 compiler/syntax/src/res_printer.ml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index d9e74e1568..71ec54c57d 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4377,7 +4377,7 @@ and print_jsx_unary_tag ~state tag_name props expr_loc cmt_tbl =
   let name = print_jsx_name tag_name in
   let formatted_props = print_jsx_props ~state props cmt_tbl in
   let tag_has_trailing_comment = has_trailing_comments cmt_tbl tag_name.loc in
-  let tag_has_no_props = List.is_empty props in
+  let tag_has_no_props = List.length props == 0 in
   let closing_token_loc =
     ParsetreeViewer.unary_element_closing_token expr_loc
   in

From 4e160f3442e5b76775fd0e470f23b9c72dda8eaa Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Mon, 31 Mar 2025 16:57:16 +0200
Subject: [PATCH 87/99] More older caml stuff

---
 compiler/syntax/src/res_printer.ml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 71ec54c57d..cf5d1aca12 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4506,7 +4506,7 @@ and print_jsx_container_tag ~state tag_name
                 print_comments
                   (Doc.concat [Doc.less_than; name])
                   cmt_tbl tag_name.Asttypes.loc;
-                (if List.is_empty formatted_props then Doc.nil
+                (if List.length formatted_props == 0 then Doc.nil
                  else
                    Doc.indent
                      (Doc.concat

From 93eb5afca8310c9cda120982b2c1f2c289b98c86 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 11:07:51 +0200
Subject: [PATCH 88/99] Remove unreached code in typecore

---
 compiler/ml/typecore.ml | 23 +++--------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/compiler/ml/typecore.ml b/compiler/ml/typecore.ml
index 0e596dc740..c9987ebd12 100644
--- a/compiler/ml/typecore.ml
+++ b/compiler/ml/typecore.ml
@@ -178,18 +178,8 @@ let iter_expression f e =
       expr e;
       module_expr me
     | Pexp_pack me -> module_expr me
-    | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
-      iter_jsx_children children
-    | Pexp_jsx_element (Jsx_unary_element {jsx_unary_element_props = props}) ->
-      iter_jsx_props props
-    | Pexp_jsx_element
-        (Jsx_container_element
-           {
-             jsx_container_element_props = props;
-             jsx_container_element_children = children;
-           }) ->
-      iter_jsx_props props;
-      iter_jsx_children children
+    | Pexp_jsx_element _ ->
+      failwith "Pexp_jsx_element should be transformed at this point."
   and case {pc_lhs = _; pc_guard; pc_rhs} =
     may expr pc_guard;
     expr pc_rhs
@@ -213,14 +203,7 @@ let iter_expression f e =
     | Pstr_include {pincl_mod = me} | Pstr_module {pmb_expr = me} ->
       module_expr me
     | Pstr_recmodule l -> List.iter (fun x -> module_expr x.pmb_expr) l
-  and iter_jsx_children = function
-    | JSXChildrenSpreading e -> expr e
-    | JSXChildrenItems el -> List.iter expr el
-  and iter_jsx_prop = function
-    | JSXPropPunning _ -> ()
-    | JSXPropValue (_, _, e) -> expr e
-    | JSXPropSpreading (_, e) -> expr e
-  and iter_jsx_props props = List.iter iter_jsx_prop props in
+  in
 
   expr e
 

From 6152b8304411b2c936c073ae2a048351c40de3c2 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 11:15:37 +0200
Subject: [PATCH 89/99] Remove leftover comments

---
 compiler/syntax/src/res_core.ml | 37 +--------------------------------
 1 file changed, 1 insertion(+), 36 deletions(-)

diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index fdcc77e934..828a23001b 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -754,20 +754,8 @@ let verify_jsx_opening_closing_name p
     | Uident _ -> (parse_module_long_ident ~lowercase:true p).txt
     | _ -> Longident.Lident ""
   in
-  (* match name_longident.Parsetree.pexp_desc with
-  | Pexp_ident opening_ident -> *)
-  (* let opening =
-    let without_create_element =
-      Longident.flatten name_longident.txt
-      (* |> List.filter (fun s -> s <> "createElement") *)
-    in
-    match Longident.unflatten without_create_element with
-    | Some li -> li
-    | None -> Longident.Lident ""
-  in *)
   let opening = name_longident.txt in
   opening = closing
-(* | _ -> assert false *)
 
 let string_of_longident (longindent : Longident.t Location.loc) =
   Longident.flatten longindent.txt
@@ -2562,13 +2550,7 @@ and parse_let_bindings ~attrs ~start_pos p =
   in
   (rec_flag, loop p [first])
 
-(*
- * div -> div
- * Foo -> Foo.createElement
- * Foo.Bar -> Foo.Bar.createElement
- *)
 and parse_jsx_name p : Longident.t Location.loc =
-  (* let longident = *)
   match p.Parser.token with
   | Lident ident ->
     let ident_start = p.start_pos in
@@ -2579,9 +2561,6 @@ and parse_jsx_name p : Longident.t Location.loc =
   | Uident _ ->
     let longident = parse_module_long_ident ~lowercase:true p in
     longident
-    (* Location.mkloc
-        (Longident.Ldot (longident.txt, "createElement")) (* TODO: I kinda wanna drop the createElement here as that is not what the user typed *)
-        longident.loc *)
   | _ ->
     let msg =
       "A jsx name must be a lowercase or uppercase name, like: div in <div /> \
@@ -2589,8 +2568,6 @@ and parse_jsx_name p : Longident.t Location.loc =
     in
     Parser.err p (Diagnostics.message msg);
     Location.mknoloc (Longident.Lident "_")
-(* in
-  Ast_helper.Exp.ident ~loc:longident.loc longident *)
 
 and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
     ~start_pos p : Parsetree.expression =
@@ -2599,22 +2576,17 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
   match p.Parser.token with
   | Forwardslash ->
     (* <foo a=b /> *)
-    (* let children_start_pos = p.Parser.start_pos in *)
     Parser.next p;
-    (* let children_end_pos = p.Parser.start_pos in *)
     Scanner.pop_mode p.scanner Jsx;
     let jsx_end_pos = p.end_pos in
     Parser.expect GreaterThan p;
     let loc = mk_loc start_pos jsx_end_pos in
-    (* Ast_helper.Exp.make_list_expression loc [] None no children *)
     Ast_helper.Exp.jsx_unary_element ~loc name jsx_props
   | GreaterThan -> (
     (* <foo a=b> bar </foo> *)
-    (* let children_start_pos = p.Parser.start_pos in *)
     let opening_tag_end = p.Parser.start_pos in
     Parser.next p;
     let children = parse_jsx_children p in
-    (* let children_end_pos = p.Parser.start_pos in *)
     let closing_tag_start =
       match p.token with
       | LessThanSlash ->
@@ -2650,11 +2622,6 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
 
       Ast_helper.Exp.jsx_container_element ~loc name jsx_props opening_tag_end
         children closing_tag
-      (*  end_tag_name  *)
-      (* let loc = mk_loc children_start_pos children_end_pos in
-      match (spread, children) with
-      | true, child :: _ -> child
-      | _ -> Ast_helper.Exp.make_list_expression loc children None) *)
     | token ->
       Scanner.pop_mode p.scanner Jsx;
       let () =
@@ -2674,9 +2641,7 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
       in
       Ast_helper.Exp.jsx_container_element
         ~loc:(mk_loc start_pos p.prev_end_pos)
-        name jsx_props opening_tag_end children None
-    (* Ast_helper.Exp.make_list_expression (mk_loc p.start_pos p.end_pos) [] None *)
-    )
+        name jsx_props opening_tag_end children None)
   | token ->
     Scanner.pop_mode p.scanner Jsx;
     Parser.err p (Diagnostics.unexpected token p.breadcrumbs);

From 2126fc9c6261ef1000d79d404a38d0c5b86e02ee Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 11:43:28 +0200
Subject: [PATCH 90/99] Preserve lines between jsx elements

---
 compiler/syntax/src/res_printer.ml            | 36 ++++++++++++++++++-
 .../data/printer/expr/expected/jsx.res.txt    |  6 ++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index cf5d1aca12..0c9a71b59f 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -4649,7 +4649,41 @@ and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
   | JSXChildrenSpreading child -> Doc.concat [Doc.dotdotdot; print_expr child]
   | JSXChildrenItems [] -> Doc.nil
   | JSXChildrenItems children ->
-    children |> List.map print_expr |> Doc.join ~sep
+    let get_loc (expr : Parsetree.expression) =
+      let braces =
+        expr.pexp_attributes
+        |> List.find_map (fun (attr, _) ->
+               match attr with
+               | {Location.txt = "res.braces"; loc} -> Some loc
+               | _ -> None)
+      in
+      match braces with
+      | None -> expr.pexp_loc
+      | Some loc -> loc
+    in
+
+    let rec visit acc children =
+      match children with
+      | [] -> acc
+      | [x] -> Doc.concat [acc; print_expr x]
+      | x :: (y :: _ as rest) ->
+        let end_line_x =
+          let loc = get_loc x in
+          loc.loc_end.pos_lnum
+        in
+        let start_line_y =
+          let loc = get_loc y in
+          loc.loc_start.pos_lnum
+        in
+        (* If there are lines between the jsx elements, we preserve at least one line *)
+        if end_line_x + 1 < start_line_y then
+          let doc = Doc.concat [print_expr x; sep; Doc.hard_line] in
+          visit (Doc.concat [acc; doc]) rest
+        else
+          let doc = Doc.concat [print_expr x; sep] in
+          visit (Doc.concat [acc; doc]) rest
+    in
+    visit Doc.nil children
 
 and print_jsx_prop ~state prop cmt_tbl =
   let open Parsetree in
diff --git a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
index 0d15fd2c54..23f93e05e7 100644
--- a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
@@ -353,6 +353,7 @@ module App = {
     // comment
     content
   }
+
   {
     // comment
     if condition() {
@@ -473,6 +474,7 @@ let x =
       world()
       world()
     }
+
     {
       hello()
       hello()
@@ -481,6 +483,7 @@ let x =
       world()
       world()
     }
+
     // another test
     <span
       id="1"
@@ -489,6 +492,7 @@ let x =
         ()
       }}
     />
+
     // Comment 2
 
     <span
@@ -504,6 +508,7 @@ let x =
           ()
         }}
       />
+
       // Comment
       <span
         id="2-2"
@@ -512,6 +517,7 @@ let x =
           ()
         }}
       />
+
       <span id="2-3" />
     </span>
     <span

From 645b244f29c281b5869af64506289e90f1456d31 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 13:34:27 +0200
Subject: [PATCH 91/99] Preserve newline between jsx children, streamline jsx
 fragment children printing

---
 compiler/syntax/src/res_core.ml               |   2 +-
 compiler/syntax/src/res_printer.ml            | 116 +++++++-----------
 .../data/printer/expr/expected/jsx.res.txt    |  31 ++++-
 tests/syntax_tests/data/printer/expr/jsx.res  |  26 ++++
 4 files changed, 100 insertions(+), 75 deletions(-)

diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index 828a23001b..da5ea01af3 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2609,7 +2609,7 @@ and parse_jsx_opening_or_self_closing_element (* start of the opening < *)
       Scanner.pop_mode p.scanner Jsx;
       let closing_tag_end = p.start_pos in
       Parser.expect GreaterThan p;
-      let loc = mk_loc start_pos p.Parser.start_pos in
+      let loc = mk_loc start_pos p.prev_end_pos in
       let closing_tag =
         closing_tag_start
         |> Option.map (fun closing_tag_start ->
diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index 0c9a71b59f..bfa22dd34c 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -50,6 +50,12 @@ let has_leading_line_comment tbl loc =
   | Some comment -> Comment.is_single_line_comment comment
   | None -> false
 
+let get_leading_line_comment_count tbl loc =
+  match Hashtbl.find_opt tbl.CommentTable.leading loc with
+  | Some comments ->
+    List.filter Comment.is_single_line_comment comments |> List.length
+  | None -> 0
+
 let has_trailing_single_line_comment tbl loc =
   match Hashtbl.find_opt tbl.CommentTable.trailing loc with
   | Some (comment :: _) -> Comment.is_single_line_comment comment
@@ -2836,12 +2842,7 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
              jsx_fragment_children = children;
              jsx_fragment_closing = c;
            }) ->
-      let xs =
-        match children with
-        | JSXChildrenSpreading e -> [e]
-        | JSXChildrenItems xs -> xs
-      in
-      print_jsx_fragment ~state o xs c e.pexp_loc cmt_tbl
+      print_jsx_fragment ~state o children c e.pexp_loc cmt_tbl
     | Pexp_jsx_element
         (Jsx_unary_element
            {
@@ -4458,28 +4459,12 @@ and print_jsx_container_tag ~state tag_name
     | JSXChildrenSpreading _ | JSXChildrenItems (_ :: _) -> true
     | JSXChildrenItems [] -> false
   in
-  let line_sep =
-    match children with
-    | JSXChildrenSpreading _ -> Doc.line
-    | JSXChildrenItems children ->
-      if
-        List.length children > 1
-        || List.exists
-             (function
-               | {Parsetree.pexp_desc = Pexp_jsx_element _} -> true
-               | _ -> false)
-             children
-      then Doc.hard_line
-      else Doc.line
-  in
+  let line_sep = get_line_sep_for_jsx_children children in
   let print_children children =
     Doc.concat
       [
         Doc.indent
-          (Doc.concat
-             [
-               Doc.line; print_jsx_children ~sep:line_sep ~state children cmt_tbl;
-             ]);
+          (Doc.concat [Doc.line; print_jsx_children ~state children cmt_tbl]);
         line_sep;
       ]
   in
@@ -4560,9 +4545,8 @@ and print_jsx_container_tag ~state tag_name
        ])
 
 and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
-    (children : Parsetree.expression list)
-    (closing_lesser_than : Lexing.position) (fragment_loc : Warnings.loc)
-    cmt_tbl =
+    (children : Parsetree.jsx_children) (closing_lesser_than : Lexing.position)
+    (fragment_loc : Warnings.loc) cmt_tbl =
   let opening =
     let loc : Location.t = {fragment_loc with loc_end = opening_greater_than} in
     print_comments (Doc.text "<>") cmt_tbl loc
@@ -4573,7 +4557,26 @@ and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
     in
     print_comments (Doc.text "</>") cmt_tbl loc
   in
-  let line_sep =
+  let has_children =
+    match children with
+    | JSXChildrenItems [] -> false
+    | JSXChildrenSpreading _ | JSXChildrenItems (_ :: _) -> true
+  in
+  let line_sep = get_line_sep_for_jsx_children children in
+  Doc.group
+    (Doc.concat
+       [
+         opening;
+         Doc.indent
+           (Doc.concat [Doc.line; print_jsx_children ~state children cmt_tbl]);
+         (if has_children then line_sep else Doc.nil);
+         closing;
+       ])
+
+and get_line_sep_for_jsx_children (children : Parsetree.jsx_children) =
+  match children with
+  | JSXChildrenSpreading _ -> Doc.line
+  | JSXChildrenItems children ->
     if
       List.length children > 1
       || List.exists
@@ -4583,49 +4586,10 @@ and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
            children
     then Doc.hard_line
     else Doc.line
-  in
-  Doc.group
-    (Doc.concat
-       [
-         opening;
-         (match children with
-         | [] -> Doc.nil
-         | children ->
-           Doc.indent
-             (Doc.concat
-                [
-                  Doc.line;
-                  Doc.join ~sep:line_sep
-                    (List.map
-                       (fun e -> print_jsx_child ~state e cmt_tbl)
-                       children);
-                ]));
-         line_sep;
-         closing;
-       ])
-
-and print_jsx_child ~state (expr : Parsetree.expression) cmt_tbl =
-  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
 
-and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
-    cmt_tbl =
+and print_jsx_children ~state (children : Parsetree.jsx_children) cmt_tbl =
   let open Parsetree in
+  let sep = get_line_sep_for_jsx_children children in
   let print_expr (expr : Parsetree.expression) =
     let leading_line_comment_present =
       has_leading_line_comment cmt_tbl expr.pexp_loc
@@ -4645,9 +4609,9 @@ and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
     | Braced braces_loc ->
       print_comments (add_parens_or_braces expr_doc) cmt_tbl braces_loc
   in
-  match children_expr with
-  | JSXChildrenSpreading child -> Doc.concat [Doc.dotdotdot; print_expr child]
+  match children with
   | JSXChildrenItems [] -> Doc.nil
+  | JSXChildrenSpreading child -> Doc.concat [Doc.dotdotdot; print_expr child]
   | JSXChildrenItems children ->
     let get_loc (expr : Parsetree.expression) =
       let braces =
@@ -4675,8 +4639,16 @@ and print_jsx_children ~state (children_expr : Parsetree.jsx_children) ~sep
           let loc = get_loc y in
           loc.loc_start.pos_lnum
         in
+        let lines_between = start_line_y - end_line_x - 1 in
+        let leading_single_line_comments =
+          get_leading_line_comment_count cmt_tbl (get_loc y)
+        in
         (* If there are lines between the jsx elements, we preserve at least one line *)
-        if end_line_x + 1 < start_line_y then
+        if
+          (* Unless they are all comments *)
+          (* The edge case of comment followed by blank line is not caught here *)
+          lines_between > 0 && not (lines_between = leading_single_line_comments)
+        then
           let doc = Doc.concat [print_expr x; sep; Doc.hard_line] in
           visit (Doc.concat [acc; doc]) rest
         else
diff --git a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
index 23f93e05e7..642365dcc1 100644
--- a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
@@ -437,7 +437,7 @@ let x = <C> ...{() => msg->React.string} </C>
 
 let x = <C> ...{array->Array.map(React.string)} </C>
 
-let x = <> {array->Array.map(React.string)} </>
+let x = <> ...{array->Array.map(React.string)} </>
 
 let x = {
   let _ = <div />
@@ -483,7 +483,6 @@ let x =
       world()
       world()
     }
-
     // another test
     <span
       id="1"
@@ -528,3 +527,31 @@ let x =
       }}
     />
   </div>
+
+let moo =
+  <div>
+    <p> {React.string("moo")} </p>
+    // c1
+    <p> {React.string("moo")} </p>
+    // c2
+    // c3
+    <p> {React.string("moo")} </p>
+
+    // c4
+
+    <p> {React.string("moo")} </p>
+  </div>
+
+let fragmented_moo =
+  <>
+    <p> {React.string("moo")} </p>
+    // c1
+    <p> {React.string("moo")} </p>
+    // c2
+    // c3
+    <p> {React.string("moo")} </p>
+
+    // c4
+
+    <p> {React.string("moo")} </p>
+  </>
diff --git a/tests/syntax_tests/data/printer/expr/jsx.res b/tests/syntax_tests/data/printer/expr/jsx.res
index f34a3e5483..d73c564b66 100644
--- a/tests/syntax_tests/data/printer/expr/jsx.res
+++ b/tests/syntax_tests/data/printer/expr/jsx.res
@@ -509,3 +509,29 @@ let x =
       }}
     />
   </div>
+
+let moo =
+  <div>
+    <p> {React.string("moo")} </p>
+    // c1
+    <p> {React.string("moo")} </p>
+    // c2
+    // c3
+    <p> {React.string("moo")} </p>
+    // c4
+
+    <p> {React.string("moo")} </p>
+  </div>
+
+let fragmented_moo =
+  <>
+    <p> {React.string("moo")} </p>
+    // c1
+    <p> {React.string("moo")} </p>
+    // c2
+    // c3
+    <p> {React.string("moo")} </p>
+    // c4
+
+    <p> {React.string("moo")} </p>
+  </>
\ No newline at end of file

From a0c0d0d177ddeb925a9ff6ccfe6f1ca52e6ee4d9 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 13:42:36 +0200
Subject: [PATCH 92/99] Update analysis expected

---
 .../tests/src/expected/CompletionJsx.res.txt  | 44 +++++++++----------
 .../tests/src/expected/Fragment.res.txt       |  2 +-
 .../tests/src/expected/Hover.res.txt          |  4 +-
 .../tests/src/expected/Jsx2.res.txt           | 21 ++++++++-
 4 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt b/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
index babd52a522..2375a24b36 100644
--- a/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
+++ b/tests/analysis_tests/tests/src/expected/CompletionJsx.res.txt
@@ -25,9 +25,9 @@ Complete src/CompletionJsx.res 13:21
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[8:13->33:3]
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[9:4->32:10]
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[10:4->32:10]
-posCursor:[13:21] posNoWhite:[13:20] Found expr:[11:4->33:2]
-posCursor:[13:21] posNoWhite:[13:20] Found expr:[12:4->33:2]
-posCursor:[13:21] posNoWhite:[13:20] Found expr:[13:7->33:2]
+posCursor:[13:21] posNoWhite:[13:20] Found expr:[11:4->32:10]
+posCursor:[13:21] posNoWhite:[13:20] Found expr:[12:4->32:10]
+posCursor:[13:21] posNoWhite:[13:20] Found expr:[13:7->32:10]
 posCursor:[13:21] posNoWhite:[13:20] Found expr:[13:7->13:21]
 Completable: Cpath Value[someString]->st <<jsx>>
 Package opens Stdlib.place holder Pervasives.JsxModules.place holder
@@ -62,9 +62,9 @@ Complete src/CompletionJsx.res 18:24
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[8:13->33:3]
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[9:4->32:10]
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[10:4->32:10]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[11:4->33:2]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[12:4->33:2]
-posCursor:[18:24] posNoWhite:[18:23] Found expr:[15:4->33:2]
+posCursor:[18:24] posNoWhite:[18:23] Found expr:[11:4->32:10]
+posCursor:[18:24] posNoWhite:[18:23] Found expr:[12:4->32:10]
+posCursor:[18:24] posNoWhite:[18:23] Found expr:[15:4->32:10]
 JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[18:24] posNoWhite:[18:23] Found expr:[18:10->18:24]
 Completable: Cpath Value[someString]->st <<jsx>>
@@ -100,9 +100,9 @@ Complete src/CompletionJsx.res 20:27
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[8:13->33:3]
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[9:4->32:10]
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[10:4->32:10]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[11:4->33:2]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[12:4->33:2]
-posCursor:[20:27] posNoWhite:[20:26] Found expr:[15:4->33:2]
+posCursor:[20:27] posNoWhite:[20:26] Found expr:[11:4->32:10]
+posCursor:[20:27] posNoWhite:[20:26] Found expr:[12:4->32:10]
+posCursor:[20:27] posNoWhite:[20:26] Found expr:[15:4->32:10]
 JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[20:27] posNoWhite:[20:26] Found expr:[20:10->20:27]
 Completable: Cpath string->st <<jsx>>
@@ -137,9 +137,9 @@ Complete src/CompletionJsx.res 22:40
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[8:13->33:3]
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[9:4->32:10]
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[10:4->32:10]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[11:4->33:2]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[12:4->33:2]
-posCursor:[22:40] posNoWhite:[22:39] Found expr:[15:4->33:2]
+posCursor:[22:40] posNoWhite:[22:39] Found expr:[11:4->32:10]
+posCursor:[22:40] posNoWhite:[22:39] Found expr:[12:4->32:10]
+posCursor:[22:40] posNoWhite:[22:39] Found expr:[15:4->32:10]
 JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[22:40] posNoWhite:[22:39] Found expr:[22:10->22:40]
 Completable: Cpath Value[String, trim](Nolabel)->st <<jsx>>
@@ -176,9 +176,9 @@ Complete src/CompletionJsx.res 24:19
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[8:13->33:3]
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[9:4->32:10]
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[10:4->32:10]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[11:4->33:2]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[12:4->33:2]
-posCursor:[24:19] posNoWhite:[24:18] Found expr:[15:4->33:2]
+posCursor:[24:19] posNoWhite:[24:18] Found expr:[11:4->32:10]
+posCursor:[24:19] posNoWhite:[24:18] Found expr:[12:4->32:10]
+posCursor:[24:19] posNoWhite:[24:18] Found expr:[15:4->32:10]
 JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[24:19] posNoWhite:[24:18] Found expr:[24:10->0:-1]
 Completable: Cpath Value[someInt]-> <<jsx>>
@@ -346,9 +346,9 @@ Complete src/CompletionJsx.res 26:14
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[8:13->33:3]
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[9:4->32:10]
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[10:4->32:10]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[11:4->33:2]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[12:4->33:2]
-posCursor:[26:14] posNoWhite:[26:13] Found expr:[15:4->33:2]
+posCursor:[26:14] posNoWhite:[26:13] Found expr:[11:4->32:10]
+posCursor:[26:14] posNoWhite:[26:13] Found expr:[12:4->32:10]
+posCursor:[26:14] posNoWhite:[26:13] Found expr:[15:4->32:10]
 JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[26:14] posNoWhite:[26:13] Found expr:[26:10->0:-1]
 Completable: Cpath int-> <<jsx>>
@@ -515,9 +515,9 @@ Complete src/CompletionJsx.res 28:20
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[8:13->33:3]
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[9:4->32:10]
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[10:4->32:10]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[11:4->33:2]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[12:4->33:2]
-posCursor:[28:20] posNoWhite:[28:19] Found expr:[15:4->33:2]
+posCursor:[28:20] posNoWhite:[28:19] Found expr:[11:4->32:10]
+posCursor:[28:20] posNoWhite:[28:19] Found expr:[12:4->32:10]
+posCursor:[28:20] posNoWhite:[28:19] Found expr:[15:4->32:10]
 JSX <div:[15:5->15:8] > _children:16:7
 posCursor:[28:20] posNoWhite:[28:19] Found expr:[28:10->28:20]
 Completable: Cpath Value[someArr]->a <<jsx>>
@@ -750,7 +750,7 @@ Path Info.make
   }]
 
 Complete src/CompletionJsx.res 93:19
-posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:11->96:0]
+posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:11->93:24]
 JSX <p:[93:12->93:13] > _children:93:15
 posCursor:[93:19] posNoWhite:[93:18] Found expr:[93:15->93:19]
 Pexp_field [93:15->93:17] s:[93:18->93:19]
diff --git a/tests/analysis_tests/tests/src/expected/Fragment.res.txt b/tests/analysis_tests/tests/src/expected/Fragment.res.txt
index 87e7339d50..2dba106a7d 100644
--- a/tests/analysis_tests/tests/src/expected/Fragment.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Fragment.res.txt
@@ -4,7 +4,7 @@ Hover src/Fragment.res 6:19
 Hover src/Fragment.res 9:56
 Nothing at that position. Now trying to use completion.
 posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:9->9:70]
-posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:12->9:67]
+posCursor:[9:56] posNoWhite:[9:55] Found expr:[9:12->9:66]
 JSX <SectionHeader:[9:13->9:26] > _children:9:29
 null
 
diff --git a/tests/analysis_tests/tests/src/expected/Hover.res.txt b/tests/analysis_tests/tests/src/expected/Hover.res.txt
index a35e59ff97..31a6fa21a6 100644
--- a/tests/analysis_tests/tests/src/expected/Hover.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Hover.res.txt
@@ -50,13 +50,13 @@ Hover src/Hover.res 77:7
 
 Hover src/Hover.res 91:10
 Nothing at that position. Now trying to use completion.
-posCursor:[91:10] posNoWhite:[91:8] Found expr:[88:2->94:0]
+posCursor:[91:10] posNoWhite:[91:8] Found expr:[88:2->91:9]
 JSX <Comp:[88:3->88:7] > _children:89:4
 null
 
 Hover src/Hover.res 98:10
 Nothing at that position. Now trying to use completion.
-posCursor:[98:10] posNoWhite:[98:9] Found expr:[95:2->101:0]
+posCursor:[98:10] posNoWhite:[98:9] Found expr:[95:2->98:10]
 JSX <Comp1:[95:3->95:8] > _children:96:4
 null
 
diff --git a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
index 66920cb633..a05e5b52ae 100644
--- a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
@@ -517,8 +517,25 @@ Path Nested.
   }]
 
 Hover src/Jsx2.res 162:12
-{"contents": {"kind": "markdown", "value": "```rescript\nComp.props<int>\n```\n\n---\n\n```\n \n```\n```rescript\ntype Comp.props<'age> = {age: 'age}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.res%22%2C157%2C2%5D)\n"}}
+Nothing at that position. Now trying to use completion.
+posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:2->162:24]
+posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:5->162:20]
+JSX <Comp:[162:6->162:10] age[162:11->162:14]=...[162:15->162:17]> _children:None
+Completable: Cjsx([Comp], age, [age])
+Package opens Stdlib.place holder Pervasives.JsxModules.place holder
+Resolved opens 1 Stdlib
+Path Comp.make
+{"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
 
 Hover src/Jsx2.res 167:16
-{"contents": {"kind": "markdown", "value": "```rescript\nComp.props<int>\n```\n\n---\n\n```\n \n```\n```rescript\ntype Comp.props<'age> = {age: 'age}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.res%22%2C157%2C2%5D)\n"}}
+Nothing at that position. Now trying to use completion.
+posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:2->167:33]
+posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:6->167:28]
+posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:9->167:24]
+JSX <Comp:[167:10->167:14] age[167:15->167:18]=...[167:19->167:21]> _children:None
+Completable: Cjsx([Comp], age, [age])
+Package opens Stdlib.place holder Pervasives.JsxModules.place holder
+Resolved opens 1 Stdlib
+Path Comp.make
+{"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
 

From f1da36f9ed5e07759f4d12e529391825fa1944d7 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 13:46:22 +0200
Subject: [PATCH 93/99] Another location change in expected

---
 .../src/expected/GenericJsxCompletion.res.txt                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt b/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt
index 99b4c66a47..52d87f41f8 100644
--- a/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt
+++ b/tests/analysis_tests/tests-generic-jsx-transform/src/expected/GenericJsxCompletion.res.txt
@@ -93,7 +93,7 @@ posCursor:[20:24] posNoWhite:[20:23] Found expr:[11:4->22:10]
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[12:4->22:10]
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[13:4->22:10]
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[16:4->22:10]
-posCursor:[20:24] posNoWhite:[20:23] Found expr:[17:4->23:2]
+posCursor:[20:24] posNoWhite:[20:23] Found expr:[17:4->22:10]
 JSX <div:[17:5->17:8] > _children:18:7
 posCursor:[20:24] posNoWhite:[20:23] Found expr:[20:10->20:24]
 Completable: Cpath Value[someString]->st <<jsx>>

From 80c307a6a47f8ebd62c1f8b76055a41af24b1bca Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Tue, 1 Apr 2025 13:51:52 +0200
Subject: [PATCH 94/99] One more update?

---
 .../tests/src/expected/Jsx2.res.txt           | 21 ++-----------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
index a05e5b52ae..66920cb633 100644
--- a/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
+++ b/tests/analysis_tests/tests/src/expected/Jsx2.res.txt
@@ -517,25 +517,8 @@ Path Nested.
   }]
 
 Hover src/Jsx2.res 162:12
-Nothing at that position. Now trying to use completion.
-posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:2->162:24]
-posCursor:[162:12] posNoWhite:[162:11] Found expr:[162:5->162:20]
-JSX <Comp:[162:6->162:10] age[162:11->162:14]=...[162:15->162:17]> _children:None
-Completable: Cjsx([Comp], age, [age])
-Package opens Stdlib.place holder Pervasives.JsxModules.place holder
-Resolved opens 1 Stdlib
-Path Comp.make
-{"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
+{"contents": {"kind": "markdown", "value": "```rescript\nComp.props<int>\n```\n\n---\n\n```\n \n```\n```rescript\ntype Comp.props<'age> = {age: 'age}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.res%22%2C157%2C2%5D)\n"}}
 
 Hover src/Jsx2.res 167:16
-Nothing at that position. Now trying to use completion.
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:2->167:33]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:6->167:28]
-posCursor:[167:16] posNoWhite:[167:15] Found expr:[167:9->167:24]
-JSX <Comp:[167:10->167:14] age[167:15->167:18]=...[167:19->167:21]> _children:None
-Completable: Cjsx([Comp], age, [age])
-Package opens Stdlib.place holder Pervasives.JsxModules.place holder
-Resolved opens 1 Stdlib
-Path Comp.make
-{"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
+{"contents": {"kind": "markdown", "value": "```rescript\nComp.props<int>\n```\n\n---\n\n```\n \n```\n```rescript\ntype Comp.props<'age> = {age: 'age}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.res%22%2C157%2C2%5D)\n"}}
 

From 11ced991c09aa1ac0f969db71e83af6c39160462 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 2 Apr 2025 10:30:12 +0200
Subject: [PATCH 95/99] Remove leftover comments

---
 compiler/ml/parsetree.ml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
index 5cf9bf17d6..d62f2779df 100644
--- a/compiler/ml/parsetree.ml
+++ b/compiler/ml/parsetree.ml
@@ -329,10 +329,8 @@ and jsx_fragment = {
 }
 
 and jsx_unary_element = {
-  (* jsx_unary_element_opening: Lexing.position; *)
   jsx_unary_element_tag_name: Longident.t loc;
   jsx_unary_element_props: jsx_props;
-      (* jsx_unary_element_closing: Lexing.position; *)
 }
 
 and jsx_container_element = {

From 0c825d5bd4b4126d07a6817146a9888da1de6604 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 2 Apr 2025 10:35:10 +0200
Subject: [PATCH 96/99] Remove obsolete comment

---
 compiler/syntax/src/res_core.ml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
index da5ea01af3..9aff9ac65e 100644
--- a/compiler/syntax/src/res_core.ml
+++ b/compiler/syntax/src/res_core.ml
@@ -2810,8 +2810,6 @@ and parse_jsx_prop p : Parsetree.jsx_prop option =
       Scanner.pop_mode p.scanner Jsx;
       Parser.next p;
       let attr_expr = parse_primary_expr ~operand:(parse_expr p) p in
-      (* using label "spreadProps" to distinguish from others *)
-      (* let label = Asttypes.Labelled {txt = "_spreadProps"; loc} in *)
       match p.Parser.token with
       | Rbrace ->
         let spread_end = p.Parser.end_pos in

From 8ff481dbb221ef139d898f8c550fec71d1d768f1 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 3 Apr 2025 19:08:54 +0200
Subject: [PATCH 97/99] Ensure fragment starts after arrow

---
 compiler/syntax/src/res_printer.ml                 |  3 ++-
 .../data/printer/expr/expected/jsx.res.txt         | 13 +++++++++++++
 tests/syntax_tests/data/printer/expr/jsx.res       | 14 +++++++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/compiler/syntax/src/res_printer.ml b/compiler/syntax/src/res_printer.ml
index bfa22dd34c..d509ff4746 100644
--- a/compiler/syntax/src/res_printer.ml
+++ b/compiler/syntax/src/res_printer.ml
@@ -2777,7 +2777,8 @@ and print_expression ~state (e : Parsetree.expression) cmt_tbl =
       let should_indent =
         match return_expr.pexp_desc with
         | Pexp_sequence _ | Pexp_let _ | Pexp_letmodule _ | Pexp_letexception _
-        | Pexp_open _ ->
+        | Pexp_open _
+        | Pexp_jsx_element (Jsx_fragment _) ->
           false
         | _ -> true
       in
diff --git a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
index 642365dcc1..3e1e225912 100644
--- a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
+++ b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
@@ -555,3 +555,16 @@ let fragmented_moo =
 
     <p> {React.string("moo")} </p>
   </>
+
+let arrow_with_fragment = el => <>
+  {t(nbsp ++ "(")}
+  el
+  {t(")")}
+</>
+
+let arrow_with_container_tag = el =>
+  <div>
+    {t(nbsp ++ "(")}
+    el
+    {t(")")}
+  </div>
diff --git a/tests/syntax_tests/data/printer/expr/jsx.res b/tests/syntax_tests/data/printer/expr/jsx.res
index d73c564b66..6a3c54cbb4 100644
--- a/tests/syntax_tests/data/printer/expr/jsx.res
+++ b/tests/syntax_tests/data/printer/expr/jsx.res
@@ -534,4 +534,16 @@ let fragmented_moo =
     // c4
 
     <p> {React.string("moo")} </p>
-  </>
\ No newline at end of file
+  </>
+
+let arrow_with_fragment = el => <>
+  {t(nbsp ++ "(")}
+  el
+  {t(")")}
+</>
+
+let arrow_with_container_tag = el => <div>
+  {t(nbsp ++ "(")}
+  el
+  {t(")")}
+</div>
\ No newline at end of file

From 8723426ca9613d535405aec3c08ee05f06e86326 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Thu, 3 Apr 2025 19:11:40 +0200
Subject: [PATCH 98/99] Add changelog entry

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9094890bea..c96808b64f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,9 @@
 
 # 12.0.0-alpha.12 (Unreleased)
 
+#### :house: Internal
+- Better representation of JSX in AST . https://github.com/rescript-lang/rescript/pull/7286
+
 # 12.0.0-alpha.11
 
 #### :bug: Bug fix

From e1ad2518ef6000a6cc3b828536b4cfc8206a1a6b Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Fri, 4 Apr 2025 09:55:56 +0200
Subject: [PATCH 99/99] Add missing Pexp_await

---
 compiler/syntax/src/res_comments_table.ml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
index 181d00a1a7..99308f2341 100644
--- a/compiler/syntax/src/res_comments_table.ml
+++ b/compiler/syntax/src/res_comments_table.ml
@@ -1777,6 +1777,7 @@ and walk_expression expr t comments =
        if you ever need this, feel free to update process _rest. 
        Comments after the closing tag will already be taking into account by the parent node. *)
     )
+  | Pexp_await expr -> walk_expression expr t comments
   | Pexp_send _ -> ()
 
 and walk_expr_parameter (_attrs, _argLbl, expr_opt, pattern) t comments =