fix(oxc): disable refresh transform when server.hmr: false (#502)

Author: hi-ogawa

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

@@ -82,6 +82,22 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     },
   }
 
+  const viteConfigPost: Plugin = {
+    name: 'vite:react-oxc:config-post',
+    enforce: 'post',
+    config(userConfig) {
+      if (userConfig.server?.hmr === false) {
+        return {
+          oxc: {
+            jsx: {
+              refresh: false,
+            },
+          },
+        }
+      }
+    },
+  }
+
   const viteRefreshRuntime: Plugin = {
     name: 'vite:react-oxc:refresh-runtime',
     enforce: 'pre',
@@ -148,5 +164,5 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     },
   }
 
-  return [viteConfig, viteRefreshRuntime, viteRefreshWrapper]
+  return [viteConfig, viteConfigPost, viteRefreshRuntime, viteRefreshWrapper]
 }

playground/hmr-false/__tests__/hmr-false.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('basic', async () => {
+  expect(await page.textContent('button')).toMatch('count is 0')
+  expect(await page.click('button'))
+  expect(await page.textContent('button')).toMatch('count is 1')
+})

playground/hmr-false/__tests__/oxc/hmr-false.spec.ts

@@ -0,0 +1 @@
+import '../hmr-false.spec'

playground/hmr-false/index.html

@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script type="module" src="./src/main.tsx"></script>

playground/hmr-false/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vitejs/test-react-hmr-false",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "workspace:*"
+  }
+}

playground/hmr-false/src/App.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react'
+
+export default function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <button onClick={() => setCount((count) => count + 1)}>
+        count is {count}
+      </button>
+    </>
+  )
+}

playground/hmr-false/src/main.tsx

@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(<App />)

playground/hmr-false/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

playground/hmr-false/vite.config.ts

@@ -0,0 +1,9 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    hmr: false,
+  },
+  plugins: [react()],
+})