Improve printing of jsx: (reasonml#2219)

* inline Pexp_apply where possible with brace hugging
* improve formatting of spread children with Pexp_apply & Pexp_fun

Author: IwanKaramazow

formatTest/unit_tests/expected_output/jsx.re

@@ -43,20 +43,18 @@ let y =
 
 let z =
   <div
-    style={
-      ReactDOMRe.Style.make(
-        ~width,
-        ~height,
-        ~color,
-        ~backgroundColor,
-        ~margin,
-        ~padding,
-        ~border,
-        ~borderColor,
-        ~someOtherAttribute,
-        (),
-      )
-    }
+    style={ReactDOMRe.Style.make(
+      ~width,
+      ~height,
+      ~color,
+      ~backgroundColor,
+      ~margin,
+      ~padding,
+      ~border,
+      ~borderColor,
+      ~someOtherAttribute,
+      (),
+    )}
     key={string_of_int(1)}
   />;
 
@@ -174,13 +172,11 @@ let y = [
   child
 </Description>;
 <Description
-  term={
-    Text.createElement(
-      ~text="Age",
-      ~children=[],
-      (),
-    )
-  }>
+  term={Text.createElement(
+    ~text="Age",
+    ~children=[],
+    (),
+  )}>
   child
 </Description>;
 <Description
@@ -499,3 +495,79 @@ switch (foo) {
 </div>;
 
 ReasonReact.(<> {string("Test")} </>);
+
+<div
+  style={
+    [@foo]
+    ReactDOMRe.Style.make(
+      ~width="20px",
+      ~height="20px",
+      ~borderRadius="100%",
+      ~backgroundColor="red",
+    )
+  }
+/>;
+
+<Animated initialValue=0.0 value>
+  ...{ReactDOMRe.Style.make(
+    ~width="20px",
+    ~height="20px",
+    ~borderRadius="100%",
+    ~backgroundColor="red",
+  )}
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{value =>
+    <div
+      style={ReactDOMRe.Style.make(
+        ~width="20px",
+        ~height="20px",
+        ~borderRadius="100%",
+        ~backgroundColor="red",
+      )}
+    />
+  }
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{(value): ReasonReact.element =>
+    <div
+      style={ReactDOMRe.Style.make(
+        ~width="20px",
+        ~height="20px",
+        ~borderRadius="100%",
+        ~backgroundColor="red",
+      )}
+    />
+  }
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{[@foo] value =>
+    <div
+      style={ReactDOMRe.Style.make(
+        ~width="20px",
+        ~height="20px",
+        ~borderRadius="100%",
+        ~backgroundColor="red",
+      )}
+    />
+  }
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{value => {
+    let width = "20px";
+    let height = "20px";
+
+    <div
+      style={ReactDOMRe.Style.make(
+        ~width,
+        ~height,
+        ~borderRadius="100%",
+        ~backgroundColor="red",
+      )}
+    />;
+  }}
+</Animated>;

formatTest/unit_tests/input/jsx.re

@@ -375,3 +375,95 @@ switch(foo) {
 </div>;
 
 ReasonReact.(<> {string("Test")} </>);
+
+<div
+ style={
+   [@foo]
+   ReactDOMRe.Style.make(
+     ~width="20px",
+     ~height="20px",
+     ~borderRadius="100%",
+     ~backgroundColor="red",
+   )
+ }
+/>;
+
+<Animated initialValue=0.0 value>
+  ...{
+       ReactDOMRe.Style.make(
+         ~width="20px",
+         ~height="20px",
+         ~borderRadius="100%",
+         ~backgroundColor="red",
+       )
+     }
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{
+       value =>
+         <div
+           style={
+             ReactDOMRe.Style.make(
+               ~width="20px",
+               ~height="20px",
+               ~borderRadius="100%",
+               ~backgroundColor="red",
+             )
+           }
+         />
+     }
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{
+     (value) :ReasonReact.element =>
+         <div
+           style={
+             ReactDOMRe.Style.make(
+               ~width="20px",
+               ~height="20px",
+               ~borderRadius="100%",
+               ~backgroundColor="red",
+             )
+           }
+         />
+     }
+</Animated>;
+
+
+<Animated initialValue=0.0 value>
+  ...{
+    [@foo] value => {
+         <div
+           style={
+             ReactDOMRe.Style.make(
+               ~width="20px",
+               ~height="20px",
+               ~borderRadius="100%",
+               ~backgroundColor="red",
+             )
+           }
+         />
+     }
+  }
+</Animated>;
+
+<Animated initialValue=0.0 value>
+  ...{value => {
+       let width = "20px";
+       let height = "20px";
+
+       <div
+         style={
+           ReactDOMRe.Style.make(
+             ~width,
+             ~height,
+             ~borderRadius="100%",
+             ~backgroundColor="red",
+           )
+         }
+       />
+     }
+  }
+</Animated>;