Skip to content

Commit 25fe88a

Browse files
authored
feat: add support for non-dev jsx runtime (#224)
1 parent a14ebf2 commit 25fe88a

File tree

4 files changed

+39
-3
lines changed

4 files changed

+39
-3
lines changed

packages/plugin-react/src/index.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,9 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
9898
// Provide default values for Rollup compat.
9999
let devBase = '/'
100100
const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude)
101-
const devRuntime = `${opts.jsxImportSource ?? 'react'}/jsx-dev-runtime`
101+
const jsxImportSource = opts.jsxImportSource ?? 'react'
102+
const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`
103+
const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`
102104
let isProduction = true
103105
let projectRoot = process.cwd()
104106
let skipFastRefresh = false
@@ -188,7 +190,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
188190
(isJSX ||
189191
(opts.jsxRuntime === 'classic'
190192
? importReactRE.test(code)
191-
: code.includes(devRuntime)))
193+
: code.includes(jsxImportDevRuntime) ||
194+
code.includes(jsxImportRuntime)))
192195
if (useFastRefresh) {
193196
plugins.push([
194197
await loadPlugin('react-refresh/babel'),
@@ -265,7 +268,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
265268
// We can't add `react-dom` because the dependency is `react-dom/client`
266269
// for React 18 while it's `react-dom` for React 17. We'd need to detect
267270
// what React version the user has installed.
268-
include: ['react', devRuntime],
271+
include: ['react', jsxImportDevRuntime, jsxImportRuntime],
269272
},
270273
resolve: {
271274
dedupe: ['react', 'react-dom'],

playground/react/App.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react'
22
import Button from 'jsx-entry'
33
import Dummy from './components/Dummy?qs-should-not-break-plugin-react'
44
import Parent from './hmr/parent'
5+
import { JsxImportRuntime } from './hmr/jsx-import-runtime'
56
import { CountProvider } from './context/CountProvider'
67
import { ContextButton } from './context/ContextButton'
78

@@ -37,6 +38,7 @@ function App() {
3738

3839
<Dummy />
3940
<Parent />
41+
<JsxImportRuntime />
4042
<Button>button</Button>
4143
</div>
4244
)

playground/react/__tests__/react.spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,4 +115,27 @@ if (!isBuild) {
115115
'context provider updated',
116116
)
117117
})
118+
119+
test('should hmr files with "react/jsx-runtime"', async () => {
120+
expect(await page.textContent('#state-button')).toMatch('count is: 0')
121+
await page.click('#state-button')
122+
expect(await page.textContent('#state-button')).toMatch('count is: 1')
123+
124+
await untilBrowserLogAfter(
125+
() =>
126+
editFile('hmr/jsx-import-runtime.js', (code) =>
127+
code.replace(
128+
'JSX import runtime works',
129+
'JSX import runtime updated',
130+
),
131+
),
132+
['[vite] hot updated: /hmr/jsx-import-runtime.js'],
133+
)
134+
await untilUpdated(
135+
() => page.textContent('#jsx-import-runtime'),
136+
'JSX import runtime updated',
137+
)
138+
139+
expect(await page.textContent('#state-button')).toMatch('count is: 1')
140+
})
118141
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as JsxRuntime from 'react/jsx-runtime'
2+
3+
export function JsxImportRuntime() {
4+
return JsxRuntime.jsx('p', {
5+
id: 'jsx-import-runtime',
6+
children: 'JSX import runtime works',
7+
})
8+
}

0 commit comments

Comments
 (0)