first commit

test/e2e/app-dir/rsc-basic/components/bar-client.js

@@ -0,0 +1,5 @@
+'use client'
+
+export default function bar() {
+  return 'bar.client'
+}

test/e2e/app-dir/rsc-basic/components/bar.js

@@ -0,0 +1,10 @@
+import Foo from './foo'
+
+export default function Bar() {
+  return (
+    <div id="bar">
+      {`bar.server.js: `}
+      <Foo />
+    </div>
+  )
+}

test/e2e/app-dir/rsc-basic/components/cjs-client.js

@@ -0,0 +1,5 @@
+'use client'
+
+exports.Cjs = function Cjs() {
+  return 'cjs-client'
+}

test/e2e/app-dir/rsc-basic/components/cjs-server.js

@@ -0,0 +1,3 @@
+exports.Cjs = function Cjs() {
+  return 'cjs-shared'
+}

test/e2e/app-dir/rsc-basic/components/client-exports.js

@@ -0,0 +1,7 @@
+'use client'
+
+export function Named() {
+  return 'named.client'
+}
+
+export default () => 'default-export-arrow.client'

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

@@ -0,0 +1,9 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Client() {
+  // To ensure that this component is rendered as a client component, we use a
+  // state here.
+  return useState('client_component')[0]
+}

test/e2e/app-dir/rsc-basic/components/export-all/index.js

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

test/e2e/app-dir/rsc-basic/components/export-all/one.js

@@ -0,0 +1,6 @@
+export function One() {
+  return 'one'
+}
+
+export * from './two'
+export { Two as TwoAliased } from './two'

test/e2e/app-dir/rsc-basic/components/export-all/two.js

@@ -0,0 +1,3 @@
+export function Two() {
+  return 'two'
+}

test/e2e/app-dir/rsc-basic/components/foo.js

@@ -0,0 +1,5 @@
+'use client'
+
+export default function foo() {
+  return 'foo.client'
+}

test/e2e/app-dir/rsc-basic/components/nav.js

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default function Nav() {
+  return (
+    <>
+      <div>
+        <Link href={'/next-api/link'} id="goto-next-link">
+          next link
+        </Link>
+      </div>
+      <div>
+        <Link href={'/streaming-rsc'} id="goto-streaming-rsc">
+          streaming rsc
+        </Link>
+      </div>
+      <div>
+        <Link href={'/root'} id="goto-home">
+          home
+        </Link>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,22 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    // When this component is hydrated, there might be other parts still pending
+    // on streaming. So we test the interactivity of the document before it's
+    // fully loaded.
+    const counter = document.querySelector('button')
+    const suspense = document.querySelector('.suspense')
+    counter.click()
+    setTimeout(() => {
+      window.partial_hydration_suspense_result = suspense.textContent
+      window.partial_hydration_counter_result = counter.textContent
+    }, 0)
+  }, [])
+
+  return <button onClick={() => setCount(count + 1)}>count: {count}</button>
+}

test/e2e/app-dir/rsc-basic/components/red/index.js

@@ -0,0 +1,7 @@
+'use client'
+
+import styles from './style.module.css'
+
+export default function RedText(props) {
+  return <div {...props} className={styles.text} />
+}

test/e2e/app-dir/rsc-basic/components/red/style.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: red;
+}

test/e2e/app-dir/rsc-basic/components/shared-client.js

@@ -0,0 +1,5 @@
+'use client'
+
+import Shared from './shared'
+
+export default Shared

test/e2e/app-dir/rsc-basic/components/shared-exports.js

@@ -0,0 +1,10 @@
+const a = 'a'
+const b = 'b'
+const _c = 'c'
+const _d = 'd'
+const _e = 'e'
+const _eArr = [_e]
+
+export const c = _c
+export { a, b }
+export { _d as d, _eArr as e }

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import Client from './client'
+
+const random = ~~(Math.random() * 10000)
+
+export default function Shared() {
+  let isServerComponent
+  try {
+    React.useState()
+    isServerComponent = false
+  } catch (e) {
+    isServerComponent = true
+  }
+
+  return (
+    <>
+      <Client />,{' '}
+      {(isServerComponent ? 'shared:server' : 'shared:client') + ':' + random}
+    </>
+  )
+}