wrap JSX children variables in curly braces

Author: tsnobip

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

@@ -371,13 +371,14 @@ let jsx_child_expr expr =
         when starts_with_minus x ->
         Parenthesized
       | _ when ParsetreeViewer.expr_is_await expr -> Parenthesized
-      | _ when ParsetreeViewer.has_spread_attr expr.pexp_attributes -> Parenthesized
+      | _ when ParsetreeViewer.has_spread_attr expr.pexp_attributes ->
+        Parenthesized
       | {
        Parsetree.pexp_desc =
-         ( 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_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

compiler/syntax/src/res_parsetree_viewer.mli

@@ -17,6 +17,7 @@ val has_await_attribute : Parsetree.attributes -> bool
 val has_inline_record_definition_attribute : Parsetree.attributes -> bool
 val has_res_pat_variant_spread_attribute : Parsetree.attributes -> bool
 val has_dict_pattern_attribute : Parsetree.attributes -> bool
+val has_spread_attr : Parsetree.attributes -> bool
 
 type if_condition_kind =
   | If of Parsetree.expression

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/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,7 +209,7 @@ let x =
 
 let x =
   <div>
-    ident
+    {ident}
     "constant"
     {
       let a = 1
@@ -286,7 +286,7 @@ let x =
     {@attr ident}
   </div>
 
-let x = <MyComponent sidebar={<div> test </div>} nav={<Navbar />} />
+let x = <MyComponent sidebar={<div> {test} </div>} nav={<Navbar />} />
 
 <div>
   {possibleGradeValues
@@ -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>