Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(js_formatter): fix JSX text wrapping and empty line handling #1075

Merged
merged 1 commit into from Dec 6, 2023

Conversation

faultyserver
Copy link
Contributor

Summary

This fixes two distinct cases related to JSX and handling hard/empty lines around text elements.

For the first, Prettier allows any single character word to hug the following or previous line. Most often, this is used with punctuation marks like , or !, but any single character is allowed. Biome, however, was only checking for punctuation. This PR changes all of those checks to just be single character checks, matching Prettier: Playground Link

<>
  // single character before or after hugs the same line
  a<div />b
  // multiple character words get forced to the next line
  <div />
  bb
</>;

The other fix is around handling empty lines when the child list contains any meaningful text nodes. Prettier removes all empty lines in this case, but Biome was preserving them as is: Playground Link

<>
  first
  
  <div>second</div>
  
  <div>third</div>
</>;

// Biome, previously
<>
  first
  <div>second</div>
  
  <div>third</div>
</>;

// Prettier
<>
  first
  <div>second</div>
  <div>third</div>
</>;

I don't fully know why this is the case, but it caused a few diffs, and now they match :)

Test Plan

The Prettier snapshots with differences have been deleted since they now match, and I added a new test file that covers all of the different permutations of text wrapping.

Copy link

netlify bot commented Dec 6, 2023

Deploy Preview for biomejs ready!

Name Link
🔨 Latest commit 4e33c4c
🔍 Latest deploy log https://app.netlify.com/sites/biomejs/deploys/657019a9c1d2af0008b74c1b
😎 Deploy Preview https://deploy-preview-1075--biomejs.netlify.app/playground
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions github-actions bot added A-Formatter Area: formatter L-JavaScript Language: JavaScript and super languages labels Dec 6, 2023
@Conaclos Conaclos merged commit 6260bad into main Dec 6, 2023
18 checks passed
@Conaclos Conaclos deleted the faulty/jsx-text-wrap branch December 6, 2023 10:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Formatter Area: formatter L-JavaScript Language: JavaScript and super languages
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants