test(rsc): add hydration mismatch example

Author: hi-ogawa

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;
 }