From 2e4e479eff6a8c4d21d5f63eda39d6261523a5b5 Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 09:33:10 -0500 Subject: [PATCH 1/7] Set `react-compiler` --- .github/workflows/ci.yml | 3 + .vscode/settings.json | 3 - package.json | 2 + rolldown.config.ts | 6 ++ vite.config.ts | 169 ++++++++++++++++++++------------------- 5 files changed, 99 insertions(+), 84 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d39e153f37..737a0442a5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -33,6 +33,9 @@ jobs: - name: Test run: node --run test timeout-minutes: 4 + - name: Test Without React Compiler + run: node --run test + timeout-minutes: 4 - name: Upload coverage uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 with: diff --git a/.vscode/settings.json b/.vscode/settings.json index bb939b6158..c60cc479e1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,9 +4,6 @@ }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, - "[javascript][json][jsonc][css]": { - "editor.defaultFormatter": "biomejs.biome" - }, "typescript.enablePromptUseWorkspaceTsdk": true, "typescript.tsdk": "node_modules/typescript/lib", "files.readonlyInclude": { diff --git a/package.json b/package.json index fcd56fb417..3567a92f3e 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "build:website": "vite build", "build": "rolldown -c", "test": "vitest run", + "test-unoptimized": "vitest run --mode=unoptimized", "test:watch": "vitest watch", "format": "biome format --write", "check": "biome check --error-on-warnings", @@ -69,6 +70,7 @@ "@vitest/eslint-plugin": "^1.3.4", "@wyw-in-js/rollup": "^0.7.0", "@wyw-in-js/vite": "^0.7.0", + "babel-plugin-react-compiler": "^1.0.0", "clsx": "^2.1.1", "eslint": "^9.36.0", "eslint-plugin-jest-dom": "^5.5.0", diff --git a/rolldown.config.ts b/rolldown.config.ts index dca034dcff..b7d3c77dae 100644 --- a/rolldown.config.ts +++ b/rolldown.config.ts @@ -1,4 +1,5 @@ import { isAbsolute } from 'node:path'; +import react from '@vitejs/plugin-react'; import wyw from '@wyw-in-js/rollup'; import { defineConfig } from 'rolldown'; import { dts } from 'rolldown-plugin-dts'; @@ -15,6 +16,11 @@ export default defineConfig({ platform: 'browser', external: (id) => !id.startsWith('.') && !isAbsolute(id), plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler']] + } + }), dts({ tsconfig: './tsconfig.lib.json' }), diff --git a/vite.config.ts b/vite.config.ts index dabe74be47..a6941850ae 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ import { tanstackRouter } from '@tanstack/router-plugin/vite'; import react from '@vitejs/plugin-react'; import wyw from '@wyw-in-js/vite'; -import { defineConfig } from 'vite'; +import { defineConfig, loadEnv } from 'vite'; import type { BrowserCommand } from 'vitest/node'; const isCI = process.env.CI === 'true'; @@ -61,87 +61,94 @@ const scrollGrid: BrowserCommand<[{ scrollLeft?: number; scrollTop?: number }]> const viewport = { width: 1920, height: 1080 } as const; -export default defineConfig(({ command, isPreview }) => ({ - base: '/react-data-grid/', - cacheDir: '.cache/vite', - clearScreen: false, - build: { - modulePreload: { polyfill: false }, - sourcemap: true, - reportCompressedSize: false, - // https://github.com/parcel-bundler/lightningcss/issues/873 - cssMinify: 'esbuild' - }, - plugins: [ - (!isTest || isPreview) && - tanstackRouter({ - target: 'react', - generatedRouteTree: 'website/routeTree.gen.ts', - routesDirectory: 'website/routes', - autoCodeSplitting: true, - verboseFileRoutes: false - }), - react({ - exclude: ['./.cache/**/*'] - }), - wyw({ - exclude: ['./.cache/**/*', '**/*.d.ts', '**/*.gen.ts'], - preprocessor: 'none', - displayName: command === 'serve' - }) - ], - server: { - open: true - }, - test: { - globals: true, - coverage: { - provider: 'istanbul', - enabled: isCI, - include: ['src/**/*.{ts,tsx}'], - reporter: ['json'] - }, - restoreMocks: true, - sequence: { - shuffle: true +export default defineConfig(({ command, isPreview, mode }) => { + const env = loadEnv(mode, process.cwd()); + + return { + base: '/react-data-grid/', + cacheDir: '.cache/vite', + clearScreen: false, + build: { + modulePreload: { polyfill: false }, + sourcemap: true, + reportCompressedSize: false, + // https://github.com/parcel-bundler/lightningcss/issues/873 + cssMinify: 'esbuild' }, - projects: [ - { - extends: true, - test: { - name: 'browser', - include: ['test/browser/**/*.test.*'], - browser: { - // TODO: remove when FF tests are stable - fileParallelism: false, - enabled: true, - provider: 'playwright', - instances: [ - { - browser: 'chromium', - context: { viewport } - }, - { - browser: 'firefox', - context: { viewport } - } - ], - commands: { resizeColumn, dragFill, scrollGrid }, - viewport, - headless: true, - screenshotFailures: !isCI - }, - setupFiles: ['test/setupBrowser.ts'] + plugins: [ + (!isTest || isPreview) && + tanstackRouter({ + target: 'react', + generatedRouteTree: 'website/routeTree.gen.ts', + routesDirectory: 'website/routes', + autoCodeSplitting: true, + verboseFileRoutes: false + }), + react({ + exclude: ['./.cache/**/*'], + babel: { + plugins: env.VITE_UNOPTIMIZED ? undefined : [['babel-plugin-react-compiler']] } + }), + wyw({ + exclude: ['./.cache/**/*', '**/*.d.ts', '**/*.gen.ts'], + preprocessor: 'none', + displayName: command === 'serve' + }) + ], + server: { + open: true + }, + test: { + globals: true, + coverage: { + provider: 'istanbul', + enabled: isCI, + include: ['src/**/*.{ts,tsx}'], + reporter: ['json'] + }, + restoreMocks: true, + sequence: { + shuffle: true }, - { - extends: true, - test: { - name: 'node', - include: ['test/node/**/*.test.*'], - environment: 'node' + projects: [ + { + extends: true, + test: { + name: 'browser', + include: ['test/browser/**/*.test.*'], + browser: { + // TODO: remove when FF tests are stable + fileParallelism: false, + enabled: true, + provider: 'playwright', + instances: [ + { + browser: 'chromium', + context: { viewport } + }, + { + browser: 'firefox', + context: { viewport } + } + ], + commands: { resizeColumn, dragFill, scrollGrid }, + viewport, + headless: true, + screenshotFailures: !isCI + }, + setupFiles: ['test/setupBrowser.ts'] + } + }, + { + extends: true, + test: { + name: 'node', + include: ['test/node/**/*.test.*'], + environment: 'node' + } } - } - ] - } -})); + ] + } + }; +}); From 89e2e4284c1f76fe35fe732df6152b594f47383e Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 09:34:58 -0500 Subject: [PATCH 2/7] Add env file --- .env.unoptimized | 1 + 1 file changed, 1 insertion(+) create mode 100644 .env.unoptimized diff --git a/.env.unoptimized b/.env.unoptimized new file mode 100644 index 0000000000..ca8090534c --- /dev/null +++ b/.env.unoptimized @@ -0,0 +1 @@ +VITE_UNOPTIMIZED=true \ No newline at end of file From 032f83571e041c89e154e94de1da1ba6c6ea39c3 Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 12:02:31 -0500 Subject: [PATCH 3/7] Fix command --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 737a0442a5..cfa39e442e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -34,7 +34,7 @@ jobs: run: node --run test timeout-minutes: 4 - name: Test Without React Compiler - run: node --run test + run: node --run test-unoptimized timeout-minutes: 4 - name: Upload coverage uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 From 229fd349bab0a57180405c272e949757d1907d7e Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 14:16:46 -0500 Subject: [PATCH 4/7] Only generate coverage report once --- vite.config.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index a6941850ae..57a1a176cf 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -63,6 +63,7 @@ const viewport = { width: 1920, height: 1080 } as const; export default defineConfig(({ command, isPreview, mode }) => { const env = loadEnv(mode, process.cwd()); + const unoptimized = env.VITE_UNOPTIMIZED === 'true'; return { base: '/react-data-grid/', @@ -87,7 +88,7 @@ export default defineConfig(({ command, isPreview, mode }) => { react({ exclude: ['./.cache/**/*'], babel: { - plugins: env.VITE_UNOPTIMIZED ? undefined : [['babel-plugin-react-compiler']] + plugins: unoptimized ? undefined : [['babel-plugin-react-compiler']] } }), wyw({ @@ -103,7 +104,7 @@ export default defineConfig(({ command, isPreview, mode }) => { globals: true, coverage: { provider: 'istanbul', - enabled: isCI, + enabled: isCI && !unoptimized, include: ['src/**/*.{ts,tsx}'], reporter: ['json'] }, From 2c909e892851612dfde54b880c76d6410b21ac0a Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 14:43:54 -0500 Subject: [PATCH 5/7] Set `panicThreshold` --- rolldown.config.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/rolldown.config.ts b/rolldown.config.ts index b7d3c77dae..8b3695c9b2 100644 --- a/rolldown.config.ts +++ b/rolldown.config.ts @@ -18,7 +18,12 @@ export default defineConfig({ plugins: [ react({ babel: { - plugins: [['babel-plugin-react-compiler']] + plugins: [ + ['babel-plugin-react-compiler'], + { + panicThreshold: 'critical_error' + } + ] } }), dts({ From bc03835f11b2e1032ef8b395071a8185c4aa954d Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 14:46:57 -0500 Subject: [PATCH 6/7] fix option --- rolldown.config.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/rolldown.config.ts b/rolldown.config.ts index 8b3695c9b2..80956e9015 100644 --- a/rolldown.config.ts +++ b/rolldown.config.ts @@ -19,10 +19,12 @@ export default defineConfig({ react({ babel: { plugins: [ - ['babel-plugin-react-compiler'], - { - panicThreshold: 'critical_error' - } + [ + 'babel-plugin-react-compiler', + { + panicThreshold: 'critical_error' + } + ] ] } }), From 0e4ec8bf6a4b184551400ff8570d84b4ecd9c698 Mon Sep 17 00:00:00 2001 From: amahajan Date: Thu, 9 Oct 2025 14:51:30 -0500 Subject: [PATCH 7/7] try `all_errors` --- rolldown.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rolldown.config.ts b/rolldown.config.ts index 80956e9015..4e9bc92396 100644 --- a/rolldown.config.ts +++ b/rolldown.config.ts @@ -22,7 +22,7 @@ export default defineConfig({ [ 'babel-plugin-react-compiler', { - panicThreshold: 'critical_error' + panicThreshold: 'all_errors' } ] ]