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 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d39e153f37..cfa39e442e 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-unoptimized + 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..4e9bc92396 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,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' }), diff --git a/vite.config.ts b/vite.config.ts index dabe74be47..57a1a176cf 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,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' + } } - } - ] - } -})); + ] + } + }; +});