Fixing JSX/TSX closing tag/attribute/expression formatting

[saschanaz]

Closes #3838.

• Wait Expose indentation suppressor from SmartIndenter #4757 (now merged into master)

Current:

let x = <div>
<div>
    </div>
    </div>

let y = <div
    className="foo"
    id={
    3
    }>
</div>

Fix:

let x = <div>
    <div>
    </div>
</div>

let y = <div
    className="foo"
    id={
        3
    }>
</div>

[mhegazy]

i would inline the body of isIndentPreventedChildNode,

if (parent.kind === SyntaxKind.JsxElement && child.kind === SyntaxKind.JsxClosingElement)

it is more readable this way.

[mhegazy]

this is similar to closing braces and parens, maybe we should add it to get indentationForToken.

[mhegazy]

possibly move getIndentationForToken to a new helper, call it in getIndentationForToken, and from here and add support for jsx elements in it as well.. possibly give the new helper a better name as getIndentationForNode.

[saschanaz]

@mhegazy I currently have no idea so I just inlined it. I agree that the closing node is similar to closing tokens but I think nodes and tokens are being processed with some differences by different functions so a merged helper may not really simplify the code.

[saschanaz]

I have to figure out how I can merge getIndentationForToken and isIndentPreventedChildNode. A simple merge breaks indentation here:

let x = <div>
</div>; // works well

let y = foo
(3); // should be indented but fails

PS: I've decided not to do this at least in this PR.

[kuon]

Will this cover the following (parenthesis and newline)?

return (
    <div>
        <div />
    </div>
);

If yes, perhaps adding a test for this specific case.

[saschanaz]

@kuon Yes it does, and I think this PR already tests that case (where JsxElement is contained in parenthesis.)

[mhegazy]

👍

[mhegazy]

can you please refresh this PR, i think we are ready to go. Thanks for your patience and sorry for the delay.

[DanielRosenwasser]

Thanks @saschanaz!