Wrap Stateless JSX Arrow Functions in Parens (fixes part of #73)

src/printer.js

@@ -338,12 +338,26 @@ function genericPrintNoParens(path, options, print) {
 
     parts.push(" =>");
 
-    return conditionalGroup([
-      concat([ concat(parts), " ", path.call(print, "body") ]),
-      concat([ concat(parts),
-               indent(options.tabWidth,
-                      concat([line, path.call(print, "body")]))])
-    ])
+    const body = path.call(print, "body");
+
+    const groups = [];
+    if (n.body.type === "JSXElement") {
+      // special-case JSX to wrap in parens (unless it's a one-liner)
+      if (!hasHardLine(body)) groups.push(concat([ concat(parts), " ", body ]));
+      groups.push(concat([
+        concat(parts),
+        " (",
+        indent(options.tabWidth, concat([ hardline, body ])),
+        hardline,
+        ")",
+      ]));
+    } else {
+      groups.push(concat([ concat(parts), " ", body ]));
+      groups.push(concat([
+        concat(parts), indent(options.tabWidth, concat([ line, body ]))
+      ]));
+    }
+    return conditionalGroup(groups);
   case "MethodDefinition":
     if (n.static) {
       parts.push("static ");

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

@@ -56,6 +56,57 @@ short_open = <BaseForm url=\"/auth/google\" method=\"GET\">
 "
 `;
 
+exports[`test jsx-stateless-arrow-fn.js 1`] = `
+"const render1 = ({ styles }) => (
+  <div style={styles} key=\"something\">
+    Keep the wrapping params. Put each key on it\'s own line.
+  </div>
+);
+
+const render2 = ({ styles }) => <div style={styles} key=\"something\">
+  Create wrapping params.
+</div>;
+
+const render3 = ({ styles }) => <div style={styles} key=\"something\">Bump to next line without parens</div>;
+
+const render4 = ({ styles }) => <div style={styles} key=\"something\">Create wrapping parens and indent <strong>all the things</strong>.</div>;
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const render1 = ({ styles }) => (
+  <div style={styles} key=\"something\">
+    Keep the wrapping params. Put each key on it\'s own line.
+  </div>
+);
+
+const render2 = ({ styles }) => (
+  <div style={styles} key=\"something\">
+    Create wrapping params.
+  </div>
+);
+
+const render3 = ({ styles }) => (
+  <div style={styles} key=\"something\">Bump to next line without parens</div>
+);
+
+const render4 = ({ styles }) => (
+  <div
+    style={styles}
+    key=\"something\"
+  >Create wrapping parens and indent<strong>all the things</strong>.</div>
+);
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) =>
+  this
+    .someLongCallWithParams(aaaaaa, bbbbbbb)
+    .anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd);
+"
+`;
+
 exports[`test optional-type-name.js 1`] = `
 "type Foo = (any) => string
 

tests/prettier/jsx-stateless-arrow-fn.js

@@ -0,0 +1,17 @@
+const render1 = ({ styles }) => (
+  <div style={styles} key="something">
+    Keep the wrapping params. Put each key on it's own line.
+  </div>
+);
+
+const render2 = ({ styles }) => <div style={styles} key="something">
+  Create wrapping params.
+</div>;
+
+const render3 = ({ styles }) => <div style={styles} key="something">Bump to next line without parens</div>;
+
+const render4 = ({ styles }) => <div style={styles} key="something">Create wrapping parens and indent <strong>all the things</strong>.</div>;
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)