vite-plugin-react/packages/plugin-rsc/examples/basic/src/routes/root.tsx at c9ec294a927f9ab971147a6767710db675d01a7a · vitejs/vite-plugin-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react'
import {
  TestServerActionBindAction,
  TestServerActionBindClient,
  TestServerActionBindReset,
  TestServerActionBindSimple,
} from './action-bind/server'
import { TestServerActionError } from './action-error/server'
import {
  TestActionFromClient,
  TestUseActionState,
} from './action-from-client/client'
import { TestActionStateServer } from './action-state/server'
import { ServerCounter } from './action/server'
import { ClientCounter, Hydrated } from './client'
import { TestClientInServer } from './deps/client-in-server/server'
import { TestServerInClient } from './deps/server-in-client/client'
import { TestServerInServer } from './deps/server-in-server/server'
import { TestHmrClientDep } from './hmr-client-dep/client'
import { TestModuleInvalidationServer } from './module-invalidation/server'
import { TestPayloadServer } from './payload/server'
import { TestSerializationServer } from './serialization/server'
import { TestCssClientNoSsr } from './style-client-no-ssr/server'
import { TestStyleClient } from './style-client/client'
import { TestStyleServer } from './style-server/server'
import { TestTailwindClient } from './tailwind/client'
import { TestTailwindServer } from './tailwind/server'
import { TestTemporaryReference } from './temporary-reference/client'
import { TestUseCache } from './use-cache/server'
import { TestReactCache } from './react-cache/server'
import { TestHydrationMismatch } from './hydration-mismatch/server'
import { TestBrowserOnly } from './browser-only/client'
import { TestTransitiveCjsClient } from './deps/transitive-cjs/client'
import TestDepCssInServer from '@vitejs/test-dep-css-in-server/server'
import { TestHmrSharedServer } from './hmr-shared/server'
import { TestHmrSharedClient } from './hmr-shared/client'
import { TestHmrSharedAtomic } from './hmr-shared/atomic/server'
import { TestCssQueries } from './css-queries/server'

export function Root(props: { url: URL }) {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <title>vite-rsc</title>
        {import.meta.viteRsc.loadCss('/src/routes/root.tsx')}
      </head>
      <body className="flex flex-col gap-2 items-start p-2">
        <div>
          <input placeholder="test-client-state" />
          <Hydrated />
        </div>
        <ClientCounter />
        <ServerCounter />
        <TestStyleClient />
        <TestStyleServer />
        <TestCssClientNoSsr url={props.url} />
        <TestTailwindClient />
        <TestTailwindServer />
        <TestDepCssInServer />
        <TestHydrationMismatch url={props.url} />
        <TestHmrClientDep />
        <TestHmrSharedServer />
        <TestHmrSharedClient />
        <TestHmrSharedAtomic />
        <TestTemporaryReference />
        <TestServerActionError />
        <TestReplayConsoleLogs url={props.url} />
        <TestSuspense url={props.url} />
        <TestActionFromClient />
        <TestUseActionState />
        <TestPayloadServer url={props.url} />
        <TestServerActionBindReset />
        <TestServerActionBindSimple />
        <TestServerActionBindClient />
        <TestServerActionBindAction />
        <TestSerializationServer />
        <TestClientInServer />
        <TestServerInServer />
        <TestServerInClient />
        <TestTransitiveCjsClient />
        <TestActionStateServer />
        <TestModuleInvalidationServer />
        <TestBrowserOnly />
        <TestUseCache />
        <TestReactCache url={props.url} />
        <TestCssQueries />
      </body>
    </html>
  )
}

function TestReplayConsoleLogs(props: { url: URL }) {
  if (props.url.search.includes('test-replay-console-logs')) {
    console.log('[test-replay-console-logs]')
  }
  return <a href="?test-replay-console-logs">test-replayConsoleLogs</a>
}

function TestSuspense(props: { url: URL }) {
  if (props.url.search.includes('test-suspense')) {
    const ms = Number(props.url.searchParams.get('test-suspense')) || 1000
    async function Inner() {
      await new Promise((resolve) => setTimeout(resolve, ms))
      return <div>suspense-resolved</div>
    }
    return (
      <div data-testid="suspense">
        <React.Suspense fallback={<div>suspense-fallback</div>}>
          <Inner />
        </React.Suspense>
      </div>
    )
  }
  return <a href="?test-suspense=1000">test-suspense</a>
}