examples: add an new example for typed readable streams in TanStack Start

Author: fulopkovacs

examples/react/start-typed-readable-stream/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tanstack-start-typed-readable-stream",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "vite start"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.132.33",
+    "@tanstack/react-router-devtools": "^1.132.33",
+    "@tanstack/react-start": "^1.132.36",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

examples/react/start-typed-readable-stream/public/favicon.ico

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

examples/react/start-typed-readable-stream/src/routeTree.gen.ts

@@ -0,0 +1,20 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    defaultPreload: 'intent',
+    defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
+    defaultNotFoundComponent: () => <p>not found</p>,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

examples/react/start-typed-readable-stream/src/router.tsx

@@ -0,0 +1,46 @@
+/// <reference types="vite/client" />
+import * as React from 'react'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import {
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
+import appCss from '~/styles/app.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  )
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div>
+          <Link to="/">Index</Link>
+          <Link to="/about">About</Link>
+        </div>
+
+        {children}
+        <TanStackRouterDevtools position="bottom-right" />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

examples/react/start-typed-readable-stream/src/routes/__root.tsx

@@ -0,0 +1,100 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { useCallback, useState } from 'react'
+import { z } from 'zod'
+
+// This schema will be used to define the type
+// of each chunk in the `ReadableStream`.
+// (It mimics OpenAi's streaming response format.)
+const textPartSchema = z.object({
+  choices: z.array(
+    z.object({
+      delta: z.object({
+        content: z.string().optional(),
+      }),
+      index: z.number(),
+      finish_reason: z.string().nullable(),
+    }),
+  ),
+})
+
+export type TextPart = z.infer<typeof textPartSchema>
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+const streamingResponseFn = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  const messages = Array.from({ length: 10 }, () =>
+    Math.floor(Math.random() * 100),
+  ).map((n, i) =>
+    textPartSchema.parse({
+      choices: [
+        {
+          delta: { content: `Number #${i + 1}: ${n}\n` },
+          index: i,
+          finish_reason: null,
+        },
+      ],
+    }),
+  )
+
+  // This `ReadableStream` is typed, so each chunk
+  // will be of type `TextPart`.
+  const stream = new ReadableStream<TextPart>({
+    async start(controller) {
+      for (const message of messages) {
+        await sleep(500)
+        controller.enqueue(message)
+      }
+      sleep(500)
+      controller.close()
+    },
+  })
+
+  return stream
+})
+
+export const Route = createFileRoute('/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [message, setMessage] = useState('')
+
+  const getStreamingResponse = useCallback(async () => {
+    const response = await streamingResponseFn()
+
+    if (!response) {
+      return
+    }
+
+    const reader = response.getReader()
+    let done = false
+    setMessage('')
+    while (!done) {
+      const { value, done: doneReading } = await reader.read()
+      done = doneReading
+      if (value) {
+        // Notice how we know the value of `chunk` (`TextPart | undefined`)
+        // here, because it's coming from the typed `ReadableStream`
+        const chunk = value?.choices[0].delta.content
+        if (chunk) {
+          setMessage((prev) => prev + chunk)
+        }
+      }
+    }
+  }, [])
+
+  return (
+    <main>
+      <h1>Typed Readable Stream</h1>
+      <button onClick={() => getStreamingResponse()}>
+        Get 10 random numbers
+      </button>
+      <pre>{message}</pre>
+    </main>
+  )
+}

examples/react/start-typed-readable-stream/src/routes/index.tsx

@@ -0,0 +1,15 @@
+body {
+  font-family:
+    Gordita, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+}
+
+a {
+  margin-right: 1rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}

examples/react/start-typed-readable-stream/src/styles/app.css

@@ -0,0 +1,22 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "public/script*.js"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "noEmit": true
+  }
+}

examples/react/start-typed-readable-stream/tsconfig.json

@@ -0,0 +1,17 @@
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import { defineConfig } from 'vite'
+import tsConfigPaths from 'vite-tsconfig-paths'
+import viteReact from '@vitejs/plugin-react'
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    tsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tanstackStart(),
+    viteReact(),
+  ],
+})