feat!: allow to run Babel on non js/ts extensions (fixes #38)

packages/plugin-react/src/index.ts

@@ -15,11 +15,6 @@ import {
 export interface Options {
   include?: string | RegExp | Array<string | RegExp>
   exclude?: string | RegExp | Array<string | RegExp>
-  /**
-   * Enable `react-refresh` integration. Vite disables this in prod env or build mode.
-   * @default true
-   */
-  fastRefresh?: boolean
   /**
    * Set this to `"automatic"` to use [vite-react-jsx](https://github.com/alloc/vite-react-jsx).
    * @default "automatic"
@@ -89,14 +84,26 @@ declare module 'vite' {
 
 const prependReactImportCode = "import React from 'react'; "
 
+const defaultIncludeRE = /\.(?:mjs|[tj]sx?)$/
+
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
   let devBase = '/'
-  let filter = createFilter(opts.include, opts.exclude)
+  const filter = createFilter(
+    [
+      defaultIncludeRE,
+      ...(Array.isArray(opts.include)
+        ? opts.include
+        : opts.include
+        ? [opts.include]
+        : []),
+    ],
+    opts.exclude,
+  )
   let needHiresSourcemap = false
   let isProduction = true
   let projectRoot = process.cwd()
-  let skipFastRefresh = opts.fastRefresh === false
+  let skipFastRefresh = false
   let skipReactImport = false
   let runPluginOverrides = (
     options: ReactBabelOptions,
@@ -158,13 +165,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     configResolved(config) {
       devBase = config.base
       projectRoot = config.root
-      filter = createFilter(opts.include, opts.exclude, {
-        resolve: projectRoot,
-      })
       needHiresSourcemap =
         config.command === 'build' && !!config.build.sourcemap
       isProduction = config.isProduction
-      skipFastRefresh ||= isProduction || config.command === 'build'
+      skipFastRefresh = isProduction || config.command === 'build'
 
       const jsxInject = config.esbuild && config.esbuild.jsxInject
       if (jsxInject && importReactRE.test(jsxInject)) {
@@ -203,6 +207,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       }
     },
     async transform(code, id, options) {
+      if (id.includes('/node_modules/')) return
       const ssr = options?.ssr === true
       // File extension could be mocked/overridden in querystring.
       const [filepath, querystring = ''] = id.split('?')
@@ -211,11 +216,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         filepath.match(fileExtensionRE) ||
         []
 
-      if (/\.(?:mjs|[tj]sx?)$/.test(extension)) {
+      if (filter(id)) {
         const isJSX = extension.endsWith('x')
-        const isNodeModules = id.includes('/node_modules/')
-        const isProjectFile =
-          !isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
 
         let babelOptions = staticBabelOptions
         if (typeof opts.babel === 'function') {
@@ -229,40 +231,35 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           }
         }
 
-        const plugins = isProjectFile ? [...babelOptions.plugins] : []
-
-        let useFastRefresh = false
-        if (!skipFastRefresh && !ssr && !isNodeModules) {
-          // Modules with .js or .ts extension must import React.
-          const isReactModule = isJSX || importReactRE.test(code)
-          if (isReactModule && filter(id)) {
-            useFastRefresh = true
-            plugins.push([
-              await loadPlugin('react-refresh/babel'),
-              { skipEnvCheck: true },
-            ])
-          }
+        const plugins = [...babelOptions.plugins]
+
+        const useFastRefresh =
+          // Non-jsx extensions must import React.
+          !skipFastRefresh && !ssr && (isJSX || importReactRE.test(code))
+
+        if (useFastRefresh) {
+          plugins.push([
+            await loadPlugin('react-refresh/babel'),
+            { skipEnvCheck: true },
+          ])
         }
 
-        let prependReactImport = false
-        if (!isProjectFile || isJSX) {
-          if (!useAutomaticRuntime && isProjectFile) {
-            // These plugins are only needed for the classic runtime.
-            if (!isProduction) {
-              plugins.push(
-                await loadPlugin('@babel/plugin-transform-react-jsx-self'),
-                await loadPlugin('@babel/plugin-transform-react-jsx-source'),
-              )
-            }
-
-            // Even if the automatic JSX runtime is not used, we can still
-            // inject the React import for .jsx and .tsx modules.
-            if (!skipReactImport && !importReactRE.test(code)) {
-              prependReactImport = true
-            }
-          }
+        if (isJSX && !useAutomaticRuntime && !isProduction) {
+          // These development plugins are only needed for the classic runtime.
+          plugins.push(
+            await loadPlugin('@babel/plugin-transform-react-jsx-self'),
+            await loadPlugin('@babel/plugin-transform-react-jsx-source'),
+          )
         }
 
+        // Even if the automatic JSX runtime is not used, we can still
+        // inject the React import for .jsx and .tsx modules.
+        const prependReactImport =
+          isJSX &&
+          !useAutomaticRuntime &&
+          !skipReactImport &&
+          !importReactRE.test(code)
+
         let inputMap: SourceMap | undefined
         if (prependReactImport) {
           if (needHiresSourcemap) {
@@ -275,17 +272,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           }
         }
 
-        // Plugins defined through this Vite plugin are only applied
-        // to modules within the project root, but "babel.config.js"
-        // files can define plugins that need to be applied to every
-        // module, including node_modules and linked packages.
-        const shouldSkip =
+        // Avoid parsing if no special transformation is needed
+        if (
           !plugins.length &&
           !babelOptions.configFile &&
-          !(isProjectFile && babelOptions.babelrc)
-
-        // Avoid parsing if no plugins exist.
-        if (shouldSkip) {
+          !babelOptions.babelrc
+        ) {
           return {
             code,
             map: inputMap ?? null,

playground/mdx/__tests__/mdx.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+} from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('h1')).toMatch('Vite + MDX')
+})
+
+if (isServe) {
+  test('should hmr', async () => {
+    editFile('src/demo.mdx', (code) => code.replace('Vite + MDX', 'Updated'))
+    await untilBrowserLogAfter(
+      () => page.textContent('h1'),
+      '[vite] hot updated: /src/demo.mdx',
+    )
+    await untilUpdated(() => page.textContent('h1'), 'Updated')
+  })
+}

playground/mdx/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + MDX</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

playground/mdx/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@vitejs/test-mdx",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@mdx-js/rollup": "^2.1.5",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "workspace:*"
+  }
+}

playground/mdx/src/demo.mdx

@@ -0,0 +1,11 @@
+# Vite + MDX
+
+Sint sit cillum pariatur eiusmod nulla pariatur ipsum.
+
+### Unordered List
+
+- Olive
+- Orange
+  - Blood orange
+  - Clementine
+- Papaya

playground/mdx/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import Demo from './demo.mdx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Demo />
+  </React.StrictMode>,
+)

playground/mdx/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.mdx' {
+  import { JSX } from 'react'
+  export default () => JSX.Element
+}

playground/mdx/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

playground/mdx/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

playground/mdx/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import mdx from '@mdx-js/rollup'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [{ enforce: 'pre', ...mdx() }, react({ include: /.mdx$/ })],
+})