Introduce line-suffix-boundary (#750)

The idea is that if you reach the end of the `}` inside of a template literal, we have to flush the trailing comma, otherwise it would generate invalid code. We also need the same special case for JSX.

I don't like adding yet another type of document but it seems like the most elegant way to solve the problem.

Fixes #623

src/doc-builders.js

@@ -67,6 +67,7 @@ function lineSuffix(contents) {
   return { type: "line-suffix", contents };
 }
 
+const lineSuffixBoundary = { type: "line-suffix-boundary" };
 const breakParent = { type: "break-parent" };
 const line = { type: "line" };
 const softline = { type: "line", soft: true };
@@ -100,6 +101,7 @@ module.exports = {
   group,
   conditionalGroup,
   lineSuffix,
+  lineSuffixBoundary,
   breakParent,
   ifBreak,
   indent

src/doc-printer.js

@@ -192,6 +192,11 @@ function printDocToString(doc, width, newLine) {
         case "line-suffix":
           lineSuffix.push([ind, mode, doc.contents]);
           break;
+        case "line-suffix-boundary":
+          if (lineSuffix.length > 0) {
+            cmds.push([ind, mode, { type: "line", hard: true }]);
+          }
+          break;
         case "line":
           switch (mode) {
             // fallthrough

src/printer.js

@@ -18,6 +18,7 @@ var indent = docBuilders.indent;
 var conditionalGroup = docBuilders.conditionalGroup;
 var ifBreak = docBuilders.ifBreak;
 var breakParent = docBuilders.breakParent;
+var lineSuffixBoundary = docBuilders.lineSuffixBoundary;
 
 var docUtils = require("./doc-utils");
 var willBreak = docUtils.willBreak;
@@ -1230,7 +1231,7 @@ function genericPrintNoParens(path, options, print) {
             n.expression.type === "LogicalExpression");
 
       if (shouldInline) {
-        return group(concat(["{", path.call(print, "expression"), "}"]));
+        return group(concat(["{", path.call(print, "expression"), lineSuffixBoundary, "}"]));
       }
 
       return group(
@@ -1241,6 +1242,7 @@ function genericPrintNoParens(path, options, print) {
             concat([softline, path.call(print, "expression")])
           ),
           softline,
+          lineSuffixBoundary,
           "}"
         ])
       );
@@ -1387,7 +1389,11 @@ function genericPrintNoParens(path, options, print) {
           parts.push(print(childPath));
 
           if (i < expressions.length) {
-            parts.push("${", removeLines(expressions[i]), "}");
+            parts.push(
+              "${",
+              removeLines(expressions[i]), lineSuffixBoundary,
+              "}"
+            );
           }
         },
         "quasis"

tests/line_suffix_boundary/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`boundary.js 1`] = `
+"\`\${
+a +  // a
+  a
+}
+
+\${a // comment
+}
+
+\${b /* comment */}
+
+\${/* comment */ c /* comment */}
+
+\${// comment
+d //comment
+}
+
+\${// $FlowFixMe found when converting React.createClass to ES6
+ExampleStory.getFragment('story')}
+\`;
+
+<div>
+{ExampleStory.getFragment('story') // $FlowFixMe found when converting React.createClass to ES6
+}
+</div>;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+\`\${a + a // a
+}
+
+\${/* comment*/
+a}
+
+\${/* comment */ b}
+
+\${/* comment */ /* comment */ c}
+
+\${/* comment*/
+/*comment*/
+d}
+
+\${/* $FlowFixMe found when converting React.createClass to ES6*/
+ExampleStory.getFragment(\\"story\\")}
+\`;
+
+<div>
+  {ExampleStory.getFragment(\\"story\\") // $FlowFixMe found when converting React.createClass to ES6
+  }
+</div>;
+"
+`;
+
+exports[`boundary.js 2`] = `
+"\`\${
+a +  // a
+  a
+}
+
+\${a // comment
+}
+
+\${b /* comment */}
+
+\${/* comment */ c /* comment */}
+
+\${// comment
+d //comment
+}
+
+\${// $FlowFixMe found when converting React.createClass to ES6
+ExampleStory.getFragment('story')}
+\`;
+
+<div>
+{ExampleStory.getFragment('story') // $FlowFixMe found when converting React.createClass to ES6
+}
+</div>;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+\`\${a + a // a
+}
+
+\${/* comment*/
+a}
+
+\${/* comment */ b}
+
+\${/* comment */ /* comment */ c}
+
+\${/* comment*/
+/*comment*/
+d}
+
+\${/* $FlowFixMe found when converting React.createClass to ES6*/
+ExampleStory.getFragment(\\"story\\")}
+\`;
+
+<div>
+  {ExampleStory.getFragment(\\"story\\") // $FlowFixMe found when converting React.createClass to ES6
+  }
+</div>;
+"
+`;

tests/line_suffix_boundary/boundary.js

@@ -0,0 +1,24 @@
+`${
+a +  // a
+  a
+}
+
+${a // comment
+}
+
+${b /* comment */}
+
+${/* comment */ c /* comment */}
+
+${// comment
+d //comment
+}
+
+${// $FlowFixMe found when converting React.createClass to ES6
+ExampleStory.getFragment('story')}
+`;
+
+<div>
+{ExampleStory.getFragment('story') // $FlowFixMe found when converting React.createClass to ES6
+}
+</div>;

tests/line_suffix_boundary/jsfmt.spec.js

@@ -0,0 +1,2 @@
+run_spec(__dirname);
+run_spec(__dirname, {parser: 'babylon'});