All JSXElement siblings on separate lines

prettier · Jan 12, 2017 · aa45c6c · aa45c6c
1 parent 5e21062
commit aa45c6c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/src/printer.js b/src/printer.js
@@ -2010,6 +2010,11 @@ function printJSXElement(path, options, print) {
             children.push(hardline);
           }
         } else {
+          // ensure sibling `JSXElement`s are on separate lines (strings have no "type")
+          const prev = util.getLast(children);
+          if (prev && prev.type !== "line") {
+            children.push(softline);
+          }
           children.push(print(childPath));
         }
       },

diff --git a/tests/prettier/__snapshots__/jsfmt.spec.js.snap b/tests/prettier/__snapshots__/jsfmt.spec.js.snap
@@ -146,12 +146,18 @@ const render5 = ({ styles }) => <div>Keep it on one line.</div>;
 const render6 = ({ styles }) => (
   <div attr1=\"aaaaaaaaaaaaaaaaa\" attr2=\"bbbbbbbbbbb\" attr3=\"cccccccccccc\">
     <div attr1=\"aaaaaaaaaaaaaaaaa\" attr2=\"bbbbbbbbbbb\" attr3=\"cccccccccccc\" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
-    <div attr1=\"aaaaaaaaaaaaaaaaa\" attr2=\"bbbbbbbbbbb\" attr3=\"cccccccccccc\" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
+    <div attr1=\"aaaaaaaaaaaaaaaaa\" attr2=\"bbbbbbbbbbb\" attr3=\"cccccccccccc\" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div><strong>goodbye</strong>
     <div attr1=\"aaaaaaaaaaaaaaaaa\" attr2=\"bbbbbbbbbbb\" attr3=\"cccccccccccc\" attr4>
       <div attr1=\"aaaaaaaaaaaaaaaaa\" attr2=\"bbbbbbbbbbb\" attr3=\"cccccccccccc\" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div> <strong>hello</strong></div>
   </div>
 )
 
+const render7 = () =>
+  <div>
+    <span /><span>Break each elem onto its own line.</span> <span />
+    <div /> <div />
+  </div>
+
 const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const render1 = ({ styles }) => (
@@ -196,6 +202,7 @@ const render6 = ({ styles }) => (
     >
       ddd d dd d d dddd dddd <strong>hello</strong>
     </div>
+    <strong>goodbye</strong>
     <div
       attr1=\"aaaaaaaaaaaaaaaaa\"
       attr2=\"bbbbbbbbbbb\"
@@ -209,11 +216,22 @@ const render6 = ({ styles }) => (
         attr4
       >
         ddd d dd d d dddd dddd <strong>hello</strong>
-      </div><strong>hello</strong>
+      </div>
+      <strong>hello</strong>
     </div>
   </div>
 );
 
+const render7 = () => (
+  <div>
+    <span />
+    <span>Break each elem onto its own line.</span>
+    <span />
+    <div />
+    <div />
+  </div>
+);
+
 const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) =>
   this
     .someLongCallWithParams(aaaaaa, bbbbbbb)

diff --git a/tests/prettier/jsx-stateless-arrow-fn.js b/tests/prettier/jsx-stateless-arrow-fn.js
@@ -17,10 +17,16 @@ const render5 = ({ styles }) => <div>Keep it on one line.</div>;
 const render6 = ({ styles }) => (
   <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
     <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
-    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div><strong>goodbye</strong>
     <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>
       <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div> <strong>hello</strong></div>
   </div>
 )
 
+const render7 = () =>
+  <div>
+    <span /><span>Break each elem onto its own line.</span> <span />
+    <div /> <div />
+  </div>
+
 const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)