Tweak to support FB translation pipeline (#2272)

This also improves formatting when there are consecutive tag/expression elements with no white space between them.

src/printer.js

@@ -3705,7 +3705,7 @@ function printJSXChildren(path, options, print, jsxWhitespace) {
           children.push("");
           words.shift();
           if (/\n/.test(words[0])) {
-            children.push(softline);
+            children.push(hardline);
           } else {
             children.push(jsxWhitespace);
           }
@@ -3734,7 +3734,7 @@ function printJSXChildren(path, options, print, jsxWhitespace) {
 
         if (endWhitespace !== undefined) {
           if (/\n/.test(endWhitespace)) {
-            children.push(softline);
+            children.push(hardline);
           } else {
             children.push(jsxWhitespace);
           }
@@ -3773,25 +3773,17 @@ function printJSXChildren(path, options, print, jsxWhitespace) {
       const printedChild = print(childPath);
       children.push(printedChild);
 
-      const isBrTag =
-        child.type === "JSXElement" && child.openingElement.name.name === "br";
-      if (isBrTag) {
-        // Forcing a hardline after a `<br />` tag gives much better text
-        // layout.
-        children.push(hardline);
-        return;
-      }
-
       const next = n.children[i + 1];
-      const followedByMeaningfulText = next && isMeaningfulJSXText(next);
+      const directlyFollowedByMeaningfulText =
+        next && isMeaningfulJSXText(next) && !/^[ \n\r\t]/.test(rawText(next));
       const followedByJSXWhitespace = next && isJSXWhitespaceExpression(next);
-      if (followedByMeaningfulText || followedByJSXWhitespace) {
+      if (directlyFollowedByMeaningfulText || followedByJSXWhitespace) {
         // Potentially this could be a softline as well.
         // See the comment above about the Facebook translation pipeline as
         // to why this is an empty string.
         children.push("");
       } else {
-        children.push(softline);
+        children.push(hardline);
       }
     }
   }, "children");
@@ -3873,64 +3865,47 @@ function printJSXElement(path, options, print) {
   // to get the correct output.
   for (let i = children.length - 2; i >= 0; i--) {
     const isPairOfEmptyStrings = children[i] === "" && children[i + 1] === "";
-    const isSoftlineFollowedByJSXWhitespace =
-      children[i] === softline &&
+    const isPairOfHardlines =
+      children[i] === hardline &&
+      children[i + 1] === "" &&
+      children[i + 2] === hardline;
+    const isLineFollowedByJSXWhitespace =
+      (children[i] === softline || children[i] === hardline) &&
       children[i + 1] === "" &&
       children[i + 2] === jsxWhitespace;
-    const isJSXWhitespaceFollowedBySoftline =
+    const isJSXWhitespaceFollowedByLine =
       children[i] === jsxWhitespace &&
       children[i + 1] === "" &&
-      children[i + 2] === softline;
-    const isEmptyFollowedByHardline =
-      children[i] === "" && children[i + 1] === hardline;
+      (children[i + 2] === softline || children[i + 2] === hardline);
+
     if (
+      (isPairOfHardlines && containsText) ||
       isPairOfEmptyStrings ||
-      isSoftlineFollowedByJSXWhitespace ||
-      (isEmptyFollowedByHardline && containsText)
+      isLineFollowedByJSXWhitespace
     ) {
       children.splice(i, 2);
-    } else if (isJSXWhitespaceFollowedBySoftline) {
+    } else if (isJSXWhitespaceFollowedByLine) {
       children.splice(i + 1, 2);
     }
   }
 
-  // Trim trailing lines (or empty strings), recording if there was a hardline
-  let numTrailingHard = 0;
+  // Trim trailing lines (or empty strings)
   while (
     children.length &&
     (isLineNext(util.getLast(children)) || isEmpty(util.getLast(children)))
   ) {
-    if (willBreak(util.getLast(children))) {
-      ++numTrailingHard;
-      forcedBreak = true;
-    }
     children.pop();
   }
-  // allow one extra newline
-  if (numTrailingHard > 1) {
-    children.push("");
-    children.push(hardline);
-  }
 
-  // Trim leading lines (or empty strings), recording if there was a hardline
-  let numLeadingHard = 0;
+  // Trim leading lines (or empty strings)
   while (
     children.length &&
     (isLineNext(children[0]) || isEmpty(children[0])) &&
     (isLineNext(children[1]) || isEmpty(children[1]))
   ) {
-    if (willBreak(children[0]) || willBreak(children[1])) {
-      ++numLeadingHard;
-      forcedBreak = true;
-    }
     children.shift();
     children.shift();
   }
-  // allow one extra newline
-  if (numLeadingHard > 1) {
-    children.unshift(hardline);
-    children.unshift("");
-  }
 
   // Tweak how we format children if outputting this element over multiple lines.
   // Also detect whether we will force this element to output over multiple lines.

tests/flow/more_react/__snapshots__/jsfmt.spec.js.snap

@@ -99,7 +99,8 @@ var App = React.createClass({
 
     return (
       <div>
-        {foo(x, y)}{foo(z, x)} // error, since z: number
+        {foo(x, y)}
+        {foo(z, x)} // error, since z: number
       </div>
     );
   }

tests/jsx-newlines/__snapshots__/jsfmt.spec.js.snap

@@ -117,7 +117,10 @@ newlines_elems_spaced = (
 
 newlines_mixed = (
   <div>
-    hi<span>there</span>how are <strong>you</strong>are you fine today?
+    hi
+    <span>there</span>
+    how are <strong>you</strong>
+    are you fine today?
   </div>
 );
 
@@ -126,7 +129,10 @@ newlines_elems = (
     <div>
       <div />
     </div>
-    hi<div /><span /><Big />
+    hi
+    <div />
+    <span />
+    <Big />
   </div>
 );
 

tests/jsx-significant-space/__snapshots__/jsfmt.spec.js.snap

@@ -189,8 +189,7 @@ not_broken_end = (
 
 not_broken_begin = (
   <div>
-    <br />
-    {" "}long text long text long text long text long text long text long text
+    <br /> long text long text long text long text long text long text long text
     long text<link>url</link> long text long text
   </div>
 );

tests/jsx-stateless-arrow-fn/__snapshots__/jsfmt.spec.js.snap

@@ -135,8 +135,9 @@ const render6 = ({ styles }) =>
 
 const render7 = () =>
   <div>
-    <span /><span>Dont break each elem onto its own line.</span> <span /><div />{" "}
-    <div />
+    <span />
+    <span>Dont break each elem onto its own line.</span> <span />
+    <div /> <div />
   </div>;
 
 const render7A = () =>

tests/jsx-text-wrap/__snapshots__/jsfmt.spec.js.snap

@@ -253,7 +253,8 @@ expression_does_not_break =
 
 // FIXME
 br_triggers_expression_break =
-  <div><br />text text text text text text text text text text text {this.props.type} </div>
+  <div><br />
+  text text text text text text text text text text text {this.props.type} </div>
 
 jsx_whitespace_after_tag =
   <div>
@@ -271,6 +272,33 @@ x =
     </div>{" "}
     HRS
   </div>
+
+x =
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+
+x =
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+
+x =
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row + 1}:{endRange.column + 1}{caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Wrapping text
 x = (
@@ -303,7 +331,9 @@ x = (
 // Wrapping tags
 x = (
   <div>
-    <a /><b /><c />
+    <a />
+    <b />
+    <c />
     <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first>{" "}
     <first>f</first>
   </div>
@@ -329,7 +359,8 @@ x = (
 x = (
   <div>
     before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
-    {stuff}{stuff}after{stuff}after
+    {stuff}
+    {stuff}after{stuff}after
   </div>
 );
 
@@ -387,7 +418,9 @@ x = (
 
 x = (
   <div>
-    <div>First</div>Second<div>Third</div>
+    <div>First</div>
+    Second
+    <div>Third</div>
   </div>
 );
 
@@ -532,7 +565,8 @@ no_text_one_tag_per_line = (
 
 with_text_fill_line = (
   <div>
-    Text <first /><second />
+    Text <first />
+    <second />
   </div>
 );
 
@@ -546,22 +580,21 @@ line_after_br = (
 
 line_after_br_2 = (
   <div>
-    A<br />
-    B<br />
-    C
+    A<br />B<br />C
   </div>
 );
 
 br_followed_by_whitespace = (
   <div>
-    <br />
-    {" "}text
+    <br /> text
   </div>
 );
 
 dont_preserve_blank_lines_when_jsx_contains_text = (
   <div>
-    <div>Zeroth</div><div>First</div>Second
+    <div>Zeroth</div>
+    <div>First</div>
+    Second
   </div>
 );
 
@@ -615,4 +648,34 @@ x = (
   </div>
 );
 
+x = (
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+);
+
+x = (
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+);
+
+x = (
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} -{" "}
+            {endRange.row + 1}:{endRange.column + 1}
+            {caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
 `;

tests/jsx-text-wrap/test.js

@@ -250,7 +250,8 @@ expression_does_not_break =
 
 // FIXME
 br_triggers_expression_break =
-  <div><br />text text text text text text text text text text text {this.props.type} </div>
+  <div><br />
+  text text text text text text text text text text text {this.props.type} </div>
 
 jsx_whitespace_after_tag =
   <div>
@@ -268,3 +269,30 @@ x =
     </div>{" "}
     HRS
   </div>
+
+x =
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+
+x =
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+
+x =
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row + 1}:{endRange.column + 1}{caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+