Multiline JSX opening tag breaks children out too (for #73)

prettier · Jan 13, 2017 · 4fe16bd · 4fe16bd
1 parent 2e1e6ee
commit 4fe16bd
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 14 deletions.
diff --git a/src/printer.js b/src/printer.js
@@ -1156,7 +1156,7 @@ function genericPrintNoParens(path, options, print) {
       } else if (n.variance === "minus") {
         key = concat([ "-", key ]);
       }
-    } 
+    }
 
     parts.push(key);
 
@@ -2049,12 +2049,19 @@ function printJSXElement(path, options, print) {
 
     var mostChildren = children.slice(0, -1);
     var closingLines = path.call(print, "closingElement");
-    elem = concat([
+
+    const firstChild = children[0];
+    const lastChild = util.getLast(children);
+    const beginBreak = firstChild && firstChild.type === "line";
+    const endBreak = lastChild && lastChild.type === "line";
+
+    elem = multilineGroup(concat([
       openingLines,
-      indent(options.tabWidth, concat(mostChildren)),
-      util.getLast(children) || "",
-      closingLines
-    ]);
+      indent(options.tabWidth, concat([ beginBreak ? "" : softline ].concat(mostChildren))),
+      lastChild || "",
+      endBreak ? "" : softline,
+      closingLines,
+    ]));
   }
 
   const parent = path.getParentNode();

diff --git a/tests/prettier/__snapshots__/jsfmt.spec.js.snap b/tests/prettier/__snapshots__/jsfmt.spec.js.snap
@@ -70,10 +70,9 @@ 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>;
@@ -157,6 +156,15 @@ const render4 = ({ styles }) => <div style={styles} key=\"something\">Create wra
 
 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>
+      <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 notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 const render1 = ({ styles }) => (
@@ -176,14 +184,49 @@ 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>;
 
+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
+    >
+      <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 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
@@ -14,4 +14,13 @@ const render4 = ({ styles }) => <div style={styles} key="something">Create wrapp
 
 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>
+      <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 notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)