Prevent JSX from breaking a logical expression chain

[duailibe]

Closes #5089

Maybe we want to think about doing the same for objects and arrays

• I’ve added tests to confirm my change works.
• I’ve read the contributing guidelines.

[suchipi]

This indentation level looks too deep

[duailibe]

You're right, I missed that

[duailibe]

I don't think there's a way to solve this without a new primitive, or using different (but worse IMO) heuristics..

What I'm currently doing is: if the last member is JSX, split in two groups: one for the JSX and another for everything else. In that case, we can either have (first uses indent and the other doesn't):

{a && b && (
    <Foo />
)}
{a &&
  b && (
    <Foo />
  )}

versus:

{a && b && (
  <Foo />
)}
{a &&
  b && (
  <Foo />
  )}

[suchipi]

Requesting changes for clarification because the indentation level issue is a blocker

[suchipi]

@duailibe I think we could solve it by checking if the last thing in the ternary chain is JSX when we print every ternary child, but it's duplicative work (from each child, walk up to the parent, then walk back down to check if the chain's last child is JSX). I guess we could use some kind of cache if we wanted to reduce the scope, but it'd be nice to have a primitive that works like React context for this particular use-case; something like (pseudocode):

• when encountering ternary, walk down chain and check if last child is JSX
• if it is, wrap the whole thing in a context("withinTernaryWithJSXAsLastChild", group(...))
• when rendering each child, use something like ifContext("withinTernaryWithJSXAsLastChild", dontGroup(...), group(...))

[suchipi]

The idea being that every doc node in the tree could use ifContext to ask for the current context and it would be the result of all context(...) nodes up the tree, eg with this structure:

context("foo",
  context("bar",
    group(...)
  )
)

Inside the group, context is { foo: true, bar: true }, so it can use ifContext("foo" to render one way or the other depending on if the context's foo property is true, etc.

[duailibe]

@suchipi I was able to fix this using the groupId in ifBreak that @ikatyang created.

In that case, everything on the left of the chain is in a single group and I can indent or not depending if that group broke or not :-)

[suchipi]

Woo!