Improve template literal expresions line breaks (#3124)

src/printer.js

@@ -1934,13 +1934,19 @@ function genericPrintNoParens(path, options, print, args) {
             tabWidth
           );
 
-          const aligned = addAlignmentToDoc(
-            expressions[i],
-            indentSize,
-            tabWidth
-          );
+          let printed = expressions[i];
 
-          parts.push("${", aligned, lineSuffixBoundary, "}");
+          if (
+            n.expressions[i].type === "Identifier" ||
+            n.expressions[i].type === "MemberExpression" ||
+            n.expressions[i].type === "ConditionalExpression"
+          ) {
+            printed = concat([indent(concat([softline, printed])), softline]);
+          }
+
+          const aligned = addAlignmentToDoc(printed, indentSize, tabWidth);
+
+          parts.push(group(concat(["${", aligned, lineSuffixBoundary, "}"])));
         }
       }, "quasis");
 

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

@@ -1519,15 +1519,17 @@ d //comment
 \`
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 \`
-\${a // comment
+\${
+  a // comment
 }
 
 \${b /* comment */}
 
 \${/* comment */ c /* comment */}
 
-\${// comment
-d //comment
+\${
+  // comment
+  d //comment
 };
 \`;
 

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

@@ -480,16 +480,18 @@ this_really_should_split_across_lines = (
 unstable_before = (
   <div className="yourScore">
     Your score:{" "}
-    <span className="score">{\`\${mini.crosstable.users[sessionUserId]} - \${mini
-      .crosstable.users[user.id]}\`}</span>
+    <span className="score">{\`\${mini.crosstable.users[sessionUserId]} - \${
+      mini.crosstable.users[user.id]
+    }\`}</span>
   </div>
 );
 
 unstable_after_first_run = (
   <div className="yourScore">
     Your score:{" "}
-    <span className="score">{\`\${mini.crosstable.users[sessionUserId]} - \${mini
-      .crosstable.users[user.id]}\`}</span>
+    <span className="score">{\`\${mini.crosstable.users[sessionUserId]} - \${
+      mini.crosstable.users[user.id]
+    }\`}</span>
   </div>
 );
 

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

@@ -29,15 +29,17 @@ ExampleStory.getFragment('story')}
 \`\${a + a // a
 }
 
-\${a // comment
+\${
+  a // comment
 }
 
 \${b /* comment */}
 
 \${/* comment */ c /* comment */}
 
-\${// comment
-d //comment
+\${
+  // comment
+  d //comment
 }
 
 \${// $FlowFixMe found when converting React.createClass to ES6

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

@@ -63,17 +63,19 @@ g
 }\`;
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 \`
-(?:\${escapeChar}[\\\\S\\\\s]|(?:(?!\${// Using \`XRegExp.union\` safely rewrites backreferences in \`left\` and \`right\`.
-// Intentionally not passing \`basicFlags\` to \`XRegExp.union\` since any syntax
-// transformation resulting from those flags was already applied to \`left\` and
-// \`right\` when they were passed through the XRegExp constructor above.
-XRegExp.union([left, right], "", { conjunction: "or" })
-  .source})[^\${escapeChar}])+)+
+(?:\${escapeChar}[\\\\S\\\\s]|(?:(?!\${
+  // Using \`XRegExp.union\` safely rewrites backreferences in \`left\` and \`right\`.
+  // Intentionally not passing \`basicFlags\` to \`XRegExp.union\` since any syntax
+  // transformation resulting from those flags was already applied to \`left\` and
+  // \`right\` when they were passed through the XRegExp constructor above.
+  XRegExp.union([left, right], "", { conjunction: "or" }).source
+})[^\${escapeChar}])+)+
 \`;
 
-\`a\${/* b */ c /* d */}e\${// f
-g
-// h
+\`a\${/* b */ c /* d */}e\${
+  // f
+  g
+  // h
 }\`;
 
 `;

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

