diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index 5ec64ae..810dcf8 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -1,4 +1,4 @@ -import { createFilter } from 'rolldown-vite' +import { createFilter, transformWithOxc } from 'rolldown-vite' import type { BuildOptions, Plugin, @@ -32,6 +32,7 @@ export interface Options { const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/ const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/ const defaultIncludeRE = /\.[tj]sx?$/ +const tsRE = /\.tsx?$/ export default function viteReact(opts: Options = {}): PluginOption[] { // Provide default values for Rollup compat. @@ -41,6 +42,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] { const jsxImportRuntime = `${jsxImportSource}/jsx-runtime` const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime` let skipFastRefresh = false + let isProduction = true // Support patterns like: // - import * as React from 'react'; @@ -50,24 +52,32 @@ export default function viteReact(opts: Options = {}): PluginOption[] { const viteBabel: Plugin = { name: 'vite:react', - config(config, env) { - const runtime = opts.jsxRuntime ?? 'automatic' - return { - oxc: { - jsx: { - runtime, - importSource: runtime === 'automatic' ? jsxImportSource : undefined, - refresh: env.command === 'serve', - development: env.command === 'serve', + config() { + if (opts.jsxRuntime === 'classic') { + return { + oxc: { + jsx: { + runtime: 'classic', + }, + }, + } + } else { + return { + oxc: { + jsx: { + runtime: 'automatic', + importSource: opts.jsxImportSource, + }, }, - }, - // optimizeDeps: { esbuildOptions: { jsx: 'automatic' } }, + // optimizeDeps: { esbuildOptions: { jsx: 'automatic' } }, + } } }, configResolved(config) { devBase = config.base + isProduction = config.isProduction skipFastRefresh = - config.isProduction || + isProduction || config.command === 'build' || config.server.hmr === false }, @@ -90,12 +100,24 @@ export default function viteReact(opts: Options = {}): PluginOption[] { code.includes(jsxImportRuntime))) if (useFastRefresh) { + const result = await transformWithOxc(this, code, id, { + jsx: { + runtime: opts.jsxRuntime, + importSource: + opts.jsxRuntime === 'automatic' ? jsxImportSource : undefined, + refresh: useFastRefresh, + development: + opts.jsxRuntime === 'classic' && isJSX && !isProduction, + }, + lang: !tsRE.test(filepath) ? 'jsx' : undefined, + }) + code = result.code if (refreshContentRE.test(code)) { code = addRefreshWrapper(code, id) } else if (reactCompRE.test(code)) { code = addClassComponentRefreshWrapper(code, id) } - return { code } + return { code, map: result.map } } }, } diff --git a/playground/class-components/vite.config.ts b/playground/class-components/vite.config.ts index 6799225..b4f6e63 100644 --- a/playground/class-components/vite.config.ts +++ b/playground/class-components/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'rolldown-vite' -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' export default defineConfig({ server: { port: 8908 /* Should be unique */ }, diff --git a/playground/compiler-react-18/vite.config.ts b/playground/compiler-react-18/vite.config.ts index b36e831..f2202a7 100644 --- a/playground/compiler-react-18/vite.config.ts +++ b/playground/compiler-react-18/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'rolldown-vite' -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' // https://gist.github.com/poteto/37c076bf112a07ba39d0e5f0645fec43 diff --git a/playground/compiler/vite.config.ts b/playground/compiler/vite.config.ts index b152f49..03ab947 100644 --- a/playground/compiler/vite.config.ts +++ b/playground/compiler/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'rolldown-vite' -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' // https://vitejs.dev/config/ export default defineConfig(({ command }) => { diff --git a/playground/mdx/vite.config.ts b/playground/mdx/vite.config.ts index d35b9e1..9f37c90 100644 --- a/playground/mdx/vite.config.ts +++ b/playground/mdx/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'rolldown-vite' -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' import mdx from '@mdx-js/rollup' // https://vitejs.dev/config/ diff --git a/playground/react-classic/vite.config.ts b/playground/react-classic/vite.config.ts index 3c125bd..8c0a13b 100644 --- a/playground/react-classic/vite.config.ts +++ b/playground/react-classic/vite.config.ts @@ -1,4 +1,4 @@ -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' import type { UserConfig } from 'rolldown-vite' const config: UserConfig = { diff --git a/playground/react-emotion/vite.config.ts b/playground/react-emotion/vite.config.ts index d8dc12a..0b45ce4 100644 --- a/playground/react-emotion/vite.config.ts +++ b/playground/react-emotion/vite.config.ts @@ -1,4 +1,4 @@ -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' import { defineConfig } from 'rolldown-vite' export default defineConfig({ diff --git a/playground/react-env/vite.config.ts b/playground/react-env/vite.config.ts index 0f74572..d23e98c 100644 --- a/playground/react-env/vite.config.ts +++ b/playground/react-env/vite.config.ts @@ -1,4 +1,4 @@ -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' import type { UserConfig } from 'rolldown-vite' // Overriding the NODE_ENV set by vitest diff --git a/playground/react-sourcemap/vite.config.ts b/playground/react-sourcemap/vite.config.ts index fd84568..1ece275 100644 --- a/playground/react-sourcemap/vite.config.ts +++ b/playground/react-sourcemap/vite.config.ts @@ -1,4 +1,4 @@ -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' import type { UserConfig } from 'rolldown-vite' const config: UserConfig = { diff --git a/playground/react/vite.config.ts b/playground/react/vite.config.ts index f824873..0c9ff0c 100644 --- a/playground/react/vite.config.ts +++ b/playground/react/vite.config.ts @@ -1,4 +1,4 @@ -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' import type { UserConfig } from 'rolldown-vite' const config: UserConfig = { diff --git a/playground/ssr-react/vite.config.js b/playground/ssr-react/vite.config.js index 7d57761..31f1775 100644 --- a/playground/ssr-react/vite.config.js +++ b/playground/ssr-react/vite.config.js @@ -1,5 +1,5 @@ import { defineConfig } from 'rolldown-vite' -import react from '@vitejs/plugin-react' +import react from 'rolldown-vite-plugin-react' export default defineConfig({ server: { port: 8907 /* Should be unique */ }, diff --git a/playground/vitest.config.e2e.ts b/playground/vitest.config.e2e.ts index 8c333de..a96579d 100644 --- a/playground/vitest.config.e2e.ts +++ b/playground/vitest.config.e2e.ts @@ -14,8 +14,6 @@ export default defineConfig({ include: ['./playground/**/*.spec.[tj]s'], exclude: [ './playground/react-emotion/**/*.spec.[tj]s', // the remotion need to transformer - './playground/mdx/**/*.spec.[tj]s', // need to find a way to let rolldown-vite internal oxc transformer tread mdx as jsx - './playground/ssr-react/**/*.spec.[tj]s', // need to find a way to disable the refresh transformer at ssr ], setupFiles: ['./playground/vitestSetup.ts'], globalSetup: ['./playground/vitestGlobalSetup.ts'],