Merge branch 'main' into chore-rsc-nightly

Author: hi-ogawa

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

@@ -5,6 +5,7 @@ import { type Fixture, setupIsolatedFixture, useFixture } from './fixture'
 import { expectNoReload, testNoJs, waitForHydration } from './helper'
 
 // TODO: parallel?
+// TODO: all tests don't need to be tested in all variants?
 
 test.describe('dev-default', () => {
   const f = useFixture({ root: 'examples/basic', mode: 'dev' })
@@ -928,4 +929,27 @@ function defineTest(f: Fixture) {
       '(actionCount: 5, innerFnCount: 3)',
     )
   })
+
+  test('hydration mismatch', async ({ page }) => {
+    const errors: Error[] = []
+    page.on('pageerror', (error) => {
+      errors.push(error)
+    })
+    await page.goto(f.url('/?test-hydration-mismatch'))
+    await waitForHydration(page)
+    expect(errors).toMatchObject([
+      {
+        message: expect.stringContaining(
+          f.mode === 'dev'
+            ? `Hydration failed because the server rendered HTML didn't match the client.`
+            : `Minified React error #418`,
+        ),
+      },
+    ])
+
+    errors.length = 0
+    await page.goto(f.url())
+    await waitForHydration(page)
+    expect(errors).toEqual([])
+  })
 }

packages/plugin-rsc/examples/basic/src/routes/hydration-mismatch/client.tsx

@@ -0,0 +1,6 @@
+'use client'
+
+export function Mismatch() {
+  const value = typeof window !== 'undefined' ? 'browser' : 'ssr'
+  return <>[{value}]</>
+}

packages/plugin-rsc/examples/basic/src/routes/hydration-mismatch/server.tsx

@@ -0,0 +1,16 @@
+import { Mismatch } from './client'
+
+export function TestHydrationMismatch(props: { url: URL }) {
+  const show = props.url.searchParams.has('test-hydration-mismatch')
+  return (
+    <div>
+      <span>test-hydration-mismatch</span>{' '}
+      {show ? (
+        <a href="?">hide</a>
+      ) : (
+        <a href="?test-hydration-mismatch">show</a>
+      )}{' '}
+      {show && <Mismatch />}
+    </div>
+  )
+}

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

@@ -27,6 +27,7 @@ import { TestTailwindClient } from './tailwind/client'
 import { TestTailwindServer } from './tailwind/server'
 import { TestTemporaryReference } from './temporary-reference/client'
 import { TestUseCache } from './use-cache/server'
+import { TestHydrationMismatch } from './hydration-mismatch/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -47,6 +48,7 @@ export function Root(props: { url: URL }) {
         <TestCssClientNoSsr url={props.url} />
         <TestTailwindClient />
         <TestTailwindServer />
+        <TestHydrationMismatch url={props.url} />
         <TestHmrClientDep />
         <TestTemporaryReference />
         <TestServerActionError />

packages/plugin-rsc/examples/basic/src/styles.css

@@ -9,5 +9,5 @@ input {
 }
 
 a {
-  @apply text-gray-500 underline hover:text-gray-700;
+  @apply text-gray-500 underline hover:text-gray-700 cursor-pointer;
 }