Setup React Compiler

.env.unoptimized

@@ -0,0 +1 @@
+VITE_UNOPTIMIZED=true

.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-unoptimized
+        timeout-minutes: 4
       - name: Upload coverage
         uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7
         with:

.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": {

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",

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,18 @@ export default defineConfig({
   platform: 'browser',
   external: (id) => !id.startsWith('.') && !isAbsolute(id),
   plugins: [
+    react({
+      babel: {
+        plugins: [
+          [
+            'babel-plugin-react-compiler',
+            {
+              panicThreshold: 'all_errors'
+            }
+          ]
+        ]
+      }
+    }),
     dts({
       tsconfig: './tsconfig.lib.json'
     }),

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,95 @@ 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());
+  const unoptimized = env.VITE_UNOPTIMIZED === 'true';
+
+  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: 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 && !unoptimized,
+        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'
+          }
         }
-      }
-    ]
-  }
-}));
+      ]
+    }
+  };
+});