CR

Author: ArnaudBarre

packages/plugin-react/README.md

@@ -29,13 +29,18 @@ import react from '@vitejs/plugin-react'
 import mdx from '@mdx-js/rollup'
 
 export default defineConfig({
-  plugins: [mdx(), react({ include: /.mdx$/ })],
+  plugins: [
+    { enforce: 'pre', ...mdx() },
+    react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
+  ],
 })
 ```
 
+> `node_modules` are never processed by this plugin (but esbuild will)
+
 ### jsxImportSource
 
-Control where the JSX factory is imported from. For TS projects this is inferred from the tsconfig.
+Control where the JSX factory is imported from. For TS projects this is inferred from the tsconfig. If you have some React code outside JSX/TSX files, this will be used to detect the presence of React code and apply Fast Refresh.
 
 ```js
 react({ jsxImportSource: '@emotion/react' })

packages/plugin-react/src/index.ts

@@ -78,17 +78,13 @@ declare module 'vite' {
 
 const prependReactImportCode = "import React from 'react'; "
 const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/
-const defaultIncludeRE = /\.(?:mjs|[tj]sx?)$/
+const defaultIncludeRE = /\.[tj]sx?$/
+const tsRE = /\.tsx?$/
 
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
   let devBase = '/'
-  const filter = createFilter(
-    opts.include === undefined
-      ? defaultIncludeRE
-      : [defaultIncludeRE, ...arraify(opts.include)],
-    opts.exclude,
-  )
+  const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude)
   let needHiresSourcemap = false
   let isProduction = true
   let projectRoot = process.cwd()
@@ -176,7 +172,16 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       })()
       const plugins = [...babelOptions.plugins]
 
-      const useFastRefresh = !skipFastRefresh && !ssr
+      const isJSX = filepath.endsWith('x')
+      const useFastRefresh =
+        !skipFastRefresh &&
+        !ssr &&
+        (isJSX ||
+          (opts.jsxRuntime === 'classic'
+            ? code.includes(
+                `${opts.jsxImportSource ?? 'react'}/jsx-dev-runtime`,
+              )
+            : importReactRE.test(code)))
       if (useFastRefresh) {
         plugins.push([
           await loadPlugin('react-refresh/babel'),
@@ -185,7 +190,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       }
 
       let prependReactImport = false
-      if (opts.jsxRuntime === 'classic' && filepath.endsWith('x')) {
+      if (opts.jsxRuntime === 'classic' && isJSX) {
         if (!isProduction) {
           // These development plugins are only needed for the classic runtime.
           plugins.push(
@@ -238,7 +243,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         parserPlugins.push('jsx')
       }
 
-      if (/\.tsx?$/.test(filepath)) {
+      if (tsRE.test(filepath)) {
         parserPlugins.push('typescript')
       }
 
@@ -337,7 +342,3 @@ function createBabelOptions(rawOptions?: BabelOptions) {
 function defined<T>(value: T | undefined): value is T {
   return value !== undefined
 }
-
-function arraify<T>(target: T | T[]): T[] {
-  return Array.isArray(target) ? target : [target]
-}

playground/mdx/vite.config.ts

@@ -4,5 +4,8 @@ import mdx from '@mdx-js/rollup'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [{ enforce: 'pre', ...mdx() }, react({ include: /.mdx$/ })],
+  plugins: [
+    { enforce: 'pre', ...mdx() },
+    react({ include: /\.(mdx|ts|tsx)$/ }),
+  ],
 })