@tanstack/react-start-server 1.111.10

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@tanstack/react-start-server",
+  "version": "1.111.10",
+  "description": "Modern and scalable routing for React applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/router.git",
+    "directory": "packages/react-start-server"
+  },
+  "homepage": "https://tanstack.com/start",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "react",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "tiny-warning": "^1.0.3",
+    "h3": "1.13.0",
+    "isbot": "^5.1.22",
+    "jsesc": "^3.1.0",
+    "unctx": "^2.4.1",
+    "@tanstack/history": "^1.99.13",
+    "@tanstack/router-core": "^1.111.7",
+    "@tanstack/react-router": "^1.111.7",
+    "@tanstack/react-start-client": "^1.111.10"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "@types/jsesc": "^3.0.3",
+    "esbuild": "^0.25.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.2"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 || >=19.0.0",
+    "react-dom": ">=18.0.0 || >=19.0.0"
+  },
+  "scripts": {}
+}

package/src/StartServer.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { RouterProvider } from '@tanstack/react-router'
+import type { AnyRouter } from '@tanstack/react-router'
+
+export function StartServer<TRouter extends AnyRouter>(props: {
+  router: TRouter
+}) {
+  return <RouterProvider router={props.router} />
+}

package/src/createRequestHandler.ts

@@ -0,0 +1,75 @@
+import { createMemoryHistory } from '@tanstack/history'
+import { mergeHeaders } from '@tanstack/react-start-client'
+import { attachRouterServerSsrUtils, dehydrateRouter } from './ssr-server'
+import type { HandlerCallback } from './handlerCallback'
+import type { AnyRouter, Manifest } from '@tanstack/react-router'
+
+export type RequestHandler<TRouter extends AnyRouter> = (
+  cb: HandlerCallback<TRouter>,
+) => Promise<Response>
+
+export function createRequestHandler<TRouter extends AnyRouter>({
+  createRouter,
+  request,
+  getRouterManifest,
+}: {
+  createRouter: () => TRouter
+  request: Request
+  getRouterManifest?: () => Manifest | Promise<Manifest>
+}): RequestHandler<TRouter> {
+  return async (cb) => {
+    const router = createRouter()
+
+    attachRouterServerSsrUtils(router, await getRouterManifest?.())
+
+    const url = new URL(request.url, 'http://localhost')
+
+    const href = url.href.replace(url.origin, '')
+
+    // Create a history for the router
+    const history = createMemoryHistory({
+      initialEntries: [href],
+    })
+
+    // Update the router with the history and context
+    router.update({
+      history,
+    })
+
+    await router.load()
+
+    dehydrateRouter(router)
+
+    const responseHeaders = getRequestHeaders({
+      router,
+    })
+
+    return cb({
+      request,
+      router,
+      responseHeaders,
+    } as any)
+  }
+}
+
+function getRequestHeaders(opts: { router: AnyRouter }): Headers {
+  let headers = mergeHeaders(
+    {
+      'Content-Type': 'text/html; charset=UTF-8',
+    },
+    ...opts.router.state.matches.map((match) => {
+      return match.headers
+    }),
+  )
+
+  // Handle Redirects
+  const { redirect } = opts.router.state
+
+  if (redirect) {
+    headers = mergeHeaders(headers, redirect.headers, {
+      Location: redirect.href,
+    })
+  }
+
+  return headers
+}

package/src/createStartHandler.ts

@@ -0,0 +1,82 @@
+import { createMemoryHistory } from '@tanstack/history'
+import { mergeHeaders } from '@tanstack/react-start-client'
+import { eventHandler, getResponseHeaders, toWebRequest } from 'h3'
+import { attachRouterServerSsrUtils, dehydrateRouter } from './ssr-server'
+import type { HandlerCallback } from './handlerCallback'
+import type { EventHandlerResponse, H3Event } from 'h3'
+import type { AnyRouter, Manifest } from '@tanstack/react-router'
+
+export type CustomizeStartHandler<
+  TRouter extends AnyRouter,
+  TResponse extends EventHandlerResponse = EventHandlerResponse,
+> = (cb: HandlerCallback<TRouter, TResponse>) => ReturnType<typeof eventHandler>
+
+export function createStartHandler<
+  TRouter extends AnyRouter,
+  TResponse extends EventHandlerResponse = EventHandlerResponse,
+>({
+  createRouter,
+  getRouterManifest,
+}: {
+  createRouter: () => TRouter
+  getRouterManifest?: () => Manifest | Promise<Manifest>
+}): CustomizeStartHandler<TRouter, TResponse> {
+  return (cb) => {
+    return eventHandler(async (event) => {
+      const request = toWebRequest(event)
+
+      const url = new URL(request.url)
+      const href = url.href.replace(url.origin, '')
+
+      // Create a history for the router
+      const history = createMemoryHistory({
+        initialEntries: [href],
+      })
+
+      const router = createRouter()
+
+      attachRouterServerSsrUtils(router, await getRouterManifest?.())
+
+      // Update the router with the history and context
+      router.update({
+        history,
+      })
+
+      await router.load()
+
+      dehydrateRouter(router)
+
+      const responseHeaders = getStartResponseHeaders({ event, router })
+      const response = await cb({
+        request,
+        router,
+        responseHeaders,
+      })
+
+      return response
+    })
+  }
+}
+
+function getStartResponseHeaders(opts: { event: H3Event; router: AnyRouter }) {
+  let headers = mergeHeaders(
+    getResponseHeaders(opts.event),
+    (opts.event as any).___ssrRpcResponseHeaders,
+    {
+      'Content-Type': 'text/html; charset=UTF-8',
+    },
+    ...opts.router.state.matches.map((match) => {
+      return match.headers
+    }),
+  )
+
+  // Handle Redirects
+  const { redirect } = opts.router.state
+
+  if (redirect) {
+    headers = mergeHeaders(headers, redirect.headers, {
+      Location: redirect.href,
+    })
+  }
+  return headers
+}

package/src/defaultRenderHandler.tsx

@@ -0,0 +1,25 @@
+import ReactDOMServer from 'react-dom/server'
+import { StartServer } from './StartServer'
+import { defineHandlerCallback } from './handlerCallback'
+
+export const defaultRenderHandler = defineHandlerCallback(
+  async ({ router, responseHeaders }) => {
+    try {
+      let html = ReactDOMServer.renderToString(<StartServer router={router} />)
+      const injectedHtml = await Promise.all(
+        router.serverSsr!.injectedHtml,
+      ).then((htmls) => htmls.join(''))
+      html = html.replace(`</body>`, `${injectedHtml}</body>`)
+      return new Response(`<!DOCTYPE html>${html}`, {
+        status: router.state.statusCode,
+        headers: responseHeaders,
+      })
+    } catch (error) {
+      console.error('Render to string error:', error)
+      return new Response('Internal Server Error', {
+        status: 500,
+        headers: responseHeaders,
+      })
+    }
+  },
+)

package/src/defaultStreamHandler.tsx

@@ -0,0 +1,80 @@
+import { PassThrough } from 'node:stream'
+import { isbot } from 'isbot'
+import ReactDOMServer from 'react-dom/server'
+
+import { StartServer } from './StartServer'
+
+import {
+  transformPipeableStreamWithRouter,
+  transformReadableStreamWithRouter,
+} from './transformStreamWithRouter'
+
+import { defineHandlerCallback } from './handlerCallback'
+import type { ReadableStream } from 'node:stream/web'
+
+export const defaultStreamHandler = defineHandlerCallback(
+  async ({ request, router, responseHeaders }) => {
+    if (typeof ReactDOMServer.renderToReadableStream === 'function') {
+      const stream = await ReactDOMServer.renderToReadableStream(
+        <StartServer router={router} />,
+        {
+          signal: request.signal,
+        },
+      )
+
+      if (isbot(request.headers.get('User-Agent'))) {
+        await stream.allReady
+      }
+
+      const responseStream = transformReadableStreamWithRouter(
+        router,
+        stream as unknown as ReadableStream,
+      )
+      return new Response(responseStream as any, {
+        status: router.state.statusCode,
+        headers: responseHeaders,
+      })
+    }
+
+    if (typeof ReactDOMServer.renderToPipeableStream === 'function') {
+      const reactAppPassthrough = new PassThrough()
+
+      try {
+        const pipeable = ReactDOMServer.renderToPipeableStream(
+          <StartServer router={router} />,
+          {
+            ...(isbot(request.headers.get('User-Agent'))
+              ? {
+                  onAllReady() {
+                    pipeable.pipe(reactAppPassthrough)
+                  },
+                }
+              : {
+                  onShellReady() {
+                    pipeable.pipe(reactAppPassthrough)
+                  },
+                }),
+            onError: (error, info) => {
+              console.error('Error in renderToPipeableStream:', error, info)
+            },
+          },
+        )
+      } catch (e) {
+        console.error('Error in renderToPipeableStream:', e)
+      }
+
+      const responseStream = transformPipeableStreamWithRouter(
+        router,
+        reactAppPassthrough,
+      )
+      return new Response(responseStream as any, {
+        status: router.state.statusCode,
+        headers: responseHeaders,
+      })
+    }
+
+    throw new Error(
+      'No renderToReadableStream or renderToPipeableStream found in react-dom/server. Ensure you are using a version of react-dom that supports streaming.',
+    )
+  },
+)

package/src/handlerCallback.ts

@@ -0,0 +1,22 @@
+import type { EventHandlerResponse } from 'h3'
+import type { AnyRouter } from '@tanstack/react-router'
+
+export interface HandlerCallback<
+  TRouter extends AnyRouter,
+  TResponse extends EventHandlerResponse = EventHandlerResponse,
+> {
+  (ctx: {
+    request: Request
+    router: TRouter
+    responseHeaders: Headers
+  }): TResponse
+}
+
+export function defineHandlerCallback<
+  TRouter extends AnyRouter,
+  TResponse = EventHandlerResponse,
+>(
+  handler: HandlerCallback<TRouter, TResponse>,
+): HandlerCallback<TRouter, TResponse> {
+  return handler
+}