Drop support of JSX children spread

Copilot · tsnobip · tsnobip · commit 4b8a0c53a536 · 2025-09-10T14:52:03.000+02:00
Co-authored-by: tsnobip &lt;2479216+tsnobip@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
 #### :boom: Breaking Change
 
 - Fix return type of `String.charCodeAt`. https://github.com/rescript-lang/rescript/pull/7864
+- Remove support of JSX children spread. https://github.com/rescript-lang/rescript/pull/7869
 
 #### :eyeglasses: Spec Compliance
 
diff --git a/analysis/src/CompletionFrontEnd.ml b/analysis/src/CompletionFrontEnd.ml
@@ -1412,8 +1412,7 @@ let completionWithParser1 ~currentFile ~debug ~offset ~path ~posCursor
                   (Jsx_container_element
                      {
                        jsx_container_element_closing_tag = None;
-                       jsx_container_element_children =
-                         JSXChildrenSpreading _ | JSXChildrenItems (_ :: _);
+                       jsx_container_element_children = JSXChildrenItems (_ :: _);
                      }) ) ->
               None
             | Some jsxProps, _ ->
diff --git a/analysis/src/CompletionJsx.ml b/analysis/src/CompletionJsx.ml
@@ -461,7 +461,7 @@ let extractJsxProps ~(compName : Longident.t Location.loc) ~props ~children =
   let childrenStart =
     match children with
     | JSXChildrenItems [] -> None
-    | JSXChildrenSpreading child | JSXChildrenItems (child :: _) ->
+    | JSXChildrenItems (child :: _) ->
       if child.pexp_loc.loc_ghost then None else Some (Loc.start child.pexp_loc)
   in
   let props =
diff --git a/analysis/src/SemanticTokens.ml b/analysis/src/SemanticTokens.ml
@@ -312,7 +312,6 @@ let command ~debug ~emitter ~path =
 
       (* children *)
       (match children with
-      | Parsetree.JSXChildrenSpreading child -> iterator.expr iterator child
       | Parsetree.JSXChildrenItems children ->
         List.iter (iterator.expr iterator) children);
 
diff --git a/compiler/frontend/bs_ast_mapper.ml b/compiler/frontend/bs_ast_mapper.ml
@@ -293,7 +293,6 @@ 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
diff --git a/compiler/ml/ast_iterator.ml b/compiler/ml/ast_iterator.ml
@@ -268,7 +268,6 @@ 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
diff --git a/compiler/ml/ast_mapper.ml b/compiler/ml/ast_mapper.ml
@@ -264,7 +264,6 @@ 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
diff --git a/compiler/ml/ast_mapper_from0.ml b/compiler/ml/ast_mapper_from0.ml
@@ -327,7 +327,7 @@ module E = struct
     | Pexp_construct ({txt = Longident.Lident "[]" | Longident.Lident "::"}, _)
       ->
       JSXChildrenItems (visit e)
-    | _ -> JSXChildrenSpreading (sub.expr sub e)
+    | _ -> JSXChildrenItems [sub.expr sub e]
 
   let try_map_jsx_prop (sub : mapper) (lbl : Asttypes.Noloc.arg_label)
       (e : expression) : Parsetree.jsx_prop option =
diff --git a/compiler/ml/ast_mapper_to0.ml b/compiler/ml/ast_mapper_to0.ml
@@ -340,7 +340,6 @@ module E = struct
 
   let map_jsx_children sub loc children =
     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
diff --git a/compiler/ml/depend.ml b/compiler/ml/depend.ml
@@ -313,7 +313,6 @@ let rec add_expr bv exp =
     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
diff --git a/compiler/ml/parsetree.ml b/compiler/ml/parsetree.ml
@@ -372,9 +372,7 @@ and jsx_prop =
       Location.t
       * expression
 
-and jsx_children =
-  | JSXChildrenSpreading of expression
-  | JSXChildrenItems of expression list
+and jsx_children = JSXChildrenItems of expression list
 
 and jsx_props = jsx_prop list
 
diff --git a/compiler/ml/pprintast.ml b/compiler/ml/pprintast.ml
@@ -840,7 +840,6 @@ and simple_expr ctxt f x =
     | _ -> paren true (expression ctxt) f x
 
 and collect_jsx_children = function
-  | JSXChildrenSpreading e -> [e]
   | JSXChildrenItems xs -> xs
 
 and print_jsx_prop ctxt f = function
diff --git a/compiler/ml/printast.ml b/compiler/ml/printast.ml
@@ -384,7 +384,6 @@ and expression i ppf x =
 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
diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
@@ -1183,7 +1183,7 @@ let append_children_prop (config : Jsx_common.jsx_config) mapper
     (children : jsx_children) : jsx_props =
   match children with
   | JSXChildrenItems [] -> props
-  | JSXChildrenItems [child] | JSXChildrenSpreading child ->
+  | JSXChildrenItems [child] ->
     let expr =
       (* I don't quite know why fragment and uppercase don't do this additional ReactDOM.someElement wrapping *)
       match component_description with
@@ -1232,7 +1232,6 @@ let mk_react_jsx (config : Jsx_common.jsx_config) mapper loc attrs
     (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 =
diff --git a/compiler/syntax/src/res_ast_debugger.ml b/compiler/syntax/src/res_ast_debugger.ml
@@ -710,7 +710,6 @@ module SexpAst = struct
       | Pexp_jsx_element (Jsx_fragment {jsx_fragment_children = children}) ->
         let xs =
           match children with
-          | JSXChildrenSpreading e -> [e]
           | JSXChildrenItems xs -> xs
         in
         Sexp.list
@@ -732,7 +731,6 @@ module SexpAst = struct
              }) ->
         let xs =
           match children with
