feat(rsbuild): add RSC support#7366
Open
SyMind wants to merge 14 commits into
Open
Conversation
Contributor
📝 WalkthroughWalkthroughThis PR upgrades Rsbuild from ^2.0.1 to ^2.0.6 across the test, example, and package suite, pins Rspack to a specific canary version, implements RSC Flight stream parsing for client reference preload collection during SSR, introduces a configurable assets directory structure, and updates CSS stylesheet link collection to require explicit markup. ChangesRsbuild 2.0.6 Upgrade & RSC Flight Preload Collection
Sequence DiagramsequenceDiagram
participant SSRRenderer as SSR Renderer
participant Wrapper as createFromReadableStreamCollectingClientPreloads
participant Stream as ReadableStream
participant Decoder as createFromReadableStream
participant Scanner as collectClientReferencePreloads
participant Callback as onClientReference
SSRRenderer->>Wrapper: stream, options
Wrapper->>Stream: tee()
Wrapper->>Decoder: branch1
Wrapper->>Scanner: branch2
par
Decoder-->>Wrapper: decoded RSC
and
loop each buffered row
Scanner->>Scanner: parse metadata
Scanner->>Scanner: extract [id, chunks]
Scanner->>Callback: emit preload info
end
Scanner-->>Wrapper: collection done
end
Wrapper->>SSRRenderer: RSC result
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
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 |
Contributor
Bundle Size Benchmarks
Current gzip tracks all emitted client JS chunks. Initial gzip tracks only the entry/import graph. Trend sparkline is historical current gzip ending with this PR measurement; lower is better. |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/react-start-rsc/src/awaitLazyElements.ts`:
- Around line 37-41: The code assigns el.props.href (of any type) to cssHref and
passes it to cssCollector without a runtime type check; update the logic in
awaitLazyElements (the block using cssHref, cssCollector and the
'data-rsc-css-href' prop) to verify typeof el.props.href === 'string' before
assigning to cssHref or invoking cssCollector, ensuring cssHref remains a string
| undefined and only string values are passed into CssHrefCollector; keep the
existing conditional flow ('data-rsc-css-href' in el.props then cssHref &&
cssCollector) but add the runtime typeof guard to satisfy strict TypeScript
safety.
In `@packages/react-start-rsc/src/rsbuild/ssr-decode.ts`:
- Around line 154-157: The options parameter in
createFromReadableStreamCollectingClientPreloads is weakly typed as object;
replace it with the upstream decoder options type used by
react-server-dom-rspack (import the exact options type from the upstream
createFromReadableStream signature) and use that type for the options parameter
and any related variables so the function matches the upstream API (function
name: createFromReadableStreamCollectingClientPreloads; reference the
createFromReadableStream signature/type from react-server-dom-rspack to import
the correct type and update usages accordingly).
- Around line 178-180: If createFromReadableStream<T>(decodeStream, options)
throws, preloadPromise from the concurrent stream scanner is never awaited which
can produce unhandled rejections; always observe (await or attach a .catch) to
preloadPromise irrespective of success or failure of createFromReadableStream so
the scanner's promise is always settled (e.g., wrap the createFromReadableStream
call in try/finally and await preloadPromise in the finally block or add
preloadPromise.catch(() => {}) before returning/throwing). Also tighten the type
of options (replace the loose options?: object with the exact upstream signature
used by createFromReadableStream) so the function signature matches upstream and
preserves type safety.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: fde7317d-a03e-46de-9164-4c51b448a2c9
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
benchmarks/bundle-size/package.jsone2e/react-router/rspack-basic-file-based/package.jsone2e/react-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/react-start/basic/package.jsone2e/react-start/css-inline/package.jsone2e/react-start/custom-server-rsbuild/package.jsone2e/react-start/hmr/package.jsone2e/react-start/import-protection/package.jsone2e/react-start/rsc/package.jsone2e/react-start/server-functions/package.jsone2e/solid-router/rspack-basic-file-based/package.jsone2e/solid-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/solid-start/basic/package.jsone2e/vue-router/rspack-basic-file-based/package.jsone2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/vue-start/basic/package.jsonexamples/react/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/package.jsonpackage.jsonpackages/react-start-rsc/src/awaitLazyElements.tspackages/react-start-rsc/src/rsbuild/ssr-decode.tspackages/react-start-rsc/src/serialization.server.tspackages/react-start/package.jsonpackages/solid-start/package.jsonpackages/start-plugin-core/package.jsonpackages/start-plugin-core/src/rsbuild/planning.tspackages/start-plugin-core/src/rsbuild/plugin.tspackages/start-plugin-core/src/rsbuild/virtual-modules.tspackages/vue-start/package.json
Comment on lines
+37
to
41
| let cssHref: string | undefined | ||
| if ('data-rsc-css-href' in el.props) { | ||
| cssHref = el.props.href | ||
| } | ||
| if (cssHref && cssCollector) { |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Inspect marker-based href extraction and current lack of string guard.
rg -n -C3 "data-rsc-css-href|cssHref = el.props.href|cssCollector\\(" packages/react-start-rsc/src/awaitLazyElements.tsRepository: TanStack/router
Length of output: 322
🏁 Script executed:
#!/bin/bash
# Get the full function context to understand types
head -80 packages/react-start-rsc/src/awaitLazyElements.ts | tail -80Repository: TanStack/router
Length of output: 2466
🏁 Script executed:
#!/bin/bash
# Search for cssCollector definition and type signature
rg -n "cssCollector" packages/react-start-rsc/src/awaitLazyElements.ts -B 5 -A 5Repository: TanStack/router
Length of output: 1717
🏁 Script executed:
#!/bin/bash
# Look for the function signature and parameter types
rg -n "function|const.*=.*\(" packages/react-start-rsc/src/awaitLazyElements.ts | head -20Repository: TanStack/router
Length of output: 185
Guard href type before sending it to cssCollector.
At line 39, el.props.href comes from any and lacks a runtime type check before assignment to cssHref. Since CssHrefCollector expects (href: string) => void, a non-string value could violate the contract.
Proposed fix
- let cssHref: string | undefined
- if ('data-rsc-css-href' in el.props) {
- cssHref = el.props.href
- }
+ const cssHref =
+ 'data-rsc-css-href' in el.props && typeof el.props.href === 'string'
+ ? el.props.href
+ : undefinedPer coding guidelines, **/*.{ts,tsx} must use TypeScript strict mode with extensive type safety.
📝 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
| let cssHref: string | undefined | |
| if ('data-rsc-css-href' in el.props) { | |
| cssHref = el.props.href | |
| } | |
| if (cssHref && cssCollector) { | |
| const cssHref = | |
| 'data-rsc-css-href' in el.props && typeof el.props.href === 'string' | |
| ? el.props.href | |
| : undefined | |
| if (cssHref && cssCollector) { |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/react-start-rsc/src/awaitLazyElements.ts` around lines 37 - 41, The
code assigns el.props.href (of any type) to cssHref and passes it to
cssCollector without a runtime type check; update the logic in awaitLazyElements
(the block using cssHref, cssCollector and the 'data-rsc-css-href' prop) to
verify typeof el.props.href === 'string' before assigning to cssHref or invoking
cssCollector, ensuring cssHref remains a string | undefined and only string
values are passed into CssHrefCollector; keep the existing conditional flow
('data-rsc-css-href' in el.props then cssHref && cssCollector) but add the
runtime typeof guard to satisfy strict TypeScript safety.
Comment on lines
+154
to
+157
| async function createFromReadableStreamCollectingClientPreloads<T = unknown>( | ||
| stream: ReadableStream<Uint8Array>, | ||
| options?: object, | ||
| ): Promise<T> { |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Confirm weakly typed options signature in this file.
rg -n 'options\\?: object' packages/react-start-rsc/src/rsbuild/ssr-decode.tsRepository: TanStack/router
Length of output: 41
🏁 Script executed:
cat -n packages/react-start-rsc/src/rsbuild/ssr-decode.ts | sed -n '150,160p'Repository: TanStack/router
Length of output: 480
🏁 Script executed:
rg -n 'createFromReadableStream' packages/react-start-rsc/src/rsbuild/ssr-decode.ts -A 2 -B 2Repository: TanStack/router
Length of output: 755
🏁 Script executed:
rg -A 20 '"react-server-dom-rspack"' packages/react-start-rsc/package.jsonRepository: TanStack/router
Length of output: 529
🏁 Script executed:
cat -n packages/react-start-rsc/tsconfig.json | head -20Repository: TanStack/router
Length of output: 322
🏁 Script executed:
cat -n tsconfig.json | head -30Repository: TanStack/router
Length of output: 1043
🏁 Script executed:
rg -n 'createFromReadableStream' packages/react-start-rsc/src/rsbuild/ssr-decode.ts -B 5 -A 5Repository: TanStack/router
Length of output: 1273
Use the upstream decoder options type instead of object.
Line 156 uses weak typing that violates the strict mode requirement. The options parameter should be typed from the upstream createFromReadableStream signature to maintain type safety consistency with react-server-dom-rspack.
Proposed fix
async function createFromReadableStreamCollectingClientPreloads<T = unknown>(
stream: ReadableStream<Uint8Array>,
- options?: object,
+ options?: Parameters<typeof createFromReadableStream>[1],
): Promise<T> {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/react-start-rsc/src/rsbuild/ssr-decode.ts` around lines 154 - 157,
The options parameter in createFromReadableStreamCollectingClientPreloads is
weakly typed as object; replace it with the upstream decoder options type used
by react-server-dom-rspack (import the exact options type from the upstream
createFromReadableStream signature) and use that type for the options parameter
and any related variables so the function matches the upstream API (function
name: createFromReadableStreamCollectingClientPreloads; reference the
createFromReadableStream signature/type from react-server-dom-rspack to import
the correct type and update usages accordingly).
Comment on lines
+178
to
+180
| const result = await createFromReadableStream<T>(decodeStream, options) | ||
| await preloadPromise | ||
| return result |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the wrapper has no try/finally around decode + preloadPromise.
rg -n -C4 'async function createFromReadableStreamCollectingClientPreloads|await createFromReadableStream|await preloadPromise|try|finally|catch' packages/react-start-rsc/src/rsbuild/ssr-decode.tsRepository: TanStack/router
Length of output: 1510
🏁 Script executed:
sed -n '154,181p' packages/react-start-rsc/src/rsbuild/ssr-decode.tsRepository: TanStack/router
Length of output: 1035
🏁 Script executed:
rg -n 'function createFromReadableStream|export.*createFromReadableStream' packages/react-start-rsc/src/rsbuild/ssr-decode.ts -A5Repository: TanStack/router
Length of output: 269
🏁 Script executed:
head -30 packages/react-start-rsc/src/rsbuild/ssr-decode.tsRepository: TanStack/router
Length of output: 641
🏁 Script executed:
rg -n 'createFromReadableStream' packages/react-start-rsc/src/rsbuild/ssr-decode.ts -B2 -A2Repository: TanStack/router
Length of output: 755
🏁 Script executed:
rg -n 'options' packages/react-start-rsc/src/rsbuild/ssr-decode.ts | head -20Repository: TanStack/router
Length of output: 221
🏁 Script executed:
rg -n 'react-server-dom-rspack' packages/react-start-rsc/src/rsbuild/ -B2 -A2Repository: TanStack/router
Length of output: 708
🏁 Script executed:
fd -t f '*.d.ts|*.ts' packages/react-start-rsc/src/ | xargs rg -l 'react-server-dom-rspack' | head -5Repository: TanStack/router
Length of output: 581
🏁 Script executed:
rg -n 'collectClientReferencePreloads' packages/react-start-rsc/src/rsbuild/ssr-decode.ts -B3 -A10Repository: TanStack/router
Length of output: 888
Ensure preload scanner promise is always observed to prevent unhandled rejections.
If createFromReadableStream throws at line 178, the preloadPromise from the concurrent stream scanner is never awaited. This can cause unhandled promise rejections in SSR contexts.
The proposed fix should always observe the preload promise, not just on decode failure:
Improved fix
const result = await createFromReadableStream<T>(decodeStream, options)
- await preloadPromise
- return result
+ try {
+ return result
+ } finally {
+ // Always ensure scanner promise is observed, even if decode fails
+ await preloadPromise.catch(() => {})
+ }Additionally, options?: object should use strict typing to match the upstream createFromReadableStream signature for type safety consistency.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/react-start-rsc/src/rsbuild/ssr-decode.ts` around lines 178 - 180,
If createFromReadableStream<T>(decodeStream, options) throws, preloadPromise
from the concurrent stream scanner is never awaited which can produce unhandled
rejections; always observe (await or attach a .catch) to preloadPromise
irrespective of success or failure of createFromReadableStream so the scanner's
promise is always settled (e.g., wrap the createFromReadableStream call in
try/finally and await preloadPromise in the finally block or add
preloadPromise.catch(() => {}) before returning/throwing). Also tighten the type
of options (replace the loose options?: object with the exact upstream signature
used by createFromReadableStream) so the function signature matches upstream and
preserves type safety.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
data-rsc-css-hrefmarkers, avoiding accidental preinit of ordinary React 19 stylesheet resources.static/*toassets/*subdirectories and update the dev client entry URL accordingly.@rspack/coreto the required canary build for current RSC integration support.Summary by CodeRabbit
Chores
@rsbuild/coredependency to v2.0.6 across build and example projects.@rspack/coreoverride for canary version support.Bug Fixes
Improvements