migrate suspense related tests to e2e

e2e/site/app/page.tsx

@@ -1,3 +1,31 @@
-export default function Home() {
-  return <main>SWR E2E Test</main>
+'use client'
+
+import { Suspense, useReducer } from 'react'
+import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+
+const fetcher = async (key: string) => {
+  // Add a small delay to simulate network request
+  await new Promise(resolve => setTimeout(resolve, 100))
+  return 'SWR'
+}
+
+const Section = ({ trigger }: { trigger: boolean }) => {
+  const { data } = useSWR(trigger ? 'test-key' : undefined, fetcher, {
+    suspense: true
+  })
+  return <div>{data || 'empty'}</div>
+}
+
+export default function Page() {
+  const [trigger, toggle] = useReducer(x => !x, false)
+
+  return (
+    <OnlyRenderInClient>
+      <button onClick={toggle}>toggle</button>
+      <Suspense fallback={<div>fallback</div>}>
+        <Section trigger={trigger} />
+      </Suspense>
+    </OnlyRenderInClient>
+  )
 }

e2e/site/app/partially-hydrate/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { useDebugHistory } from '~/lib/use-debug-history'
 import useData from './use-data'
+import { use } from 'react'
 
 let resolved = false
 const susp = new Promise(res => {
@@ -13,7 +14,7 @@ const susp = new Promise(res => {
 export default function Page() {
   // We trigger the suspense boundary here!
   if (!resolved) {
-    throw susp
+    use(susp)
   }
 
   const { data } = useData()

e2e/site/app/render-preload-avoid-waterfall/page.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import useSWR, { preload } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const keyA = 'render-preload-avoid-waterfall:a'
+const keyB = 'render-preload-avoid-waterfall:b'
+const delay = 200
+
+async function fetcherA() {
+  await sleep(delay)
+  return 'foo'
+}
+
+async function fetcherB() {
+  await sleep(delay)
+  return 'bar'
+}
+
+function Preload({ children }: { children?: React.ReactNode }) {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    preload(keyA, fetcherA)
+    preload(keyB, fetcherB)
+    setReady(true)
+  }, [])
+
+  return ready ? <>{children}</> : null
+}
+
+function Content() {
+  const { data: first } = useSWR(keyA, fetcherA, { suspense: true })
+  const { data: second } = useSWR(keyB, fetcherB, { suspense: true })
+
+  useEffect(() => {
+    if (!first || !second) {
+      return
+    }
+  }, [first, second])
+
+  return (
+    <div style={{ display: 'grid', gap: '0.5rem' }}>
+      <div data-testid="data">
+        data:{first}:{second}
+      </div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Preload>
+        <Suspense fallback={<div data-testid="fallback">Loading...</div>}>
+          <Content />
+        </Suspense>
+      </Preload>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-preload-basic/page.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import useSWR, { preload } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const key = 'render-preload-basic'
+let fetchCount = 0
+
+async function fetcher() {
+  await sleep(100)
+  fetchCount += 1
+  return 'foo'
+}
+
+function Preload({ children }: { children?: React.ReactNode }) {
+  const [isPreloaded, setIsPreloaded] = useState(false)
+
+  useEffect(() => {
+    preload(key, fetcher)
+    setIsPreloaded(true)
+  }, [])
+  return <>{isPreloaded ? children : null}</>
+}
+
+export default function Page() {
+  const { data } = useSWR(key, fetcher)
+  const [count, setCount] = useState(fetchCount)
+
+  useEffect(() => {
+    setCount(fetchCount)
+  }, [data])
+
+  return (
+    <OnlyRenderInClient>
+      <Preload>
+        <Suspense fallback={<div>Loading...</div>}>
+          <div style={{ display: 'grid', gap: '0.5rem' }}>
+            <div data-testid="data">data:{data ?? ''}</div>
+            <div data-testid="fetch-count">fetches: {count}</div>
+          </div>
+        </Suspense>
+      </Preload>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-promise-suspense-error/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { Suspense, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import useSWR, { SWRConfig } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const key = 'render-promise-suspense-error'
+const fallbackDelay = 150
+
+function PromiseConfig({ children }: { children: ReactNode }) {
+  const [fallback] = useState(() =>
+    sleep(fallbackDelay).then(() => {
+      throw new Error('error')
+    })
+  )
+
+  const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback])
+
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
+
+function Content() {
+  const { data } = useSWR<string>(key)
+  return <div data-testid="data">data:{data ?? 'undefined'}</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <PromiseConfig>
+        <ErrorBoundary
+          fallbackRender={({ error }) => (
+            <div data-testid="error">{error.message}</div>
+          )}
+        >
+          <Suspense fallback={<div data-testid="fallback">loading</div>}>
+            <Content />
+          </Suspense>
+        </ErrorBoundary>
+      </PromiseConfig>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-promise-suspense-resolve/page.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Suspense, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import useSWR, { SWRConfig } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+import { useDebugHistory } from '~/lib/use-debug-history'
+
+const key = 'render-promise-suspense-resolve'
+const fallbackDelay = 150
+const fetchDelay = 200
+
+async function fetcher() {
+  await sleep(fetchDelay)
+  return 'new data'
+}
+
+function PromiseConfig({ children }: { children: ReactNode }) {
+  const [fallback] = useState(() =>
+    sleep(fallbackDelay).then(() => 'initial data')
+  )
+
+  const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback])
+
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
+
+function Content() {
+  const { data } = useSWR(key, fetcher)
+  const historyRef = useDebugHistory(data, 'history:')
+
+  return (
+    <div style={{ display: 'grid', gap: '0.5rem' }}>
+      <div data-testid="data">data:{data ?? 'undefined'}</div>
+      <div data-testid="history" ref={historyRef}></div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <PromiseConfig>
+        <Suspense fallback={<div data-testid="fallback">loading</div>}>
+          <Content />
+        </Suspense>
+      </PromiseConfig>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-promise-suspense-shared/page.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Suspense, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import useSWR, { SWRConfig } from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+const key = 'render-promise-suspense-shared'
+const fallbackDelay = 150
+
+function PromiseConfig({ children }: { children: ReactNode }) {
+  const [fallback] = useState(() => sleep(fallbackDelay).then(() => 'value'))
+  const value = useMemo(() => ({ fallback: { [key]: fallback } }), [fallback])
+  return <SWRConfig value={value}>{children}</SWRConfig>
+}
+
+function Item({ id }: { id: string }) {
+  const { data } = useSWR<string>(key)
+  return <div data-testid={`data-${id}`}>data:{data ?? 'undefined'}</div>
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <PromiseConfig>
+        <Suspense fallback={<div data-testid="fallback">loading</div>}>
+          <div style={{ display: 'grid', gap: '0.5rem' }}>
+            <Item id="first" />
+            <Item id="second" />
+          </div>
+        </Suspense>
+      </PromiseConfig>
+    </OnlyRenderInClient>
+  )
+}

e2e/site/app/render-suspense-avoid-rerender/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Suspense, useRef } from 'react'
+import useSWR from 'swr'
+import { OnlyRenderInClient } from '~/component/only-render-in-client'
+import { sleep } from '~/lib/sleep'
+
+async function fetchValue() {
+  await sleep(150)
+  return 'SWR'
+}
+
+function Section() {
+  const startCountRef = useRef(0)
+  const dataCountRef = useRef(0)
+  const prevDataRef = useRef<any>(Symbol('initial'))
+
+  startCountRef.current += 1
+
+  const { data } = useSWR('render-suspense-avoid-rerender', fetchValue, {
+    suspense: true
+  })
+
+  if (data !== prevDataRef.current) {
+    if (data !== undefined) {
+      dataCountRef.current += 1
+    }
+    prevDataRef.current = data
+  }
+
+  return (
+    <div style={{ display: 'grid', gap: '0.5rem' }}>
+      <div data-testid="start-count">
+        start renders: {startCountRef.current}
+      </div>
+      <div data-testid="data-count">data renders: {dataCountRef.current}</div>
+      <div data-testid="data">{data}</div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return (
+    <OnlyRenderInClient>
+      <Suspense fallback={<div data-testid="fallback">fallback</div>}>
+        <Section />
+      </Suspense>
+    </OnlyRenderInClient>
+  )
+}