first commit

test/e2e/app-dir/rsc-basic/app/(group)/conventions/@named/client.js

@@ -0,0 +1,5 @@
+'use client'
+
+export function Foo() {
+  return <h2>it works</h2>
+}

test/e2e/app-dir/rsc-basic/app/(group)/conventions/@named/default.js

@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation'
+
+export default function Default() {
+  notFound()
+}

test/e2e/app-dir/rsc-basic/app/(group)/conventions/@named/page.js

@@ -0,0 +1,5 @@
+import { Foo } from './client'
+
+export default function Page() {
+  return <Foo />
+}

test/e2e/app-dir/rsc-basic/app/(group)/conventions/layout.js

@@ -0,0 +1,3 @@
+export default function Layout({ named }) {
+  return <div>{named}</div>
+}

test/e2e/app-dir/rsc-basic/app/app-react/client-react.js

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactDOMServer from 'react-dom/server.edge'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+export default function ClientReact() {
+  const markup = renderToStaticMarkup(
+    <div className="react-static-markup">{'React Static Markup'}</div>
+  )
+
+  return (
+    <div>
+      <p id="client-react">{'React.version=' + React.version}</p>
+      <p id="client-react-dom">{'ReactDOM.version=' + ReactDOM.version}</p>
+      <p id="client-react-dom-server">
+        {'ReactDOMServer.version=' + ReactDOMServer.version}
+      </p>
+      <p id="markup">{markup}</p>
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/app-react/page.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ClientReact from './client-react'
+
+export default function Page() {
+  return (
+    <div>
+      <p id="react">{'React.version=' + React.version}</p>
+      <p id="react-dom">{'ReactDOM.version=' + ReactDOM.version}</p>
+      <ClientReact />
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/async-client/client.js

@@ -0,0 +1,9 @@
+'use client'
+
+import { useState } from 'react'
+
+let name = await Promise.resolve('async')
+
+export default (props) => {
+  return `client ${useState(name)[0]}`
+}

test/e2e/app-dir/rsc-basic/app/async-client/edge/lazy/page.js

@@ -0,0 +1,3 @@
+export { default } from '../../lazy/page'
+
+export const runtime = 'edge'

test/e2e/app-dir/rsc-basic/app/async-client/edge/sync/page.js

@@ -0,0 +1,3 @@
+export { default } from '../../sync/page'
+
+export const runtime = 'edge'

test/e2e/app-dir/rsc-basic/app/async-client/lazy/page.js

@@ -0,0 +1,7 @@
+import { lazy } from 'react'
+
+const Client = lazy(() => import('../client'))
+
+export default function Page() {
+  return <Client />
+}

test/e2e/app-dir/rsc-basic/app/async-client/sync/page.js

@@ -0,0 +1,5 @@
+import Client from '../client'
+
+export default function Page() {
+  return <Client />
+}

test/e2e/app-dir/rsc-basic/app/css-modules/page.js

@@ -0,0 +1,10 @@
+// CSS modules can only be imported inside client components for now.
+import RedText from '../../components/red/index'
+
+export default function CSSM() {
+  return (
+    <RedText id="red-text">
+      <h1>This should be in red</h1>
+    </RedText>
+  )
+}

test/e2e/app-dir/rsc-basic/app/dynamic/_dynamic.js

@@ -0,0 +1,8 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Dynamic() {
+  const [data] = useState('dynamic data!')
+  return <h1>{data}</h1>
+}

test/e2e/app-dir/rsc-basic/app/dynamic/page.js

@@ -0,0 +1,5 @@
+export default async function Page() {
+  const dynamic = '_dynamic'
+  const { default: Component } = await import(`./${dynamic}.js`)
+  return <Component />
+}

test/e2e/app-dir/rsc-basic/app/edge/dynamic/[id]/page.js

@@ -0,0 +1,5 @@
+export default function page() {
+  return 'dynamic route [id] page'
+}
+
+export const runtime = 'edge'

test/e2e/app-dir/rsc-basic/app/edge/dynamic/page.js

@@ -0,0 +1,5 @@
+export default function page() {
+  return 'dynamic route index page'
+}
+
+export const runtime = 'edge'

test/e2e/app-dir/rsc-basic/app/escaping-rsc/page.js

@@ -0,0 +1,32 @@
+import { Suspense } from 'react'
+import Nav from '../../components/nav'
+
+let result
+let promise
+function Data() {
+  if (result) return result
+  if (!promise)
+    promise = new Promise((res) => {
+      setTimeout(() => {
+        result =
+          '</script><script>window.__manipulated_by_injection=true</script><script>'
+        res()
+      }, 500)
+    })
+  throw promise
+}
+
+export default function Page() {
+  return (
+    <div>
+      <div id="content">
+        <Suspense fallback="next_escaping_fallback">
+          <Data />
+        </Suspense>
+      </div>
+      <div>
+        <Nav />
+      </div>
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/global-styles-rsc/page.js

@@ -0,0 +1,7 @@
+export default function GlobalStyle() {
+  return (
+    <div>
+      <h1 id="red">This should be in red</h1>
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/layout.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function AppLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <title>RSC</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/rsc-basic/app/multi/page.js

@@ -0,0 +1,5 @@
+import Bar from '../../components/bar'
+
+export default function Multi() {
+  return <Bar />
+}

test/e2e/app-dir/rsc-basic/app/native-module/page.js

@@ -0,0 +1,14 @@
+import fs from 'fs'
+
+import Foo from '../../components/foo'
+
+export default function Page() {
+  return (
+    <>
+      <h1>fs: {typeof fs.readFile}</h1>
+      <Foo />
+    </>
+  )
+}
+
+export const runtime = 'nodejs'

test/e2e/app-dir/rsc-basic/app/next-api/image-legacy/page.js

@@ -0,0 +1,9 @@
+import NextImage from 'next/legacy/image'
+import src from '../../../public/test.jpg'
+
+// Keep arrow function to test rsc loaders
+const Page = () => {
+  return <NextImage id="myimg" src={src} />
+}
+
+export default Page

test/e2e/app-dir/rsc-basic/app/next-api/image-new/page.js

@@ -0,0 +1,9 @@
+import NextImage from 'next/image'
+import src from '../../../public/test.jpg'
+
+// Keep arrow function to test rsc loaders
+const Page = () => {
+  return <NextImage id="myimg" src={src} />
+}
+
+export default Page

test/e2e/app-dir/rsc-basic/app/next-api/link/page.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import Nav from '../../../components/nav'
+
+export default async function LinkPage({ searchParams }) {
+  const queryId = (await searchParams).id || '0'
+  const id = parseInt(queryId)
+  return (
+    <>
+      <h3 id="query">query:{id}</h3>
+      <div>
+        <Link href={`/next-api/link?id=${id + 1}`} id="next_id">
+          next id
+        </Link>
+      </div>
+      <Nav />
+    </>
+  )
+}

test/e2e/app-dir/rsc-basic/app/node/dynamic/[id]/page.js

@@ -0,0 +1,3 @@
+export default function page() {
+  return 'dynamic route [id] page'
+}

test/e2e/app-dir/rsc-basic/app/node/dynamic/page.js

@@ -0,0 +1,3 @@
+export default function page() {
+  return 'dynamic route index page'
+}

test/e2e/app-dir/rsc-basic/app/page.js

@@ -0,0 +1,19 @@
+import Nav from '../components/nav'
+import { headers } from 'next/headers'
+
+const envVar = process.env.ENV_VAR_TEST
+const headerKey = 'x-next-test-client'
+
+export default async function Index() {
+  const headersList = await headers()
+  const header = headersList.get(headerKey)
+
+  return (
+    <div>
+      <h1>{`component:index.server`}</h1>
+      <div id="env">{'env:' + envVar}</div>
+      <div id="header">{'header:' + header}</div>
+      <Nav />
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/partial-hydration/page.js

@@ -0,0 +1,27 @@
+import { Suspense } from 'react'
+import Counter from '../../components/partial-hydration-counter'
+import { createDataFetcher } from '../../lib/data'
+
+const Data = createDataFetcher('next_streaming_data', {
+  timeout: 1000,
+})
+
+export default function () {
+  return (
+    <>
+      {process.env.NEXT_RUNTIME === 'edge'
+        ? `Runtime: Node.js`
+        : 'Runtime: Edge/Browser'}
+      <br />
+      <div className="suspense">
+        <Suspense fallback="next_streaming_fallback">
+          <Data />
+        </Suspense>
+      </div>
+      <br />
+      <Counter />
+    </>
+  )
+}
+
+export const dynamic = 'force-dynamic'

test/e2e/app-dir/rsc-basic/app/reexport-named/client.js

@@ -0,0 +1,9 @@
+'use client'
+
+export function PageComponent() {
+  return (
+    <div>
+      <h1 id="client-title">Client Title</h1>
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/reexport-named/page.js

@@ -0,0 +1,3 @@
+import { PageComponent } from './client'
+
+export default PageComponent

test/e2e/app-dir/rsc-basic/app/reexport-namespace/client-index.js

@@ -0,0 +1 @@
+export * from './client'

test/e2e/app-dir/rsc-basic/app/reexport-namespace/client.js

@@ -0,0 +1,5 @@
+'use client'
+
+export function Foo() {
+  return <div id="foo">Foo</div>
+}

test/e2e/app-dir/rsc-basic/app/reexport-namespace/page.js

@@ -0,0 +1,5 @@
+import * as Client from './client-index'
+
+export default function Page() {
+  return <Client.Foo />
+}

test/e2e/app-dir/rsc-basic/app/return-null/component/component.js

@@ -0,0 +1,3 @@
+export default function Component() {
+  return null
+}

test/e2e/app-dir/rsc-basic/app/return-null/component/page.js

@@ -0,0 +1,5 @@
+import Component from './component'
+
+export default function Page() {
+  return <Component />
+}

test/e2e/app-dir/rsc-basic/app/return-null/layout.js

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div id="return-null-layout">{children}</div>
+}

test/e2e/app-dir/rsc-basic/app/return-null/layout/layout.js

@@ -0,0 +1,3 @@
+export default function Layout() {
+  return null
+}

test/e2e/app-dir/rsc-basic/app/return-null/layout/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div />
+}

test/e2e/app-dir/rsc-basic/app/return-null/page/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

test/e2e/app-dir/rsc-basic/app/return-undefined/component/component.js

@@ -0,0 +1 @@
+export default function Component() {}

test/e2e/app-dir/rsc-basic/app/return-undefined/component/page.js

@@ -0,0 +1,5 @@
+import Component from './component'
+
+export default function Page() {
+  return <Component />
+}

test/e2e/app-dir/rsc-basic/app/return-undefined/layout.js

@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div id="return-undefined-layout">{children}</div>
+}

test/e2e/app-dir/rsc-basic/app/return-undefined/layout/layout.js

@@ -0,0 +1 @@
+export default function Layout() {}

test/e2e/app-dir/rsc-basic/app/return-undefined/layout/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div />
+}

test/e2e/app-dir/rsc-basic/app/return-undefined/page/page.js

@@ -0,0 +1 @@
+export default function Page() {}

test/e2e/app-dir/rsc-basic/app/root/page.js

@@ -0,0 +1,10 @@
+import Nav from '../../components/nav'
+
+export default function page() {
+  return (
+    <div>
+      <h1>{`component:root.server`}</h1>
+      <Nav />
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/shared-context/server/page.js

@@ -0,0 +1,5 @@
+require('next/router')
+
+export default function Page() {
+  return <p>just work</p>
+}

test/e2e/app-dir/rsc-basic/app/shared/page.js

@@ -0,0 +1,29 @@
+import ClientFromDirect from '../../components/client'
+import ClientFromShared from '../../components/shared'
+import SharedFromClient from '../../components/shared-client'
+import Bar from '../../components/bar'
+
+export default function Page() {
+  // All three client components should be rendered correctly, but only
+  // shared component is a server component, and another is a client component.
+  // These two shared components should be created as two module instances.
+
+  // It's expected to have hydration mismatch here.
+  return (
+    <div id="main" suppressHydrationWarning>
+      {/* <Random /> */}
+      <br />
+      <ClientFromDirect />
+      <br />
+      <ClientFromShared />
+      <br />
+      <ClientFromShared />
+      <br />
+      <SharedFromClient />
+      <br />
+      <SharedFromClient />
+      <br />
+      <Bar />
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/streaming-rsc/page.js

@@ -0,0 +1,22 @@
+import { Suspense } from 'react'
+import { createDataFetcher } from '../../lib/data'
+import Nav from '../../components/nav'
+
+const Data = createDataFetcher('next_streaming_data', {
+  timeout: 500,
+})
+
+export default function Page() {
+  return (
+    <div>
+      <div id="content">
+        <Suspense fallback="next_streaming_fallback">
+          <Data />
+        </Suspense>
+      </div>
+      <div>
+        <Nav />
+      </div>
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/app/various-exports/page.js

@@ -0,0 +1,41 @@
+// shared named exports
+import { a, b, c, d, e } from '../../components/shared-exports'
+// client default, named exports
+import DefaultArrow, {
+  Named as ClientNamed,
+} from '../../components/client-exports'
+
+import { Cjs as CjsShared } from '../../components/cjs-server'
+import { Cjs as CjsClient } from '../../components/cjs-client'
+
+// client exports all
+import { One, Two, TwoAliased } from '../../components/export-all'
+
+export default function Page() {
+  return (
+    <div>
+      <div>
+        {a}
+        {b}
+        {c}
+        {d}
+        {e[0]}
+      </div>
+      <div>
+        <DefaultArrow />
+      </div>
+      <div>
+        <ClientNamed />
+      </div>
+      <div>
+        <CjsShared />
+      </div>
+      <div>
+        <CjsClient />
+      </div>
+      <div>
+        Export All: <One />, <Two />, <TwoAliased />
+      </div>
+    </div>
+  )
+}