Remove parenthesis for JSX inside of arrow functions (#1733)

I didn't intend for putting parenthesis there in the first place but it slept through. Since it was going to trigger a ton of changes I held up changing it, but I feel like we need to do it sooner than later otherwise we're not going to be able to do it. A lot of people writing functional components are going to be very happy about this change :)

src/printer.js

@@ -417,7 +417,6 @@ function genericPrintNoParens(path, options, print, args) {
         !hasLeadingOwnLineComment(options.originalText, n.body) &&
         (n.body.type === "ArrayExpression" ||
           n.body.type === "ObjectExpression" ||
-          n.body.type === "JSXElement" ||
           n.body.type === "BlockStatement" ||
           isTemplateOnItsOwnLine(n.body, options.originalText) ||
           n.body.type === "ArrowFunctionExpression")
@@ -3958,7 +3957,8 @@ function maybeWrapJSXElementInParens(path, elem) {
     ExpressionStatement: true,
     CallExpression: true,
     ConditionalExpression: true,
-    LogicalExpression: true
+    LogicalExpression: true,
+    ArrowFunctionExpression: true
   };
   if (NO_WRAP_PARENTS[parent.type]) {
     return elem;

tests/jsx-stateless-arrow-fn/__snapshots__/jsfmt.spec.js.snap

@@ -75,31 +75,27 @@ const renderTernary = (props) =>
     {props.showTheOtherThing ? <div>I am here!!</div> : null}
   </BaseForm>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-const render1 = ({ styles }) => (
+const render1 = ({ styles }) =>
   <div style={styles} key="something">
     Keep the wrapping parens. Put each key on its own line.
-  </div>
-);
+  </div>;
 
-const render2 = ({ styles }) => (
+const render2 = ({ styles }) =>
   <div style={styles} key="something">
     Create wrapping parens.
-  </div>
-);
+  </div>;
 
-const render3 = ({ styles }) => (
-  <div style={styles} key="something">Bump to next line without parens</div>
-);
+const render3 = ({ styles }) =>
+  <div style={styles} key="something">Bump to next line without parens</div>;
 
-const render4 = ({ styles }) => (
+const render4 = ({ styles }) =>
   <div style={styles} key="something">
     Create wrapping parens and indent <strong>all the things</strong>.
-  </div>
-);
+  </div>;
 
 const render5 = ({ styles }) => <div>Keep it on one line.</div>;
 
-const render6 = ({ styles }) => (
+const render6 = ({ styles }) =>
   <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
     <div
       attr1="aaaaaaaaaaaaaaaaa"
@@ -134,39 +130,33 @@ const render6 = ({ styles }) => (
       {" "}
       <strong>hello</strong>
     </div>
-  </div>
-);
+  </div>;
 
-const render7 = () => (
+const render7 = () =>
   <div>
     <span /><span>Dont break each elem onto its own line.</span> <span />
     <div /> <div />
-  </div>
-);
+  </div>;
 
-const render7A = () => (
+const render7A = () =>
   <div>
     <div /><div /><div />
-  </div>
-);
+  </div>;
 
-const render7B = () => (
+const render7B = () =>
   <div>
     <span> <span /> Dont break plz</span>
     <span><span />Dont break plz</span>
     <span>Dont break plz<span /></span>
-  </div>
-);
+  </div>;
 
 const render8 = props => <div>{props.text}</div>;
-const render9 = props => (
-  <div>{props.looooooooooooooooooooooooooooooong_text}</div>
-);
-const render10 = props => (
+const render9 = props =>
+  <div>{props.looooooooooooooooooooooooooooooong_text}</div>;
+const render10 = props =>
   <div>
     {props.even_looooooooooooooooooooooooooooooooooooooooooonger_contents}
-  </div>
-);
+  </div>;
 
 const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) =>
   this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(
@@ -185,7 +175,7 @@ React.render(
   document.querySelector("#react-root")
 );
 
-const renderTernary = props => (
+const renderTernary = props =>
   <BaseForm
     url="/auth/google"
     method="GET"
@@ -228,7 +218,6 @@ const renderTernary = props => (
         </BaseForm>}
     {props.showTheOtherThing ? <div>I am here</div> : <div attr="blah" />}
     {props.showTheOtherThing ? <div>I am here!!</div> : null}
-  </BaseForm>
-);
+  </BaseForm>;
 
 `;

tests/jsx/__snapshots__/jsfmt.spec.js.snap

@@ -89,21 +89,20 @@ exports[`expression.js 1`] = `
 />;
 
 <Something>
-  {() => (
+  {() =>
+    <SomethingElse>
+      <span />
+    </SomethingElse>}
+</Something>;
+
+<Something>
+  {items.map(item =>
     <SomethingElse>
       <span />
     </SomethingElse>
   )}
 </Something>;
 
-<Something>
-  {items.map(item => (
-    <SomethingElse>
-      <span />
-    </SomethingElse>
-  ))}
-</Something>;
-
 <Something>
   {function() {
     return (
@@ -205,28 +204,28 @@ exports[`hug.js 1`] = `
   {__DEV__
     ? this.renderDevApp()
     : <div>
-        {routes.map(route => (
+        {routes.map(route =>
           <MatchAsync
             key={\`\${route.to}-async\`}
             pattern={route.to}
             exactly={route.to === "/"}
             getComponent={routeES6Modules[route.value]}
           />
-        ))}
+        )}
       </div>}
 </div>;
 
 <div>
   {__DEV__ &&
     <div>
-      {routes.map(route => (
+      {routes.map(route =>
         <MatchAsync
           key={\`\${route.to}-async\`}
           pattern={route.to}
           exactly={route.to === "/"}
           getComponent={routeES6Modules[route.value]}
         />
-      ))}
+      )}
     </div>}
 </div>;
 

tests/last_argument_expansion/__snapshots__/jsfmt.spec.js.snap

@@ -282,11 +282,11 @@ const els = items.map(item => (
   </div>
 ));
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-const els = items.map(item => (
+const els = items.map(item =>
   <div className="whatever">
     <span>{children}</span>
   </div>
-));
+);
 
 `;
 

tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap

@@ -29,11 +29,10 @@ const MyCoolList = ({ things }) =>
 
 const MyCoolThing = ({ thingo }) => <li>{thingo}</li>;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-const MyCoolList = ({ things }) => (
+const MyCoolList = ({ things }) =>
   <ul>
     {things.map(MyCoolThing)}
-  </ul>
-);
+  </ul>;
 
 const MyCoolThing = ({ thingo }) => <li>{thingo}</li>;