fix(formatter): JSX text wrapping incorrect 2

[Dunqing]

• close: formatter: Diff with Prettier on JSXText does not break in some cases #16199

Two tests regressed, but I kind of think they are correct. I created prettier/prettier#18384 to confirm the issue in Prettier. Aligned with Prettier's current behavior

[Dunqing]

• fix(formatter): JSX text wrapping incorrect 2 #16320 👈 (View in Graphite)
• refactor(formatter): clean up dead code in JSX #16319
• fix(formatter): JSX text wrapping incorrect #16318
• fix(formatter): should indent variable declarator if there is a trailing comment #16243
• fix(formatter): incorrect handling of directives with comments #16235
• main

---

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]

CodSpeed Performance Report

Merging #16320 will not alter performance

_{Comparing 12-01-fix_formatter_jsx_text_wrapping_incorrect_2 (018f092) with main (b86d3e3)¹}

Summary

✅ 38 untouched
⏩ 7 skipped²

Footnotes

1. No successful run was found on main (a4edb2b) during the generation of this report, so b86d3e3 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

2. 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]

@leaysgur I just got confirmation from Prettier that these two cases are known issues. Can you run the build for this PR and check in next.js to see if that case is resolved and ensure there are no other cases that have failed? If so, I think we can merge it without waiting for a Prettier fix.

[leaysgur]

This branch vs prettier@3.7.3, diffs are below:

modified:   examples/markdoc/next.config.js
modified:   examples/prisma-postgres/app/setup/page.tsx
modified:   examples/with-azure-cosmos/pages/index.tsx
modified:   examples/with-mongodb/app/app-demo/page.tsx
modified:   examples/with-mongodb/pages/index.tsx
modified:   examples/with-passport/lib/password-local.js
modified:   packages/next/src/build/webpack-config.ts
modified:   packages/next/src/build/webpack/plugins/pages-manifest-plugin.ts
modified:   packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx
modified:   packages/next/src/next-devtools/dev-overlay/container/errors.tsx
modified:   packages/next/taskfile.js
modified:   test/e2e/app-dir/router-stuck-dynamic-static-segment/app/page.tsx
modified:   turbopack/crates/turbopack-tracing/tests/node-file-trace/integration/webpack-target-node/webpack-api-runtime.js
modified:   turbopack/crates/turbopack-tracing/tests/node-file-trace/test/unit/webpack-wrapper-strs-namespaces-large/input.js

And these files are related to {' '}.

• examples/prisma-postgres/app/setup/page.tsx
• examples/with-azure-cosmos/pages/index.tsx
• examples/with-mongodb/app/app-demo/page.tsx
• examples/with-mongodb/pages/index.tsx
• packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx
• packages/next/src/next-devtools/dev-overlay/container/errors.tsx
• test/e2e/app-dir/router-stuck-dynamic-static-segment/app/page.tsx

and diff:

