fix: fix fast-refresh for files that are transformed into jsx (#188)

CONTRIBUTING.md

@@ -117,9 +117,9 @@ To use breakpoints and explore code execution, you can use the ["Run and Debug"]
 
 Some errors are masked and hidden away because of the layers of abstraction and sandboxed nature added by Vitest, Playwright, and Chromium. In order to see what's actually going wrong and the contents of the devtools console in those instances, follow this setup:
 
-1. Add a `debugger` statement to the `playground/vitestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits.
+1. Add a `debugger` statement to the `playground/vitestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits. You can also add `debugger` statements in your tests (`.spec.ts`) files.
 
-2. Run the tests with the `debug-serve` script command, which will enable remote debugging: `pnpm run debug-serve react-sourcemap`.
+2. Run the tests with the `debug-serve` script command, which will enable remote debugging: `pnpm run debug-serve react-sourcemap`. Remember to run this command within the **"JavaScript Debug Terminal"** of VS Code.
 
 3. Wait for inspector devtools to open in your browser and the debugger to attach.
 

packages/plugin-react/src/index.ts

@@ -173,8 +173,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         !ssr &&
         (isJSX ||
           (opts.jsxRuntime === 'classic'
-            ? code.includes(devRuntime)
-            : importReactRE.test(code)))
+            ? importReactRE.test(code)
+            : code.includes(devRuntime)))
       if (useFastRefresh) {
         plugins.push([
           await loadPlugin('react-refresh/babel'),

playground/mdx/__tests__/mdx.spec.ts

@@ -11,6 +11,12 @@ test('should render', async () => {
   expect(await page.textContent('h1')).toMatch('Vite + MDX')
 })
 
+test('.md extension should work', async () => {
+  expect(await page.getByText('.md extension works.').textContent()).toEqual(
+    '.md extension works. This is bold text.',
+  )
+})
+
 if (isServe) {
   test('should hmr', async () => {
     editFile('src/demo.mdx', (code) => code.replace('Vite + MDX', 'Updated'))
@@ -20,4 +26,18 @@ if (isServe) {
     )
     await untilUpdated(() => page.textContent('h1'), 'Updated')
   })
+
+  test('should hmr with .md extension', async () => {
+    await untilBrowserLogAfter(
+      () =>
+        editFile('src/demo2.md', (code) =>
+          code.replace('`.md` extension works.', '`.md` extension hmr works.'),
+        ),
+      '[vite] hot updated: /src/demo2.md',
+    )
+    await untilUpdated(
+      () => page.getByText('.md extension hmr works.').textContent(),
+      '.md extension hmr works. This is bold text.',
+    )
+  })
 }

playground/mdx/src/demo2.md

@@ -0,0 +1,3 @@
+## test md extension
+
+`.md` extension works. This is **bold text**.

playground/mdx/src/main.tsx

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

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

@@ -4,3 +4,8 @@ declare module '*.mdx' {
   import { JSX } from 'react'
   export default () => JSX.Element
 }
+
+declare module '*.md' {
+  import { JSX } from 'react'
+  export default () => JSX.Element
+}

playground/mdx/vite.config.ts

@@ -6,6 +6,6 @@ import mdx from '@mdx-js/rollup'
 export default defineConfig({
   plugins: [
     { enforce: 'pre', ...mdx() },
-    react({ include: /\.(mdx|ts|tsx)$/ }),
+    react({ include: /\.(mdx|md|ts|tsx)$/ }),
   ],
 })