Skip to content

fix(formatter): incorrect JSX text wrapping when the expression container is an arrow function that will break#17445

Merged
graphite-app[bot] merged 1 commit intomainfrom
12-29-fix_formatter_incorrect_jsx_text_wrapping_when_the_expression_container_is_an_arrow_function_that_will_break
Dec 29, 2025
Merged

fix(formatter): incorrect JSX text wrapping when the expression container is an arrow function that will break#17445
graphite-app[bot] merged 1 commit intomainfrom
12-29-fix_formatter_incorrect_jsx_text_wrapping_when_the_expression_container_is_an_arrow_function_that_will_break

Conversation

@Dunqing
Copy link
Member

@Dunqing Dunqing commented Dec 29, 2025

close: #16956

The mismatch is caused by the expression container (which is an arrow function here) not being wrapped by a group compared to Prettier. After grouping, the output turns into the same.

Input:

<p>
  Current usage for is ${(() => {
    //
  })()}.
</p>

Before output:

<p>
  Current usage for is ${(() => {
    //
  })()}.
</p>;

After output:

<p>
  Current usage for X is $
  {(() => {
    // comment
  })()}
  .
</p>;

Prettier output:

<p>
  Current usage for is $
  {(() => {
    //
  })()}
  .
</p>;

Copy link
Member Author

Dunqing commented Dec 29, 2025


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • 0-merge - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

@codspeed-hq
Copy link

codspeed-hq bot commented Dec 29, 2025

CodSpeed Performance Report

Merging #17445 will not alter performance

Comparing 12-29-fix_formatter_incorrect_jsx_text_wrapping_when_the_expression_container_is_an_arrow_function_that_will_break (5d9ddca) with 12-27-fix_formatter_jsxfragment_is_missing_a_leading_semicolon_when_semicolon_is_disabled (a93d02b)

Summary

✅ 38 untouched
⏩ 7 skipped1

Footnotes

  1. 7 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@Dunqing Dunqing marked this pull request as ready for review December 29, 2025 07:44
@Dunqing Dunqing requested a review from leaysgur December 29, 2025 07:45
@Dunqing
Copy link
Member Author

Dunqing commented Dec 29, 2025

I've tested this PR in the opencode repo, and it works well. I am going to merge this without reviewing since leaysgur is on holiday.

@Dunqing Dunqing added the 0-merge Merge with Graphite Merge Queue label Dec 29, 2025
Copy link
Member Author

Dunqing commented Dec 29, 2025

Merge activity

…iner is an arrow function that will break (#17445)

close: #16956

The mismatch is caused by the expression container (which is an arrow function here) not being wrapped by a `group` compared to Prettier. After grouping, the output turns into the same.

Input:
```jsx
<p>
  Current usage for is ${(() => {
    //
  })()}.
</p>
```
Before output:
```jsx
<p>
  Current usage for is ${(() => {
    //
  })()}.
</p>;
```

After output:
```jsx
<p>
  Current usage for X is $
  {(() => {
    // comment
  })()}
  .
</p>;
```
[Prettier output](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAeADgPgDpQAR4DCArgE6kIx7EDOAhgOZx4BmEpeAljXgCTAAKAQEo8AXkx5guAngD0cmXgC+wkcoB0uVHKwgANCAjoYnaDWSg65CAHcACtYQWUdADa26ATwuGARqR0YADWcDAAynQAtnAAMpxQcMgs7jRwhhB+AFZwYDAA6oHoyCDoFGmkAG5J-oEhYeHoQQkMyDCkxOkgaVGcbR1dcAAe6HCknDGw7gDyo4Ew7PYQNJym0CUIACYGIMNzE5TuACpjUNaccC4pbmmGK1AMbnAAisQQ8MmpXVk0Q+EtT1e7ySSGutxAAEc3vB7KRjC4QHQaABaRJwTbonbtOicNwtQgQKJROgldxuHb3R5wACCMHanD8xBhY3iiU+Ny6AAsYFE3PlOatLk0wHBws5VpxKqsvCUwDRfCBKp0AJJQDGwcJgcYmalq8IwLxPdngsrLOCFOjFFBlS5jao7LbTFiskEgNwsHYJCowWGMYnGrpNUgVEp+Oh+OBuZEwBVlBIFTibGCc5AARlTAAZDBQoZwKL6GP7QV9DDBw-lE8nkAAmQy0OBHcNXEu7KIRzYYzaxOgPYiMOAAMXYxLpLVJTIgIGUyiAA):

```js
<p>
  Current usage for is $
  {(() => {
    //
  })()}
  .
</p>;
```
@graphite-app graphite-app bot force-pushed the 12-27-fix_formatter_jsxfragment_is_missing_a_leading_semicolon_when_semicolon_is_disabled branch from a93d02b to 42ad9d6 Compare December 29, 2025 08:46
@graphite-app graphite-app bot force-pushed the 12-29-fix_formatter_incorrect_jsx_text_wrapping_when_the_expression_container_is_an_arrow_function_that_will_break branch from 5d9ddca to 1bf0ffc Compare December 29, 2025 08:47
Base automatically changed from 12-27-fix_formatter_jsxfragment_is_missing_a_leading_semicolon_when_semicolon_is_disabled to main December 29, 2025 08:52
@graphite-app graphite-app bot removed the 0-merge Merge with Graphite Merge Queue label Dec 29, 2025
@graphite-app graphite-app bot merged commit 1bf0ffc into main Dec 29, 2025
21 checks passed
@graphite-app graphite-app bot deleted the 12-29-fix_formatter_incorrect_jsx_text_wrapping_when_the_expression_container_is_an_arrow_function_that_will_break branch December 29, 2025 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-formatter Area - Formatter C-bug Category - Bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

formatter: Diff with Prettier on opencode repo

2 participants