e2e(vue-router): scroll restoration sandbox vite #6116
Conversation
WalkthroughAdds a complete Vite-based Vue 3 e2e sandbox for testing Vue Router scroll restoration: router setup (including route generation and augmentation), multiple test routes (eager and lazy), a ScrollBlock component, Playwright configs and tests, build/config files, and compiled dist assets. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Tester as Playwright
Tester->>+PreviewServer: start preview (vite preview / build+preview)
PreviewServer->>+App: serve app (index.html + assets)
Tester->>App: navigate to route (click / direct load)
App->>Router: route resolution (file-based routeTree)
Router->>Component: render route component (may lazy-load)
Component->>DummyAPI: optional fetch (fetchPosts/fetchPost)
Component->>App: render ScrollBlock anchors
Tester->>App: assert scroll positions (at-the-top / at-the-bottom)
PreviewServer-->>-Tester: stop
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
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)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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 5884011
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (5)
e2e/vue-router/scroll-restoration-sandbox-vite/.gitignore (1)
1-7: Gitignore patterns look good for Vite + e2e sandbox.The standard patterns for Node.js, build output, and local files are well-covered. Given that this uses Playwright for e2e testing, you may want to consider adding
playwright-report/to ignore generated test reports if you enable HTML reporting.If Playwright reporting is configured, consider adding:
test-results + playwright-report/e2e/vue-router/scroll-restoration-sandbox-vite/README.md (1)
13-16: Clarify setup instructions for better user guidance.The instructions to "update the arrays" lack specificity about which arrays, their expected format, and the directory structure for routes. Consider adding brief examples or referencing the existing route files to guide new contributors.
Example enhancement:
- Make sure you update the arrays in the following files with the expected routes - - `tests/app.spec.ts` > routes array - - `src/routes/__root.tsx` > Nav component, routes array - - `src/routes/index.tsx` > Navigation test suite, routes array + Update route definitions and test references: + - `src/routes/__root.tsx` — Add routes to the Nav component and routes array + - `src/routes/index.tsx` — Register routes in the Navigation test suite and routes array + - `tests/app.spec.ts` — Add route paths to the routes array for e2e testing + + See existing route files in `src/routes/` for examples.e2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsx (1)
3-5: Exportedsleepfunction is not used within this module.The
sleeputility is exported but the actual delay implementations infetchPost(line 23) andfetchPosts(line 39) duplicate the setTimeout pattern inline rather than using this function.e2e/vue-router/scroll-restoration-sandbox-vite/vite.config.js (1)
1-13: Consider using TypeScript for the Vite config.While
.jsconfig files are valid, usingvite.config.tswould align with the project's TypeScript-first approach and provide better type safety for the configuration options.Based on coding guidelines emphasizing TypeScript strict mode with extensive type safety.
e2e/vue-router/scroll-restoration-sandbox-vite/playwright.hash.config.ts (1)
32-32: Consider using consistent command pattern.The webServer command mixes direct
vite buildwithpnpm preview. For consistency with the browser config (which usespnpm build), consider using pnpm for both operations.- command: `VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=hash vite build --outDir dist-hash && VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=hash pnpm preview --port ${PORT} --outDir dist-hash`, + command: `VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=hash pnpm build --outDir dist-hash && VITE_NODE_ENV="test" VITE_EXTERNAL_PORT=${EXTERNAL_PORT} VITE_SERVER_PORT=${PORT} VITE_APP_HISTORY=hash pnpm preview --port ${PORT} --outDir dist-hash`,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (36)
e2e/vue-router/scroll-restoration-sandbox-vite/.gitignore(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/README.md(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-ElfLiipA.css(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-rPfEOKs3.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-page.lazy-BzoMuhUY.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-with-loader-page.lazy-BzLmn584.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/normal-page-BPOVyYTF.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/page-with-search-BhJv4yJI.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/virtual-page.lazy-BCqvdivF.js(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/index.html(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/index.html(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/package.json(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/playwright.browser.config.ts(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/playwright.hash.config.ts(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/postcss.config.mjs(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/main.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/-components/scroll-block.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/src/styles.css(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/test-results/.last-run.json(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.ts(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.ts(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.teardown.ts(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/tsconfig.json(1 hunks)e2e/vue-router/scroll-restoration-sandbox-vite/vite.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript strict mode with extensive type safety for all code
Files:
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/-components/scroll-block.tsxe2e/vue-router/scroll-restoration-sandbox-vite/playwright.browser.config.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.teardown.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsxe2e/vue-router/scroll-restoration-sandbox-vite/playwright.hash.config.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/main.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/__root.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Implement ESLint rules for router best practices using the ESLint plugin router
Files:
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-with-loader-page.lazy-BzLmn584.jse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/-components/scroll-block.tsxe2e/vue-router/scroll-restoration-sandbox-vite/playwright.browser.config.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/vite.config.jse2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.teardown.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsxe2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.jse2e/vue-router/scroll-restoration-sandbox-vite/playwright.hash.config.tse2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/page-with-search-BhJv4yJI.jse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsxe2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-page.lazy-BzoMuhUY.jse2e/vue-router/scroll-restoration-sandbox-vite/src/main.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.tse2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/normal-page-BPOVyYTF.jse2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/virtual-page.lazy-BCqvdivF.jse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/__root.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.tse2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-rPfEOKs3.js
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace protocol
workspace:*for internal dependencies in package.json files
Files:
e2e/vue-router/scroll-restoration-sandbox-vite/package.json
🧠 Learnings (9)
📚 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:
e2e/vue-router/scroll-restoration-sandbox-vite/test-results/.last-run.jsone2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-with-loader-page.lazy-BzLmn584.jse2e/vue-router/scroll-restoration-sandbox-vite/package.jsone2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/README.mde2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.teardown.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-page.lazy-BzoMuhUY.jse2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.tse2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/virtual-page.lazy-BCqvdivF.jse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tsconfig.jsone2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/__root.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Applies to **/*.{js,ts,tsx} : Implement ESLint rules for router best practices using the ESLint plugin router
Applied to files:
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-with-loader-page.lazy-BzLmn584.jse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/main.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/tsconfig.jsone2e/vue-router/scroll-restoration-sandbox-vite/src/routes/__root.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx
📚 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:
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts
📚 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:
e2e/vue-router/scroll-restoration-sandbox-vite/package.jsone2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.ts
📚 Learning: 2025-10-09T12:59:14.842Z
Learnt from: hokkyss
Repo: TanStack/router PR: 5418
File: e2e/react-start/custom-identifier-prefix/public/site.webmanifest:2-3
Timestamp: 2025-10-09T12:59:14.842Z
Learning: In e2e test fixtures (files under e2e directories), empty or placeholder values in configuration files like site.webmanifest are acceptable and should not be flagged unless the test specifically validates those fields.
Applied to files:
e2e/vue-router/scroll-restoration-sandbox-vite/playwright.browser.config.tse2e/vue-router/scroll-restoration-sandbox-vite/playwright.hash.config.tse2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Use file-based routing in `src/routes/` directories or code-based routing with route definitions
Applied to files:
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.tse2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx
📚 Learning: 2025-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsxe2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript strict mode with extensive type safety for all code
Applied to files:
e2e/vue-router/scroll-restoration-sandbox-vite/tsconfig.json
📚 Learning: 2025-10-09T12:59:02.129Z
Learnt from: hokkyss
Repo: TanStack/router PR: 5418
File: e2e/react-start/custom-identifier-prefix/src/styles/app.css:19-21
Timestamp: 2025-10-09T12:59:02.129Z
Learning: In e2e test directories (paths containing `e2e/`), accessibility concerns like outline suppression patterns are less critical since the code is for testing purposes, not production use.
Applied to files:
e2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.ts
🧬 Code graph analysis (11)
e2e/vue-router/scroll-restoration-sandbox-vite/playwright.browser.config.ts (2)
scripts/set-ts-version.js (1)
packageJson(33-33)e2e/e2e-utils/src/index.ts (1)
resolveRuntimeSuffix(4-4)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx (6)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx (1)
Route(4-9)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsx (1)
Route(6-9)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx (1)
Route(4-6)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/page-with-search-BhJv4yJI.js (2)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-BwsVWHwV.js (59)
t(2-2)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)l(10-10)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(18-18)l(18-18)l(18-18)l(18-18)l(18-18)l(18-18)e(10-10)e(10-10)e(14-14)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)o(10-10)o(10-10)o(10-10)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(18-18)o(18-18)o(18-18)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js (1)
o(1-1)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx (5)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx (1)
Route(2-2)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsx (1)
sleep(3-5)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-page.lazy-BzoMuhUY.js (2)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-with-loader-page.lazy-BzLmn584.js (1)
c(1-1)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js (1)
o(1-1)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/normal-page-BPOVyYTF.js (2)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-BwsVWHwV.js (63)
a(10-10)a(10-10)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(18-18)a(18-18)a(18-18)a(18-18)a(18-18)l(10-10)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(18-18)l(18-18)l(18-18)l(18-18)l(18-18)l(18-18)n(6-6)n(6-6)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(14-14)n(14-14)n(14-14)n(14-14)o(10-10)o(10-10)o(10-10)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(18-18)o(18-18)o(18-18)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js (1)
o(1-1)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/virtual-page.lazy-BCqvdivF.js (2)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-BwsVWHwV.js (91)
u(10-10)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(14-14)u(18-18)u(18-18)u(18-18)u(18-18)t(2-2)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)a(10-10)a(10-10)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(18-18)a(18-18)a(18-18)a(18-18)a(18-18)e(10-10)e(10-10)e(14-14)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)l(10-10)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(14-14)l(18-18)l(18-18)l(18-18)l(18-18)l(18-18)l(18-18)o(10-10)o(10-10)o(10-10)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(18-18)o(18-18)o(18-18)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js (1)
o(1-1)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx (3)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx (1)
Route(2-2)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx (1)
Route(4-9)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/-components/scroll-block.tsx (1)
ScrollBlock(4-16)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx (6)
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx (1)
Route(2-2)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx (1)
Route(4-9)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsx (1)
Route(4-6)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsx (1)
Route(6-9)e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsx (1)
Route(4-6)
e2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.ts (1)
e2e/e2e-utils/src/index.ts (1)
toRuntimePath(3-3)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-rPfEOKs3.js (2)
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/index-BwsVWHwV.js (123)
i(2-2)i(2-2)i(10-10)i(10-10)i(10-10)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)i(14-14)e(10-10)e(10-10)e(14-14)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)e(18-18)a(10-10)a(10-10)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(14-14)a(18-18)a(18-18)a(18-18)a(18-18)a(18-18)t(2-2)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(6-6)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)t(10-10)o(10-10)o(10-10)o(10-10)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(14-14)o(18-18)o(18-18)o(18-18)n(6-6)n(6-6)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(10-10)n(14-14)n(14-14)n(14-14)n(14-14)r(10-10)r(10-10)r(10-10)r(10-10)r(10-10)r(10-10)r(10-10)r(14-14)r(14-14)r(14-14)r(14-14)r(14-14)r(14-14)r(14-14)r(14-14)r(14-14)s(6-6)s(6-6)s(6-6)s(6-6)s(10-10)s(10-10)s(10-10)s(10-10)s(10-10)s(10-10)s(10-10)s(10-10)s(14-14)s(14-14)s(14-14)s(14-14)e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js (1)
o(1-1)
🔇 Additional comments (21)
e2e/vue-router/scroll-restoration-sandbox-vite/test-results/.last-run.json (1)
1-4: Verify whether test artifacts should be committed.The
.last-run.jsonfile is a transient, auto-generated Playwright test result artifact. Test result directories (.last-run.json,test-results/) should typically be gitignored rather than committed to the repository to avoid cluttering the PR with machine-generated metadata.Ensure that
test-results/is added to.gitignoreif not already present, so test run artifacts are not tracked in version control.e2e/vue-router/scroll-restoration-sandbox-vite/postcss.config.mjs (1)
1-5: LGTM! Correct Tailwind CSS v4 PostCSS configuration.The configuration correctly uses the
@tailwindcss/postcssplugin, which is the proper syntax for Tailwind CSS v4.e2e/vue-router/scroll-restoration-sandbox-vite/src/styles.css (1)
1-21: LGTM! Correct Tailwind CSS v4 integration.The file correctly uses Tailwind v4 syntax with
@import 'tailwindcss'and properly applies base layer styling with dark mode support.e2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.setup.ts (1)
1-6: LGTM! Clean E2E test setup.The setup correctly initializes the dummy server using the package name identifier. The import assertion syntax is standard ES module syntax.
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.lazy.tsx (1)
1-16: LGTM! Proper lazy route implementation.The lazy route correctly uses
createLazyFileRouteand follows the established pattern for test routes in this sandbox.e2e/vue-router/scroll-restoration-sandbox-vite/tests/setup/global.teardown.ts (1)
1-6: LGTM! Clean E2E test teardown.The teardown correctly stops the dummy server using the package name identifier, mirroring the setup file.
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/scroll-block-BAas_Ct-.js (1)
1-1: Note: Built artifact.This is a generated bundle file. Ensure that the source file (
src/routes/-components/scroll-block.tsx) is corrected, and this bundle will be regenerated on the next build.e2e/vue-router/scroll-restoration-sandbox-vite/index.html (1)
1-11: LGTM!Clean HTML entry point with proper module script loading for the Vue application.
e2e/vue-router/scroll-restoration-sandbox-vite/tsconfig.json (1)
1-16: LGTM!TypeScript configuration properly enables strict mode and includes appropriate settings for Vite, Vue, and JSX. Aligns well with the coding guidelines requiring TypeScript strict mode with extensive type safety.
e2e/vue-router/scroll-restoration-sandbox-vite/src/main.tsx (1)
1-39: LGTM!The router setup is well-structured with proper TypeScript type safety, module augmentation, and scroll restoration enabled (matching the PR objectives). The optional hash history and pre-render check demonstrate defensive coding.
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/normal-page.tsx (1)
1-16: LGTM!The route definition follows the correct file-based routing pattern, and the component implementation is clean and straightforward.
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx (1)
1-16: LGTM!The lazy component definition is correct and follows the expected pattern for split route definitions with loaders.
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx (1)
1-37: Well-structured home component for e2e testing.The route definition and link structure are appropriate for scroll restoration testing. The use of
linkOptionswith hash navigation aligns well with the test objectives.e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/lazy-with-loader-page.lazy-BzLmn584.js (1)
1-1: Remove this comment. The dist-hash files are intentional test fixtures.The local
.gitignorealready properly excludesdist-hash, and these files are intentional fixtures for the e2e test infrastructure (seeplaywright.hash.config.ts). Similar to snapshot files used in testing, these are golden reference files that verify the build output behavior and should remain committed to the repository.e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/virtual-page.lazy.tsx (1)
1-16: LGTM! Clean lazy route implementation.The lazy route follows TanStack Vue Router conventions correctly, and the component structure aligns with other test routes in the sandbox.
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/page-with-search.tsx (1)
1-19: LGTM! Search validation correctly implemented.The route properly validates search parameters using Zod, and the integration with
zodValidatorensures type-safe search parameter handling.e2e/vue-router/scroll-restoration-sandbox-vite/tests/app.spec.ts (1)
1-52: LGTM! Comprehensive scroll restoration test coverage.The test suite effectively validates scroll behavior across multiple navigation scenarios and route types. The use of
waitForTimeout(0)on lines 24, 36, and 49 is acceptable for yielding to the event loop in these e2e tests, though ideally you'd wait for specific conditions instead.e2e/vue-router/scroll-restoration-sandbox-vite/playwright.browser.config.ts (1)
1-44: LGTM! Playwright configuration correctly structured.The browser config properly sets up the test environment with dynamic port allocation, environment variables, and consistent command usage. The configuration pattern is sound and aligns with e2e testing best practices.
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/__root.tsx (1)
1-62: LGTM! Well-structured root component with clean composition.The root route implementation follows TanStack Vue Router best practices with:
- Proper use of
linkOptionsfor type-safe navigation- Reusable
Navcomponent that avoids code duplication- Clean separation between header and footer navigation
- Integrated devtools for development experience
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/virtual-page.lazy-BCqvdivF.js (1)
1-1: Build artifacts should not be committed.The
dist-hash/directory contains build artifacts generated by Vite and should not be committed to the repository. These files bloat the repository, create unnecessary merge conflicts, and can be regenerated from source during the build process.Add the build output directories to
.gitignore:+# Build outputs +dist/ +dist-hash/ +dist-browser/Then remove the committed build artifacts:
#!/bin/bash # Remove all dist-hash build artifacts from the repository git rm -r e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash⛔ Skipped due to learnings
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.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.e2e/vue-router/scroll-restoration-sandbox-vite/src/routeTree.gen.ts (1)
1-10: Autogenerated file — skipping review.This file is automatically generated by TanStack Router and should not be manually modified or reviewed. The file contains appropriate markers (
eslint-disable,@ts-nocheck, and generation comments) indicating its autogenerated nature. Based on learnings,routeTree.gen.tsfiles are excluded from review in TanStack Router repositories.
| @@ -0,0 +1 @@ | |||
| import{a as e,l as t,b as a,L as r,m as s}from"./index-BwsVWHwV.js";function i(){return e("div",{class:"p-2 grid gap-2"},[e("h3",null,[a("Welcome Home!")]),e("p",null,[a("The are the links to be tested when navigating away from the index page. Otherwise known as NOT first-load tests, rather known as navigation tests.")]),[t({to:"/normal-page"}),t({to:"/lazy-page"}),t({to:"/virtual-page"}),t({to:"/lazy-with-loader-page"}),t({to:"/page-with-search",search:{where:"footer"}})].map((o,n)=>e("div",{class:"border p-2"},[e("h4",null,[o.to,a(" tests")]),e("p",null,[e(r,s(o,{hash:"at-the-bottom"}),{default:()=>[o.to,a("#at-the-bottom")]})])]))])}export{i as component}; | |||
There was a problem hiding this comment.
Remove built artifacts from version control.
This file is a minified build artifact with a content-hashed filename (index-rPfEOKs3.js). Build artifacts should not be committed to version control; they should be generated during the build process and excluded via .gitignore. The same applies to all files in the dist-hash directory.
| @@ -0,0 +1 @@ | |||
| import{S as o}from"./scroll-block-BAas_Ct-.js";import{a as l,b as e}from"./index-BwsVWHwV.js";function t(){return l("div",{class:"p-2"},[l("h3",null,[e("page-with-search")]),l("hr",null,null),l(o,null,null)])}export{t as component}; | |||
There was a problem hiding this comment.
Remove built artifacts from version control.
This is a minified build artifact with a content-hashed filename. All files in the dist-hash directory should be excluded from version control via .gitignore.
🤖 Prompt for AI Agents
In
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/assets/page-with-search-BhJv4yJI.js
(line 1), this is a minified build artifact that should not be tracked; remove
the file from the repo and add an appropriate ignore rule (e.g., ignore the
dist-hash folder and/or hashed asset patterns under
e2e/vue-router/scroll-restoration-sandbox-vite) to .gitignore, then run git rm
--cached on the tracked artifact(s) and commit the .gitignore and removal; if
historical removal is required, remove from history with a force rewrite (git
filter-repo or BFG) as a separate step.
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <script type="module" crossorigin src="/assets/index-BwsVWHwV.js"></script> | ||
| <link rel="stylesheet" crossorigin href="/assets/index-ElfLiipA.css"> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
Remove built artifacts from version control.
This HTML file is a build artifact in the dist-hash directory with references to content-hashed assets. Build outputs should not be committed; add the dist-hash directory to .gitignore.
🤖 Prompt for AI Agents
e2e/vue-router/scroll-restoration-sandbox-vite/dist-hash/index.html lines 1-12:
this file is a built artifact and should not be committed; remove the dist-hash
directory from version control and add it to .gitignore so future builds aren’t
tracked. Specifically, delete the tracked dist-hash files from the repo (stop
tracking them), add "dist-hash/" to .gitignore at the repo root (or the
appropriate ignore file), commit the removal and .gitignore change together, and
ensure your CI/dev workflow produces the artifact during build rather than
keeping it in source control.
| "@tanstack/router-plugin": "workspace:^", | ||
| "@tanstack/vue-router": "workspace:^", | ||
| "@tanstack/vue-router-devtools": "workspace:^", | ||
| "@tanstack/zod-adapter": "workspace:^", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace:* protocol for internal dependencies.
The coding guidelines require using workspace:* (not workspace:^) for internal dependencies in package.json files. This ensures exact workspace version resolution across the monorepo.
As per coding guidelines: Use workspace protocol workspace:* for internal dependencies in package.json files
"dependencies": {
"@tailwindcss/postcss": "^4.1.15",
- "@tanstack/router-plugin": "workspace:^",
- "@tanstack/vue-router": "workspace:^",
- "@tanstack/vue-router-devtools": "workspace:^",
- "@tanstack/zod-adapter": "workspace:^",
+ "@tanstack/router-plugin": "workspace:*",
+ "@tanstack/vue-router": "workspace:*",
+ "@tanstack/vue-router-devtools": "workspace:*",
+ "@tanstack/zod-adapter": "workspace:*",
"postcss": "^8.5.1",
"redaxios": "^0.5.1",
"tailwindcss": "^4.1.17",
"vue": "^3.5.16"
},
"devDependencies": {
"@playwright/test": "^1.50.1",
- "@tanstack/router-e2e-utils": "workspace:^",
+ "@tanstack/router-e2e-utils": "workspace:*",
"@vitejs/plugin-vue": "^5.2.3",
"@vitejs/plugin-vue-jsx": "^4.1.2",
"typescript": "~5.8.3",
"vite": "^7.1.7",
"vue-tsc": "^3.1.5"
}Also applies to: 29-29
🤖 Prompt for AI Agents
In e2e/vue-router/scroll-restoration-sandbox-vite/package.json around lines
18-21 (and also line 29), the internal workspace dependencies are using
"workspace:^" which violates the guideline; update those entries to use the
"workspace:*" protocol instead (replace "workspace:^" with "workspace:*" for
@tanstack/router-plugin, @tanstack/vue-router, @tanstack/vue-router-devtools,
@tanstack/zod-adapter and the additional entry at line 29) so the package.json
uses exact workspace version resolution across the monorepo.
| export const fetchPost = async (postId: string) => { | ||
| console.info(`Fetching post with id ${postId}...`) | ||
| await new Promise((r) => setTimeout(r, 500)) | ||
| const post = await axios | ||
| .get<PostType>(`${queryURL}/posts/${postId}`) | ||
| .then((r) => r.data) | ||
| .catch((err) => { | ||
| if (err.status === 404) { | ||
| throw new PostNotFoundError(`Post with id "${postId}" not found!`) | ||
| } | ||
| throw err | ||
| }) | ||
|
|
||
| return post | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use the exported sleep utility to reduce code duplication.
Line 23 duplicates the setTimeout pattern. Use the exported sleep function instead.
Apply this diff:
export const fetchPost = async (postId: string) => {
console.info(`Fetching post with id ${postId}...`)
- await new Promise((r) => setTimeout(r, 500))
+ await sleep(500)
const post = await axios
.get<PostType>(`${queryURL}/posts/${postId}`)📝 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 fetchPost = async (postId: string) => { | |
| console.info(`Fetching post with id ${postId}...`) | |
| await new Promise((r) => setTimeout(r, 500)) | |
| const post = await axios | |
| .get<PostType>(`${queryURL}/posts/${postId}`) | |
| .then((r) => r.data) | |
| .catch((err) => { | |
| if (err.status === 404) { | |
| throw new PostNotFoundError(`Post with id "${postId}" not found!`) | |
| } | |
| throw err | |
| }) | |
| return post | |
| } | |
| export const fetchPost = async (postId: string) => { | |
| console.info(`Fetching post with id ${postId}...`) | |
| await sleep(500) | |
| const post = await axios | |
| .get<PostType>(`${queryURL}/posts/${postId}`) | |
| .then((r) => r.data) | |
| .catch((err) => { | |
| if (err.status === 404) { | |
| throw new PostNotFoundError(`Post with id "${postId}" not found!`) | |
| } | |
| throw err | |
| }) | |
| return post | |
| } |
🤖 Prompt for AI Agents
In e2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsx around lines 21
to 35, the function duplicates the setTimeout promise (await new Promise((r) =>
setTimeout(r, 500))); replace that with the exported sleep utility (await
sleep(500)) and ensure sleep is imported from its module at the top of the file
(add the import if missing). Keep the rest of the function logic unchanged,
preserving error handling for 404 and rethrowing other errors.
| export const fetchPosts = async () => { | ||
| console.info('Fetching posts...') | ||
| await new Promise((r) => setTimeout(r, 500)) | ||
| return axios | ||
| .get<Array<PostType>>(`${queryURL}/posts`) | ||
| .then((r) => r.data.slice(0, 10)) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use the exported sleep utility to reduce code duplication.
Line 39 duplicates the setTimeout pattern. Use the exported sleep function instead.
Apply this diff:
export const fetchPosts = async () => {
console.info('Fetching posts...')
- await new Promise((r) => setTimeout(r, 500))
+ await sleep(500)
return axios
.get<Array<PostType>>(`${queryURL}/posts`)📝 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 fetchPosts = async () => { | |
| console.info('Fetching posts...') | |
| await new Promise((r) => setTimeout(r, 500)) | |
| return axios | |
| .get<Array<PostType>>(`${queryURL}/posts`) | |
| .then((r) => r.data.slice(0, 10)) | |
| } | |
| export const fetchPosts = async () => { | |
| console.info('Fetching posts...') | |
| await sleep(500) | |
| return axios | |
| .get<Array<PostType>>(`${queryURL}/posts`) | |
| .then((r) => r.data.slice(0, 10)) | |
| } |
🤖 Prompt for AI Agents
In e2e/vue-router/scroll-restoration-sandbox-vite/src/posts.tsx around lines 37
to 43, replace the inline await new Promise((r) => setTimeout(r, 500)) with the
exported sleep utility (e.g. await sleep(500)); if sleep is defined in another
module, add the appropriate import at the top of the file; keep the rest of the
function intact so it still logs, waits, and returns the first 10 posts.
| {Array.from({ length: number }).map((_, i) => ( | ||
| <div>{i}</div> | ||
| ))} |
There was a problem hiding this comment.
Add key prop to mapped elements.
The divs rendered in the .map() are missing the required key prop. React requires unique keys for elements in arrays to properly track and update them.
Apply this diff to fix the issue:
- {Array.from({ length: number }).map((_, i) => (
- <div>{i}</div>
- ))}
+ {Array.from({ length: number }).map((_, i) => (
+ <div key={i}>{i}</div>
+ ))}📝 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.
| {Array.from({ length: number }).map((_, i) => ( | |
| <div>{i}</div> | |
| ))} | |
| {Array.from({ length: number }).map((_, i) => ( | |
| <div key={i}>{i}</div> | |
| ))} |
🤖 Prompt for AI Agents
In
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/-components/scroll-block.tsx
around lines 8 to 10, the elements created by Array.from(...).map lack a React
key prop; update the mapped JSX to supply a stable unique key (e.g., key={i} if
indices are stable for this list or a real unique identifier if available) on
the outer div so React can track list items correctly.
| import { createFileRoute } from '@tanstack/vue-router' | ||
| export const Route = createFileRoute('/(tests)/lazy-page')({}) |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Empty route configuration serves no purpose.
This file exports a route with an empty configuration object. Based on the TanStack Router pattern seen in other routes (e.g., lazy-with-loader-page.tsx which defines a loader), the base .tsx file should contain non-component route configuration like loaders, validation, or search params. If no such configuration is needed, this file is unnecessary—the route can be defined entirely in lazy-page.lazy.tsx.
Consider either adding meaningful configuration or removing this file.
🤖 Prompt for AI Agents
In
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-page.tsx
lines 1-2, the file exports a route with an empty configuration object which is
redundant; either add meaningful non-component route configuration (e.g.,
loader, params validation, searchSchema, or routeId) mirroring patterns in
sibling files like lazy-with-loader-page.tsx, or remove this file entirely and
let the route be defined in lazy-page.lazy.tsx; if you add config, include the
relevant loader/validation/searchSchema and export the Route accordingly,
otherwise delete the file and update any imports that reference it.
| export const Route = createFileRoute('/(tests)/lazy-with-loader-page')({ | ||
| loader: async () => { | ||
| await sleep(1000) | ||
| return { foo: 'bar' } | ||
| }, | ||
| }) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, find the lazy component file
echo "Looking for lazy component file..."
fd -t f "lazy-with-loader-page" e2e/vue-router/
# Also search for any files in the routes directory
echo -e "\nChecking routes directory structure..."
find e2e/vue-router -type d -name "routes" 2>/dev/null | head -5
# Search for any lazy-with-loader files
echo -e "\nSearching for any lazy-with-loader files..."
find e2e/vue-router -name "*lazy-with-loader*" -type f 2>/dev/nullRepository: TanStack/router
Length of output: 901
🏁 Script executed:
#!/bin/bash
# Read the lazy component file
echo "=== Contents of lazy-with-loader-page.lazy.tsx ==="
cat -n "e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.lazy.tsx"
echo -e "\n=== Contents of lazy-with-loader-page.tsx ==="
cat -n "e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx"Repository: TanStack/router
Length of output: 944
Remove unused loader data or document its purpose.
The loader returns { foo: 'bar' } but the lazy component does not consume this data via useLoaderData or any other mechanism. Either remove the return value or add a comment explaining its testing purpose.
🤖 Prompt for AI Agents
In
e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/(tests)/lazy-with-loader-page.tsx
around lines 4 to 9, the loader returns an unused object { foo: 'bar' }; either
remove that return value so the loader only performs the delay (await
sleep(1000)) or retain the return and add a short inline comment explaining the
returned data is intentionally unused and exists solely for testing purposes (or
update the corresponding lazy component to consume the data via useLoaderData).
Implement one of these options to eliminate the unused loader data.
| <div class="p-2 grid gap-2"> | ||
| <h3>Welcome Home!</h3> | ||
| <p> | ||
| The are the links to be tested when navigating away from the index page. |
There was a problem hiding this comment.
Fix typo in text.
"The are" should be "These are".
Apply this diff:
- The are the links to be tested when navigating away from the index page.
+ These are the links to be tested when navigating away from the index page.📝 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.
| The are the links to be tested when navigating away from the index page. | |
| These are the links to be tested when navigating away from the index page. |
🤖 Prompt for AI Agents
In e2e/vue-router/scroll-restoration-sandbox-vite/src/routes/index.tsx around
line 13, fix the typo in the link description: change the text "The are the
links to be tested when navigating away from the index page." to "These are the
links to be tested when navigating away from the index page." by updating the
string/JSX text node at that line.
Summary by CodeRabbit
New Features
Tests
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.