-          | JSXChildrenSpreading e -> [e]
           | JSXChildrenItems xs -> xs
         in
         Sexp.list
diff --git a/compiler/syntax/src/res_comments_table.ml b/compiler/syntax/src/res_comments_table.ml
@@ -1660,7 +1660,6 @@ and walk_expression expr t comments =
     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
@@ -1803,7 +1802,6 @@ and walk_expression expr t comments =
     | children ->
       let children_nodes =
         match children with
-        | Parsetree.JSXChildrenSpreading e -> [Expression e]
         | Parsetree.JSXChildrenItems xs -> List.map (fun e -> Expression e) xs
       in
 
diff --git a/compiler/syntax/src/res_core.ml b/compiler/syntax/src/res_core.ml
@@ -2999,19 +2999,8 @@ and parse_jsx_children p : Parsetree.jsx_children =
       loop p (child :: children)
     | _ -> children
   in
-  let children =
-    match p.Parser.token with
-    | DotDotDot ->
-      Parser.next 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
-      Parsetree.JSXChildrenItems children
-  in
-  children
+  let children = List.rev (loop p []) in
+  Parsetree.JSXChildrenItems 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
@@ -4516,7 +4516,7 @@ and print_jsx_container_tag ~state tag_name
   (* <div className="test" /> *)
   let has_children =
     match children with
-    | JSXChildrenSpreading _ | JSXChildrenItems (_ :: _) -> true
+    | JSXChildrenItems (_ :: _) -> true
     | JSXChildrenItems [] -> false
   in
   let line_sep = get_line_sep_for_jsx_children children in
@@ -4607,7 +4607,7 @@ and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
   let has_children =
     match children with
     | JSXChildrenItems [] -> false
-    | JSXChildrenSpreading _ | JSXChildrenItems (_ :: _) -> true
+    | JSXChildrenItems (_ :: _) -> true
   in
   let line_sep = get_line_sep_for_jsx_children children in
   Doc.group
@@ -4622,7 +4622,6 @@ and print_jsx_fragment ~state (opening_greater_than : Lexing.position)
 
 and get_line_sep_for_jsx_children (children : Parsetree.jsx_children) =
   match children with
-  | JSXChildrenSpreading _ -> Doc.line
   | JSXChildrenItems children ->
     if
       List.length children > 1
@@ -4670,7 +4669,6 @@ and print_jsx_children ~state (children : Parsetree.jsx_children) cmt_tbl =
   in
   match children with
   | JSXChildrenItems [] -> Doc.nil
-  | JSXChildrenSpreading child -> Doc.concat [Doc.dotdotdot; print_expr child]
   | JSXChildrenItems children ->
     let rec visit acc children =
       match children with
diff --git a/tests/syntax_tests/data/conversion/reason/expected/jsxProps.res.txt b/tests/syntax_tests/data/conversion/reason/expected/jsxProps.res.txt
@@ -7,11 +7,3 @@ let handleClick = (href, event) =>
 @react.component
 let make = (~href, ~className="", ~children) =>
   <a href className onClick={event => handleClick(href, event)}> children </a>
-
-<Animated> ...{x => <div />} </Animated>
-
-<div> ...element </div>
-<div> ...{a => 1} </div>
-<div> ...<span /> </div>
-<div> ...[a, b] </div>
-<div> ...{(1, 2)} </div>
diff --git a/tests/syntax_tests/data/conversion/reason/jsxProps.res b/tests/syntax_tests/data/conversion/reason/jsxProps.res
@@ -7,11 +7,3 @@ let handleClick = (href, event) =>
 @react.component
 let make = (~href, ~className="", ~children) =>
   <a href className onClick={event => handleClick(href, event)}> children </a>
-
-<Animated> ...{x => <div />} </Animated>
-
-<div> ...element </div>
-<div> ...{a => 1} </div>
-<div> ...<span /> </div>
-<div> ...[a, b] </div>
-<div> ...{(1, 2)} </div>
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
@@ -40,12 +40,6 @@ 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>
@@ -240,51 +234,6 @@ let _ =
   <div style=((ReactDOMRe.Style.make ~width:{js|20px|js} ~height:{js|20px|js}
                  ~borderRadius:{js|100%|js} ~backgroundColor:{js|red|js})
   [@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 _ =
@@ -330,18 +279,6 @@ let _ =
 ;;<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 /></>
-;;<>[|a|]</>
-;;<>(1, 2)</>
-;;<>((array -> f)[@res.braces ])</>
 let _ = <A x={js|y|js} {...str} />
 let _ = <p-x-y></p-x-y>
 let _ = <V.x-y></V.x-y>
diff --git a/tests/syntax_tests/data/parsing/grammar/expressions/jsx.res b/tests/syntax_tests/data/parsing/grammar/expressions/jsx.res
diff --git a/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt b/tests/syntax_tests/data/printer/expr/expected/jsx.res.txt
diff --git a/tests/syntax_tests/data/printer/expr/jsx.res b/tests/syntax_tests/data/printer/expr/jsx.res
diff --git a/tests/tests/src/jsx_preserve_test.mjs b/tests/tests/src/jsx_preserve_test.mjs
diff --git a/tests/tests/src/jsx_preserve_test.res b/tests/tests/src/jsx_preserve_test.res
