Wrap non-components JSX children in curly braces

CHANGELOG.md

@@ -19,6 +19,8 @@
 
 #### :eyeglasses: Spec Compliance
 
+- Wrap variables in curly braces inside JSX children. https://github.com/rescript-lang/rescript/pull/7863
+
 #### :rocket: New Feature
 
 - Add `Array.filterMapWithIndex` to Stdlib. https://github.com/rescript-lang/rescript/pull/7876

compiler/syntax/src/res_parens.ml

@@ -354,39 +354,13 @@ let jsx_prop_expr expr =
 
 let jsx_child_expr expr =
   match expr.Parsetree.pexp_desc with
-  | Parsetree.Pexp_let _ | Pexp_sequence _ | Pexp_letexception _
-  | Pexp_letmodule _ | Pexp_open _ ->
-    Nothing
+  | Parsetree.Pexp_let _ | Pexp_sequence _ -> Nothing
   | _ -> (
     let opt_braces, _ = ParsetreeViewer.process_braces_attr expr in
     match opt_braces with
     | Some ({Location.loc = braces_loc}, _) -> Braced braces_loc
     | _ -> (
       match expr with
-      | {
-       Parsetree.pexp_desc =
-         Pexp_constant (Pconst_integer (x, _) | Pconst_float (x, _));
-       pexp_attributes = [];
-      }
-        when starts_with_minus x ->
-        Parenthesized
-      | _ when ParsetreeViewer.expr_is_await expr -> Parenthesized
-      | {
-       Parsetree.pexp_desc =
-         ( 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_element _ );
-       pexp_attributes = [];
-      } ->
-        Nothing
-      | {
-       Parsetree.pexp_desc =
-         Pexp_constraint
-           ({pexp_desc = Pexp_pack _}, {ptyp_desc = Ptyp_package _});
-       pexp_attributes = [];
-      } ->
-        Nothing
       | {pexp_desc = Pexp_jsx_element _} -> Nothing
       | _ -> Parenthesized))
 

tests/build_tests/super_errors/expected/react_component_with_props.res.expected

@@ -7,7 +7,7 @@
    3 │   let make = React.forwardRef((
    4 │     ~className=?,
    . │ ...
-  12 │       children
+  12 │       {children}
   13 │     </div>
   14 │   )
   15 │ }

tests/build_tests/super_errors/fixtures/react_component_with_props.res

@@ -9,7 +9,7 @@ module V4C7 = {
       <input
         type_="text" ?className ref=?{Js.Nullable.toOption(ref)->Belt.Option.map(React.Ref.domRef)}
       />
-      children
+      {children}
     </div>
   )
 }

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

@@ -60,7 +60,7 @@ module Inner = {
 
 module NoProps = {
   @genType @react.component
-  let make = () => <div> React.null </div>
+  let make = () => <div> {React.null} </div>
 }
 
 type cb = (~_to: vehicle) => unit
@@ -133,7 +133,7 @@ module WithChildren = {
   let aComponentWithChildren = (~vehicle, ~children) =>
     <div>
       {React.string("Another Hook " ++ vehicle.name)}
-      <div> children </div>
+      <div> {children} </div>
     </div>
 }
 

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

@@ -6,4 +6,4 @@ let handleClick = (href, event) =>
 
 @react.component
 let make = (~href, ~className="", ~children) =>
-  <a href className onClick={event => handleClick(href, event)}> children </a>
+  <a href className onClick={event => handleClick(href, event)}> {children} </a>

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

@@ -3,7 +3,7 @@ module Cite = {
   let make = (~author: option<string>, ~children) => {
     // For semantics, check out
     // https://css-tricks.com/quoting-in-html-quotations-citations-and-blockquotes/
-    <div> foo </div>
+    <div> {foo} </div>
   }
 }
 

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

@@ -282,7 +282,7 @@ apply({
   a
 })
 
-let x = {<div> child </div>}
+let x = {<div> {child} </div>}
 
 // not valid jsx
 let x = {@JSX child}

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

@@ -61,8 +61,8 @@ let x = 1
 
 let x =
   <div \"aria-foo"=\"type">
-    \"module"
-    \"let"
+    {\"module"}
+    {\"let"}
   </div>
 
 type dict = {

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

@@ -209,8 +209,8 @@ let x =
 
 let x =
   <div>
-    ident
-    "constant"
+    {ident}
+    {"constant"}
     {
       let a = 1
       let b = 2
@@ -240,13 +240,13 @@ let x =
     | Error => ()
     }}
     {(a, b, c)}
-    Rgb(red, blue, green)
-    list{}
-    list{a, b}
-    list{a, b, ...x}
-    [a, b, c]
-    {x: 1, y: 2}
-    foo.bar
+    {Rgb(red, blue, green)}
+    {list{}}
+    {list{a, b}}
+    {list{a, b, ...x}}
+    {[a, b, c]}
+    {{x: 1, y: 2}}
+    {foo.bar}
     {user.name = "Steve"}
     {if true {
       ()
@@ -264,29 +264,29 @@ let x =
       do(i)
     }}
     {(20: int)}
-    {
+    {{
       module L = Log
       L.log()
-    }
-    {
+    }}
+    {{
       exception Exit
       throw(Exit)
-    }
+    }}
     {assert(true)}
     {module(Foo)}
-    module(Foo)
+    {module(Foo)}
     {module(Foo: Bar)}
-    module(Foo: Bar)
-    {
+    {module(Foo: Bar)}
+    {{
       open React
       React.render()
-    }
-    %raw("eval()")
-    {"x": 1, "y": 2}
+    }}
+    {%raw("eval()")}
+    {{"x": 1, "y": 2}}
     {@attr ident}
   </div>
 
-let x = <MyComponent sidebar={<div> test </div>} nav={<Navbar />} />
+let x = <MyComponent sidebar={<div> {test} </div>} nav={<Navbar />} />
 
 <div>
   {possibleGradeValues
@@ -314,7 +314,7 @@ let x = <MyComponent sidebar={<div> test </div>} nav={<Navbar />} />
 module App = {
   @react.component
   let make = () => {
-    <> 1 </>
+    <> {1} </>
   }
 }
 
@@ -492,14 +492,14 @@ let fragmented_moo =
 
 let arrow_with_fragment = el => <>
   {t(nbsp ++ "(")}
-  el
+  {el}
   {t(")")}
 </>
 
 let arrow_with_container_tag = el =>
   <div>
     {t(nbsp ++ "(")}
-    el
+    {el}
     {t(")")}
   </div>
 

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

@@ -34,7 +34,7 @@ let make = (~min=50, ~max=250, ~meterSuffix=?) => {
         values
         onChange={v => values_set(_ => v)}
         renderTrack={({props, children}) => {
-          let element = <div className="h-16" style=props.style> children </div>
+          let element = <div className="h-16" style=props.style> {children} </div>
 
           ReasonReact.cloneElement(element, ~props=Obj.magic(props), [children])
         }}