@@ -1,5 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`expressions.js 1`] = `
+const long = \`long \${a//comment
+  .b} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long long\`;
+const long = \`long \${a.b.c.d.e} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long longlong \${loooooooooooooooooong} long long\`;
+
+const long = \`long long long long long long long long long long long \${a.b.c.d.e} long long long long long long long long long long long long long\`;
+
+const description =
+  \`The value of the \${cssName} css of the \${this._name} element\`;
+
+const foo = \`such a long template string \${foo.bar.baz} that prettier will want to wrap it\`;
+
+
+x = \`mdl-textfield mdl-js-textfield \${className} \${content.length > 0
+  ? 'is-dirty'
+  : ''} combo-box__input\`
+
+function testing() {
+  const p = {};
+  // faking some tabs since I can't paste my real code in
+  if(true) {
+    if(false) {
+      return \`\${process.env.OPENID_URL}/something/something/something?\${Object.keys(p)
+        .map(k => \`\${encodeURIComponent(k)}=\${encodeURIComponent(p[k])}\`)
+        .join("&")}\`;
+    }
+  }
+}
+
+console.log(
+  \`Trying update appcast for \${app.name} (\${app.cask.appcast}) -> (\${app.cask.appcastGenerated})\`
+)
+
+console.log(\`brew cask audit --download \${_.map(definitions, 'caskName').join(' ')}\`)
+
+console.log(\`\\nApparently jetbrains changed the release artifact for \${app.name}@\${app.jetbrains.version}.\\n\`);
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const long = \`long \${
+  a.b //comment
+} long longlong \${a.b.c.d.e} long longlong \${a.b.c.d.e} long longlong \${
+  a.b.c.d.e
+} long long\`;
+const long = \`long \${a.b.c.d.e} long longlong \${
+  loooooooooooooooooong
+} long longlong \${loooooooooooooooooong} long longlong \${
+  loooooooooooooooooong
+} long long\`;
+
+const long = \`long long long long long long long long long long long \${
+  a.b.c.d.e
+} long long long long long long long long long long long long long\`;
+
+const description = \`The value of the \${cssName} css of the \${
+  this._name
+} element\`;
+
+const foo = \`such a long template string \${
+  foo.bar.baz
+} that prettier will want to wrap it\`;
+
+x = \`mdl-textfield mdl-js-textfield \${className} \${
+  content.length > 0 ? "is-dirty" : ""
+} combo-box__input\`;
+
+function testing() {
+  const p = {};
+  // faking some tabs since I can't paste my real code in
+  if (true) {
+    if (false) {
+      return \`\${
+        process.env.OPENID_URL
+      }/something/something/something?\${Object.keys(p)
+        .map(k => \`\${encodeURIComponent(k)}=\${encodeURIComponent(p[k])}\`)
+        .join("&")}\`;
+    }
+  }
+}
+
+console.log(
+  \`Trying update appcast for \${app.name} (\${app.cask.appcast}) -> (\${
+    app.cask.appcastGenerated
+  })\`
+);
+
+console.log(
+  \`brew cask audit --download \${_.map(definitions, "caskName").join(" ")}\`
+);
+
+console.log(
+  \`\\nApparently jetbrains changed the release artifact for \${app.name}@\${
+    app.jetbrains.version
+  }.\\n\`
+);
+
+`;
+
 exports[`styled-components-with-expressions.js 1`] = `
 const Button = styled.a\`
 /* Comment */

tests/template_literals/expressions.js

@@ -0,0 +1,35 @@
+const long = `long ${a//comment
+  .b} long longlong ${a.b.c.d.e} long longlong ${a.b.c.d.e} long longlong ${a.b.c.d.e} long long`;
+const long = `long ${a.b.c.d.e} long longlong ${loooooooooooooooooong} long longlong ${loooooooooooooooooong} long longlong ${loooooooooooooooooong} long long`;
+
+const long = `long long long long long long long long long long long ${a.b.c.d.e} long long long long long long long long long long long long long`;
+
+const description =
+  `The value of the ${cssName} css of the ${this._name} element`;
+
+const foo = `such a long template string ${foo.bar.baz} that prettier will want to wrap it`;
+
+
+x = `mdl-textfield mdl-js-textfield ${className} ${content.length > 0
+  ? 'is-dirty'
+  : ''} combo-box__input`
+
+function testing() {
+  const p = {};
+  // faking some tabs since I can't paste my real code in
+  if(true) {
+    if(false) {
+      return `${process.env.OPENID_URL}/something/something/something?${Object.keys(p)
+        .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(p[k])}`)
+        .join("&")}`;
+    }
+  }
+}
+
+console.log(
+  `Trying update appcast for ${app.name} (${app.cask.appcast}) -> (${app.cask.appcastGenerated})`
+)
+
+console.log(`brew cask audit --download ${_.map(definitions, 'caskName').join(' ')}`)
+
+console.log(`\nApparently jetbrains changed the release artifact for ${app.name}@${app.jetbrains.version}.\n`);