Format JSX children across multiple lines in create-element-to-jsx #95
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
See benjamn/recast#365 for more context.
It looks like the recast printer includes all JSX on the same line by default,
which can lead to really ugly code with deeply nested React elements. However,
if we put a
'\n'
text node around all adjacent children, it will format theJSX in the typical multiline way, properly indented, so this commit changes the
script to do that.
Ideally, we might want to keep some expressions inline, e.g. by determining
whether the child expressions will fit nicely on one line, but that seems sort
of nontrivial with just the AST, so we just use multiline JSX always for now.
To keep strings correct, we need to be a little more careful about translating
child string literals. Since each child will be on its own line, leading and
trailing whitespace will be removed, so if the string literal starts or ends
with whitespace, or is an empty string, we fall back to an expression container
with a normal JS string.