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

Co-authored-by: Hiroshi Ogawa <[email protected]>

Author: sapphi-red

.github/workflows/ci.yml

@@ -93,6 +93,17 @@ jobs:
       - name: Test SWC
         run: pnpm --filter ./packages/plugin-react-swc run test
 
+      - name: Setup rolldown-vite
+        run: |
+          sed -i"" -e "s/overrides:/overrides:\n  vite: catalog:rolldown-vite/" pnpm-workspace.yaml
+          pnpm i --no-frozen-lockfile
+
+      - name: Test serve (rolldown-vite)
+        run: pnpm run test-serve
+
+      - name: Test build (rolldown-vite)
+        run: pnpm run test-build
+
   lint:
     if: github.repository == 'vitejs/vite-plugin-react'
     timeout-minutes: 10

packages/plugin-react-oxc/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecate this plugin
+
+The changes of this plugin is now included in `@vitejs/plugin-react`. Please use `@vitejs/plugin-react` instead.
+
 ### Allow processing files in `node_modules`
 
 The default value of `exclude` options is now `[/\/node_modules\//]` to allow processing files in `node_modules` directory. It was previously `[]` and files in `node_modules` was always excluded regardless of the value of `exclude` option.

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

@@ -62,6 +62,13 @@ export default function viteReact(opts: Options = {}): Plugin[] {
         },
       }
     },
