fix: Fix React Fast Refresh state preservation for auto code-split ro…#7000
fix: Fix React Fast Refresh state preservation for auto code-split ro…#7000schiller-manuel merged 6 commits intomainfrom
Conversation
|
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 (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds stable HMR caching for automatically code-split route components, extracts shared Playwright dev-server warmup utilities, and scaffolds an HMR-focused E2E React app with tests that validate state preservation across hot updates. Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Dev Server
participant Compiler as Router Plugin Compiler
participant Browser as Browser (Playwright Page)
participant HMR as import.meta.hot
participant Router as Router (window.__TSR_ROUTER__)
Dev->>Compiler: Build -> produce split importers
Browser->>Dev: Initial navigation / load
Browser->>Router: Render route -> lazy split component
Note right of Dev: Developer edits route file
Dev->>HMR: HMR update triggered
HMR->>HMR: Read import.meta.hot.data["tsr-split-component:<name>"]
alt cached component present
HMR->>Browser: Reuse cached TSRSplitComponent (preserve instance/state)
else
HMR->>Compiler: Re-evaluate lazyRouteComponent importer -> new component
end
HMR->>HMR: Persist resolved component into import.meta.hot.data
HMR->>Router: Invoke hot-accept handler with new Route
Router->>Router: Replace route entries, clear caches, update segment tree
Router->>Browser: Re-render route (state preserved via cached component)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit e462090
☁️ Nx Cloud last updated this comment at |
…ute components during HMR updates
🚀 Changeset Version Preview1 package(s) bumped directly, 5 bumped as dependents. 🟩 Patch bumps
|
61e62e6 to
5932ab8
Compare
Bundle Size Benchmarks
Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better. |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
e2e/e2e-utils/src/devServerWarmup.ts (1)
31-35: Use a type-only import for thePagetype.ESLint flags the inline
import()type annotation. Extract the type import at the top of the file for consistency with@typescript-eslint/consistent-type-imports.♻️ Proposed fix
Add at the top of the file:
import type { Page } from '@playwright/test'Then update the function signature:
export async function preOptimizeDevServer(opts: { baseURL: string readyTestId?: string - warmup?: (page: import('@playwright/test').Page) => Promise<void> + warmup?: (page: Page) => Promise<void> }) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@e2e/e2e-utils/src/devServerWarmup.ts` around lines 31 - 35, The inline import type in the preOptimizeDevServer parameter should be replaced with a top-level type-only import to satisfy consistent-type-imports; add a top-level `import type { Page } from '@playwright/test'` and change the function signature's warmup parameter to use `Page` (i.e., warmup?: (page: Page) => Promise<void>), updating references in preOptimizeDevServer accordingly.packages/router-plugin/src/core/code-splitter/compilers.ts (1)
858-869: Pass an immutablesplitNodeMetainto compiler plugins.
splitNodeMetais read straight from the module-levelSPLIT_NODES_CONFIGmap and then handed to plugins. An accidental mutation in a plugin would leak into later properties and later files because that object instance is shared. Passing a shallow clone here would make the new extension point safer.♻️ Possible hardening
- const pluginPropValue = plugin.onSplitRouteProperty?.( - { - programPath, - callExpressionPath: path, - insertionPath, - routeOptions, - prop, - splitNodeMeta, - lazyRouteComponentIdent: - LAZY_ROUTE_COMPONENT_IDENT, - }, - ) + const pluginPropValue = plugin.onSplitRouteProperty?.( + { + programPath, + callExpressionPath: path, + insertionPath, + routeOptions, + prop, + splitNodeMeta: { ...splitNodeMeta }, + lazyRouteComponentIdent: + LAZY_ROUTE_COMPONENT_IDENT, + }, + )🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/router-plugin/src/core/code-splitter/compilers.ts` around lines 858 - 869, The code passes the raw splitNodeMeta (sourced from the module-level SPLIT_NODES_CONFIG) into compiler plugins, risking accidental mutation across files; instead, create and pass a shallow clone (e.g., via Object.assign({}, splitNodeMeta) or {...splitNodeMeta}) when calling each plugin in the loop that invokes opts.compilerPlugins and their onSplitRouteProperty callback so plugins receive an immutable copy; ensure the change is applied where splitNodeMeta is supplied to onSplitRouteProperty in compilers.ts so the original SPLIT_NODES_CONFIG entry is not mutated.e2e/react-start/hmr/tests/app.spec.ts (1)
13-20: Make the HMR file edit fail when the token is ambiguous.
source.replace(from, to)only rewrites the first match. Ifbaselineorupdatedappears elsewhere in the route file later, this test can silently mutate the wrong spot and send you chasing a fake HMR failure.🛠️ Proposed hardening
async function replaceRouteText(from: string, to: string) { const source = await readFile(routeFile, 'utf8') + const firstIndex = source.indexOf(from) + const lastIndex = source.lastIndexOf(from) - if (!source.includes(from)) { + if (firstIndex === -1) { throw new Error(`Expected route file to include ${JSON.stringify(from)}`) } + if (firstIndex !== lastIndex) { + throw new Error(`Expected a single match for ${JSON.stringify(from)}`) + } await writeFile(routeFile, source.replace(from, to)) }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@e2e/react-start/hmr/tests/app.spec.ts` around lines 13 - 20, In replaceRouteText, the current source.replace(from, to) only changes the first occurrence and can silently edit the wrong spot; instead read the routeFile source, count occurrences of the from token and if count === 0 throw the existing error, if count > 1 throw a new error indicating the token is ambiguous, and only when count === 1 perform the replacement and writeFile; reference replaceRouteText, routeFile, and the from/to parameters when making this change.packages/router-plugin/tests/add-hmr/snapshots/react/[email protected] (1)
23-53: Keep the emitted HMR helper typed under strict TS.
oldRoute,newRoute,route, andnodeare implicitanys here. If this snapshot is meant to reflect the generated*.tsxoutput, deriving these fromtypeof Route/typeof router.processedTree.segmentTreewould keep the HMR path type-safe.
As per coding guidelines,**/*.{ts,tsx}: Use TypeScript strict mode with extensive type safety.🔎 One low-friction way to keep the types
- (function handleRouteUpdate(oldRoute, newRoute) { + (function handleRouteUpdate( + oldRoute: typeof Route, + newRoute: typeof Route, + ) { @@ - function walkReplaceSegmentTree(route, node) { + function walkReplaceSegmentTree( + route: typeof Route, + node: typeof router.processedTree.segmentTree, + ) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/router-plugin/tests/add-hmr/snapshots/react/multi-component`@true.tsx around lines 23 - 53, The helper emits untyped parameters (oldRoute, newRoute, route, node) causing implicit any under strict TS; annotate handleRouteUpdate and its inner walkReplaceSegmentTree with explicit types derived from your runtime shapes (e.g., use the Route type for oldRoute/newRoute/route and the SegmentTree node type for node — you can import or declare a RouteLike and SegmentNodeLike interface matching router.processedTree.segmentTree), and add those types to the function signatures (handleRouteUpdate(oldRoute: RouteLike, newRoute: RouteLike) and walkReplaceSegmentTree(route: RouteLike, node: SegmentNodeLike) and any variables like filter as needed) so the snapshot emits strictly-typed TS code.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@e2e/react-start/hmr/package.json`:
- Around line 13-20: The package.json uses the non-canonical internal workspace
specifier `workspace:^` for internal packages; update the dependency entries for
"@tanstack/react-router", "@tanstack/react-start" and
"@tanstack/router-e2e-utils" (and any other internal deps using `workspace:^`)
to use the canonical `workspace:*` specifier to match repo conventions and avoid
manifest churn.
In `@e2e/react-start/hmr/tests/app.spec.ts`:
- Around line 1-4: ESLint import/order is violated: move the built-in Node
"node:" imports (readFile, writeFile from 'node:fs/promises' and path from
'node:path') above the external package imports (expect from '@playwright/test'
and test from '@tanstack/router-e2e-utils'); reorder the import statements so
the node: imports come first to satisfy import/order (locate the imports at the
top of app.spec.ts where readFile, writeFile, path, expect, and test are
declared).
In
`@packages/router-plugin/src/core/code-splitter/plugins/react-stable-hmr-split-route-components.ts`:
- Around line 37-43: The early-return only allows identifier keys, skipping
quoted keys like 'component' or 'errorComponent'; update the check around
ctx.prop.key and REACT_STABLE_HMR_COMPONENT_IDENTS so it accepts both Identifier
and StringLiteral keys by extracting the key name (use ctx.prop.key.name for
Identifier and ctx.prop.key.value for StringLiteral) and testing that string
against REACT_STABLE_HMR_COMPONENT_IDENTS instead of relying solely on
t.isIdentifier; keep the existing t import checks but branch to handle string
literals before returning.
---
Nitpick comments:
In `@e2e/e2e-utils/src/devServerWarmup.ts`:
- Around line 31-35: The inline import type in the preOptimizeDevServer
parameter should be replaced with a top-level type-only import to satisfy
consistent-type-imports; add a top-level `import type { Page } from
'@playwright/test'` and change the function signature's warmup parameter to use
`Page` (i.e., warmup?: (page: Page) => Promise<void>), updating references in
preOptimizeDevServer accordingly.
In `@e2e/react-start/hmr/tests/app.spec.ts`:
- Around line 13-20: In replaceRouteText, the current source.replace(from, to)
only changes the first occurrence and can silently edit the wrong spot; instead
read the routeFile source, count occurrences of the from token and if count ===
0 throw the existing error, if count > 1 throw a new error indicating the token
is ambiguous, and only when count === 1 perform the replacement and writeFile;
reference replaceRouteText, routeFile, and the from/to parameters when making
this change.
In `@packages/router-plugin/src/core/code-splitter/compilers.ts`:
- Around line 858-869: The code passes the raw splitNodeMeta (sourced from the
module-level SPLIT_NODES_CONFIG) into compiler plugins, risking accidental
mutation across files; instead, create and pass a shallow clone (e.g., via
Object.assign({}, splitNodeMeta) or {...splitNodeMeta}) when calling each plugin
in the loop that invokes opts.compilerPlugins and their onSplitRouteProperty
callback so plugins receive an immutable copy; ensure the change is applied
where splitNodeMeta is supplied to onSplitRouteProperty in compilers.ts so the
original SPLIT_NODES_CONFIG entry is not mutated.
In
`@packages/router-plugin/tests/add-hmr/snapshots/react/multi-component`@true.tsx:
- Around line 23-53: The helper emits untyped parameters (oldRoute, newRoute,
route, node) causing implicit any under strict TS; annotate handleRouteUpdate
and its inner walkReplaceSegmentTree with explicit types derived from your
runtime shapes (e.g., use the Route type for oldRoute/newRoute/route and the
SegmentTree node type for node — you can import or declare a RouteLike and
SegmentNodeLike interface matching router.processedTree.segmentTree), and add
those types to the function signatures (handleRouteUpdate(oldRoute: RouteLike,
newRoute: RouteLike) and walkReplaceSegmentTree(route: RouteLike, node:
SegmentNodeLike) and any variables like filter as needed) so the snapshot emits
strictly-typed TS code.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ecc6131e-86e7-439e-a2f2-d9e2f3e92f17
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (33)
.changeset/fair-llamas-tease.mde2e/e2e-utils/src/devServerWarmup.tse2e/e2e-utils/src/index.tse2e/react-start/css-modules/tests/setup/global.setup.tse2e/react-start/dev-ssr-styles/tests/setup/global.setup.tse2e/react-start/hmr/.gitignoree2e/react-start/hmr/package.jsone2e/react-start/hmr/playwright.config.tse2e/react-start/hmr/src/routeTree.gen.tse2e/react-start/hmr/src/router.tsxe2e/react-start/hmr/src/routes/__root.tsxe2e/react-start/hmr/src/routes/index.tsxe2e/react-start/hmr/tests/app.spec.tse2e/react-start/hmr/tests/setup/global.setup.tse2e/react-start/hmr/tests/setup/global.teardown.tse2e/react-start/hmr/tsconfig.jsone2e/react-start/hmr/vite.config.tse2e/react-start/split-base-and-basepath/tests/setup/global.setup.tse2e/solid-start/css-modules/tests/setup/global.setup.tse2e/vue-start/css-modules/tests/setup/global.setup.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-stable-hmr-split-route-components.tspackages/router-plugin/src/core/code-splitter/types.tspackages/router-plugin/src/core/utils.tspackages/router-plugin/tests/add-hmr.test.tspackages/router-plugin/tests/add-hmr/snapshots/react/[email protected]packages/router-plugin/tests/add-hmr/snapshots/react/[email protected]packages/router-plugin/tests/add-hmr/snapshots/react/[email protected]packages/router-plugin/tests/add-hmr/snapshots/react/[email protected]packages/router-plugin/tests/add-hmr/test-files/react/multi-component.tsxpackages/router-plugin/tests/utils.test.ts
| "@tanstack/react-router": "workspace:^", | ||
| "@tanstack/react-start": "workspace:^", | ||
| "react": "^19.0.0", | ||
| "react-dom": "^19.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@playwright/test": "^1.50.1", | ||
| "@tanstack/router-e2e-utils": "workspace:^", |
There was a problem hiding this comment.
Use the repo’s canonical workspace specifier for internal packages.
These internal deps are declared as workspace:^, but the repo convention is workspace:*. Keeping them consistent avoids workspace manifest churn and matches the rest of the repo’s package rules.
🔧 Proposed fix
- "@tanstack/react-router": "workspace:^",
- "@tanstack/react-start": "workspace:^",
+ "@tanstack/react-router": "workspace:*",
+ "@tanstack/react-start": "workspace:*",
@@
- "@tanstack/router-e2e-utils": "workspace:^",
+ "@tanstack/router-e2e-utils": "workspace:*",Based on learnings, "Applies to package.json : Use workspace protocol for internal dependencies (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.
| "@tanstack/react-router": "workspace:^", | |
| "@tanstack/react-start": "workspace:^", | |
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0" | |
| }, | |
| "devDependencies": { | |
| "@playwright/test": "^1.50.1", | |
| "@tanstack/router-e2e-utils": "workspace:^", | |
| "@tanstack/react-router": "workspace:*", | |
| "@tanstack/react-start": "workspace:*", | |
| "react": "^19.0.0", | |
| "react-dom": "^19.0.0" | |
| }, | |
| "devDependencies": { | |
| "@playwright/test": "^1.50.1", | |
| "@tanstack/router-e2e-utils": "workspace:*", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@e2e/react-start/hmr/package.json` around lines 13 - 20, The package.json uses
the non-canonical internal workspace specifier `workspace:^` for internal
packages; update the dependency entries for "@tanstack/react-router",
"@tanstack/react-start" and "@tanstack/router-e2e-utils" (and any other internal
deps using `workspace:^`) to use the canonical `workspace:*` specifier to match
repo conventions and avoid manifest churn.
| import { expect } from '@playwright/test' | ||
| import { test } from '@tanstack/router-e2e-utils' | ||
| import { readFile, writeFile } from 'node:fs/promises' | ||
| import path from 'node:path' |
There was a problem hiding this comment.
Fix the import order before lint blocks this file.
ESLint is already reporting import/order here. Move the node: imports above the package imports.
♻️ Proposed fix
-import { expect } from '@playwright/test'
-import { test } from '@tanstack/router-e2e-utils'
import { readFile, writeFile } from 'node:fs/promises'
import path from 'node:path'
+import { expect } from '@playwright/test'
+import { test } from '@tanstack/router-e2e-utils'📝 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.
| import { expect } from '@playwright/test' | |
| import { test } from '@tanstack/router-e2e-utils' | |
| import { readFile, writeFile } from 'node:fs/promises' | |
| import path from 'node:path' | |
| import { readFile, writeFile } from 'node:fs/promises' | |
| import path from 'node:path' | |
| import { expect } from '@playwright/test' | |
| import { test } from '@tanstack/router-e2e-utils' |
🧰 Tools
🪛 ESLint
[error] 3-3: node:fs/promises import should occur before import of @playwright/test
(import/order)
[error] 4-4: node:path import should occur before import of @playwright/test
(import/order)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@e2e/react-start/hmr/tests/app.spec.ts` around lines 1 - 4, ESLint
import/order is violated: move the built-in Node "node:" imports (readFile,
writeFile from 'node:fs/promises' and path from 'node:path') above the external
package imports (expect from '@playwright/test' and test from
'@tanstack/router-e2e-utils'); reorder the import statements so the node:
imports come first to satisfy import/order (locate the imports at the top of
app.spec.ts where readFile, writeFile, path, expect, and test are declared).
| if (!t.isIdentifier(ctx.prop.key)) { | ||
| return | ||
| } | ||
|
|
||
| if (!REACT_STABLE_HMR_COMPONENT_IDENTS.has(ctx.prop.key.name)) { | ||
| return | ||
| } |
There was a problem hiding this comment.
Handle quoted route property keys too.
This early-return path skips semantically equivalent route options like { 'component': ... } or { 'errorComponent': ... }, so the new HMR preservation logic only applies to identifier keys.
🐛 Proposed fix
- if (!t.isIdentifier(ctx.prop.key)) {
- return
- }
-
- if (!REACT_STABLE_HMR_COMPONENT_IDENTS.has(ctx.prop.key.name)) {
+ const propName = t.isIdentifier(ctx.prop.key)
+ ? ctx.prop.key.name
+ : t.isStringLiteral(ctx.prop.key)
+ ? ctx.prop.key.value
+ : undefined
+
+ if (!propName || !REACT_STABLE_HMR_COMPONENT_IDENTS.has(propName)) {
return
}📝 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.
| if (!t.isIdentifier(ctx.prop.key)) { | |
| return | |
| } | |
| if (!REACT_STABLE_HMR_COMPONENT_IDENTS.has(ctx.prop.key.name)) { | |
| return | |
| } | |
| const propName = t.isIdentifier(ctx.prop.key) | |
| ? ctx.prop.key.name | |
| : t.isStringLiteral(ctx.prop.key) | |
| ? ctx.prop.key.value | |
| : undefined | |
| if (!propName || !REACT_STABLE_HMR_COMPONENT_IDENTS.has(propName)) { | |
| return | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@packages/router-plugin/src/core/code-splitter/plugins/react-stable-hmr-split-route-components.ts`
around lines 37 - 43, The early-return only allows identifier keys, skipping
quoted keys like 'component' or 'errorComponent'; update the check around
ctx.prop.key and REACT_STABLE_HMR_COMPONENT_IDENTS so it accepts both Identifier
and StringLiteral keys by extracting the key name (use ctx.prop.key.name for
Identifier and ctx.prop.key.value for StringLiteral) and testing that string
against REACT_STABLE_HMR_COMPONENT_IDENTS instead of relying solely on
t.isIdentifier; keep the existing t import checks but branch to handle string
literals before returning.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
e2e/e2e-utils/src/devServerWarmup.ts (1)
1-1: Use type-only import forPageand fix alphabetical order.ESLint reports that
Pageis only used as a type annotation (in theoptsparameter on line 34). Split it into a separate type import to satisfy@typescript-eslint/consistent-type-importsand fix the alphabetical ordering.♻️ Proposed fix
-import { chromium, Page } from '@playwright/test' +import { chromium } from '@playwright/test' +import type { Page } from '@playwright/test'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@e2e/e2e-utils/src/devServerWarmup.ts` at line 1, Split the combined import so that Page is imported as a type-only import and ensure the named imports are in alphabetical order: replace the single line "import { chromium, Page } from '@playwright/test'" with two imports—one value import for chromium and one type import for Page—so the type-only import satisfies `@typescript-eslint/consistent-type-imports` and the named imports are alphabetized; update references to Page used in the opts parameter (function with parameter named opts) accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@e2e/e2e-utils/src/devServerWarmup.ts`:
- Line 1: Split the combined import so that Page is imported as a type-only
import and ensure the named imports are in alphabetical order: replace the
single line "import { chromium, Page } from '@playwright/test'" with two
imports—one value import for chromium and one type import for Page—so the
type-only import satisfies `@typescript-eslint/consistent-type-imports` and the
named imports are alphabetized; update references to Page used in the opts
parameter (function with parameter named opts) accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 525dc1dc-4c4f-442a-aa04-7d0984859363
📒 Files selected for processing (4)
e2e/e2e-utils/src/devServerWarmup.tse2e/react-start/hmr/src/routes/index.tsxe2e/react-start/hmr/tests/app.spec.tse2e/react-start/hmr/tests/setup/global.setup.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- e2e/react-start/hmr/tests/setup/global.setup.ts
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@packages/router-plugin/tests/add-hmr/test-files/react/string-literal-keys.tsx`:
- Around line 5-9: The fixture uses identifier property keys (loader, component,
errorComponent) so it doesn't exercise quoted-key parsing; update the object
passed to createFileRoute('/posts') so those properties are written as
string-literal keys — e.g. use "loader": fetchPosts, "component":
PostsComponent, and "errorComponent": PostsErrorComponent while keeping the same
values and Route/createFileRoute call intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 89ef47de-c091-4685-bdc3-a4dc8caaf007
📒 Files selected for processing (6)
e2e/e2e-utils/src/devServerWarmup.tspackages/router-plugin/src/core/code-splitter/compilers.tspackages/router-plugin/src/core/code-splitter/plugins/react-stable-hmr-split-route-components.tspackages/router-plugin/tests/add-hmr/snapshots/react/[email protected]packages/router-plugin/tests/add-hmr/snapshots/react/[email protected]packages/router-plugin/tests/add-hmr/test-files/react/string-literal-keys.tsx
✅ Files skipped from review due to trivial changes (1)
- packages/router-plugin/tests/add-hmr/snapshots/react/[email protected]
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/router-plugin/src/core/code-splitter/compilers.ts
- e2e/e2e-utils/src/devServerWarmup.ts
| export const Route = createFileRoute('/posts')({ | ||
| loader: fetchPosts, | ||
| component: PostsComponent, | ||
| errorComponent: PostsErrorComponent, | ||
| }) |
There was a problem hiding this comment.
Use actual string-literal property keys in this fixture.
Line 7 and Line 8 currently use identifier keys, so this fixture does not directly exercise quoted-key input behavior despite its purpose/name.
✅ Suggested fixture update
export const Route = createFileRoute('/posts')({
loader: fetchPosts,
- component: PostsComponent,
- errorComponent: PostsErrorComponent,
+ 'component': PostsComponent,
+ 'errorComponent': PostsErrorComponent,
})📝 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.
| export const Route = createFileRoute('/posts')({ | |
| loader: fetchPosts, | |
| component: PostsComponent, | |
| errorComponent: PostsErrorComponent, | |
| }) | |
| export const Route = createFileRoute('/posts')({ | |
| loader: fetchPosts, | |
| 'component': PostsComponent, | |
| 'errorComponent': PostsErrorComponent, | |
| }) |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@packages/router-plugin/tests/add-hmr/test-files/react/string-literal-keys.tsx`
around lines 5 - 9, The fixture uses identifier property keys (loader,
component, errorComponent) so it doesn't exercise quoted-key parsing; update the
object passed to createFileRoute('/posts') so those properties are written as
string-literal keys — e.g. use "loader": fetchPosts, "component":
PostsComponent, and "errorComponent": PostsErrorComponent while keeping the same
values and Route/createFileRoute call intact.
…ute components during HMR updates
Summary by CodeRabbit
Bug Fixes
New Features
Tests