add more use cases for manual QA: SSE, HTML streaming, cookies, etc., add RSC check and allow custom app instance

Author: itsjavi

README.md

@@ -4,13 +4,16 @@ Fastify adapter for React Router server builds.
 
 It wraps a React Router server build with a Fastify app, optionally serves the built client files,
 and returns a runner function that works with
-[`node-cluster-serve`](https://github.com/itsjavi/node-cluster-serve) or direct startup code.
+[`node-cluster-serve`](https://github.com/dendrell/node-cluster-serve) or direct startup code.
 
 This package is for production-style server builds. It is not a Fastify development server.
 
 This library also assumes that you handle HTTP response body compression in an upper layer (e.g.
 Nginx), so it does not handle that for you.
 
+> **Note**: RSC Server Builds are not supported yet, but any PRs for that are welcome as soon as the
+> feature becomes stable in React Router.
+
 ## Install
 
 ```bash
@@ -138,6 +141,11 @@ declare function createServerRunner(
   the public origin.
 - If omitted, the adapter falls back to the resolved `host` and `port`.
 
+`options.app`
+
+- Fastify app instance to use for the server.
+- If omitted, a new Fastify app is created.
+
 ## Behavior
 
 - React Router requests are passed through as standard Web `Request` objects.

demo/app/lib/sse-log.ts

@@ -0,0 +1,67 @@
+import { appendFile, mkdir, readFile } from 'node:fs/promises'
+import path from 'node:path'
+
+export type DemoNotification = {
+  id: string
+  message: string
+  sentAt: string
+}
+
+const notificationLogFile = path.resolve(process.cwd(), '.local', 'demo', 'sse-events.ndjson')
+
+async function ensureNotificationLog() {
+  await mkdir(path.dirname(notificationLogFile), { recursive: true })
+  await appendFile(notificationLogFile, '', 'utf8')
+}
+
+function parseNotificationLines(contents: string): DemoNotification[] {
+  return contents
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .flatMap((line) => {
+      try {
+        return [JSON.parse(line) as DemoNotification]
+      } catch {
+        return []
+      }
+    })
+}
+
+export async function getNotificationCount(): Promise<number> {
+  await ensureNotificationLog()
+  let contents = await readFile(notificationLogFile, 'utf8')
+
+  return contents
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean).length
+}
+
+export async function readNotificationsAfter(count: number): Promise<{
+  notifications: DemoNotification[]
+  nextCount: number
+}> {
+  await ensureNotificationLog()
+  let contents = await readFile(notificationLogFile, 'utf8')
+  let notifications = parseNotificationLines(contents)
+
+  return {
+    notifications: notifications.slice(count),
+    nextCount: notifications.length,
+  }
+}
+
+export async function publishNotification(message: string): Promise<DemoNotification> {
+  let normalizedMessage = message.trim() || 'Hello from the demo SSE publisher.'
+  let notification: DemoNotification = {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    message: normalizedMessage,
+    sentAt: new Date().toISOString(),
+  }
+
+  await ensureNotificationLog()
+  await appendFile(notificationLogFile, `${JSON.stringify(notification)}\n`, 'utf8')
+
+  return notification
+}

demo/app/routes.ts

@@ -1,3 +1,12 @@
-import { type RouteConfig, index } from '@react-router/dev/routes'
+import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
-export default [index('routes/home.tsx')] satisfies RouteConfig
+export default [
+  index('routes/home.tsx'),
+  route('cookies-demo', 'routes/cookies-demo.ts'),
+  route('download', 'routes/download.ts'),
+  route('method-probe', 'routes/method-probe.ts'),
+  route('redirect-absolute', 'routes/redirect-absolute.ts'),
+  route('sse', 'routes/sse.ts'),
+  route('sse/publish', 'routes/sse-publish.ts'),
+  route('streaming-html', 'routes/streaming-html.ts'),
+] satisfies RouteConfig

demo/app/routes/cookies-demo.ts

@@ -0,0 +1,117 @@
+const demoCookieName = 'rrh_demo_cookie'
+const extraCookieNames = ['rrh_demo_cookie_a', 'rrh_demo_cookie_b']
+
+type CookieDemoPayload = {
+  action: 'read' | 'set' | 'set-many' | 'clear'
+  cookieValue: string | null
+  cookieHeader: string | null
+  cookies: Record<string, string>
+  receivedAt: string
+}
+
+function parseCookies(header: string | null): Record<string, string> {
+  if (!header) return {}
+
+  return Object.fromEntries(
+    header
+      .split(';')
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .map((part) => {
+        let separatorIndex = part.indexOf('=')
+        if (separatorIndex === -1) {
+          return [part, '']
+        }
+
+        let key = part.slice(0, separatorIndex).trim()
+        let value = part.slice(separatorIndex + 1).trim()
+
+        try {
+          return [key, decodeURIComponent(value)]
+        } catch {
+          return [key, value]
+        }
+      }),
+  )
+}
+
+function serializeCookie(value: string | null) {
+  let base = `${demoCookieName}=${value ? encodeURIComponent(value) : ''}; Path=/; HttpOnly; SameSite=Lax`
+  return value ? `${base}; Max-Age=${60 * 60 * 24 * 7}` : `${base}; Max-Age=0`
+}
+
+function createPayload(request: Request, action: CookieDemoPayload['action']): CookieDemoPayload {
+  let cookieHeader = request.headers.get('cookie')
+  let cookies = parseCookies(cookieHeader)
+
+  return {
+    action,
+    cookieValue: cookies[demoCookieName] ?? null,
+    cookieHeader,
+    cookies,
+    receivedAt: new Date().toISOString(),
+  }
+}
+
+export async function loader({ request }: { request: Request }) {
+  return Response.json(createPayload(request, 'read'))
+}
+
+export async function action({ request }: { request: Request }) {
+  let formData = await request.formData()
+  let intent = String(formData.get('intent') ?? 'read') as CookieDemoPayload['action']
+
+  if (intent === 'set') {
+    let value = String(formData.get('value') ?? '').trim() || 'hello-from-cookie-demo'
+
+    return Response.json(
+      {
+        ...createPayload(request, 'set'),
+        cookieValue: value,
+      } satisfies CookieDemoPayload,
+      {
+        headers: {
+          'Set-Cookie': serializeCookie(value),
+        },
+      },
+    )
+  }
+
+  if (intent === 'set-many') {
+    let value = String(formData.get('value') ?? '').trim() || 'hello-from-cookie-demo'
+    let headers = new Headers()
+
+    headers.append('Set-Cookie', serializeCookie(value))
+    headers.append(
+      'Set-Cookie',
+      serializeCookie(`${value}-a`).replace(demoCookieName, extraCookieNames[0]),
+    )
+    headers.append(
+      'Set-Cookie',
+      serializeCookie(`${value}-b`).replace(demoCookieName, extraCookieNames[1]),
+    )
+
+    return Response.json(
+      {
+        ...createPayload(request, 'set-many'),
+        cookieValue: value,
+      } satisfies CookieDemoPayload,
+      {
+        headers,
+      },
+    )
+  }
+
+  if (intent === 'clear') {
+    let headers = new Headers()
+    headers.append('Set-Cookie', serializeCookie(null))
+    headers.append('Set-Cookie', serializeCookie(null).replace(demoCookieName, extraCookieNames[0]))
+    headers.append('Set-Cookie', serializeCookie(null).replace(demoCookieName, extraCookieNames[1]))
+
+    return Response.json(createPayload(request, 'clear'), {
+      headers,
+    })
+  }
+
+  return Response.json(createPayload(request, 'read'))
+}

demo/app/routes/download.ts

@@ -0,0 +1,33 @@
+function sanitizeFilename(input: string): string {
+  let trimmed = input.trim() || 'react-router-hono-demo.txt'
+  return trimmed.replace(/[\r\n"]/g, '').replace(/[\\/]/g, '-')
+}
+
+function createAsciiFilename(input: string): string {
+  return input.replace(/[^\x20-\x7E]/g, '_')
+}
+
+function createContentDisposition(filename: string): string {
+  let safeFilename = sanitizeFilename(filename)
+  let asciiFilename = createAsciiFilename(safeFilename)
+  let encodedFilename = encodeURIComponent(safeFilename)
+
+  return `attachment; filename="${asciiFilename}"; filename*=UTF-8''${encodedFilename}`
+}
+
+export async function loader({ request }: { request: Request }) {
+  let url = new URL(request.url)
+  let filename = url.searchParams.get('filename') ?? 'react-router-hono-demo.txt'
+  let content = url.searchParams.get('content') ?? 'Hello from react-router-hono.'
+
+  let body = new TextEncoder().encode(content)
+
+  return new Response(body, {
+    headers: {
+      'Content-Disposition': createContentDisposition(filename),
+      'Content-Length': String(body.byteLength),
+      'Content-Type': 'text/plain; charset=utf-8',
+      'X-Demo-Response': 'attachment',
+    },
+  })
+}