From ec7471ffc385df16f79cffeab3f7b50483960c79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tao=20Bojl=C3=A9n?= Date: Tue, 18 Aug 2026 10:28:33 +0200 Subject: [PATCH] feat: pilot React Compiler on Label (#955) Co-Authored-By: Codex Co-authored-by: Amp --- client/package-lock.json | 21 +++++++++ client/package.json | 2 + client/src/coop-ui/Label.tsx | 18 +++++--- client/vite.config.ts | 84 +++++++++++++++++++++++------------- 4 files changed, 89 insertions(+), 36 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index ef31b10..1ca93bb 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -47,6 +47,7 @@ "react": "^18.2.0", "react-audio-player": "^0.17.0", "react-beautiful-dnd": "^13.1.1", + "react-compiler-runtime": "^1.0.0", "react-csv": "^2.2.2", "react-day-picker": "^8.9.1", "react-dom": "^18.2.0", @@ -87,6 +88,7 @@ "@typescript-eslint/parser": "^8.57.2", "@vitejs/plugin-react": "^5.2.0", "autoprefixer": "^10.5.4", + "babel-plugin-react-compiler": "^1.0.0", "eslint": "^9.39.5", "eslint-plugin-custom-rules": "file:./eslint", "eslint-plugin-react": "^7.30.1", @@ -6587,6 +6589,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/babel-plugin-react-compiler": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz", + "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.26.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -11988,6 +12000,15 @@ "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-compiler-runtime": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-compiler-runtime/-/react-compiler-runtime-1.0.0.tgz", + "integrity": "sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==", + "license": "MIT", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental" + } + }, "node_modules/react-csv": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz", diff --git a/client/package.json b/client/package.json index 8f1faec..5f4899b 100644 --- a/client/package.json +++ b/client/package.json @@ -56,6 +56,7 @@ "react": "^18.2.0", "react-audio-player": "^0.17.0", "react-beautiful-dnd": "^13.1.1", + "react-compiler-runtime": "^1.0.0", "react-csv": "^2.2.2", "react-day-picker": "^8.9.1", "react-dom": "^18.2.0", @@ -96,6 +97,7 @@ "@typescript-eslint/parser": "^8.57.2", "@vitejs/plugin-react": "^5.2.0", "autoprefixer": "^10.5.4", + "babel-plugin-react-compiler": "^1.0.0", "eslint": "^9.39.5", "eslint-plugin-custom-rules": "file:./eslint", "eslint-plugin-react": "^7.30.1", diff --git a/client/src/coop-ui/Label.tsx b/client/src/coop-ui/Label.tsx index 5831531..0798390 100644 --- a/client/src/coop-ui/Label.tsx +++ b/client/src/coop-ui/Label.tsx @@ -11,13 +11,17 @@ const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps ->(({ className, ...props }, ref) => ( - -)); +>(({ className, ...props }, ref) => { + 'use memo'; + + return ( + + ); +}); Label.displayName = LabelPrimitive.Root.displayName; export { Label }; diff --git a/client/vite.config.ts b/client/vite.config.ts index c282420..19aeb47 100644 --- a/client/vite.config.ts +++ b/client/vite.config.ts @@ -8,37 +8,63 @@ import tsconfigPaths from 'vite-tsconfig-paths'; const __dirname = dirname(fileURLToPath(import.meta.url)); -export default defineConfig({ - plugins: [react(), svgr(), tsconfigPaths()], - resolve: { - alias: { - '@': path.resolve(__dirname, './src'), - // Redirect `recharts-scale/es6/getNiceTickValues` through our wrapper so - // we can recover from upstream's DecimalError "Division by zero" on - // degenerate chart domains. See `src/rechartsScaleWrapper.js`. - 'recharts-scale/es6/getNiceTickValues': path.resolve( - __dirname, - './src/rechartsScaleWrapper.js', - ), +export default defineConfig(({ mode }) => { + const isProduction = mode === 'production'; + const reactCompilerConfig = { + compilationMode: 'annotation', + target: '18', + panicThreshold: isProduction ? 'none' : 'critical_errors', + logger: { + logEvent(filename: string | null, event: { kind: string }) { + if (!isProduction && event.kind === 'CompileError') { + console.error( + `[React Compiler] Skipped ${filename ?? 'unknown file'}`, + ); + } + }, + }, + }; + + return { + plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler', reactCompilerConfig]], + }, + }), + svgr(), + tsconfigPaths(), + ], + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + // Redirect `recharts-scale/es6/getNiceTickValues` through our wrapper so + // we can recover from upstream's DecimalError "Division by zero" on + // degenerate chart domains. See `src/rechartsScaleWrapper.js`. + 'recharts-scale/es6/getNiceTickValues': path.resolve( + __dirname, + './src/rechartsScaleWrapper.js', + ), + }, + }, + build: { + outDir: 'build', }, - }, - build: { - outDir: 'build', - }, - server: { - proxy: { - '/api': { - target: 'http://localhost:8080', - changeOrigin: true, + server: { + proxy: { + '/api': { + target: 'http://localhost:8080', + changeOrigin: true, + }, }, }, - }, - test: { - globals: true, - environment: 'jsdom', - setupFiles: './src/setupTests.ts', - typecheck: { - tsconfig: './tsconfig.test.json', + test: { + globals: true, + environment: 'jsdom', + setupFiles: './src/setupTests.ts', + typecheck: { + tsconfig: './tsconfig.test.json', + }, }, - }, + }; }); -- 2.51.2