test(rsc): add hydration mismatch example

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -952,4 +952,17 @@ function defineTest(f: Fixture) {
     await waitForHydration(page)
     expect(errors).toEqual([])
   })
+
+  test('browser only', async ({ page, browser }) => {
+    await page.goto(f.url())
+    await expect(page.getByTestId('test-browser-only')).toHaveText(
+      'test-browser-only: true',
+    )
+
+    const pageNoJs = await browser.newPage({ javaScriptEnabled: false })
+    await pageNoJs.goto(f.url())
+    await expect(pageNoJs.getByTestId('test-browser-only')).toHaveText(
+      'test-browser-only: loading...',
+    )
+  })
 }

packages/plugin-rsc/examples/basic/src/routes/browser-only/browser-dep.tsx

@@ -0,0 +1,3 @@
+export default function BrowserDep() {
+  return <>{String(!!window)}</>
+}

packages/plugin-rsc/examples/basic/src/routes/browser-only/client.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import * as React from 'react'
+
+const BrowserDep = (
+  import.meta.env.SSR ? undefined : React.lazy(() => import('./browser-dep'))
+)!
+
+export function TestBrowserOnly() {
+  return (
+    <div data-testid="test-browser-only">
+      test-browser-only:{' '}
+      <BrowserOnly fallback={<>loading...</>}>
+        <BrowserDep />
+      </BrowserOnly>
+    </div>
+  )
+}
+
+function BrowserOnly(props: React.SuspenseProps) {
+  const hydrated = useHydrated()
+  if (!hydrated) {
+    return props.fallback
+  }
+  return <React.Suspense {...props} />
+}
+
+const noopStore = () => () => {}
+
+const useHydrated = () =>
+  React.useSyncExternalStore(
+    noopStore,
+    () => true,
+    () => false,
+  )
+
+/*
+If we were to implement this whole logic via `browserOnly` helper with transform:
+
+======= input ======
+
+const SomeDep = browserOnly(() => import('./some-dep'))
+
+======= output ======
+
+const __TmpLazy = import.meta.env.SSR ? undefined : React.lazy(() => import('./some-dep'}));
+
+const SomeDep = ({ browserOnlyFallback, ...props }) => {
+  const hydrated = useHydrated()
+  if (!hydrated) {
+    return browserOnlyFallback
+  }
+  return (
+    <React.Suspense fallback={browserOnlyFallback}>
+      <__TmpLazy {...props} />
+    </React.Suspense>
+  )
+}
+*/
+
+// declare function browserOnly<T>(fn: () => Promise<{ default: React.ComponentType<T> }>): React.ComponentType<T & { browserOnlyFallback?: React.ReactNode }>

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -28,6 +28,7 @@ import { TestTailwindServer } from './tailwind/server'
 import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
 import { TestHydrationMismatch } from './hydration-mismatch/server'
+import { TestBrowserOnly } from './browser-only/client'
 
 export function Root(props: { url: URL }) {
   return (
@@ -67,6 +68,7 @@ export function Root(props: { url: URL }) {
         <TestServerInClient />
         <TestActionStateServer />
         <TestModuleInvalidationServer />
+        <TestBrowserOnly />
         <TestUseCache />
       </body>
     </html>

packages/plugin-rsc/examples/basic/vite.config.ts

@@ -4,6 +4,7 @@ import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import { type Plugin, defineConfig, parseAstAsync } from 'vite'
 import inspect from 'vite-plugin-inspect'
+import path from 'node:path'
 
 // log unhandled rejection to debug e2e failures
 if (!(globalThis as any).__debugHandlerRegisterd) {
@@ -23,6 +24,7 @@ export default defineConfig({
     tailwindcss(),
     react(),
     vitePluginUseCache(),
+    vitePluginBrowserOnly(),
     rsc({
       entries: {
         client: './src/client.tsx',
@@ -96,6 +98,23 @@ export default defineConfig({
         }
       },
     },
+    {
+      name: 'test-browser-only',
+      writeBundle(_options, bundle) {
+        const moduleIds = Object.values(bundle).flatMap((c) =>
+          c.type === 'chunk' ? [...c.moduleIds] : [],
+        )
+        const browserId = path.resolve(
+          'src/routes/browser-only/browser-dep.tsx',
+        )
+        if (this.environment.name === 'client') {
+          assert(moduleIds.includes(browserId))
+        }
+        if (this.environment.name === 'ssr') {
+          assert(!moduleIds.includes(browserId))
+        }
+      },
+    },
     {
       name: 'cf-build',
       enforce: 'post',
@@ -176,3 +195,32 @@ function vitePluginUseCache(): Plugin[] {
     },
   ]
 }
+
+function vitePluginBrowserOnly(): Plugin[] {
+  return [
+    {
+      name: 'browser-only-component',
+      load(id, code) {
+        if (id.endsWith('?browser-only')) {
+          if (this.environment.name === 'rsc') return
+
+          id = id.slice(0, -'?browser-only'.length)
+          if (this.environment.name === 'ssr') {
+            code
+            // const Test = React.lazy(() => import('./test-browser-only?browser-only'))
+            return `\
+export default () => {
+  throw new Error('Browser-only component on SSR')
+};
+`
+          }
+          if (this.environment.name === 'client') {
+            return `\
+export { default } from ${JSON.stringify(id)}
+`
+          }
+        }
+      },
+    },
+  ]
+}