From f27599b695e52cd735d824eaae2ccf1f893b6219 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= Date: Thu, 30 Mar 2023 01:10:30 +0200 Subject: [PATCH] chore: deprecate classic runtime --- packages/plugin-react/README.md | 13 +------------ packages/plugin-react/src/index.ts | 26 ++++++-------------------- 2 files changed, 7 insertions(+), 32 deletions(-) diff --git a/packages/plugin-react/README.md b/packages/plugin-react/README.md index 1a46c9a43..1bfe0ef25 100644 --- a/packages/plugin-react/README.md +++ b/packages/plugin-react/README.md @@ -3,8 +3,7 @@ The all-in-one Vite plugin for React projects. - enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development -- use the [automatic JSX runtime](https://github.com/alloc/vite-react-jsx#faq) -- avoid manual `import React` in `.jsx` and `.tsx` modules +- use the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) - dedupe the `react` and `react-dom` packages - use custom Babel plugins/presets @@ -43,16 +42,6 @@ react({ }) ``` -## Opting out of the automatic JSX runtime - -By default, the plugin uses the [automatic JSX runtime](https://github.com/alloc/vite-react-jsx#faq). However, if you encounter any issues, you may opt out using the `jsxRuntime` option. - -```js -react({ - jsxRuntime: 'classic', -}) -``` - ## Babel configuration The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each JSX/TSX file. diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index 09e54e90c..fd2e2ae80 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -21,7 +21,8 @@ export interface Options { */ fastRefresh?: boolean /** - * Set this to `"automatic"` to use [vite-react-jsx](https://github.com/alloc/vite-react-jsx). + * @deprecated All tools now support the automatic runtime, and it has been backported + * up to React 16. This allows to skip the React import and can produce smaller bundlers. * @default "automatic" */ jsxRuntime?: 'classic' | 'automatic' @@ -98,7 +99,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] { let isProduction = true let projectRoot = process.cwd() let skipFastRefresh = opts.fastRefresh === false - let skipReactImport = false + const skipReactImport = false let runPluginOverrides = ( options: ReactBabelOptions, context: ReactBabelHookContext, @@ -167,27 +168,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] { isProduction = config.isProduction skipFastRefresh ||= isProduction || config.command === 'build' - const jsxInject = config.esbuild && config.esbuild.jsxInject - if (jsxInject && importReactRE.test(jsxInject)) { - skipReactImport = true - config.logger.warn( - '[@vitejs/plugin-react] This plugin imports React for you automatically,' + - ' so you can stop using `esbuild.jsxInject` for that purpose.', + if (opts.jsxRuntime === 'classic') { + config.logger.warnOnce( + '[@vitejs/plugin-react] Support for classic runtime is deprecated.', ) } - config.plugins.forEach((plugin) => { - const hasConflict = - plugin.name === 'react-refresh' || - (plugin !== viteReactJsx && plugin.name === 'vite:react-jsx') - - if (hasConflict) - return config.logger.warn( - `[@vitejs/plugin-react] You should stop using "${plugin.name}" ` + - `since this plugin conflicts with it.`, - ) - }) - runPluginOverrides = (babelOptions, context) => { const hooks = config.plugins .map((plugin) => plugin.api?.reactBabel)