+    configResolved(config) {
+      config.logger.warn(
+        '@vitejs/plugin-react-oxc is deprecated. ' +
+          'Please use @vitejs/plugin-react instead. ' +
+          'The changes of this plugin is now included in @vitejs/plugin-react.',
+      )
+    },
     options() {
       if (!this.meta.rolldownVersion) {
         throw new Error(

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

@@ -78,7 +78,7 @@ type Options = {
   useAtYourOwnRisk_mutateSwcOptions?: (options: SWCOptions) => void
 
   /**
-   * If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
+   * If set, disables the recommendation to use `@vitejs/plugin-react`
    */
   disableOxcRecommendation?: boolean
 }
@@ -158,7 +158,7 @@ const react = (_options?: Options): Plugin[] => {
           !options.disableOxcRecommendation
         ) {
           config.logger.warn(
-            '[vite:react-swc] We recommend switching to `@vitejs/plugin-react-oxc` for improved performance as no swc plugins are used. More information at https://vite.dev/rolldown',
+            '[vite:react-swc] We recommend switching to `@vitejs/plugin-react` for improved performance as no swc plugins are used. More information at https://vite.dev/rolldown',
           )
         }
       },

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Use Oxc for react refresh transform in rolldown-vite
+
+When used with rolldown-vite, this plugin now uses Oxc for react refresh transform.
+
+Since this behavior is what `@vitejs/plugin-react-oxc` did, `@vitejs/plugin-react-oxc` is now deprecated and the `disableOxcRecommendation` option is removed.
+
 ### Allow processing files in `node_modules`
 
 The default value of `exclude` options is now `[/\/node_modules\//]` to allow processing files in `node_modules` directory. It was previously `[]` and files in `node_modules` was always excluded regardless of the value of `exclude` option.

packages/plugin-react/src/index.ts

@@ -8,6 +8,7 @@ import * as vite from 'vite'
 import type { Plugin, ResolvedConfig } from 'vite'
 import {
   addRefreshWrapper,
+  avoidSourceMapOption,
   getPreambleCode,
   preambleCode,
   runtimePublicPath,
@@ -58,11 +59,6 @@ export interface Options {
    * reactRefreshHost: 'http://localhost:3000'
    */
   reactRefreshHost?: string
-
-  /**
-   * If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
-   */
-  disableOxcRecommendation?: boolean
 }
 
 export type BabelOptions = Omit<
@@ -115,6 +111,8 @@ export default function viteReact(opts: Options = {}): Plugin[] {
   const jsxImportSource = opts.jsxImportSource ?? 'react'
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`
+
+  const isRolldownVite = 'rolldownVersion' in vite
   let runningInVite = false
   let isProduction = true
   let projectRoot = process.cwd()
@@ -133,37 +131,53 @@ export default function viteReact(opts: Options = {}): Plugin[] {
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
     enforce: 'pre',
-    config() {
-      if (opts.jsxRuntime === 'classic') {
-        if ('rolldownVersion' in vite) {
+    config(_userConfig, { command }) {
+      if ('rolldownVersion' in vite) {
+        if (opts.jsxRuntime === 'classic') {
           return {
             oxc: {
               jsx: {
                 runtime: 'classic',
+                refresh: command === 'serve',
                 // disable __self and __source injection even in dev
                 // as this plugin injects them by babel and oxc will throw
                 // if development is enabled and those properties are already present
                 development: false,
               },
+              jsxRefreshInclude: include,
+              jsxRefreshExclude: exclude,
             },
           }
         } else {
           return {
-            esbuild: {
-              jsx: 'transform',
+            oxc: {
+              jsx: {
+                runtime: 'automatic',
+                importSource: jsxImportSource,
+                refresh: command === 'serve',
+                development: command === 'serve',
+              },
+              jsxRefreshInclude: include,
+              jsxRefreshExclude: exclude,
             },
+            optimizeDeps: { rollupOptions: { jsx: { mode: 'automatic' } } },
           }
         }
+      }
+
+      if (opts.jsxRuntime === 'classic') {
+        return {
+          esbuild: {
+            jsx: 'transform',
+          },
+        }
       } else {
         return {
           esbuild: {
             jsx: 'automatic',
-            jsxImportSource: opts.jsxImportSource,
+            jsxImportSource: jsxImportSource,
           },
-          optimizeDeps:
-            'rolldownVersion' in vite
-              ? { rollupOptions: { jsx: { mode: 'automatic' } } }
-              : { esbuildOptions: { jsx: 'automatic' } },
+          optimizeDeps: { esbuildOptions: { jsx: 'automatic' } },
         }
       }
     },
@@ -180,17 +194,6 @@ export default function viteReact(opts: Options = {}): Plugin[] {
         .map((plugin) => plugin.api?.reactBabel)
         .filter(defined)
 
-      if (
-        'rolldownVersion' in vite &&
-        !opts.babel &&
-        !hooks.length &&
-        !opts.disableOxcRecommendation
-      ) {
-        config.logger.warn(
-          '[vite:react-babel] We recommend switching to `@vitejs/plugin-react-oxc` for improved performance. More information at https://vite.dev/rolldown',
-        )
-      }
-
       if (hooks.length > 0) {
         runPluginOverrides = (babelOptions, context) => {
           hooks.forEach((hook) => hook(babelOptions, context, config))
@@ -252,7 +255,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
               ? importReactRE.test(code)
               : code.includes(jsxImportDevRuntime) ||
                 code.includes(jsxImportRuntime)))
-        if (useFastRefresh) {
+        if (useFastRefresh && !isRolldownVite) {
           plugins.push([
             await loadPlugin('react-refresh/babel'),
             { skipEnvCheck: true },
@@ -329,6 +332,59 @@ export default function viteReact(opts: Options = {}): Plugin[] {
     },
   }
 
+  const viteRefreshWrapper: Plugin = {
+    name: 'vite:react:refresh-wrapper',
+    apply: 'serve',
+    transform: isRolldownVite
+      ? {
+          filter: {
+            id: {
+              include: makeIdFiltersToMatchWithQuery(include),
+              exclude: makeIdFiltersToMatchWithQuery(exclude),
+            },
+          },
+          handler(code, id, options) {
+            const ssr = options?.ssr === true
+
+            const [filepath] = id.split('?')
+            const isJSX = filepath.endsWith('x')
+            const useFastRefresh =
+              !skipFastRefresh &&
+              !ssr &&
+              (isJSX ||
+                code.includes(jsxImportDevRuntime) ||
+                code.includes(jsxImportRuntime))
+            if (!useFastRefresh) return
+
+            const { code: newCode } = addRefreshWrapper(
+              code,
+              avoidSourceMapOption,
+              '@vitejs/plugin-react',
+              id,
+            )
+            return { code: newCode, map: null }
+          },
+        }
+      : undefined,
+  }
+
+  const viteConfigPost: Plugin = {
+    name: 'vite:react:config-post',
+    enforce: 'post',
+    config(userConfig) {
+      if (userConfig.server?.hmr === false) {
+        return {
+          oxc: {
+            jsx: {
+              refresh: false,
+            },
+          },
+          // oxc option is only available in rolldown-vite
+        } as any
+      }
+    },
+  }
+
   const dependencies = [
     'react',
     'react-dom',
@@ -384,7 +440,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
     },
   }
 
-  return [viteBabel, viteReactRefresh]
+  return [viteBabel, viteRefreshWrapper, viteConfigPost, viteReactRefresh]
 }
 
 viteReact.preambleCode = preambleCode

packages/plugin-rsc/e2e/starter.test.ts

@@ -2,6 +2,7 @@ import { expect, test } from '@playwright/test'
 import { useFixture } from './fixture'
 import { defineStarterTest } from './starter'
 import { waitForHydration } from './helper'
+import * as vite from 'vite'
 
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/starter', mode: 'dev' })
@@ -24,6 +25,8 @@ test.describe('build-cloudflare', () => {
 })
 
 test.describe('dev-production', () => {
+  test.skip('rolldownVersion' in vite)
+
   const f = useFixture({
     root: 'examples/starter',
     mode: 'dev',
@@ -42,6 +45,8 @@ test.describe('dev-production', () => {
 })
 
 test.describe('build-development', () => {
+  test.skip('rolldownVersion' in vite)
+
   const f = useFixture({
     root: 'examples/starter',
     mode: 'build',