Template literals: Don't break on identifiers but break if comments

[duailibe]

Context: #3280 (comment)

[suchipi]

Looks good to me. I wonder if we should throw "short" member chains in, too (for some definition of short...). But that could be a different PR.

[SimenB]

I love your responsiveness to issues. Thanks you! ❤️

What about throwing in some more examples of formatting? More as something to compare against if it changes in the future than anything.

Here's a couple of examples from Jest's migration to 1.8 (jestjs/jest#4852):

descirbe('something', () => {
  test(`{pass: false} expect(${small}).toBeGreaterThanOrEqual(${big})`, () => {});  
})

throw new Error(`pretty-format: Option "theme" has a key "${key}" whose value "${value}" is undefined in ansi-styles.`,)

That last one is really long, but breaking it on only one identifier and not the other makes is difficult to read, as it's not natural (I've never seen a human write code that way)

Anecdotally, one thing I came over in a personal project where I would like a break, but the break is wrong

class Class {
  something() {
    // This would be WAY better if it took the whole `time.unit.charAt(0)` on a new line instead of just the `0`
    // Not breaking at all is better than that
    return () => {
      const timeQuery = time
      ? `time:(from:now-${time.value}${time.unit.charAt(0)},mode:quick,to:now)`
      : "";
    }
  }
}

[duailibe]

Thanks for the kind words and the examples! ❤️

The last one is a really trick case because we have two separate places to break:

`time:(from:now-${time.value}${
  time.unit.charAt(0)
},mode:quick,to:now)`

`time:(from:now-${time.value}${time.unit.charAt(
  0
)},mode:quick,to:now)`

And it currently tries to fit everything in the line and break in "last" possible place. So we have no way of telling "breaking here is preferable than breaking over there". This is another case that would benefit from #3014.

[duailibe]

Actually, my bad.. this one is a different case. Including a softline for CallExpressions in the template literals expressions works for your example, but breaks in another one:

const foo = `something:${JSON.stringify({
  a,
  b,
  c
})}`

// turns into:

const foo = `something:${
  JSON.stringify({
    a,
    b,
    c
  })
}`