Further improve JSX preserve output (#7445)

Author: cknitt

compiler/core/js_dump.ml

@@ -1127,13 +1127,23 @@ and print_jsx cxt ?(spread_props : J.expression option)
       fields
   in
   let print_props cxt props =
+    let print_prop_value (x : J.expression) ctx =
+      let needs_braces =
+        match x.expression_desc with
+        | Str _ | Optional_block ({expression_desc = Str _}, _) -> false
+        | _ -> true
+      in
+      if needs_braces then P.string f "{";
+      let next_cxt = expression ~level:0 ctx f x in
+      if needs_braces then P.string f "}";
+      next_cxt
+    in
+
     (* If a key is present, should be printed before the spread props,
     This is to ensure tools like ESBuild use the automatic JSX runtime *)
     let print_key key cxt =
-      P.string f "key={";
-      let cxt_k = expression ~level:0 cxt f key in
-      P.string f "} ";
-      cxt_k
+      P.string f "key=";
+      print_prop_value key cxt
     in
 
     let print_spread_props spread cxt =
@@ -1147,10 +1157,7 @@ and print_jsx cxt ?(spread_props : J.expression option)
       let prop_name = Js_dump_property.property_key_string n in
       P.string f prop_name;
       P.string f "=";
-      P.string f "{";
-      let next_cxt = expression ~level:0 ctx f x in
-      P.string f "}";
-      next_cxt
+      print_prop_value x ctx
     in
     let printable_props =
       (match key with

tests/tests/src/preserve_jsx_test.mjs

@@ -34,21 +34,21 @@ let _single_element_fragment = <>
 
 let _multiple_element_fragment = <>
   <input
-    type={"text"}
+    type="text"
   />
   <input
-    type={"number"}
+    type="number"
   />
 </>;
 
 let _unary_element_with_props = <input
-  className={"foo"}
-  type={"text"}
+  className="foo"
+  type="text"
 />;
 
 let _container_element_with_props_and_children = <div
-  className={"foo"}
-  title={"foo"}
+  className="foo"
+  title="foo"
 >
   {"Hello, world!"}
 </div>;
@@ -62,19 +62,19 @@ let newrecord = {...baseProps};
 
 let _unary_element_with_spread_props = <input
   {...newrecord} 
-  type={"text"}
+  type="text"
 />;
 
 let newrecord$1 = {...baseProps};
 
 let _container_with_spread_props = <div
   {...newrecord$1} 
-  title={"barry"}
-  className={"barry"}
+  title="barry"
+  className="barry"
 >
   {"Hello, world!"}
   <input
-    type={"text"}
+    type="text"
   />
 </div>;
 
@@ -88,8 +88,8 @@ let baseChildren = [
 ];
 
 let _container_with_spread_children = <div
-  className={"barry"}
-  title={"barry"}
+  className="barry"
+  title="barry"
 >
   {baseChildren}
 </div>;
@@ -98,31 +98,31 @@ let newrecord$2 = {...baseProps};
 
 let _container_with_spread_props_and_children = <div
   {...newrecord$2} 
-  title={"barry"}
-  className={"barry"}
+  title="barry"
+  className="barry"
 >
   {baseChildren}
 </div>;
 
 let newrecord$3 = {...baseProps};
 
 let _unary_element_with_spread_props_keyed = <input
-  key={"barry-key"} 
+  key="barry-key"
   {...newrecord$3} 
-  type={"text"}
+  type="text"
 />;
 
 let newrecord$4 = {...baseProps};
 
 let _container_with_spread_props_keyed = <div
-  key={"barry-key"} 
+  key="barry-key"
   {...newrecord$4} 
-  title={"barry"}
-  className={"barry"}
+  title="barry"
+  className="barry"
 >
   {"Hello, world!"}
   <input
-    type={"text"}
+    type="text"
   />
 </div>;
 
@@ -161,29 +161,29 @@ let MyWeirdComponent = {
 };
 
 let _escaped_jsx_prop = <Preserve_jsx_test$MyWeirdComponent
-  MyWeirdProp={"bar"}
+  MyWeirdProp="bar"
 />;
 
 let _large_component = <div
-  className={"bar"}
+  className="bar"
   tabIndex={1}
-  title={"foo"}
+  title="foo"
   onClick={param => {}}
   onMouseDown={param => {}}
 >
   <p
-    className={"bar"}
+    className="bar"
     tabIndex={1}
-    title={"foo"}
+    title="foo"
     onClick={param => {}}
     onMouseDown={param => {}}
   >
     {"Hello, world!"}
   </p>
   <strong
-    className={"bar"}
+    className="bar"
     tabIndex={1}
-    title={"foo"}
+    title="foo"
     onClick={param => {}}
     onMouseDown={param => {}}
   >