Skip to content

Conversation

fulopkovacs
Copy link
Contributor

@fulopkovacs fulopkovacs commented Oct 4, 2025

Turns out typed Readable Streams are in high demand thanks to AI apps (I actually use them myself with TanStack Start), but we didn't have any examples for it yet, so I added one.

I'm happy to update the docs too, but not sure where.

Summary by CodeRabbit

  • New Features

    • Added a runnable React example demonstrating two typed streaming approaches from server functions, with UI controls to trigger streams and view accumulated results; includes project config for React 19 and Vite.
  • Documentation

    • Added a dedicated guide on streaming typed data from server functions (typed ReadableStreams and async generators).
    • Reorganized server-functions docs by splitting “Streaming” and “Raw Responses” and linking to the new guide.
  • Chores

    • Added example project tooling and TypeScript config for the demo.

Copy link

nx-cloud bot commented Oct 4, 2025

View your CI Pipeline Execution ↗ for commit e884da1

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 1m 51s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1s View ↗

☁️ Nx Cloud last updated this comment at 2025-10-05 23:01:59 UTC

Copy link
Contributor

coderabbitai bot commented Oct 4, 2025

Walkthrough

Adds a new React example and docs demonstrating typed streaming from server functions (Typed ReadableStream and async generators), new example project scaffolding (router, generated route tree, Vite/TS configs, styles), and reorganizes server-functions docs to separate Streaming and Raw Responses sections.

Changes

Cohort / File(s) Summary
Docs — Streaming guide
docs/router/framework/react/guide/streaming-data-from-server-functions.md
New guide showing two typed streaming approaches (Typed ReadableStream and async generators) with TypeScript server and client examples and references to an example repo.
Docs — Server functions reorg
docs/start/framework/react/server-functions.md
Renamed "Streaming & Raw Responses" → "Streaming"; replaced streaming content with link to new guide and added a separate "Raw Responses" subsection.
Example — Project config
examples/react/start-streaming-data-from-server-functions/package.json, examples/react/start-streaming-data-from-server-functions/tsconfig.json, examples/react/start-streaming-data-from-server-functions/vite.config.ts
New example package manifest, strict TS config with path alias, and Vite config (dev port 3000, plugins: tsconfig-paths, tanstack-start, react).
Example — Router & types
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts, examples/react/start-streaming-data-from-server-functions/src/router.tsx
Adds generated typed route tree and getRouter() creating a TanStack router; includes TypeScript module augmentations for @tanstack/react-router and @tanstack/react-start.
Example — App shell & styles
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx, examples/react/start-streaming-data-from-server-functions/src/styles/app.css
New root route/document component wiring head, global CSS import, devtools, script injection, and layout/styles for the demo.
Example — Streaming route
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
Implements demo route with Zod TextPart type, a ReadableStream<TextPart> server function, an async-generator server function, client consumption for both, UI buttons, and stream output display.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant C as React Client (Route)
  participant SF as Server Function
  participant Stream as Stream / Generator

  U->>C: Click "Stream (ReadableStream)" or "Stream (Async Gen)"
  alt ReadableStream flow
    C->>SF: call streamingResponseFn()
    SF-->>C: returns ReadableStream<TextPart>
    loop chunks
      C->>Stream: reader.read()
      Stream-->>C: chunk (TextPart)
      C->>C: append chunk to UI
    end
  else Async generator flow
    C->>SF: call streamingWithAnAsyncGeneratorFn()
    SF-->>C: returns AsyncGenerator<TextPart>
    loop for await
      SF-->>C: yield (TextPart)
      C->>C: append chunk to UI
    end
  end
  C-->>U: render accumulated streamed text
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • schiller-manuel
  • birkskyum

Poem

A nibble of bytes, a hop and a beam,
I stream little carrots down a typed little stream.
Chunks validated, one hop at a time,
I stitch them in order, rhythmic and prime.
Hooray for servers that speak in kind—🥕🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title accurately and concisely summarizes the main change by indicating that a new TanStack Start example for typed readable streams is being added under the examples directory, making it immediately clear to reviewers what this pull request introduces.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b5fd9ba and e884da1.

