Skip to content

feat: merge plugin-react-oxc into plugin-react #609

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

sapphi-red
Copy link
Member

@sapphi-red sapphi-red commented Jul 22, 2025

Description

Built on top of #306

The initial plan was to make @vitejs/plugin-react-oxc the default plugin when rolldown-vite lands. But I changed my mind and thought that merging plugin-react-oxc into plugin-react is better.

The upsides are:

  • easier migration for users using babel plugins: In the original plan, users had to migrate to @vitejs/plugin-react-babel. With this change, they can use @vitejs/plugin-react.
  • easier migration for users trying rolldown-vite: In the original plan, early users have to use @vitejs/plugin-react-oxc to try the behavior. With this change, they can simply switch to rolldown-vite.
  • easier to use react-compiler: given that react compiler requires babel and I assume there'd be many users that would like to use it, it would be better if they won't need to switch to @vitejs/plugin-react-babel

The downsides are:

  • slightly bigger package size due to babel related code: It will be +30kB compared to @vitejs/plugin-react-oxc. I think this is acceptable.
  • @babel/core + some plugins would be downloaded even if the user doesn't need it: babel requires 11.3MB of deps. Maybe we should make @babel/core an optional peer dep? (when rolldown-vite stabilizes) That would cut down 11.1MB.

@ArnaudBarre
Copy link
Member

ArnaudBarre commented Jul 22, 2025

I like the idea!

The question is how easy should we make to use the react compiler? If most users will use it, maybe we could also add it as a dependency so users only need a single line change to use it. Or we could even enable it by default and add a boolean to opt out.

I still want to do some tests on real world code (not triangle benchmark were the code path is really simple) to better weight the performance impact of the compiler on build time

Given that the default template already include eslint, I'm not sure the argument of extra node modules weights a lot even I would prefer less packages.

Note: I think we should update the oxc recommendation in the swc plugin

@sapphi-red sapphi-red force-pushed the feat/merge-plugin-oxc branch from ca17542 to 044f872 Compare July 23, 2025 01:21
@sapphi-red sapphi-red marked this pull request as ready for review July 23, 2025 03:35
@sapphi-red
Copy link
Member Author

The question is how easy should we make to use the react compiler? If most users will use it, maybe we could also add it as a dependency so users only need a single line change to use it. Or we could even enable it by default and add a boolean to opt out.

I think it shouldn't be the default at least until react-compiler reaches stable (currently it's RC).

I still want to do some tests on real world code (not triangle benchmark were the code path is really simple) to better weight the performance impact of the compiler on build time

FWIW I saw some real world numbers at reactwg/react-compiler#33, reactwg/react-compiler#52.

Note: I think we should update the oxc recommendation in the swc plugin

Done 👍

Comment on lines 47 to +49
test.describe('dev-production', () => {
test.skip('rolldownVersion' in vite)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have test cases for NODE_ENV=production vite dev and NODE_ENV=development vite build #606, but these are failing on oxc since jsx runtime transform respects command instead of NODE_ENV.

For now I'll skip this case on rolldown since the behavior is same as previous plugin-react-oxc and also I'm not sure about this use case in the first place.

Copy link
Member Author

@sapphi-red sapphi-red Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is a bug in plugin-react-oxc. It should skip setting the development option as then it would default to isProduction.
I'll fix this in a separate PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created an issue #622

@ArnaudBarre
Copy link
Member

FWIW I saw some real world numbers at reactwg/react-compiler#33, reactwg/react-compiler#52.

This are runtime benefits. I tested on my app bundled with esbuild, adding babel with compiler on all tsx files make the bundling time go from 700ms to 13s. So for now I don't think it's good to enable it by default given the non negligeable build time cost.
I'm not sure if we should make babel optional or not given that

@sapphi-red
Copy link
Member Author

I just noticed that we should keep @babel/core as a normal dep for now as in normal Vite, this plugin will still use babel for the refresh transform.
I think we can put it on the table after we switch to rolldown-vite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants