From fbc0969a5559df671fe2f4c0d32e53619bee0b58 Mon Sep 17 00:00:00 2001
From: Alex Rattray <rattray.alex@gmail.com>
Date: Wed, 11 Jan 2017 10:03:02 -0800
Subject: [PATCH] Break JSXOpeningElement between attributes (fixes #15)

---
 src/printer.js                                |  9 +++-
 .../__snapshots__/jsfmt.spec.js.snap          |  6 +--
 .../__snapshots__/jsfmt.spec.js.snap          |  6 +--
 .../prettier/__snapshots__/jsfmt.spec.js.snap | 48 +++++++++++++++++++
 tests/prettier/jsx_long_name_closed.js        |  1 +
 tests/prettier/jsx_long_name_open.js          |  3 ++
 tests/prettier/jsx_short_name_closed.js       |  1 +
 tests/prettier/jsx_short_name_open.js         |  3 ++
 8 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 tests/prettier/jsx_long_name_closed.js
 create mode 100644 tests/prettier/jsx_long_name_open.js
 create mode 100644 tests/prettier/jsx_short_name_closed.js
 create mode 100644 tests/prettier/jsx_short_name_open.js

diff --git a/src/printer.js b/src/printer.js
index 9e41a6a39133..080bafdd3fe3 100644
--- a/src/printer.js
+++ b/src/printer.js
@@ -1108,8 +1108,13 @@ function genericPrintNoParens(path, options, print) {
       concat([
         "<",
         path.call(print, "name"),
-        concat(path.map(attr => concat([" ", print(attr)]), "attributes")),
-        n.selfClosing ? " />" : ">"
+        multilineGroup(concat([
+          indent(options.tabWidth,
+            concat(path.map(attr => concat([line, print(attr)]), "attributes"))
+          ),
+          n.selfClosing ? line : softline,
+        ])),
+        n.selfClosing ? "/>" : ">"
       ])
     );
   case "JSXClosingElement":
diff --git a/tests/jsx_intrinsics.builtin/__snapshots__/jsfmt.spec.js.snap b/tests/jsx_intrinsics.builtin/__snapshots__/jsfmt.spec.js.snap
index 919599d66e7b..4f2c16e56f70 100644
--- a/tests/jsx_intrinsics.builtin/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/jsx_intrinsics.builtin/__snapshots__/jsfmt.spec.js.snap
@@ -39,9 +39,9 @@ var c: React.Element<any> = <div not_a_real_attr=\"asdf\" />;
 // different attributes.
 var d: React.Element<{ doesntmatch: string }> = <div not_a_real_attr=\"asdf\" />;
 // No error as long as expectations are consistent, though.
-var e: React.Element<{
-  not_a_real_attr: string
-}> = <div not_a_real_attr=\"asdf\" />;
+var e: React.Element<{ not_a_real_attr: string }> = <div
+  not_a_real_attr=\"asdf\"
+/>;
 "
 `;
 
diff --git a/tests/jsx_intrinsics.custom/__snapshots__/jsfmt.spec.js.snap b/tests/jsx_intrinsics.custom/__snapshots__/jsfmt.spec.js.snap
index 34d3db059d74..a7e615c4a9ff 100644
--- a/tests/jsx_intrinsics.custom/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/jsx_intrinsics.custom/__snapshots__/jsfmt.spec.js.snap
@@ -32,9 +32,9 @@ var b: React.Element<{ prop1: string }> = <CustomComponent prop=\"asdf\" />;
 <div id={42} />;
 // Error: (\`id\` prop) number ~> string
 var c: React.Element<{ id: string }> = <div id=\"asdf\" />;
-var d: React.Element<{
-  id: number
-}> = <div id=\"asdf\" />; // Error: Props<{id:string}> ~> Props<{id:number}>
+var d: React.Element<{ id: number }> = <div
+  id=\"asdf\"
+/>; // Error: Props<{id:string}> ~> Props<{id:number}>
 "
 `;
 
diff --git a/tests/prettier/__snapshots__/jsfmt.spec.js.snap b/tests/prettier/__snapshots__/jsfmt.spec.js.snap
index 8fb274d19635..88e85cce6c3e 100644
--- a/tests/prettier/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/prettier/__snapshots__/jsfmt.spec.js.snap
@@ -13,6 +13,54 @@ function fn() {
 "
 `;
 
+exports[`test jsx_long_name_closed.js 1`] = `
+"<BaseForm url=\"/auth/google\" method=\"GET\" colour=\"blue\" size=\"large\" submitLabel=\"Sign in with Google\"/>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<BaseForm
+  url=\"/auth/google\"
+  method=\"GET\"
+  colour=\"blue\"
+  size=\"large\"
+  submitLabel=\"Sign in with Google\"
+/>;
+"
+`;
+
+exports[`test jsx_long_name_open.js 1`] = `
+"<BaseForm url=\"/auth/google\" method=\"GET\" colour=\"blue\" size=\"large\" submitLabel=\"Sign in with Google\">
+  hello
+</BaseForm>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<BaseForm
+  url=\"/auth/google\"
+  method=\"GET\"
+  colour=\"blue\"
+  size=\"large\"
+  submitLabel=\"Sign in with Google\"
+>
+  hello
+</BaseForm>;
+"
+`;
+
+exports[`test jsx_short_name_closed.js 1`] = `
+"<BaseForm url=\"/auth/google\" method=\"GET\"/>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<BaseForm url=\"/auth/google\" method=\"GET\" />;
+"
+`;
+
+exports[`test jsx_short_name_open.js 1`] = `
+"<BaseForm url=\"/auth/google\" method=\"GET\">
+  hello
+</BaseForm>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<BaseForm url=\"/auth/google\" method=\"GET\">
+  hello
+</BaseForm>;
+"
+`;
+
 exports[`test optional-type-name.js 1`] = `
 "type Foo = (any) => string
 
diff --git a/tests/prettier/jsx_long_name_closed.js b/tests/prettier/jsx_long_name_closed.js
new file mode 100644
index 000000000000..c53659c23b42
--- /dev/null
+++ b/tests/prettier/jsx_long_name_closed.js
@@ -0,0 +1 @@
+<BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"/>
diff --git a/tests/prettier/jsx_long_name_open.js b/tests/prettier/jsx_long_name_open.js
new file mode 100644
index 000000000000..210e6aec6e44
--- /dev/null
+++ b/tests/prettier/jsx_long_name_open.js
@@ -0,0 +1,3 @@
+<BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+  hello
+</BaseForm>
diff --git a/tests/prettier/jsx_short_name_closed.js b/tests/prettier/jsx_short_name_closed.js
new file mode 100644
index 000000000000..ba8a3ee43e81
--- /dev/null
+++ b/tests/prettier/jsx_short_name_closed.js
@@ -0,0 +1 @@
+<BaseForm url="/auth/google" method="GET"/>
diff --git a/tests/prettier/jsx_short_name_open.js b/tests/prettier/jsx_short_name_open.js
new file mode 100644
index 000000000000..1486b67388ce
--- /dev/null
+++ b/tests/prettier/jsx_short_name_open.js
@@ -0,0 +1,3 @@
+<BaseForm url="/auth/google" method="GET">
+  hello
+</BaseForm>