📒 Files selected for processing (2)
  • docs/router/framework/react/guide/streaming-data-from-server-functions.md (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
  • docs/router/framework/react/guide/streaming-data-from-server-functions.md

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0d3bba8 and 31c2a5d.

⛔ Files ignored due to path filters (1)
  • examples/react/start-typed-readable-stream/public/favicon.ico is excluded by !**/*.ico
📒 Files selected for processing (8)
  • examples/react/start-typed-readable-stream/package.json (1 hunks)
  • examples/react/start-typed-readable-stream/src/routeTree.gen.ts (1 hunks)
  • examples/react/start-typed-readable-stream/src/router.tsx (1 hunks)
  • examples/react/start-typed-readable-stream/src/routes/__root.tsx (1 hunks)
  • examples/react/start-typed-readable-stream/src/routes/index.tsx (1 hunks)
  • examples/react/start-typed-readable-stream/src/styles/app.css (1 hunks)
  • examples/react/start-typed-readable-stream/tsconfig.json (1 hunks)
  • examples/react/start-typed-readable-stream/vite.config.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
examples/{react,solid}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep example applications under examples/react/ and examples/solid/

Files:

  • examples/react/start-typed-readable-stream/tsconfig.json
  • examples/react/start-typed-readable-stream/src/routes/__root.tsx
  • examples/react/start-typed-readable-stream/vite.config.ts
  • examples/react/start-typed-readable-stream/src/routes/index.tsx
  • examples/react/start-typed-readable-stream/src/routeTree.gen.ts
  • examples/react/start-typed-readable-stream/package.json
  • examples/react/start-typed-readable-stream/src/styles/app.css
  • examples/react/start-typed-readable-stream/src/router.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

  • examples/react/start-typed-readable-stream/src/routes/__root.tsx
  • examples/react/start-typed-readable-stream/vite.config.ts
  • examples/react/start-typed-readable-stream/src/routes/index.tsx
  • examples/react/start-typed-readable-stream/src/routeTree.gen.ts
  • examples/react/start-typed-readable-stream/src/router.tsx
**/src/routes/**

📄 CodeRabbit inference engine (AGENTS.md)

Place file-based routes under src/routes/ directories

Files:

  • examples/react/start-typed-readable-stream/src/routes/__root.tsx
  • examples/react/start-typed-readable-stream/src/routes/index.tsx
**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Use workspace:* protocol for internal dependencies in package.json files

Files:

  • examples/react/start-typed-readable-stream/package.json
🧠 Learnings (2)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase

Applied to files:

  • examples/react/start-typed-readable-stream/tsconfig.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
PR: TanStack/router#5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.

Applied to files:

  • examples/react/start-typed-readable-stream/src/routeTree.gen.ts
🧬 Code graph analysis (3)
examples/react/start-typed-readable-stream/src/routes/__root.tsx (2)
examples/react/start-typed-readable-stream/src/routes/index.tsx (1)
  • Route (60-62)
packages/react-router-devtools/src/TanStackRouterDevtools.tsx (1)
  • TanStackRouterDevtools (46-126)
examples/react/start-typed-readable-stream/src/routes/index.tsx (1)
examples/react/start-typed-readable-stream/src/routes/__root.tsx (1)
  • Route (13-18)
examples/react/start-typed-readable-stream/src/routeTree.gen.ts (2)
e2e/react-router/js-only-file-based/src/routeTree.gen.js (2)
  • IndexRoute (30-34)
  • rootRouteChildren (90-94)
examples/react/start-typed-readable-stream/src/router.tsx (1)
  • getRouter (4-14)
🔇 Additional comments (2)
examples/react/start-typed-readable-stream/tsconfig.json (1)

1-22: LGTM!

The TypeScript configuration correctly enables strict mode with extensive type safety, aligning with the project's coding standards. The modern settings (ESNext, Bundler resolution, ES2022 target) are appropriate for this Vite-based React example.

Based on learnings.

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

64-100: LGTM!

The client-side streaming implementation correctly demonstrates typed ReadableStream usage. The code properly handles the stream reader, maintains type safety (lines 81-83), and updates the UI incrementally as chunks arrive.

Comment on lines 46 to 54
const stream = new ReadableStream<TextPart>({
async start(controller) {
for (const message of messages) {
await sleep(500)
controller.enqueue(message)
}
sleep(500)
controller.close()
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Missing await before final sleep call.

Line 52 calls sleep(500) without await, causing the stream to close immediately instead of waiting 500ms after the last message. This can result in the last chunk being dropped or incomplete.

Apply this diff to fix the missing await:

       for (const message of messages) {
         await sleep(500)
         controller.enqueue(message)
       }
-      sleep(500)
+      await sleep(500)
       controller.close()
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const stream = new ReadableStream<TextPart>({
async start(controller) {
for (const message of messages) {
await sleep(500)
controller.enqueue(message)
}
sleep(500)
controller.close()
},
const stream = new ReadableStream<TextPart>({
async start(controller) {
for (const message of messages) {
await sleep(500)
controller.enqueue(message)
}
await sleep(500)
controller.close()
},
🤖 Prompt for AI Agents
In examples/react/start-typed-readable-stream/src/routes/index.tsx around lines
46 to 54, the final sleep(500) call is not awaited so controller.close() runs
immediately; change the code to await the final sleep before calling
controller.close() so the stream waits 500ms after the last message is enqueued
and the last chunk is not dropped.

@fulopkovacs fulopkovacs force-pushed the add-typed-readable-stream-example branch 3 times, most recently from f80fc07 to 5d18df4 Compare October 4, 2025 17:58
Copy link

pkg-pr-new bot commented Oct 4, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5363

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5363

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5363

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5363

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5363

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5363

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5363

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5363

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5363

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5363

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5363

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5363

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5363

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5363

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5363

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5363

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5363

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5363

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5363

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5363

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5363

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5363

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5363

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5363

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5363

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5363

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5363

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5363

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5363

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5363

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5363

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5363

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5363

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5363

commit: e884da1

@schiller-manuel
Copy link
Contributor

thanks, we are also looking into async generator functions to make this even easier. so let's wait with this example, then we can showcase all of the possibilities

@fulopkovacs
Copy link
Contributor Author

fulopkovacs commented Oct 4, 2025

thanks, we are also looking into async generator functions to make this even easier. so let's wait with this example, then we can showcase all of the possibilities

Awesome! Async generator functions sound like a good solution for this problem, can't wait to see them in action.

@fulopkovacs fulopkovacs force-pushed the add-typed-readable-stream-example branch from 5d18df4 to bc120b4 Compare October 5, 2025 20:14
@github-actions github-actions bot added the documentation Everything documentation related label Oct 5, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🧹 Nitpick comments (2)
docs/router/framework/react/guide/streaming-data-from-server-functions.md (1)

82-88: Simplify the async generator example

Wrapping each chunk in new Promise<Message> with an async executor adds noise and encourages an anti-pattern. Yielding the message directly keeps the code focused on streaming while preserving the typing story.

-    for (const msg of messages) {
-      // Notice how we defined the type of the streamed chunks
-      // in the generic passed down the Promise constructor
-      yield new Promise<Message>(async (r) => {
-        // Send the message
-        return r(msg)
-      })
-    }
+    for (const msg of messages) {
+      // Each yielded value remains fully typed as `Message`
+      yield msg
+    }
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (1)

4-7: Remove unused Link import

Link isn’t referenced in this file; dropping the import keeps the example tidy.

-import {
-  HeadContent,
-  Link,
-  Outlet,
-  Scripts,
-  createRootRoute,
-} from '@tanstack/react-router'
+import {
+  HeadContent,
+  Outlet,
+  Scripts,
+  createRootRoute,
+} from '@tanstack/react-router'
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 31c2a5d and 6971dfa.

⛔ Files ignored due to path filters (2)
  • examples/react/start-streaming-data-from-server-functions/public/favicon.ico is excluded by !**/*.ico
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (10)
  • docs/router/framework/react/guide/streaming-data-from-server-functions.md (1 hunks)
  • docs/start/framework/react/server-functions.md (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/package.json (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/src/router.tsx (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/src/styles/app.css (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/tsconfig.json (1 hunks)
  • examples/react/start-streaming-data-from-server-functions/vite.config.ts (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • examples/react/start-streaming-data-from-server-functions/src/styles/app.css
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

  • examples/react/start-streaming-data-from-server-functions/src/router.tsx
  • examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
  • examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
  • examples/react/start-streaming-data-from-server-functions/vite.config.ts
  • examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
examples/{react,solid}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep example applications under examples/react/ and examples/solid/

Files:

  • examples/react/start-streaming-data-from-server-functions/src/router.tsx
  • examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
  • examples/react/start-streaming-data-from-server-functions/tsconfig.json
  • examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
  • examples/react/start-streaming-data-from-server-functions/vite.config.ts
  • examples/react/start-streaming-data-from-server-functions/package.json
  • examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
**/src/routes/**

📄 CodeRabbit inference engine (AGENTS.md)

Place file-based routes under src/routes/ directories

Files:

  • examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx
  • examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx
docs/**/*.{md,mdx}

📄 CodeRabbit inference engine (AGENTS.md)

Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)

Files:

  • docs/router/framework/react/guide/streaming-data-from-server-functions.md
  • docs/start/framework/react/server-functions.md
docs/{router,start}/**

📄 CodeRabbit inference engine (AGENTS.md)

Place router docs under docs/router/ and start framework docs under docs/start/

Files:

  • docs/router/framework/react/guide/streaming-data-from-server-functions.md
  • docs/start/framework/react/server-functions.md
**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Use workspace:* protocol for internal dependencies in package.json files

Files:

  • examples/react/start-streaming-data-from-server-functions/package.json
🧠 Learnings (2)
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
PR: TanStack/router#5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.

Applied to files:

  • examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase

Applied to files:

  • examples/react/start-streaming-data-from-server-functions/tsconfig.json
🧬 Code graph analysis (3)
examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts (1)
examples/react/start-streaming-data-from-server-functions/src/router.tsx (1)
  • getRouter (4-14)
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (2)
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (1)
  • Route (95-97)
examples/react/basic-ssr-streaming-file-based/src/routes/__root.tsx (1)
  • RootComponent (58-99)
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (1)
examples/react/start-streaming-data-from-server-functions/src/routes/__root.tsx (1)
  • Route (13-18)
🪛 Biome (2.1.2)
examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx

[error] 86-90: Promise executor functions should not be async.

(lint/suspicious/noAsyncPromiseExecutor)

🪛 markdownlint-cli2 (0.18.1)
docs/start/framework/react/server-functions.md

209-209: Spaces inside link text

(MD039, no-space-in-links)

🔇 Additional comments (8)
examples/react/start-streaming-data-from-server-functions/vite.config.ts (1)

1-17: LGTM!

The Vite configuration is clean and properly structured with the correct plugin order and server settings for the TanStack Start example.

examples/react/start-streaming-data-from-server-functions/src/routes/index.tsx (6)

11-23: LGTM!

The Zod schema accurately models the OpenAI streaming response format with proper typing for content, index, and finish_reason fields.


29-44: LGTM!

The message generation logic correctly creates random numeric messages and validates them against the schema, ensuring type safety throughout the streaming pipeline.


58-74: LGTM!

The typed ReadableStream implementation correctly demonstrates streaming TextPart chunks with simulated latency. The type safety ensures consumers receive properly typed chunks.


105-127: LGTM!

The ReadableStream reader implementation correctly handles the typed stream with proper guards and accumulates content safely.


129-137: LGTM!

The async generator iteration correctly handles the typed stream and accumulates messages with proper type safety.


139-154: LGTM!

The UI component properly demonstrates both streaming approaches with clear button labels and separate display areas for each method.

examples/react/start-streaming-data-from-server-functions/src/routeTree.gen.ts (1)

1-68: Skipping review of autogenerated file.

This file is autogenerated by TanStack Router and should not be manually modified or reviewed. The header comments (lines 7-9) confirm this is generated content that will be overwritten.

Based on learnings

Comment on lines +6 to +10
"scripts": {
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
"start": "vite start"
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix the Vite start script

vite start is not a valid CLI entry point in Vite 7, so npm run start will fail. Switch to vite preview instead.

   "scripts": {
     "dev": "vite dev",
     "build": "vite build && tsc --noEmit",
-    "start": "vite start"
+    "start": "vite preview"
   },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"scripts": {
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
"start": "vite start"
},
"scripts": {
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
"start": "vite preview"
},
🤖 Prompt for AI Agents
examples/react/start-streaming-data-from-server-functions/package.json lines
6-10: the "start" script uses the invalid CLI command "vite start" (Vite v7);
change it to use "vite preview" instead so npm run start runs the correct Vite
preview server after build.

Comment on lines +12 to +18
"@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"
},
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Use workspace protocol for internal TanStack deps

Per the repository guidelines, internal TanStack packages in examples should reference local workspaces to avoid mismatched registry installs.

-    "@tanstack/react-router": "^1.132.33",
-    "@tanstack/react-router-devtools": "^1.132.33",
-    "@tanstack/react-start": "^1.132.36",
+    "@tanstack/react-router": "workspace:*",
+    "@tanstack/react-router-devtools": "workspace:*",
+    "@tanstack/react-start": "workspace:*",

As per coding guidelines.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"@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"
},
"dependencies": {
"@tanstack/react-router": "workspace:*",
"@tanstack/react-router-devtools": "workspace:*",
"@tanstack/react-start": "workspace:*",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"zod": "^3.24.2"
},
🤖 Prompt for AI Agents
In examples/react/start-streaming-data-from-server-functions/package.json around
lines 12 to 18, the three internal TanStack deps (@tanstack/react-router,
@tanstack/react-router-devtools, @tanstack/react-start) are pinned to registry
versions; change them to use the workspace protocol (e.g. "workspace:*") so the
example resolves local monorepo packages instead of installing mismatched
registry versions, leave react, react-dom and zod unchanged, and run
install/lockfile update afterwards.

Copy link
Contributor

@schiller-manuel schiller-manuel Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai all our examples use the versioned packages instead of local references since we need those examples to be runnable on its own (e.g. when using gitpick)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i mistyped, i meant you @coderabbitai

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schiller-manuel, thank you for the clarification! I apologize for the incorrect suggestion. You're absolutely right that examples need to use versioned packages to remain runnable as standalone projects (e.g., via gitpick).

I have a learning in my knowledge base that suggests using workspace:* protocol for internal dependencies in package.json files, but it doesn't account for examples. Would you like me to:

  1. Remove that learning entirely, or
  2. Keep it but add a new learning that examples should use versioned packages instead of workspace protocol?

I want to make sure I get this right for future reviews!


🧠 Learnings used
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/package.json : Use workspace:* protocol for internal dependencies in package.json files

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep it but add a new learning that examples should use versioned packages instead of workspace protocol?

const router = createRouter({
routeTree,
defaultPreload: 'intent',
defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Consider security implications of displaying raw error stack.

Displaying err.error.stack directly in the UI could expose sensitive information (file paths, internal structure, etc.) in production. For a demo/example this is acceptable, but consider adding a comment noting this should be replaced with a user-friendly error message in production.

Apply this diff to add a clarifying comment:

-    defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
+    // Note: In production, avoid displaying raw stack traces to users
+    defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
// Note: In production, avoid displaying raw stack traces to users
defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
🤖 Prompt for AI Agents
In examples/react/start-streaming-data-from-server-functions/src/router.tsx
around line 8, the defaultErrorComponent currently renders err.error.stack
directly which can leak sensitive internals; add an inline comment above or next
to this line noting that showing raw error stacks is only acceptable in demos
and must be replaced in production with a generic/user-friendly message (and
consider logging the full stack server-side instead).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai this is just a demo, not a production app, so ignore this

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schiller-manuel, you're absolutely right! I understand this is a demo example, and displaying the raw error stack is perfectly appropriate for educational purposes. I'll make a note of this for future reviews of example code. Thank you for the clarification!


✏️ Learnings added
Learnt from: schiller-manuel
PR: TanStack/router#5363
File: examples/react/start-streaming-data-from-server-functions/src/router.tsx:8-8
Timestamp: 2025-10-05T20:43:54.644Z
Learning: For code in example or demo directories (e.g., paths containing `examples/`), do not flag production-level security concerns such as displaying raw error stacks, hardcoded credentials for demos, or lack of input validation. Examples are for educational purposes and different standards apply.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

@schiller-manuel schiller-manuel merged commit 42500ce into TanStack:main Oct 6, 2025
6 checks passed
@schiller-manuel
Copy link
Contributor

thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Everything documentation related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants