fix(build): keep JSX line-end spaces in dev and vitest

plugin-react recognises the React Compiler only by its package name, and
reactPlugin.ts passes the imported plugin, so plugin-react left Babel's
retainLines on in dev. With the compiler's re-printed JSX that trimmed the
space at the end of a text line (the privacy page read
"for example/api/feed" on :5173). Production builds never had it on.
Turn retainLines off through generatorOpts, which wins over the plugin's
top-level option, and pin it with a DOM test seen red without the fix.
This commit is contained in:
2026-09-24 02:21:20 +02:00
parent d2e40dcffb
commit 50923bb684
2 changed files with 43 additions and 0 deletions
+8
View File
@@ -18,9 +18,17 @@ import reactCompiler from "babel-plugin-react-compiler";
// reasons, both about the gate: a string is invisible to knip, which then reports the dependency as
// unused, and — worse — a typo in that string is a silent no-op that ships an uncompiled bundle,
// while a bad import is a resolve error on the tsc lane.
//
// The price of the import: plugin-react finds the compiler only by that string, so it doesn't know the
// compiler is there. Its one compiler-specific switch is Babel's `retainLines`, which it turns on for
// dev (and so for vitest) unless the compiler is present. With the compiler's re-printed JSX that eats
// the space at the end of a text line ("for example <code>" rendered "for example/api/feed"). The
// production build never had it on. `generatorOpts` wins over the top-level option, so it is switched
// off here, for every mode. Pinned by src/jsxWhitespace.dom.test.tsx.
export const reactWithCompiler = () =>
react({
babel: {
plugins: [[reactCompiler, { target: "19" }]],
generatorOpts: { retainLines: false },
},
});
+35
View File
@@ -0,0 +1,35 @@
// @vitest-environment jsdom
//
// The React transform must not eat the space between a word and the element or expression that
// follows it on the same line. It did, in dev and in this test lane (never in the production build):
// @vitejs/plugin-react only recognises the React Compiler by its package NAME, and reactPlugin.ts
// passes the imported plugin, so the React plugin kept Babel's `retainLines` on. The compiler then
// printed "for example " and the next element on different lines, and the JSX transform trimmed the
// line-end space ("for example/api/feed" on the privacy page). reactPlugin.ts now turns
// `retainLines` off itself. The component goes through the same transform the app does.
import { describe, it, expect, afterEach } from "vitest";
import { render, cleanup } from "@testing-library/react";
afterEach(cleanup);
function Sentence({ value }: { value: string }) {
// The line breaks ARE the test: collapsed onto one line, the defect doesn't fire.
// prettier-ignore
return (
<p>
which part of the app was called (for example <code>/api/feed</code>, never the search
<span>
status: {value} end
</span>
</p>
);
}
describe("JSX text whitespace through the React transform", () => {
it("keeps the space before an element and before an expression", () => {
const { container } = render(<Sentence value="ok" />);
expect(container.textContent).toBe(
"which part of the app was called (for example /api/feed, never the searchstatus: ok end",
);
});
});