examples: Add a new TanStack Start example for typed readable streams #5363
+354
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
View your CI Pipeline Execution ↗ for commit 5d18df4
☁️ Nx Cloud last updated this comment at |
|
Warning Rate limit exceeded@fulopkovacs has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 21 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (8)
WalkthroughAdds a new React + TanStack Start example app showcasing a typed ReadableStream. Introduces project scaffolding (package, TypeScript, Vite), generated file-based route tree, a router factory, root route/layout, a streaming index route with zod-typed chunks, basic styles, and Vite config. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant C as Client UI (Index Route)
participant S as Server (streamingResponseFn)
U->>C: Click "Start streaming"
C->>S: GET /stream (invoke streamingResponseFn)
activate S
note right of S: Create ReadableStream<TextPart><br/>Enqueue 10 typed chunks<br/>~500ms between chunks
S-->>C: Response with ReadableStream<TextPart>
deactivate S
activate C
loop While not done
C->>C: reader.read()<br/>validate chunk (has delta.content)
C->>C: Append content to state
note over C: UI re-renders with accumulated text
end
deactivate C
note over U,C: User sees streaming text appear incrementally
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
examples/react/start-typed-readable-stream/public/favicon.icois 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.jsonexamples/react/start-typed-readable-stream/src/routes/__root.tsxexamples/react/start-typed-readable-stream/vite.config.tsexamples/react/start-typed-readable-stream/src/routes/index.tsxexamples/react/start-typed-readable-stream/src/routeTree.gen.tsexamples/react/start-typed-readable-stream/package.jsonexamples/react/start-typed-readable-stream/src/styles/app.cssexamples/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.tsxexamples/react/start-typed-readable-stream/vite.config.tsexamples/react/start-typed-readable-stream/src/routes/index.tsxexamples/react/start-typed-readable-stream/src/routeTree.gen.tsexamples/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.tsxexamples/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.
examples/react/start-typed-readable-stream/src/routes/__root.tsx
Outdated
Show resolved
Hide resolved
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() | ||
| }, |
There was a problem hiding this comment.
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
force-pushed
the
add-typed-readable-stream-example
branch
2 times, most recently
from
b423956 to
f80fc07
Compare
fulopkovacs
force-pushed
the
add-typed-readable-stream-example
branch
from
f80fc07 to
5d18df4
Compare
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
|
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
Style
Chores