.github/renovate.json5

@@ -18,5 +18,7 @@
     // breaking changes
     "source-map", // `source-map:v0.7.0+` needs more investigation
     "kill-port", // `kill-port:^2.0.0 has perf issues (#8392)
+
+    "prettier", // waiting for stable choice on ternaries
   ],
 }

package.json

@@ -31,23 +31,22 @@
     "ci-publish": "tsx scripts/publishCI.ts"
   },
   "devDependencies": {
-    "@types/fs-extra": "^11.0.3",
-    "@types/node": "^18.18.7",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "@vitejs/release-scripts": "^1.3.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-define-config": "^1.24.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-regexp": "^2.1.1",
     "fs-extra": "^11.1.1",
-    "lint-staged": "^15.0.2",
+    "lint-staged": "^15.1.0",
     "npm-run-all": "^4.1.5",
     "picocolors": "^1.0.0",
     "playwright-chromium": "^1.39.0",
     "prettier": "^3.0.3",
-    "rollup": "^3.29.4",
     "simple-git-hooks": "^2.9.0",
     "tsx": "^3.14.0",
     "typescript": "^5.2.2",

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.2.0 (2023-11-16)
+
+### Update peer dependency range to target Vite 5
+
+There were no breaking change that impacted this plugin, so any combination of React plugins and Vite core version will work.
+
+### Align jsx runtime for optimized dependencies
+
+This will only affect people using internal libraries that contains untranspiled JSX. This change aligns the optimizer with the source code and avoid issues when the published source don't have `React` in the scope.
+
+Reminder: While being partially supported in Vite, publishing TS & JSX outside of internal libraries is highly discouraged.
+
 ## 4.1.1 (2023-11-02)
 
 - Enable retainLines to get correct line numbers for jsxDev (fix [#235](https://github.com/vitejs/vite-plugin-react/issues/235))

packages/plugin-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -38,13 +38,13 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/plugin-transform-react-jsx-self": "^7.22.5",
-    "@babel/plugin-transform-react-jsx-source": "^7.22.5",
-    "@types/babel__core": "^7.20.3",
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+    "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+    "@types/babel__core": "^7.20.4",
     "react-refresh": "^0.14.0"
   },
   "peerDependencies": {
-    "vite": "^4.2.0"
+    "vite": "^4.2.0 || ^5.0.0"
   }
 }

packages/plugin-react/src/index.ts

@@ -113,7 +113,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   // - import * as React from 'react';
   // - import React from 'react';
   // - import React, {useEffect} from 'react';
-  const importReactRE = /(?:^|\s)import\s+(?:\*\s+as\s+)?React(?:,|\s+)/
+  const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/
 
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
@@ -131,6 +131,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             jsx: 'automatic',
             jsxImportSource: opts.jsxImportSource,
           },
+          optimizeDeps: { esbuildOptions: { jsx: 'automatic' } },
         }
       }
     },

playground/mdx/package.json

@@ -12,9 +12,9 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@mdx-js/rollup": "^2.3.0",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
+    "@mdx-js/rollup": "^3.0.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react": "workspace:*"
   }
 }

playground/react-emotion/package.json

@@ -16,7 +16,7 @@
     "react-switch": "^7.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-pipeline-operator": "^7.22.15",
+    "@babel/plugin-proposal-pipeline-operator": "^7.23.3",
     "@emotion/babel-plugin": "^11.11.0",
     "@vitejs/plugin-react": "workspace:*"
   },

playground/ssr-react/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "workspace:*",

playground/vitestSetup.ts

@@ -8,6 +8,7 @@ import type {
   Logger,
   PluginOption,
   ResolvedConfig,
+  Rollup,
   UserConfig,
   ViteDevServer,
 } from 'vite'
@@ -19,7 +20,6 @@ import {
   preview,
 } from 'vite'
 import type { Browser, Page } from 'playwright-chromium'
-import type { RollupError, RollupWatcher, RollupWatcherEvent } from 'rollup'
 import type { File } from 'vitest'
 import { beforeAll } from 'vitest'
 
@@ -72,7 +72,7 @@ export let resolvedConfig: ResolvedConfig = undefined!
 export let page: Page = undefined!
 export let browser: Browser = undefined!
 export let viteTestUrl: string = ''
-export let watcher: RollupWatcher | undefined = undefined
+export let watcher: Rollup.RollupWatcher | undefined = undefined
 
 declare module 'vite' {
   interface InlineConfig {
@@ -269,7 +269,7 @@ export async function startDefaultServe(): Promise<void> {
     const isWatch = !!resolvedConfig!.build.watch
     // in build watch,call startStaticServer after the build is complete
     if (isWatch) {
-      watcher = rollupOutput as RollupWatcher
+      watcher = rollupOutput as Rollup.RollupWatcher
       await notifyRebuildComplete(watcher)
     }
     // @ts-ignore
@@ -290,10 +290,10 @@ export async function startDefaultServe(): Promise<void> {
  * Send the rebuild complete message in build watch
  */
 export async function notifyRebuildComplete(
-  watcher: RollupWatcher,
-): Promise<RollupWatcher> {
+  watcher: Rollup.RollupWatcher,
+): Promise<Rollup.RollupWatcher> {
   let resolveFn: undefined | (() => void)
-  const callback = (event: RollupWatcherEvent): void => {
+  const callback = (event: Rollup.RollupWatcherEvent): void => {
     if (event.code === 'END') {
       resolveFn?.()
     }
@@ -306,7 +306,7 @@ export async function notifyRebuildComplete(
 }
 
 function createInMemoryLogger(logs: string[]): Logger {
-  const loggedErrors = new WeakSet<Error | RollupError>()
+  const loggedErrors = new WeakSet<Error | Rollup.RollupError>()
   const warnedMessages = new Set<string>()
 
   const logger: Logger = {