<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][CHANGELOG.md]" value="# @tanstack/db-example-react-next-ssr-e2e

## 0.0.3

### Patch Changes

- Updated dependencies [[`a378bd3`](https://github.com/TanStack/db/commit/a378bd3a65f6b9ed0c9a85f793b7dc2e2a59a313), [`ad043b7`](https://github.com/TanStack/db/commit/ad043b7455a5bdc549c36833bc72ddbe9ce8afed), [`025a079`](https://github.com/TanStack/db/commit/025a0799dd7690d892cacff5493b7270c33fdc2c), [`ddc129e`](https://github.com/TanStack/db/commit/ddc129eeab84d7eca4f2972c3dcc37506202a43d), [`6e60d30`](https://github.com/TanStack/db/commit/6e60d30a0e19642eeda72895722afdfca6cec749)]:
  - @tanstack/db@0.9.1
  - @tanstack/react-db@0.4.0

## 0.0.2

### Patch Changes

- Updated dependencies [[`cfb01ce`](https://github.com/TanStack/db/commit/cfb01cee34de7d0378e008dc8c01c1df5253c1e2)]:
  - @tanstack/db@0.9.0
  - @tanstack/react-db@0.3.8

## 0.0.1

### Patch Changes

- Updated dependencies [[`4b9e8cd`](https://github.com/TanStack/db/commit/4b9e8cdf79551734cf526e6fa4bbdba42ec94575)]:
  - @tanstack/db@0.8.0
  - @tanstack/react-db@0.3.0
">
<input type="hidden" name="project[files][next.config.ts]" value="import type { NextConfig } from &#39;next&#39;

const nextConfig: NextConfig = {
  reactStrictMode: true,
  transpilePackages: [`@tanstack/db`, `@tanstack/react-db`],
}

export default nextConfig
">
<input type="hidden" name="project[files][package.json]" value="{
  &quot;name&quot;: &quot;@tanstack/db-example-react-next-ssr-e2e&quot;,
  &quot;private&quot;: true,
  &quot;version&quot;: &quot;0.0.3&quot;,
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build&quot;,
    &quot;dev&quot;: &quot;next dev&quot;,
    &quot;start&quot;: &quot;next start&quot;,
    &quot;test:e2e&quot;: &quot;pnpm --filter @tanstack/db build &amp;&amp; pnpm --filter @tanstack/react-db build &amp;&amp; playwright test&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@tanstack/db&quot;: &quot;https://pkg.pr.new/TanStack/db/@tanstack/db@6385f29&quot;,
    &quot;@tanstack/react-db&quot;: &quot;https://pkg.pr.new/TanStack/db/@tanstack/react-db@6385f29&quot;,
    &quot;next&quot;: &quot;^16.3.1&quot;,
    &quot;react&quot;: &quot;^19.2.4&quot;,
    &quot;react-dom&quot;: &quot;^19.2.4&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;@playwright/test&quot;: &quot;^1.60.0&quot;,
    &quot;@types/node&quot;: &quot;^25.2.2&quot;,
    &quot;@types/react&quot;: &quot;^19.2.13&quot;,
    &quot;@types/react-dom&quot;: &quot;^19.2.3&quot;,
    &quot;typescript&quot;: &quot;^5.9.2&quot;
  }
}">
<input type="hidden" name="project[files][playwright.config.ts]" value="import { defineConfig, devices } from &#39;@playwright/test&#39;

const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:4176`
const shouldStartWebServer = process.env.PLAYWRIGHT_BASE_URL === undefined

export default defineConfig({
  testDir: `./e2e`,
  timeout: 30000,
  expect: {
    timeout: 10000,
  },
  fullyParallel: false,
  use: {
    baseURL,
    trace: `on-first-retry`,
  },
  webServer: shouldStartWebServer
    ? {
        command: `pnpm dev --hostname 127.0.0.1 --port 4176`,
        reuseExistingServer: !process.env.CI,
        timeout: 120000,
        url: baseURL,
      }
    : undefined,
  projects: [
    {
      name: `chromium`,
      use: { ...devices[`Desktop Chrome`] },
    },
  ],
})
">
<input type="hidden" name="project[files][tsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES2017&quot;,
    &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
    &quot;allowJs&quot;: false,
    &quot;skipLibCheck&quot;: true,
    &quot;strict&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;bundler&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
    &quot;incremental&quot;: true,
    &quot;plugins&quot;: [{ &quot;name&quot;: &quot;next&quot; }]
  },
  &quot;include&quot;: [
    &quot;next-env.d.ts&quot;,
    &quot;.next/types/**/*.ts&quot;,
    &quot;.next/dev/types/**/*.ts&quot;,
    &quot;**/*.ts&quot;,
    &quot;**/*.tsx&quot;
  ],
  &quot;exclude&quot;: [&quot;node_modules&quot;]
}
">
<input type="hidden" name="project[files][app/db-hydration.tsx]" value="&#39;use client&#39;

import { useState } from &#39;react&#39;
import { DbClient } from &#39;@tanstack/db&#39;
import { DbProvider, HydrationBoundary } from &#39;@tanstack/react-db&#39;
import type { DehydratedDbState } from &#39;@tanstack/db&#39;
import type { ReactNode } from &#39;react&#39;

export function DbHydration({
  state,
  children,
}: {
  state: DehydratedDbState
  children: ReactNode
}) {
  const [client] = useState(() =&gt; new DbClient({ runtime: `browser` }))

  return (
    &lt;DbProvider client={client}&gt;
      &lt;HydrationBoundary state={state}&gt;{children}&lt;/HydrationBoundary&gt;
    &lt;/DbProvider&gt;
  )
}
">
<input type="hidden" name="project[files][app/layout.tsx]" value="import type { Metadata } from &#39;next&#39;
import type { ReactNode } from &#39;react&#39;

export const metadata: Metadata = {
  title: `TanStack DB Next.js SSR E2E`,
}

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;body&gt;{children}&lt;/body&gt;
    &lt;/html&gt;
  )
}
">
<input type="hidden" name="project[files][app/page.tsx]" value="import { Suspense } from &#39;react&#39;
import { DbClient } from &#39;@tanstack/db&#39;
import { DbHydration } from &#39;./db-hydration&#39;
import { streamedTodoQuery } from &#39;./ssr-fixture&#39;
import { StreamedTodos } from &#39;./streamed-todos&#39;

export const dynamic = `force-dynamic`

export default function Page() {
  const dbClient = new DbClient({ runtime: `server` })
  void dbClient.preloadLiveQuery(streamedTodoQuery)
  const state = dbClient.dehydrate({
    shouldDehydrateCollection: () =&gt; false,
    shouldDehydrateLiveQuery: () =&gt; true,
  })

  return (
    &lt;main&gt;
      &lt;h1&gt;TanStack DB Next.js SSR&lt;/h1&gt;
      &lt;DbHydration state={state}&gt;
        &lt;Suspense fallback={&lt;p data-testid=&quot;stream-fallback&quot;&gt;Loading todos&lt;/p&gt;}&gt;
          &lt;StreamedTodos /&gt;
        &lt;/Suspense&gt;
      &lt;/DbHydration&gt;
    &lt;/main&gt;
  )
}
">
<input type="hidden" name="project[files][app/ssr-fixture.ts]" value="import { collectionOptions, eq } from &#39;@tanstack/db&#39;
import type { InitialQueryBuilder } from &#39;@tanstack/db&#39;

export type StreamedTodo = {
  id: string
  text: string
  status: `open` | `done`
  sourcePayload: string
}

const serverTodo: StreamedTodo = {
  id: `next-server-1`,
  text: `Streamed from Next.js`,
  status: `open`,
  sourcePayload: `NEXT_SOURCE_ONLY_DO_NOT_TRANSPORT`,
}

const browserTodo: StreamedTodo = {
  id: `next-browser-1`,
  text: `Reconciled by Next.js browser sync`,
  status: `open`,
  sourcePayload: `NEXT_BROWSER_SOURCE_ONLY_DO_NOT_TRANSPORT`,
}

export const streamedTodoCollection = collectionOptions(
  `next-ssr-stream-todos`,
  (client) =&gt; {
    const runtime = client.requireDependency&lt;`server` | `browser`&gt;(`runtime`)

    return {
      id: `next-ssr-stream-todos`,
      getKey: (todo: StreamedTodo) =&gt; todo.id,
      syncMode: `on-demand` as const,
      sync: {
        sync: ({ begin, write, commit, markReady }) =&gt; {
          markReady()
          return {
            loadSubset: () =&gt;
              new Promise&lt;void&gt;((resolve) =&gt; {
                setTimeout(
                  () =&gt; {
                    begin({ immediate: true })
                    write({
                      type: `insert`,
                      value: runtime === `server` ? serverTodo : browserTodo,
                    })
                    commit()
                    resolve()
                  },
                  runtime === `server` ? 1000 : 1500,
                )
              }),
          }
        },
      },
    }
  },
)

export const streamedTodoQuery = {
  query: (q: InitialQueryBuilder) =&gt;
    q
      .from({ todo: streamedTodoCollection })
      .where(({ todo }) =&gt; eq(todo.status, `open`))
      .select(({ todo }) =&gt; ({
        id: todo.id,
        text: todo.text,
        status: todo.status,
      })),
}
">
<input type="hidden" name="project[files][app/streamed-todos.tsx]" value="&#39;use client&#39;

import { useLiveSuspenseQuery } from &#39;@tanstack/react-db&#39;
import { streamedTodoQuery } from &#39;./ssr-fixture&#39;

export function StreamedTodos() {
  const { data: todos } = useLiveSuspenseQuery(streamedTodoQuery)

  return (
    &lt;ul data-testid=&quot;streamed-todo-list&quot;&gt;
      {todos.map((todo) =&gt; (
        &lt;li data-testid={`streamed-todo-${todo.id}`} key={todo.id}&gt;
          {todo.text}
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  )
}
">
<input type="hidden" name="project[files][e2e/ssr-db.spec.ts]" value="import { expect, test } from &#39;@playwright/test&#39;

test(`Next.js streams a DB result snapshot and hands off to browser sync`, async ({
  page,
  request,
}) =&gt; {
  const response = await request.get(`/`)
  expect(response.ok()).toBe(true)
  const html = await response.text()
  expect(html).toContain(`Streamed from Next.js`)
  expect(html).not.toContain(`NEXT_SOURCE_ONLY_DO_NOT_TRANSPORT`)

  const browserErrors: Array&lt;string&gt; = []
  page.on(`console`, (message) =&gt; {
    if (message.type() === `error`) browserErrors.push(message.text())
  })
  page.on(`pageerror`, (error) =&gt; {
    browserErrors.push(error.message)
  })

  await page.goto(`/`, { waitUntil: `commit` })

  await expect(page.getByTestId(`stream-fallback`)).toBeVisible()
  await expect(page.getByTestId(`streamed-todo-next-server-1`)).toHaveText(
    `Streamed from Next.js`,
  )
  await expect(page.getByTestId(`stream-fallback`)).not.toBeVisible()
  await expect(
    page.getByTestId(`streamed-todo-next-server-1`),
  ).not.toBeVisible()
  await expect(page.getByTestId(`streamed-todo-next-browser-1`)).toHaveText(
    `Reconciled by Next.js browser sync`,
  )
  expect(browserErrors).toEqual([])
})
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="@tanstack/db-example-react-next-ssr-e2e">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>