Merge remote-tracking branch 'origin/docs/update-react-router-rsc-references' into docs/update-react-router-rsc-references

Author: hi-ogawa

packages/common/refresh-runtime.js

@@ -545,6 +545,21 @@ function isLikelyComponentType(type) {
   }
 }
 
+function isCompoundComponent(type) {
+  if (!isPlainObject(type)) return false
+  for (const key in type) {
+    if (!isLikelyComponentType(type[key])) return false
+  }
+  return true
+}
+
+function isPlainObject(obj) {
+  return (
+    Object.prototype.toString.call(obj) === '[object Object]' &&
+    (obj.constructor === Object || obj.constructor === undefined)
+  )
+}
+
 /**
  * Plugin utils
  */
@@ -565,6 +580,13 @@ export function registerExportsForReactRefresh(filename, moduleExports) {
       // The register function has an identity check to not register twice the same component,
       // so this is safe to not used the same key here.
       register(exportValue, filename + ' export ' + key)
+    } else if (isCompoundComponent(exportValue)) {
+      for (const subKey in exportValue) {
+        register(
+          exportValue[subKey],
+          filename + ' export ' + key + '-' + subKey,
+        )
+      }
     }
   }
 }
@@ -618,6 +640,7 @@ export function validateRefreshBoundaryAndEnqueueUpdate(
     (key, value) => {
       hasExports = true
       if (isLikelyComponentType(value)) return true
+      if (isCompoundComponent(value)) return true
       return prevExports[key] === nextExports[key]
     },
   )

packages/plugin-react-oxc/CHANGELOG.md

@@ -2,7 +2,28 @@
 
 ## Unreleased
 
-### Return `Plugin[]` instead of `PluginOption[]`
+## 0.3.0 (2025-07-18)
+
+### Add HMR support for compound components ([#518](https://github.com/vitejs/vite-plugin-react/pull/518))
+
+HMR now works for compound components like this:
+
+```tsx
+const Root = () => <div>Accordion Root</div>
+const Item = () => <div>Accordion Item</div>
+
+export const Accordion = { Root, Item }
+```
+
+### Return `Plugin[]` instead of `PluginOption[]` ([#537](https://github.com/vitejs/vite-plugin-react/pull/537))
+
+The return type has changed from `react(): PluginOption[]` to more specialized type `react(): Plugin[]`. This allows for type-safe manipulation of plugins, for example:
+
+```tsx
+// previously this causes type errors
+react()
+  .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' }))
+```
 
 ## 0.2.3 (2025-06-16)
 

packages/plugin-react-oxc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react-oxc",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [

packages/plugin-react-swc/CHANGELOG.md

@@ -2,7 +2,28 @@
 
 ## Unreleased
 
-### Return `Plugin[]` instead of `PluginOption[]`
+## 3.11.0 (2025-07-18)
+
+### Add HMR support for compound components ([#518](https://github.com/vitejs/vite-plugin-react/pull/518))
+
+HMR now works for compound components like this:
+
+```tsx
+const Root = () => <div>Accordion Root</div>
+const Item = () => <div>Accordion Item</div>
+
+export const Accordion = { Root, Item }
+```
+
+### Return `Plugin[]` instead of `PluginOption[]` ([#537](https://github.com/vitejs/vite-plugin-react/pull/537))
+
+The return type has changed from `react(): PluginOption[]` to more specialized type `react(): Plugin[]`. This allows for type-safe manipulation of plugins, for example:
+
+```tsx
+// previously this causes type errors
+react()
+  .map(p => ({ ...p, applyToEnvironment: e => e.name === 'client' }))
+```
 
 ## 3.10.2 (2025-06-10)
 

packages/plugin-react-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react-swc",
-  "version": "3.10.2",
+  "version": "3.11.0",
   "license": "MIT",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "description": "Speed up your Vite dev server with SWC",

packages/plugin-react/CHANGELOG.md

@@ -2,7 +2,20 @@
 
 ## Unreleased
 
-### Return `Plugin[]` instead of `PluginOption[]`
+## 4.7.0 (2025-07-18)
+
+### Add HMR support for compound components ([#518](https://github.com/vitejs/vite-plugin-react/pull/518))
+
+HMR now works for compound components like this:
+
+```tsx
+const Root = () => <div>Accordion Root</div>
+const Item = () => <div>Accordion Item</div>
+
+export const Accordion = { Root, Item }
+```
+
+### Return `Plugin[]` instead of `PluginOption[]` ([#537](https://github.com/vitejs/vite-plugin-react/pull/537))
 
 The return type has changed from `react(): PluginOption[]` to more specialized type `react(): Plugin[]`. This allows for type-safe manipulation of plugins, for example:
 

packages/plugin-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "The default Vite plugin for React projects",

packages/plugin-rsc/README.md

@@ -419,7 +419,10 @@ export default defineConfig({
 })
 ```
 
-## Higher level API
+## High level API
+
+> [!NOTE]
+> High level API is deprecated. Please write on your own `@vitejs/plugin-rsc/{rsc,ssr,browser}` integration.
 
 This is a wrapper of `react-server-dom` API and helper API to setup a minimal RSC app without writing own framework code like [`./examples/starter/src/framework`](./examples/starter/src/framework/). See [`./examples/basic`](./examples/basic/) for how this API is used.
 

packages/plugin-rsc/src/browser.ts

@@ -10,7 +10,9 @@ function initialize(): void {
     load: async (id) => {
       if (!import.meta.env.__vite_rsc_build__) {
         // @ts-ignore
-        return __vite_rsc_raw_import__(import.meta.env.BASE_URL + id.slice(1))
+        return __vite_rsc_raw_import__(
+          withTrailingSlash(import.meta.env.BASE_URL) + id.slice(1),
+        )
       } else {
         const import_ = clientReferences.default[id]
         if (!import_) {
@@ -21,3 +23,12 @@ function initialize(): void {
     },
   })
 }
+
+// Vite normalizes `config.base` to have trailing slash, but not for `import.meta.env.BASE_URL`.
+// https://github.com/vitejs/vite/blob/27a192fc95036dbdb6e615a4201b858eb64aa075/packages/vite/src/shared/utils.ts#L48-L53
+function withTrailingSlash(path: string): string {
+  if (path[path.length - 1] !== '/') {
+    return `${path}/`
+  }
+  return path
+}

packages/plugin-rsc/src/extra/browser.tsx

@@ -11,6 +11,9 @@ import {
 } from '../browser'
 import type { RscPayload } from './rsc'
 
+/**
+ * @deprecated Use `@vitejs/plugin-rsc/browser` API instead.
+ */
 export async function hydrate(): Promise<void> {
   const callServer: CallServerCallback = async (id, args) => {
     const url = new URL(window.location.href)
@@ -71,6 +74,9 @@ export async function hydrate(): Promise<void> {
   }
 }
 
+/**
+ * @deprecated Use `@vitejs/plugin-rsc/browser` API instead.
+ */
 export async function fetchRSC(
   request: string | URL | Request,
 ): Promise<RscPayload['root']> {