diff --git a/examples/prisma-postgres/app/setup/page.tsx b/examples/prisma-postgres/app/setup/page.tsx
index 49b6897b..7cba513d 100644
--- a/examples/prisma-postgres/app/setup/page.tsx
+++ b/examples/prisma-postgres/app/setup/page.tsx
@@ -101,7 +101,9 @@ export default function SetupPage() {
                 described in the next step.
               </li>
               <li>
-                In your Netlify account, click the <strong>Extensions</strong>{" "}
+                In your Netlify account, click the <strong>
+                  Extensions
+                </strong>{" "}
                 tab in the left-hand sidenav and navigate to the installed{" "}
                 <strong>Prisma Postgres</strong> extension. Then find the text
                 field for the <strong>Integration token</strong>, paste the
@@ -122,7 +124,9 @@ export default function SetupPage() {
             </p>
             <ol className="list-decimal pl-6 mt-2 space-y-1 text-gray-700">
               <li>
-                In your Netlify Dashboard, click on the <strong>Sites</strong>{" "}
+                In your Netlify Dashboard, click on the <strong>
+                  Sites
+                </strong>{" "}
                 item in the left-hand sidenav and click on the site that was
                 deployed with this template.
               </li>
@@ -159,7 +163,9 @@ export default function SetupPage() {
             </p>
             <ol className="list-decimal pl-6 mt-2 space-y-1 text-gray-700">
               <li>
-                In your Netlify Dashboard, click on the <strong>Sites</strong>{" "}
+                In your Netlify Dashboard, click on the <strong>
+                  Sites
+                </strong>{" "}
                 item in the left-hand sidenav and click on the site that was
                 deployed with this template.
               </li>
diff --git a/examples/with-azure-cosmos/pages/index.tsx b/examples/with-azure-cosmos/pages/index.tsx
index 1d04a7a4..9a485e05 100644
--- a/examples/with-azure-cosmos/pages/index.tsx
+++ b/examples/with-azure-cosmos/pages/index.tsx
@@ -29,7 +29,9 @@ const Home = (props: Props) => {
         <h2 className="subtitle">You are connected to CosmosDB</h2>
       ) : (
         <h2 className="subtitle">
-          You are NOT connected to CosmosDB. Check the <code>README.md</code>{" "}
+          You are NOT connected to CosmosDB. Check the <code>
+            README.md
+          </code>{" "}
           for instructions.
         </h2>
       )}
diff --git a/examples/with-mongodb/app/app-demo/page.tsx b/examples/with-mongodb/app/app-demo/page.tsx
index 0e8dd9f8..29973407 100644
--- a/examples/with-mongodb/app/app-demo/page.tsx
+++ b/examples/with-mongodb/app/app-demo/page.tsx
@@ -58,7 +58,9 @@ export default async function Home() {
           </h2>
         ) : (
           <h2 className="text-lg text-red-500">
-            You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
+            You are NOT connected to MongoDB. Check the <code>
+              README.md
+            </code>{" "}
             for instructions.
           </h2>
         )}
diff --git a/examples/with-mongodb/pages/index.tsx b/examples/with-mongodb/pages/index.tsx
index b5292dd5..ab0b0975 100644
--- a/examples/with-mongodb/pages/index.tsx
+++ b/examples/with-mongodb/pages/index.tsx
@@ -84,7 +84,9 @@ export default function Home({
           </h2>
         ) : (
           <h2 className="text-lg text-red-500">
-            You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
+            You are NOT connected to MongoDB. Check the <code>
+              README.md
+            </code>{" "}
             for instructions.
           </h2>
         )}
diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx
index 066cec4d..1d9f8f70 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-info/route-info.tsx
@@ -8,7 +8,9 @@ function StaticRouteContent({
     <article className="dev-tools-info-article" {...props}>
       <p className="dev-tools-info-paragraph">
         The path{' '}
-        <code className="dev-tools-info-code">{window.location.pathname}</code>{' '}
+        <code className="dev-tools-info-code">
+          {window.location.pathname}
+        </code>{' '}
         is marked as "static" since it will be prerendered during the build
         time.
       </p>
@@ -46,7 +48,9 @@ function DynamicRouteContent({
     <article className="dev-tools-info-article" {...props}>
       <p className="dev-tools-info-paragraph">
         The path{' '}
-        <code className="dev-tools-info-code">{window.location.pathname}</code>{' '}
+        <code className="dev-tools-info-code">
+          {window.location.pathname}
+        </code>{' '}
         is marked as "dynamic" since it will be rendered for each user at{' '}
         <strong>request time</strong>.
       </p>
diff --git a/packages/next/src/next-devtools/dev-overlay/container/errors.tsx b/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
index 3768e40b..4354a38e 100644
--- a/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/container/errors.tsx
@@ -245,7 +245,9 @@ function BlockingPageLoadErrorDescription({
           </p>
           <p>
             <code>params</code> are usually considered Runtime data but if all
-            params are provided a value using <code>generateStaticParams</code>{' '}
+            params are provided a value using <code>
+              generateStaticParams
+            </code>{' '}
             they can be statically prerendered.
           </p>
           <p>
diff --git a/test/e2e/app-dir/router-stuck-dynamic-static-segment/app/page.tsx b/test/e2e/app-dir/router-stuck-dynamic-static-segment/app/page.tsx
index 64b89e01..e31689c7 100644
--- a/test/e2e/app-dir/router-stuck-dynamic-static-segment/app/page.tsx
+++ b/test/e2e/app-dir/router-stuck-dynamic-static-segment/app/page.tsx
@@ -20,7 +20,9 @@ export default function Home() {
       <p>
         Reloading and pressing the "Go to another page" link and then going to
         the blog post does work however, suggesting the issue is navigating from{' '}
-        <code>/blog</code> to <code>/blog/a-post</code> (<code>/[slug]</code>{' '}
+        <code>/blog</code> to <code>/blog/a-post</code> (<code>
+          /[slug]
+        </code>{' '}
         where slug is blog and <code>/blog/[slug]</code> where slug is a-post)
       </p>
       <Link href="/blog" style={{ display: 'block' }} id="to-blog">

If {' '} is now being counted correctly and triggering a break, this appears to be a reasonable.

But I'm not sure break position is intuitive or not.

input:

//3456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
//     10|       20|       30|       40|       50|       60|       70|       80|       90|
export default function Home() {
  return (
    <div>
      <p>
        Reloading and pressing the "Go to another page" link and then going to
        the blog post does work however, suggesting the issue is navigating from{' '}
        <code>/blog</code> to <code>/blog/a-post</code> (<code>/[slug]</code>{' '}
        where slug is blog and <code>/blog/[slug]</code> where slug is a-post)
      </p>
    </div>
  )
}

oxfmt:

//3456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
//     10|       20|       30|       40|       50|       60|       70|       80|       90|
export default function Home() {
  return (
    <div>
      <p>
        Reloading and pressing the "Go to another page" link and then going to
        the blog post does work however, suggesting the issue is navigating from{" "}
        <code>/blog</code> to <code>/blog/a-post</code> (<code>
          /[slug]
        </code>{" "}
        where slug is blog and <code>/blog/[slug]</code> where slug is a-post)
      </p>
    </div>
  );
}

prettier@3.7.3

//3456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
//     10|       20|       30|       40|       50|       60|       70|       80|       90|
export default function Home() {
  return (
    <div>
      <p>
        Reloading and pressing the "Go to another page" link and then going to
        the blog post does work however, suggesting the issue is navigating from{" "}
        <code>/blog</code> to <code>/blog/a-post</code> (<code>/[slug]</code>{" "}
        where slug is blog and <code>/blog/[slug]</code> where slug is a-post)
      </p>
    </div>
  );
}

[leaysgur]

For original issue: #16199, now it produces the same result.

[Dunqing]

Thank you for testing it. Since it would produce more differences and some cases should be improved further, I will leave this PR until it exactly matches the current Prettier output.

[Dunqing]

Finally, I figured out why it produces different output while the IR/Doc is basically the same. This is due to the slight differences in handling measured_group_fits in the Oxfmt compared to Prettier, which is called as shouldRemeasure in Prettier and represents the opposite meaning.

After exactly matching what shouldRemeasure does in Prettier, two regressed cases are gone.

[Copilot]

Pull request overview

This PR fixes a JSX text wrapping issue (#16199) by modifying how the formatter's printer tracks whether groups fit on a single line. The key change is refactoring the initialization of measured_group_fits state and removing redundant state resets during printing.

• Refactored PrinterState initialization to use a dedicated constructor method
• Removed manual state resets for measured_group_fits that were preventing correct text wrapping
• Added comprehensive test coverage for the fix with snapshots at different print widths

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
crates/oxc_formatter/src/formatter/printer/mod.rs	Adds PrinterState::new() constructor with explicit measured_group_fits initialization; removes redundant state resets after measuring fill entries and line breaks
crates/oxc_formatter/tests/fixtures/js/jsx/issue-16199.jsx	Test input file demonstrating the JSX text wrapping scenario that was incorrectly formatted
crates/oxc_formatter/tests/fixtures/js/jsx/issue-16199.jsx.snap	Snapshot file showing expected formatter output at printWidth 80 and 100, verifying the fix works correctly

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[leaysgur]

Also confirmed all {' '} related diffs in next.js repo are gone... 👍🏻

[leaysgur]

Merge activity

• Dec 3, 6:58 AM UTC: The merge label '0-merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
• Dec 3, 6:59 AM UTC: leaysgur added this pull request to the Graphite merge queue.
• Dec 3, 7:05 AM UTC: Merged by the Graphite merge queue.