feat(react): add raw rolldown support (#513)

Author: sapphi-red

eslint.config.js

@@ -127,6 +127,7 @@ export default tseslint.config(
   {
     name: 'disables/playground',
     files: [
+      'packages/**/*.test.?([cm])[jt]s?(x)',
       'playground/**/*.?([cm])[jt]s?(x)',
       'packages/plugin-react-swc/playground/**/*.?([cm])[jt]s?(x)',
     ],

package.json

@@ -21,7 +21,8 @@
     "format": "prettier --write --cache .",
     "lint": "eslint --cache .",
     "typecheck": "tsc -p scripts && tsc -p playground && tsc -p packages/plugin-react",
-    "test": "pnpm run test-serve && pnpm run test-build && pnpm --filter ./packages/plugin-react-swc run test",
+    "test": "pnpm run test-unit && pnpm run test-serve && pnpm run test-build && pnpm --filter ./packages/plugin-react-swc run test",
+    "test-unit": "pnpm -r --filter='./packages/*' run test-unit",
     "test-serve": "vitest run -c playground/vitest.config.e2e.ts",
     "test-build": "VITE_TEST_BUILD=1 vitest run -c playground/vitest.config.e2e.ts",
     "debug-serve": "VITE_DEBUG_SERVE=1 vitest run -c playground/vitest.config.e2e.ts",

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Add raw Rolldown support
+
+This plugin only worked with Vite. But now it can also be used with raw Rolldown. The main purpose for using this plugin with Rolldown is to use react compiler.
+
 ## 4.5.2 (2025-06-10)
 
 ### Suggest `@vitejs/plugin-react-oxc` if rolldown-vite is detected [#491](https://github.com/vitejs/vite-plugin-react/pull/491)

packages/plugin-react/package.json

@@ -33,7 +33,8 @@
     "dev": "unbuild --stub",
     "build": "unbuild && pnpm run patch-cjs && tsx scripts/copyRefreshRuntime.ts",
     "patch-cjs": "tsx ../../scripts/patchCJS.ts",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test-unit": "vitest run"
   },
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
@@ -60,6 +61,11 @@
   },
   "devDependencies": {
     "@vitejs/react-common": "workspace:*",
-    "unbuild": "^3.5.0"
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rolldown": "1.0.0-beta.17",
+    "unbuild": "^3.5.0",
+    "vitest": "^3.2.3"
   }
 }

packages/plugin-react/src/index.ts

@@ -22,8 +22,7 @@ const _dirname = dirname(fileURLToPath(import.meta.url))
 
 const refreshRuntimePath = globalThis.__IS_BUILD__
   ? join(_dirname, 'refresh-runtime.js')
-  : // eslint-disable-next-line n/no-unsupported-features/node-builtins -- only used in dev
-    fileURLToPath(import.meta.resolve('@vitejs/react-common/refresh-runtime'))
+  : join(_dirname, '../../common/refresh-runtime.js')
 
 // lazy load babel since it's not used during build if plugins are not used
 let babel: typeof babelCore | undefined
@@ -118,9 +117,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   const jsxImportSource = opts.jsxImportSource ?? 'react'
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`
+  let runningInVite = false
   let isProduction = true
   let projectRoot = process.cwd()
-  let skipFastRefresh = false
+  let skipFastRefresh = true
   let runPluginOverrides:
     | ((options: ReactBabelOptions, context: ReactBabelHookContext) => void)
     | undefined
@@ -170,6 +170,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       }
     },
     configResolved(config) {
+      runningInVite = true
       projectRoot = config.root
       isProduction = config.isProduction
       skipFastRefresh =
@@ -217,6 +218,15 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         }
       }
     },
+    options(options) {
+      if (!runningInVite) {
+        options.jsx = {
+          mode: opts.jsxRuntime,
+          importSource: opts.jsxImportSource,
+        }
+        return options
+      }
+    },
     transform: {
       filter: {
         id: {

packages/plugin-react/tests/rolldown.test.ts

@@ -0,0 +1,66 @@
+import path from 'node:path'
+import { expect, test } from 'vitest'
+import { type Plugin, rolldown } from 'rolldown'
+import pluginReact, { type Options } from '../src/index.ts'
+
+test('HMR related code should not be included when using rolldown', async () => {
+  const { output } = await bundleWithRolldown()
+
+  expect(output[0].code).toBeDefined()
+  expect(output[0].code).not.toContain('import.meta.hot')
+})
+
+test('HMR related code should not be included when using rolldown with babel plugin', async () => {
+  const { output } = await bundleWithRolldown({
+    babel: {
+      plugins: [['babel-plugin-react-compiler', {}]],
+    },
+  })
+
+  expect(output[0].code).toBeDefined()
+  expect(output[0].code).not.toContain('import.meta.hot')
+})
+
+async function bundleWithRolldown(pluginReactOptions: Options = {}) {
+  const ENTRY = '/entry.tsx'
+  const files: Record<string, string> = {
+    [ENTRY]: /* tsx */ `
+      import React from "react"
+      import { hydrateRoot } from "react-dom/client"
+      import App from "./App.tsx"
+
+      const container = document.getElementById("root");
+      hydrateRoot(container, <App />);
+    `,
+    '/App.tsx': /* tsx */ `
+      export default function App() {
+        return <div>Hello World</div>
+      }
+    `,
+  }
+
+  const bundle = await rolldown({
+    input: ENTRY,
+    plugins: [virtualFilesPlugin(files), pluginReact(pluginReactOptions)],
+    external: [/^react(\/|$)/, /^react-dom(\/|$)/],
+  })
+  return await bundle.generate({ format: 'esm' })
+}
+
+function virtualFilesPlugin(files: Record<string, string>): Plugin {
+  return {
+    name: 'virtual-files',
+    resolveId(id, importer) {
+      const baseDir = importer ? path.posix.dirname(importer) : '/'
+      const result = path.posix.resolve(baseDir, id)
+      if (result in files) {
+        return result
+      }
+    },
+    load(id) {
+      if (id in files) {
+        return files[id]
+      }
+    },
+  }
+}