fix(router-plugin): preserve HMR state for lowercase split components#7855
Conversation
|
View your CI Pipeline Execution ↗ for commit efe5206
☁️ Nx Cloud last updated this comment at |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughChangesThe router plugin now transforms lowercase React route component bindings for Fast Refresh across regular and code-split routes. Compiler plugin hooks and production detection were updated, with unit, snapshot, and end-to-end tests covering generated output, HMR updates, and state preservation. Lowercase component HMR
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant RouteModule
participant RouterCodeSplitter
participant ReactRefreshPlugin
participant ReactRuntime
RouteModule->>RouterCodeSplitter: compile route and split components
RouterCodeSplitter->>ReactRefreshPlugin: process route options and split nodes
ReactRefreshPlugin->>RouterCodeSplitter: emit refresh-safe component bindings
RouterCodeSplitter->>ReactRuntime: deliver updated HMR module
ReactRuntime->>ReactRuntime: preserve component state and render updates
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
🚀 Changeset Version Preview1 package(s) bumped directly, 6 bumped as dependents. 🟩 Patch bumps
|
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. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/router-plugin/tests/router-plugin-context.test.ts`:
- Line 126: Stub process.env.NODE_ENV to "production" before creating the
production plugin in the createRouterCodeSplitterPlugin test setup, and restore
the original environment value in a finally block. Keep the non-production test
behavior unchanged and ensure the stub covers plugin factory creation, not
merely configurePlugin.
🪄 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: 6965db7f-a636-4a53-a039-d037bc6b2686
📒 Files selected for processing (36)
.changeset/fresh-routes-refresh.mde2e/react-start/hmr/src/routeTree.gen.tse2e/react-start/hmr/src/routes/__root.tsxe2e/react-start/hmr/src/routes/component-hmr-lowercase-named-split.tsxe2e/react-start/hmr/tests/app.spec.tspackages/router-plugin/src/core/code-splitter/compilers.tspackages/router-plugin/src/core/code-splitter/plugins.tspackages/router-plugin/src/core/code-splitter/plugins/framework-plugins.tspackages/router-plugin/src/core/code-splitter/plugins/react-refresh-route-components.tspackages/router-plugin/src/core/config.tspackages/router-plugin/src/core/router-code-splitter-plugin.tspackages/router-plugin/src/core/router-hmr-plugin.tspackages/router-plugin/src/index.tspackages/router-plugin/tests/add-hmr.test.tspackages/router-plugin/tests/add-hmr/snapshots/react/createFileRoute-lowercase-components@false.tsxpackages/router-plugin/tests/add-hmr/snapshots/react/createFileRoute-lowercase-components@true.tsxpackages/router-plugin/tests/add-hmr/snapshots/react/createRootRoute-lowercase-components@false.tsxpackages/router-plugin/tests/add-hmr/snapshots/react/createRootRoute-lowercase-components@true.tsxpackages/router-plugin/tests/add-hmr/test-files/react/createFileRoute-lowercase-components.tsxpackages/router-plugin/tests/add-hmr/test-files/react/createRootRoute-lowercase-components.tsxpackages/router-plugin/tests/code-splitter.test.tspackages/router-plugin/tests/code-splitter/snapshots/react/1-default/lowercase-function-declaration.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/1-default/lowercase-function-declaration@component.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/1-default/lowercase-function-declaration@errorComponent.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/1-default/lowercase-function-declaration@notFoundComponent.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/1-default/lowercase-function-declaration@shared.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/lowercase-function-declaration.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/lowercase-function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/lowercase-function-declaration@loader.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/2-components-combined-loader-separate/lowercase-function-declaration@shared.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/lowercase-function-declaration.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/lowercase-function-declaration@component---loader---notFoundComponent---pendingComponent.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/lowercase-function-declaration@errorComponent.tsxpackages/router-plugin/tests/code-splitter/snapshots/react/3-all-combined-errorComponent-separate/lowercase-function-declaration@shared.tsxpackages/router-plugin/tests/code-splitter/test-files/react/lowercase-function-declaration.tsxpackages/router-plugin/tests/router-plugin-context.test.ts
Merging this PR will degrade performance by 18.01%
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| ❌ | Memory | mem server serialization-payload (react) |
3.4 MB | 5.2 MB | -33.82% |
| ❌ | Memory | mem server error-paths not-found (solid) |
616.4 KB | 813.6 KB | -24.24% |
| ❌ | Memory | mem server streaming-peak chunked (vue) |
11.1 MB | 13.4 MB | -17.19% |
| ⚡ | Memory | mem server request-churn (react) |
530.9 KB | 487.7 KB | +8.85% |
Tip
Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.
Comparing fix-7737 (f4e1f47) with main (218eab2)
fixes #7737
Summary by CodeRabbit