test(rsc): test useId

Author: hi-ogawa

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

@@ -44,6 +44,7 @@ import { TestTailwind } from './tailwind'
 import { TestHmrClientDep2 } from './hmr-client-dep2/client'
 import { TestHmrClientDep3 } from './hmr-client-dep3/server'
 import { TestChunk2 } from './chunk2/server'
+import { TestUseId } from './use-id/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -101,6 +102,7 @@ export function Root(props: { url: URL }) {
         <TestTreeShakeServer />
         <TestClientChunkServer />
         <TestChunk2 />
+        <TestUseId />
       </body>
     </html>
   )

packages/plugin-rsc/examples/basic/src/routes/use-id/client.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { useId } from 'react'
+
+export function TestUseIdClient() {
+  const id = useId()
+  return <>test-useId-client: {id}</>
+}

packages/plugin-rsc/examples/basic/src/routes/use-id/server.tsx

@@ -0,0 +1,17 @@
+import { useId } from 'react'
+import { TestUseIdClient } from './client'
+
+export function TestUseId() {
+  return (
+    <div data-testid="use-id">
+      <TestUseIdServer />
+      |
+      <TestUseIdClient />
+    </div>
+  )
+}
+
+function TestUseIdServer() {
+  const id = useId()
+  return <>test-useId-server: {id}</>
+}

packages/plugin-rsc/examples/starter/src/client.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 
 export function ClientCounter() {
   const [count, setCount] = React.useState(0)
+  console.log('[useId]', React.useId())
 
   return (
     <button onClick={() => setCount((count) => count + 1)}>