Removing babel from @vitejs/plugin-react while having an easy way to add react compiler

[sapphi-red]

In Vite 8 (currently beta), react refresh transform can be handled by Oxc. This means there's no transform that uses babel by default.
To reduce the install size, I think we should remove babel from the dependency of @vitejs/plugin-react.

That said, the React Compiler requires babel and we should make sure using that is still easy.

I've considered some ways to keep that easy, and would like to hear some thoughts about it.

Do nothing

As a reference, if we do nothing other than removing babel from @vitejs/plugin-react, the config will be like this:

import babel from '@rollup/plugin-babel'
import react from '@vitejs/plugin-react'
import { defineConfig, withFilter } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...withFilter(
        babel({
          babelrc: false,
          configFile: false,
          sourceMaps: true,
          plugins: [['babel-plugin-react-compiler', { /* options */ }]],
          parserOpts: {
            sourceType: 'module',
            allowAwaitOutsideFunction: true,
          },
          overrides: [
            {
              test: '**/*.jsx',
              parserOpts: { plugins: ['jsx'] },
            },
            {
              test: '**/*.ts',
              parserOpts: { plugins: ['typescript'] },
            },
            {
              test: '**/*.tsx',
              parserOpts: { plugins: ['typescript', 'jsx'] },
            },
          ],

          extensions: ['.js', '.jsx', '.ts', '.tsx'],
          babelHelpers: 'bundled',
          skipPreflightCheck: true,
        }),
        {
          transform: {
            // use `/['"]use memo['"]/` instead for `compilationMode: "annotation"`
            code: /\b[A-Z]|\buse/,
            id: { exclude: /\/node_modules\// },
          },
        },
      ),
      config() {
        return {
          optimizeDeps: {
            include: ['react-compiler-runtime'],
          },
        }
      },
      applyToEnvironment(environment) {
        return environment.name === 'client'
      },
      enforce: 'pre',
    },
    react(),
  ],
})

The config is too long and I believe this is not acceptable.

Add @rolldown/plugin-babel with a better interface

The option passed to @rollup/plugin-babel are huge mainly because the defaults are not decided based on what / how Vite / Rolldown supports. If we have a dedicated babel plugin for Vite & Rolldown, this will be solved. If we introduced that, the config will look like this:

import babel from '@rolldown/plugin-babel'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['react-compiler-runtime'],
  },
  plugins: [
    babel({
      plugins: [
        [
          'babel-plugin-react-compiler',
          { /* options */ },
          {
            filter: {
              // use `/['"]use memo['"]/` instead for `compilationMode: "annotation"`
              code: /\b[A-Z]|\buse/,
              id: { exclude: /\/node_modules\// }, 
              environment: 'client'
            },
          },
        ],
      ]
    }),
    react(),
  ],
})

The default options are passed to babel internally by @rolldown/plugin-babel. Hook filters and applyToEnvironment will be computed based on the filter option passed along with the babel plugin. enforce: true will be set by default.

Users still need to set optimizeDeps.include and some filter by themselves, but it's much easier to configure.

Add @rolldown/plugin-babel with a better interface + presets

Since many users will pass the same value for the filter option, probably it makes sense to provide a preset for that. If we introduced that, the config will look like this:

import babel, { reactCompilerPluginAdapter } from '@rolldown/plugin-babel'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    babel({
      plugins: [
        reactCompilerPluginAdapter({ /* options */ })
      ]
    }),
    react(),
  ],
})

reactCompilerPluginAdapter will have the filter options internally so that users won't have to specify it. Adapters can specify optimizeDeps.include and @rolldown/plugin-babel will set them internally so that users won't need to set them.

This way users won't need to set any options.

Provide a preset from @vitejs/plugin-react

I thought about providing a preset from @vitejs/plugin-react so that it's easier to use @rollup/plugin-babel.
But to achieve that, the config looks like below, which makes me feel that the abstraction is wrong.

import babel from '@rollup/plugin-babel'
import react, { reactCompilerBabelPreset } from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['react-compiler-runtime'],
  },
  plugins: [
    reactCompilerBabelPreset(babel, { /* options */ }),
    react(),
  ],
})

[yyx990803]

What about this? Is this possible?

import babel from '@rollup/plugin-babel'
import react, { reactCompilerBabelPreset } from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    include: ['react-compiler-runtime'],
  },
  plugins: [
    babel({ plugins: [reactCompilerBabelPreset] }),
    react(),
  ],
})

[sapphi-red]

(assuming that you meant import babel from '@rolldown/plugin-babel' instead of import babel from '@rollup/plugin-babel')

It is possible. @vitejs/plugin-react will need to have @rolldown/plugin-babel as an optional peer dependency, but that should be fine.
I placed the preset on the @rolldown/plugin-babel side since it can be used without the react plugin, and that was the only reason.

Regarding the "preset" name, I avoided as I thought it will cause confusion with babel presets.

[ArnaudBarre]

Yeah I like this direction, but I think it should be a function so that we don't impose the compiler options

[ArnaudBarre]

I don't think we should expose the whole thing as a Vite plugin, otherwise it makes it hard to add another babel plugin (or possibly not performant).

There is also an option to keep the plugin as is, but make babel an optional peer dependency so it's not downloaded by default and if people want to use any plugin, we log an error message if it's not installed. It's the same number of deps for the users in their package.json in the end.

But it's less coherent with the SWC deprecation. I like this idea of a rolldown babel plugin that knows Vite filters and can optimize the config when multiple filters are applied at the babel plugin level

In the I think I prefer the Add @rolldown/plugin-babel with a better interface option, passing down the initial filtering to the user is not ideal but the three lines could later be an issue for some users:

• code regex: the \b[A-Z] is a bit lax and could match to many files. I think you get a better ratio by running on all .jsx/tsx files + using \buse[A-Z] on non js/ts files
• id: maybe some users could want to optimize libs that didn't want to run the compiler themself (or where written before it)
• environment: maybe users will have another client environment named differently (if I understand that the filter works on name)

[sapphi-red]

We'll go with:

import babel from '@rolldown/plugin-babel'
import react, { preconfiguredReactCompilerPlugin } from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    babel({
      plugins: [
        preconfiguredReactCompilerPlugin({ /* options */ })
      ]
    }),
    react(),
  ],
})