cheogram-www
created pr with
cheogram-www/react-compiler-fixes.1
commented
Changes are available at https://tangled.org/mrry.band/cheogram-www on branch react-compiler-fixes.
cmds
checkout latest patchset:
ssh pr.pico.sh pull cheogram-www:react-compiler-fixes | git am -3checkout specific patchset revision:
ssh pr.pico.sh pull cheogram-www:react-compiler-fixes [rev] | git am -3add changes to patch request:
git format-patch main --stdout | ssh pr.pico.sh cheogram-www:react-compiler-fixesadd comment to patch request:
ssh pr.pico.sh comment cheogram-www:react-compiler-fixes "lgtm!"
Patchset
cheogram-www/react-compiler-fixes.1
→ Test each file for compilability
Eric Roberts
Fix Account.tsx for react-compiler
2026-11-10T17:11:18ZEric Roberts
Fix Accounts.tsx for react-compiler
2026-11-10T17:23:58ZEric Roberts
Fix Chat.tsx for react-compiler
2026-11-10T17:26:31ZEric Roberts
Fix Chats.tsx for react-compiler
2026-11-10T17:29:12ZEric Roberts
Fix Login.tsx for react-compiler
2026-11-10T17:32:03ZEric Roberts
Fix MessageDebugger.tsx for react-compiler
2026-11-10T17:33:10ZEric Roberts
Fix MessageMenuInChat.tsx for react-compiler
2026-11-10T17:33:57ZEric Roberts
Fix Quill.tsx for react-compiler
2026-11-10T17:34:29ZEric Roberts
Fix Register.tsx for react-compiler
2026-11-10T17:35:10ZEric Roberts
2026-11-10T17:36:03Z
Test each file for compilability
Eric Roberts
2026-11-10T17:11:18ZWe were testing that we actually run the compiler at all, which is good. But the compiler's default behaviour is to skip files it can't handle, and not tell you about it, which is not great. This adds it as a warning on build, but a failure for the tests, and we test each file individually to make sure it compiles. As of this commit I'm ignoring all existing failed compilations so that tests still pass. As I fix things I will remove each exception.
Semantic diff summary
0 added,
2 modified,
0 signature changed,
0 removed
across 2 analyzed files
(1 file skipped: unsupported file type)
+1
-1
package.json
#
| ... | ... | @@ -63,7 +63,7 @@ | |
| 63 | 63 | "scripts": { | |
| 64 | 64 | "dev": "vite", | |
| 65 | 65 | "build": "npm run format:check ; npm test && tsc -b && vite build", | |
| 66 | - | "test": "vitest run --reporter=dot && node --test scripts/compiler.test.mjs", | |
| 66 | + | "test": "vitest run --reporter=dot && node --test --test-reporter=dot scripts/compiler.test.mjs", | |
| 67 | 67 | "test:e2e": "node scripts/e2e.mjs --headed", | |
| 68 | 68 | "test:e2e:debug": "node scripts/e2e.mjs --debug", | |
| 69 | 69 | "test:e2e:headless": "node scripts/e2e.mjs", |
+45
-6
scripts/compiler.test.mjs
#
| ... | ... | @@ -1,18 +1,57 @@ | |
| 1 | 1 | import assert from "node:assert/strict"; | |
| 2 | + | import { glob } from "node:fs/promises"; | |
| 2 | 3 | import { test } from "node:test"; | |
| 3 | 4 | import { createServer } from "vite"; | |
| 4 | 5 | ||
| 5 | - | test("runs React Compiler through the Vite configuration", async () => { | |
| 6 | + | const compilerSkips = new Set([ | |
| 7 | + | "components/Account.tsx", | |
| 8 | + | "components/Accounts.tsx", | |
| 9 | + | "components/Chat.tsx", | |
| 10 | + | "components/Chats.tsx", | |
| 11 | + | "components/Login.tsx", | |
| 12 | + | "components/MessageDebugger.tsx", | |
| 13 | + | "components/MessageMenuInChat.tsx", | |
| 14 | + | "components/Quill.tsx", | |
| 15 | + | "components/Register.tsx", | |
| 16 | + | ]); | |
| 17 | + | ||
| 18 | + | test("React Compiler", async (t) => { | |
| 6 | 19 | const server = await createServer({ | |
| 7 | - | server: { middlewareMode: true, hmr: false, ws: false, watch: null }, | |
| 20 | + | mode: "compiler-test", | |
| 21 | + | server: { | |
| 22 | + | middlewareMode: true, | |
| 23 | + | hmr: false, | |
| 24 | + | ws: false, | |
| 25 | + | watch: null, | |
| 26 | + | preTransformRequests: false, | |
| 27 | + | }, | |
| 8 | 28 | optimizeDeps: { noDiscovery: true, include: [] }, | |
| 9 | 29 | }); | |
| 30 | + | ||
| 10 | 31 | try { | |
| 11 | - | const result = await server.transformRequest( | |
| 12 | - | "/scripts/compiler-fixture.tsx", | |
| 32 | + | await t.test( | |
| 33 | + | "runs React Compiler through the Vite configuration", | |
| 34 | + | async () => { | |
| 35 | + | const result = await server.transformRequest( | |
| 36 | + | "/scripts/compiler-fixture.tsx", | |
| 37 | + | ); | |
| 38 | + | assert.ok(result); | |
| 39 | + | assert.match(result.code, /react-compiler-runtime/); | |
| 40 | + | }, | |
| 13 | 41 | ); | |
| 14 | - | assert.ok(result); | |
| 15 | - | assert.match(result.code, /react-compiler-runtime/); | |
| 42 | + | ||
| 43 | + | for await (const file of glob("**/*.{ts,tsx}", { | |
| 44 | + | cwd: "src", | |
| 45 | + | exclude: ["**/*.test.*", "**/*.d.ts"], | |
| 46 | + | })) { | |
| 47 | + | await t.test( | |
| 48 | + | `compiles src/${file}`, | |
| 49 | + | { skip: compilerSkips.has(file) && "Known React Compiler diagnostics" }, | |
| 50 | + | async () => { | |
| 51 | + | assert.ok(await server.transformRequest(`/src/${file}`)); | |
| 52 | + | }, | |
| 53 | + | ); | |
| 54 | + | } | |
| 16 | 55 | } finally { | |
| 17 | 56 | await server.close(); | |
| 18 | 57 | } |
+6
-1
vite.config.js
#
| ... | ... | @@ -24,7 +24,12 @@ export default defineConfig(({ mode }) => { | |
| 24 | 24 | (await git.raw(["describe", "--always"])).trim(), | |
| 25 | 25 | }, | |
| 26 | 26 | }), | |
| 27 | - | react({ compiler: { target: "18" } }), | |
| 27 | + | react({ | |
| 28 | + | compiler: { | |
| 29 | + | target: "18", | |
| 30 | + | panicThreshold: mode === "compiler-test" ? "all_errors" : "none", | |
| 31 | + | }, | |
| 32 | + | }), | |
| 28 | 33 | svgr(), | |
| 29 | 34 | !isTest && eslint({ failOnError: false }), | |
| 30 | 35 | VitePWA({ |