docs(solid-start): add start-streaming-data-from-server-functions example #5837
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
Contributor
WalkthroughThe PR removes the "Bare" example from the Solid examples configuration list, renames the counter example package, and introduces a new streaming-data-from-server-functions example with complete Solid router scaffolding, TypeScript configuration, and a demonstration of streaming typed chunks via ReadableStream and async generator patterns. Changes
Sequence Diagram(s)sequenceDiagram
participant Client as Browser Client
participant Router as Solid Router
participant IndexRoute as Index Route
participant StreamFn as streamingResponseFn
participant AsyncGenFn as streamingWithAnAsyncGeneratorFn
participant Server as Server
Client->>Router: Navigate to /
Router->>IndexRoute: Render Index Route
IndexRoute->>Client: Display two buttons
Client->>IndexRoute: Click "Get 10 random numbers (ReadableStream)"
IndexRoute->>Server: Call streamingResponseFn
Server->>StreamFn: Create ReadableStream<TextPart>
StreamFn->>StreamFn: Enqueue chunk 1 (500ms delay)
StreamFn-->>IndexRoute: Stream chunk 1
IndexRoute->>Client: Append content to UI state
Note over StreamFn: Repeat for chunks 2-10
StreamFn-->>IndexRoute: Complete stream
Client->>IndexRoute: Click "Get 10 random numbers (Async Generator)"
IndexRoute->>Server: Call streamingWithAnAsyncGeneratorFn
Server->>AsyncGenFn: Create async generator
AsyncGenFn->>AsyncGenFn: Yield chunk 1 (500ms delay)
AsyncGenFn-->>IndexRoute: Yield chunk 1
IndexRoute->>Client: Append content to UI state
Note over AsyncGenFn: Repeat for chunks 2-10
AsyncGenFn-->>IndexRoute: Complete iteration
Client->>Client: Display aggregated results in two pre blocks
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Areas requiring attention:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
|
View your CI Pipeline Execution ↗ for commit 3bf5f49
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
examples/solid/start-counter/package.json (1)
12-14: Useworkspace:*protocol for internal @TanStack dependencies.Internal monorepo packages should reference the workspace version rather than explicit semver versions, as per coding guidelines.
Apply this diff to use the workspace protocol:
"dependencies": { - "@tanstack/solid-router": "^1.135.2", - "@tanstack/solid-router-devtools": "^1.135.2", - "@tanstack/solid-start": "^1.135.2", + "@tanstack/solid-router": "workspace:*", + "@tanstack/solid-router-devtools": "workspace:*", + "@tanstack/solid-start": "workspace:*", "solid-js": "^1.9.10",As per coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
examples/solid/start-counter/public/favicon.icois excluded by!**/*.icoexamples/solid/start-streaming-data-from-server-functions/public/favicon.icois excluded by!**/*.icopnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
docs/start/config.json(0 hunks)examples/solid/start-counter/package.json(1 hunks)examples/solid/start-streaming-data-from-server-functions/package.json(1 hunks)examples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts(1 hunks)examples/solid/start-streaming-data-from-server-functions/src/router.tsx(1 hunks)examples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsx(1 hunks)examples/solid/start-streaming-data-from-server-functions/src/routes/index.tsx(1 hunks)examples/solid/start-streaming-data-from-server-functions/src/styles/app.css(1 hunks)examples/solid/start-streaming-data-from-server-functions/tsconfig.json(1 hunks)examples/solid/start-streaming-data-from-server-functions/vite.config.ts(1 hunks)
💤 Files with no reviewable changes (1)
- docs/start/config.json
🧰 Additional context used
📓 Path-based instructions (4)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/start-streaming-data-from-server-functions/package.jsonexamples/solid/start-counter/package.json
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/start-streaming-data-from-server-functions/package.jsonexamples/solid/start-counter/package.jsonexamples/solid/start-streaming-data-from-server-functions/src/routes/index.tsxexamples/solid/start-streaming-data-from-server-functions/src/router.tsxexamples/solid/start-streaming-data-from-server-functions/tsconfig.jsonexamples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsxexamples/solid/start-streaming-data-from-server-functions/vite.config.tsexamples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.tsexamples/solid/start-streaming-data-from-server-functions/src/styles/app.css
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/start-streaming-data-from-server-functions/src/routes/index.tsxexamples/solid/start-streaming-data-from-server-functions/src/router.tsxexamples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsxexamples/solid/start-streaming-data-from-server-functions/vite.config.tsexamples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/start-streaming-data-from-server-functions/src/routes/index.tsxexamples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/solid/start-streaming-data-from-server-functions/package.jsonexamples/solid/start-streaming-data-from-server-functions/tsconfig.jsonexamples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsxexamples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/solid/start-streaming-data-from-server-functions/package.jsonexamples/solid/start-streaming-data-from-server-functions/src/router.tsxexamples/solid/start-streaming-data-from-server-functions/tsconfig.jsonexamples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsxexamples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/solid/start-streaming-data-from-server-functions/src/router.tsxexamples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/start-streaming-data-from-server-functions/src/router.tsxexamples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 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/solid/start-streaming-data-from-server-functions/tsconfig.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 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/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts
🧬 Code graph analysis (3)
examples/solid/start-streaming-data-from-server-functions/src/routes/index.tsx (1)
examples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsx (1)
Route(13-18)
examples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsx (1)
examples/solid/start-streaming-data-from-server-functions/src/routes/index.tsx (1)
Route(91-93)
examples/solid/start-streaming-data-from-server-functions/src/routeTree.gen.ts (1)
examples/solid/start-streaming-data-from-server-functions/src/router.tsx (1)
getRouter(4-14)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (1)
examples/solid/start-counter/package.json (1)
2-2: Package name aligns with directory structure.The rename from "tanstack-solid-start-example-bare" to "tanstack-solid-start-example-counter" correctly reflects the new directory name and maintains consistency with naming conventions.
Comment on lines
+7
to
+9
| "dev": "vite dev", | ||
| "build": "vite build && tsc --noEmit", | ||
| "start": "vite start" |
Contributor
There was a problem hiding this comment.
Fix the production preview script.
Vite exposes dev, build, and preview; there is no vite start, so npm run start will fail at runtime. Switch to vite preview to align with the documented CLI.(vite.dev)
- "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
| "dev": "vite dev", | |
| "build": "vite build && tsc --noEmit", | |
| "start": "vite start" | |
| "dev": "vite dev", | |
| "build": "vite build && tsc --noEmit", | |
| "start": "vite preview" |
🤖 Prompt for AI Agents
In examples/solid/start-streaming-data-from-server-functions/package.json around
lines 7 to 9, the "start" script is using the non-existent "vite start" CLI
which will fail; update the "start" script to use "vite preview" (e.g., "start":
"vite preview") so npm run start runs Vite's production preview, keeping the
existing "build" and "dev" scripts unchanged.
Comment on lines
+12
to
+17
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/solid-start": "^1.135.2", | ||
| "solid-js": "^1.9.10", | ||
| "zod": "^3.24.2" | ||
| }, |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace protocol for in-repo packages.
The @TanStack packages are part of this monorepo, so the dependencies here should point to workspace:* instead of published semver ranges. This keeps the example pinned to the local sources during development and satisfies the repo’s package.json guideline. As per coding guidelines.
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/solid-start": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/solid-start": "workspace:*",📝 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/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/solid-start": "^1.135.2", | |
| "solid-js": "^1.9.10", | |
| "zod": "^3.24.2" | |
| }, | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/solid-start": "workspace:*", | |
| "solid-js": "^1.9.10", | |
| "zod": "^3.24.2" | |
| }, |
🤖 Prompt for AI Agents
In examples/solid/start-streaming-data-from-server-functions/package.json around
lines 12 to 17, the @tanstack dependencies use published semver ranges; replace
each @tanstack/* entry to use the workspace protocol (e.g., "workspace:*") so
the package points to the in-repo packages instead of external releases, and
keep other deps (solid-js, zod) unchanged.
Comment on lines
+31
to
+37
| <head> | ||
| <HydrationScript /> | ||
| </head> | ||
| <body> | ||
| <HeadContent /> | ||
| {children} | ||
| <TanStackRouterDevtools position="bottom-right" /> |
Contributor
There was a problem hiding this comment.
Move HeadContent into <head>.
HeadContent renders <title>, meta tags, and links; keeping it in <body> produces invalid markup and prevents browsers from treating those tags as head elements. Render it inside <head> alongside HydrationScript, and leave <body> for app content/devtools.
- <html>
- <head>
- <HydrationScript />
- </head>
- <body>
- <HeadContent />
+ <html>
+ <head>
+ <HydrationScript />
+ <HeadContent />
+ </head>
+ <body>
{children}📝 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
| <head> | |
| <HydrationScript /> | |
| </head> | |
| <body> | |
| <HeadContent /> | |
| {children} | |
| <TanStackRouterDevtools position="bottom-right" /> | |
| <head> | |
| <HydrationScript /> | |
| <HeadContent /> | |
| </head> | |
| <body> | |
| {children} | |
| <TanStackRouterDevtools position="bottom-right" /> |
🤖 Prompt for AI Agents
In
examples/solid/start-streaming-data-from-server-functions/src/routes/__root.tsx
around lines 31 to 37, HeadContent is being rendered inside the <body> which
places <title>, meta and link tags in the body; move the <HeadContent />
component into the <head> section next to <HydrationScript /> so those tags are
output inside the document head and leave the <body> to contain {children} and
the TanStackRouterDevtools.
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.
Adds
Tracking
Summary by CodeRabbit
New Features
Documentation