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:
@@ -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",
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user