diff --git a/package.json b/package.json index e8917122e..68b718aef 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-visually-hidden": "^1.0.3", "@react-spring/web": "^10.0.0", + "@rolldown/plugin-babel": "^0.2.3", "@sentry/react": "^8.0.0", "@sentry/vite-plugin": "^3.0.0", "@storybook/addon-docs": "^10.3.6", @@ -81,6 +82,7 @@ "@vitest/browser-playwright": "^4.1.5", "@vitest/coverage-v8": "^4.0.18", "@vitest/ui": "4.1.10", + "babel-plugin-react-compiler": "^1.0.0", "classnames": "^2.3.1", "copy-to-clipboard": "^3.3.3", "eslint-plugin-element-call": "link:eslint", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index af98ebfaf..91f9a656b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,6 +64,9 @@ importers: '@react-spring/web': specifier: ^10.0.0 version: 10.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@rolldown/plugin-babel': + specifier: ^0.2.3 + version: 0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) '@sentry/react': specifier: ^8.0.0 version: 8.55.2(react@19.2.8) @@ -135,7 +138,7 @@ importers: version: 9.9.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@vitejs/plugin-react': specifier: ^6.0.2 - version: 6.0.5(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) '@vitest/browser-playwright': specifier: ^4.1.5 version: 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10) @@ -145,6 +148,9 @@ importers: '@vitest/ui': specifier: 4.1.10 version: 4.1.10(vitest@4.1.10) + babel-plugin-react-compiler: + specifier: ^1.0.0 + version: 1.0.0 classnames: specifier: ^2.3.1 version: 2.5.1 @@ -2505,6 +2511,23 @@ packages: cpu: [x64] os: [win32] + '@rolldown/plugin-babel@0.2.3': + resolution: {integrity: sha512-+zEk16yGlz1F9STiRr6uG9hmIXb6nprjLczV/htGptYuLoCuxb+itZ03RKCEeOhBpDDd1NU7qF6x1VLMUp62bw==} + engines: {node: '>=22.12.0 || ^24.0.0'} + peerDependencies: + '@babel/core': ^7.29.0 || ^8.0.0-rc.1 + '@babel/plugin-transform-runtime': ^7.29.0 || ^8.0.0-rc.1 + '@babel/runtime': ^7.27.0 || ^8.0.0-rc.1 + rolldown: ^1.0.0-rc.5 + vite: ^8.0.0 + peerDependenciesMeta: + '@babel/plugin-transform-runtime': + optional: true + '@babel/runtime': + optional: true + vite: + optional: true + '@rolldown/pluginutils@1.0.1': resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==} @@ -3429,6 +3452,9 @@ packages: resolution: {integrity: sha512-zBQouZixDTbo3jMGqHKyePxYxr1e5W8UdTmBQ7sNtaA9M2bE32daxxPLS/jojhKOHxQ7LWwPjfiwf/fhaJWzlg==} engines: {node: '>=4'} + babel-plugin-react-compiler@1.0.0: + resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==} + balanced-match@4.0.4: resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} engines: {node: 18 || 20 || >=22} @@ -5705,10 +5731,6 @@ packages: resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==} engines: {node: '>=14.0.0'} - tinyrainbow@3.1.0: - resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==} - engines: {node: '>=14.0.0'} - tinyrainbow@3.1.1: resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==} engines: {node: '>=14.0.0'} @@ -8053,6 +8075,15 @@ snapshots: '@rolldown/binding-win32-x64-msvc@1.1.5': optional: true + '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + dependencies: + '@babel/core': 7.29.7 + picomatch: 4.0.4 + rolldown: 1.1.5 + optionalDependencies: + '@babel/runtime': 7.29.7 + vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + '@rolldown/pluginutils@1.0.1': {} '@rollup/plugin-inject@5.0.5(rollup@4.60.1)': @@ -8735,10 +8766,13 @@ snapshots: - '@types/react-dom' - react-dom - '@vitejs/plugin-react@6.0.5(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': + '@vitejs/plugin-react@6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))': dependencies: '@rolldown/pluginutils': 1.0.1 vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0) + optionalDependencies: + '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) + babel-plugin-react-compiler: 1.0.0 '@vitest/browser-playwright@4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)': dependencies: @@ -8845,7 +8879,7 @@ snapshots: pathe: 2.0.3 sirv: 3.0.2 tinyglobby: 0.2.17 - tinyrainbow: 3.1.0 + tinyrainbow: 3.1.1 vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)) '@vitest/utils@3.2.4': @@ -8959,6 +8993,10 @@ snapshots: axe-core@4.11.3: {} + babel-plugin-react-compiler@1.0.0: + dependencies: + '@babel/types': 7.29.8 + balanced-match@4.0.4: {} base-x@5.0.1: {} @@ -11503,8 +11541,6 @@ snapshots: tinyrainbow@2.0.0: {} - tinyrainbow@3.1.0: {} - tinyrainbow@3.1.1: {} tinyspy@4.0.4: {} diff --git a/src/useEvents.test.tsx b/src/useEvents.test.tsx index 5ad4c1d4f..6288fae82 100644 --- a/src/useEvents.test.tsx +++ b/src/useEvents.test.tsx @@ -28,6 +28,10 @@ test("useTypedEventEmitterState reacts to events", async () => { const emitter = new TestEmitter(); const Test: FC = () => { + // Disable the React Compiler to work around the following bug: + // https://github.com/react/react/issues/34901 + "use no memo"; + const value = useTypedEventEmitterState( emitter, "change", @@ -51,6 +55,10 @@ test("useTypedEventEmitterState reacts to changes made by an effect mounted on t const emitter = new TestEmitter(); const Test: FC = () => { + // Disable the React Compiler to work around the following bug: + // https://github.com/react/react/issues/34901 + "use no memo"; + useEffect(() => emitter.setState(2), []); const value = useTypedEventEmitterState( emitter, @@ -69,6 +77,10 @@ test("useTypedEventEmitterState reacts to changes in getState", async () => { const emitter = new TestEmitter(); const Test: FC = () => { + // Disable the React Compiler to work around the following bug: + // https://github.com/react/react/issues/34901 + "use no memo"; + const [fn, setFn] = useState(() => emitter.getState); const value = useTypedEventEmitterState(emitter, "change", fn); return ( diff --git a/vite.config.ts b/vite.config.ts index 6d224b7e8..61936cfdf 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details. import { loadEnv, - PluginOption, + type PluginOption, searchForWorkspaceRoot, type ConfigEnv, type UserConfig, @@ -19,8 +19,8 @@ import { codecovVitePlugin } from "@codecov/vite-plugin"; import { sentryVitePlugin } from "@sentry/vite-plugin"; import { nodePolyfills } from "vite-plugin-node-polyfills"; import wasm from "vite-plugin-wasm"; - -import react from "@vitejs/plugin-react"; +import babel from "@rolldown/plugin-babel"; +import react, { reactCompilerPreset } from "@vitejs/plugin-react"; import { realpathSync } from "fs"; import * as fs from "node:fs"; @@ -29,6 +29,9 @@ export const vitePluginsConfig = ({ }: Pick): UserConfig => { const env = loadEnv(mode, process.cwd()); const plugins: PluginOption[] = [ + babel({ + presets: [reactCompilerPreset()], + }), react(), wasm(), nodePolyfills({