feat: suggest vite-plugin-react-oxc when using rolldown-vite

packages/plugin-react-swc/README.md

@@ -117,6 +117,14 @@ react({
 })
 ```
 
+### disableOxcRecommendation
+
+If set, disables the recommendation to use `vite-plugin-react-oxc` (which is shown when `rolldown-vite` is detected and neither `swc` plugins are used nor the `swc` options are mutated).
+
+```ts
+react({ disableOxcRecommendation: true })
+```
+
 ## Consistent components exports
 
 For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

packages/plugin-react-swc/src/index.ts

@@ -18,6 +18,7 @@ import {
   runtimePublicPath,
   silenceUseClientWarning,
 } from '@vitejs/react-common'
+import * as vite from 'vite'
 import { exactRegex } from '@rolldown/pluginutils'
 
 /* eslint-disable no-restricted-globals */
@@ -75,6 +76,11 @@ type Options = {
    * feature doesn't work is not fun, so we won't provide support for it, hence the name `useAtYourOwnRisk`
    */
   useAtYourOwnRisk_mutateSwcOptions?: (options: SWCOptions) => void
+
+  /**
+   * If set, disables the recommendation to use `vite-plugin-react-oxc`
+   */
+  disableOxcRecommendation?: boolean
 }
 
 const react = (_options?: Options): PluginOption[] => {
@@ -90,6 +96,7 @@ const react = (_options?: Options): PluginOption[] => {
     reactRefreshHost: _options?.reactRefreshHost,
     useAtYourOwnRisk_mutateSwcOptions:
       _options?.useAtYourOwnRisk_mutateSwcOptions,
+    disableOxcRecommendation: _options?.disableOxcRecommendation,
   }
 
   return [
@@ -141,6 +148,22 @@ const react = (_options?: Options): PluginOption[] => {
             '[vite:react-swc] The MDX plugin should be placed before this plugin',
           )
         }
+
+        /*
+         * Suggest to use vite-plugin-react-oxc if `rolldown-vite` is used and:
+         * No swc plugins are set
+         * mutateSwcOptions is not set
+         */
+        if (
+          'rolldownVersion' in vite &&
+          !options.disableOxcRecommendation &&
+          !options.useAtYourOwnRisk_mutateSwcOptions &&
+          !options.plugins
+        ) {
+          console.warn(
+            '[vite:react-swc] We recommend switching to `vite-plugin-react-oxc` for improved performance as no swc plugins are used. More information at https://vite.dev/rolldown',
+          )
+        }
       },
       transformIndexHtml: (_, config) => {
         if (!hmrDisabled) {

packages/plugin-react/README.md

@@ -129,6 +129,10 @@ Otherwise, you'll probably get this error:
 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
 ```
 
+### disableOxcRecommendation
+
+If set, disables the recommendation to use `vite-plugin-react-oxc` (which is shown when `rolldown-vite` is detected and `babel` is not configured).
+
 ## Consistent components exports
 
 For React refresh to work correctly, your file should only export React components. You can find a good explanation in the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

packages/plugin-react/src/index.ts

@@ -62,6 +62,11 @@ export interface Options {
    * reactRefreshHost: 'http://localhost:3000'
    */
   reactRefreshHost?: string
+
+  /**
+   * If set, disables the recommendation to use `vite-plugin-react-oxc`
+   */
+  disableOxcRecommendation?: boolean
 }
 
 export type BabelOptions = Omit<
@@ -131,6 +136,16 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     name: 'vite:react-babel',
     enforce: 'pre',
     config() {
+      if (
+        'rolldownVersion' in vite &&
+        !opts.disableOxcRecommendation &&
+        !opts.babel
+      ) {
+        // Suggest to use vite-plugin-react-oxc if `rolldown-vite` is used and no babel config is set
+        console.warn(
+          '[vite:react-babel] We recommend switching to `vite-plugin-react-oxc` for improved performance. More information at https://vite.dev/rolldown',
+        )
+      }
       if (opts.jsxRuntime === 'classic') {
         if ('rolldownVersion' in vite) {
           return {