Move isCompoundComponent to its own function

Author: ArnaudBarre

packages/common/refresh-runtime.js

@@ -534,16 +534,6 @@ function isLikelyComponentType(type) {
             // Definitely React components.
             return true
           default:
-            // Check if this is a compound component (object with all properties being React components)
-            if (isPlainObject(type)) {
-              const keys = Object.keys(type)
-              if (
-                keys.length > 0 &&
-                keys.every((key) => isLikelyComponentType(type[key]))
-              ) {
-                return true
-              }
-            }
             return false
         }
       }
@@ -555,6 +545,15 @@ function isLikelyComponentType(type) {
   }
 }
 
+function isCompoundComponent(type) {
+  if (!isPlainObject(type)) return false
+  const keys = Object.keys(type)
+  for (const key of keys) {
+    if (!isLikelyComponentType(type[key])) return false
+  }
+  return true
+}
+
 function isPlainObject(obj) {
   return (
     Object.prototype.toString.call(obj) === '[object Object]' &&
@@ -582,23 +581,12 @@ 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)
-
-      // If it's a compound component (plain object with component properties),
-      // also register the individual components
-      if (
-        typeof exportValue === 'object' &&
-        exportValue != null &&
-        isPlainObject(exportValue) &&
-        Object.keys(exportValue).every((subKey) =>
-          isLikelyComponentType(exportValue[subKey]),
+    } else if (isCompoundComponent(exportValue)) {
+      for (const subKey in exportValue) {
+        register(
+          exportValue[subKey],
+          filename + ' export ' + key + '$' + subKey,
         )
-      ) {
-        for (const subKey in exportValue) {
-          register(
-            exportValue[subKey],
-            filename + ' export ' + key + '$' + subKey,
-          )
-        }
       }
     }
   }
@@ -653,6 +641,7 @@ export function validateRefreshBoundaryAndEnqueueUpdate(
     (key, value) => {
       hasExports = true
       if (isLikelyComponentType(value)) return true
+      if (isCompoundComponent(value)) return true
       return prevExports[key] === nextExports[key]
     },
   )

playground/compound-components/__tests__/compound-components.spec.ts

@@ -1,23 +1,27 @@
 import { expect, test } from 'vitest'
-import { editFile, page, untilBrowserLogAfter } from '~utils'
+import { editFile, isServe, page, untilBrowserLogAfter } from '~utils'
 
 test('should render compound components', async () => {
   expect(await page.textContent('h1')).toMatch('Compound Components HMR Test')
   expect(await page.textContent('h3')).toMatch('Accordion Root')
 })
 
-test('compound components should use HMR instead of full reload', async () => {
-  const logs = await untilBrowserLogAfter(() => {
-    editFile('src/Accordion.tsx', (code) =>
-      code.replace('Accordion Root', 'Accordion Root Updated'),
+if (isServe) {
+  test('compound components should use HMR instead of full reload', async () => {
+    const logs = await untilBrowserLogAfter(
+      () =>
+        editFile('src/Accordion.tsx', (code) =>
+          code.replace('Accordion Root', 'Accordion Root Updated'),
+        ),
+      /\[vite\]/,
     )
-  }, /\[vite\]/)
 
-  expect(logs).toContain('[vite] hot updated: /src/Accordion.tsx')
-  expect(logs).not.toContain('[vite] invalidate')
+    expect(logs).toContain('[vite] hot updated: /src/Accordion.tsx')
+    expect(logs).not.toContain('[vite] invalidate')
 
-  // revert changes
-  editFile('src/Accordion.tsx', (code) =>
-    code.replace('Accordion Root Updated', 'Accordion Root'),
-  )
-})
+    // revert changes
+    editFile('src/Accordion.tsx', (code) =>
+      code.replace('Accordion Root Updated', 'Accordion Root'),
+    )
+  })
+}

playground/compound-components/package.json

@@ -9,14 +9,14 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "workspace:*",
-    "typescript": "^5.5.3",
-    "vite": "^6.0.5"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4"
   }
 }

playground/compound-components/tsconfig.json

@@ -21,5 +21,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", "vite.config.ts"]
 }