Skip to content

Commit caa9b53

Browse files
authored
fix: fix fast-refresh for files that are transformed into jsx (#188)
1 parent f8bfc8d commit caa9b53

File tree

7 files changed

+35
-5
lines changed

7 files changed

+35
-5
lines changed

CONTRIBUTING.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ To use breakpoints and explore code execution, you can use the ["Run and Debug"]
117117

118118
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:
119119

120-
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.
120+
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.
121121

122-
2. Run the tests with the `debug-serve` script command, which will enable remote debugging: `pnpm run debug-serve react-sourcemap`.
122+
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.
123123

124124
3. Wait for inspector devtools to open in your browser and the debugger to attach.
125125

packages/plugin-react/src/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
173173
!ssr &&
174174
(isJSX ||
175175
(opts.jsxRuntime === 'classic'
176-
? code.includes(devRuntime)
177-
: importReactRE.test(code)))
176+
? importReactRE.test(code)
177+
: code.includes(devRuntime)))
178178
if (useFastRefresh) {
179179
plugins.push([
180180
await loadPlugin('react-refresh/babel'),

playground/mdx/__tests__/mdx.spec.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ test('should render', async () => {
1111
expect(await page.textContent('h1')).toMatch('Vite + MDX')
1212
})
1313

14+
test('.md extension should work', async () => {
15+
expect(await page.getByText('.md extension works.').textContent()).toEqual(
16+
'.md extension works. This is bold text.',
17+
)
18+
})
19+
1420
if (isServe) {
1521
test('should hmr', async () => {
1622
editFile('src/demo.mdx', (code) => code.replace('Vite + MDX', 'Updated'))
@@ -20,4 +26,18 @@ if (isServe) {
2026
)
2127
await untilUpdated(() => page.textContent('h1'), 'Updated')
2228
})
29+
30+
test('should hmr with .md extension', async () => {
31+
await untilBrowserLogAfter(
32+
() =>
33+
editFile('src/demo2.md', (code) =>
34+
code.replace('`.md` extension works.', '`.md` extension hmr works.'),
35+
),
36+
'[vite] hot updated: /src/demo2.md',
37+
)
38+
await untilUpdated(
39+
() => page.getByText('.md extension hmr works.').textContent(),
40+
'.md extension hmr works. This is bold text.',
41+
)
42+
})
2343
}

playground/mdx/src/demo2.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## test md extension
2+
3+
`.md` extension works. This is **bold text**.

playground/mdx/src/main.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom/client'
33
import Demo from './demo.mdx'
4+
import Demo2 from './demo2.md'
45

56
ReactDOM.createRoot(document.getElementById('root')!).render(
67
<React.StrictMode>
78
<Demo />
9+
<Demo2 />
810
</React.StrictMode>,
911
)

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,8 @@ declare module '*.mdx' {
44
import { JSX } from 'react'
55
export default () => JSX.Element
66
}
7+
8+
declare module '*.md' {
9+
import { JSX } from 'react'
10+
export default () => JSX.Element
11+
}

playground/mdx/vite.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ import mdx from '@mdx-js/rollup'
66
export default defineConfig({
77
plugins: [
88
{ enforce: 'pre', ...mdx() },
9-
react({ include: /\.(mdx|ts|tsx)$/ }),
9+
react({ include: /\.(mdx|md|ts|tsx)$/ }),
1010
],
1111
})

0 commit comments

Comments
 (0)