Break JSXOpeningElement between attributes (fixes #15)

prettier · Jan 12, 2017 · fffb358 · fffb358
1 parent ea03761
commit fffb358
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 14 deletions.
diff --git a/src/printer.js b/src/printer.js
@@ -1055,8 +1055,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
@@ -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
@@ -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
@@ -57,15 +57,65 @@ const comp3 = (
 );
 
 const comp4 = (
-  <div style={
-    styles
-  } key=\"something\">Create wrapping parens and indent<strong>all the things</strong>.</div>
+  <div
+    style={styles}
+    key=\"something\"
+  >Create wrapping parens and indent<strong>all the things</strong>.</div>
 );
 
 const comp5 = <div>Keep it on one line.</div>;
 "
 `;
 
+exports[`test jsx-split-attrs.js 1`] = `
+"long_closed =
+  <BaseForm url=\"/auth/google\" method=\"GET\" colour=\"blue\" size=\"large\" submitLabel=\"Sign in with Google\"/>
+
+long_open =
+  <BaseForm url=\"/auth/google\" method=\"GET\" colour=\"blue\" size=\"large\" submitLabel=\"Sign in with Google\">
+    hello
+  </BaseForm>
+
+short_closed =
+  <BaseForm url=\"/auth/google\" method=\"GET\"/>
+
+short_open =
+  <BaseForm url=\"/auth/google\" method=\"GET\">
+    hello
+  </BaseForm>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+long_closed = (
+  <BaseForm
+    url=\"/auth/google\"
+    method=\"GET\"
+    colour=\"blue\"
+    size=\"large\"
+    submitLabel=\"Sign in with Google\"
+  />
+);
+
+long_open = (
+  <BaseForm
+    url=\"/auth/google\"
+    method=\"GET\"
+    colour=\"blue\"
+    size=\"large\"
+    submitLabel=\"Sign in with Google\"
+  >
+    hello
+  </BaseForm>
+);
+
+short_closed = <BaseForm url=\"/auth/google\" method=\"GET\" />;
+
+short_open = (
+  <BaseForm url=\"/auth/google\" method=\"GET\">
+    hello
+  </BaseForm>
+);
+"
+`;
+
 exports[`test jsx-stateless-arrow-fn.js 1`] = `
 "const render1 = ({ styles }) => (
   <div style={styles} key=\"something\">
@@ -102,9 +152,10 @@ const render3 = ({ styles }) => (
 );
 
 const render4 = ({ styles }) => (
-  <div style={
-    styles
-  } key=\"something\">Create wrapping parens and indent<strong>all the things</strong>.</div>
+  <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>;

diff --git a/tests/prettier/jsx-split-attrs.js b/tests/prettier/jsx-split-attrs.js
@@ -0,0 +1,15 @@
+long_closed =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"/>
+
+long_open =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    hello
+  </BaseForm>
+
+short_closed =
+  <BaseForm url="/auth/google" method="GET"/>
+
+short_open =
+  <BaseForm url="/auth/google" method="GET">
+    hello
+  </BaseForm>