test(vue-router): rsbuild suites #6117
Conversation
birkskyum
changed the title
WalkthroughThis PR adds two complete end-to-end example applications for Vue Router using rspack/rsbuild build tooling. Both examples demonstrate routing patterns with file-based routes, data fetching utilities, Playwright tests, and full build configuration setups. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit f734b9c
☁️ Nx Cloud last updated this comment at |
birkskyum
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/styles.css (1)
5-20: Consider consolidating redundant border-color rules.The
@layer baseblock (lines 6-12) sets a border-color fallback, but the universal selector at lines 18-20 applies Tailwind utilities that override it. You might consider removing the base layer border-color rule to simplify the stylesheet, or clarify the intent if the fallback serves a specific purpose.-@layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); - } -} - html { color-scheme: light dark; }e2e/vue-router/rspack-basic-file-based/README.md (1)
1-6: Consider adding a more descriptive title and explanation.The README would benefit from a more specific title (e.g., "Vue Router with Rspack - Basic File-Based Routes Example") and a brief description of what this e2e test suite demonstrates (file-based routing patterns, rspack build tooling, etc.).
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx (1)
19-23: Consider adding an explicit return type annotation.While type inference works here, adding an explicit return type would align better with TypeScript strict mode practices:
const App = (): JSX.Element => { ... }e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsx (1)
1-36: Consider extracting shared data-fetching utilities.This file is identical to
e2e/vue-router/rspack-basic-file-based/src/posts.tsx. While code duplication in e2e test fixtures is common to keep projects self-contained, you could optionally extract the sharedPostType,fetchPost, andfetchPostsutilities to a common package or test utility module to reduce maintenance overhead.e2e/vue-router/rspack-basic-file-based/playwright.config.ts (1)
29-29: Consider extracting the webServer command to a script.The command string is quite long and contains multiple environment variables. For better maintainability, consider extracting this to a separate script file.
For example, create a
scripts/preview-e2e.sh:#!/bin/bash PUBLIC_NODE_ENV="test" \ PUBLIC_EXTERNAL_PORT=$1 \ PUBLIC_SERVER_PORT=$2 \ pnpm build && \ PUBLIC_NODE_ENV="test" \ PUBLIC_EXTERNAL_PORT=$1 \ PUBLIC_SERVER_PORT=$2 \ pnpm preview --port $2Then update the playwright config:
- command: `PUBLIC_NODE_ENV="test" PUBLIC_EXTERNAL_PORT=${EXTERNAL_PORT} PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_NODE_ENV="test" PUBLIC_EXTERNAL_PORT=${EXTERNAL_PORT} PUBLIC_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`, + command: `./scripts/preview-e2e.sh ${EXTERNAL_PORT} ${PORT}`,
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (53)
e2e/vue-router/rspack-basic-file-based/.gitignore(1 hunks)e2e/vue-router/rspack-basic-file-based/README.md(1 hunks)e2e/vue-router/rspack-basic-file-based/package.json(1 hunks)e2e/vue-router/rspack-basic-file-based/playwright.config.ts(1 hunks)e2e/vue-router/rspack-basic-file-based/postcss.config.mjs(1 hunks)e2e/vue-router/rspack-basic-file-based/rsbuild.config.ts(1 hunks)e2e/vue-router/rspack-basic-file-based/src/app.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/env.d.ts(1 hunks)e2e/vue-router/rspack-basic-file-based/src/index.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/posts.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/__root.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/index.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx(1 hunks)e2e/vue-router/rspack-basic-file-based/src/styles.css(1 hunks)e2e/vue-router/rspack-basic-file-based/tests/app.spec.ts(1 hunks)e2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.ts(1 hunks)e2e/vue-router/rspack-basic-file-based/tests/setup/global.teardown.ts(1 hunks)e2e/vue-router/rspack-basic-file-based/tsconfig.json(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/.gitignore(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/README.md(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.json(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/postcss.config.mjs(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/env.d.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/index.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/styles.css(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/app.spec.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.ts(1 hunks)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.json(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/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsxe2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsxe2e/vue-router/rspack-basic-file-based/src/index.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsxe2e/vue-router/rspack-basic-file-based/src/app.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsxe2e/vue-router/rspack-basic-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/env.d.tse2e/vue-router/rspack-basic-file-based/src/routes/__root.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.tse2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/index.tsxe2e/vue-router/rspack-basic-file-based/src/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsxe2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-file-based/src/routes/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsxe2e/vue-router/rspack-basic-file-based/src/env.d.tse2e/vue-router/rspack-basic-file-based/tests/setup/global.teardown.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsxe2e/vue-router/rspack-basic-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.tse2e/vue-router/rspack-basic-file-based/playwright.config.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/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsxe2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsxe2e/vue-router/rspack-basic-file-based/src/index.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsxe2e/vue-router/rspack-basic-file-based/src/app.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsxe2e/vue-router/rspack-basic-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/env.d.tse2e/vue-router/rspack-basic-file-based/src/routes/__root.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.tse2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/index.tsxe2e/vue-router/rspack-basic-file-based/src/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsxe2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-file-based/src/routes/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsxe2e/vue-router/rspack-basic-file-based/src/env.d.tse2e/vue-router/rspack-basic-file-based/tests/setup/global.teardown.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsxe2e/vue-router/rspack-basic-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.tse2e/vue-router/rspack-basic-file-based/playwright.config.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace protocol
workspace:*for internal dependencies in package.json files
Files:
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/vue-router/rspack-basic-file-based/package.json
🧠 Learnings (11)
📓 Common learnings
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.
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
📚 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: Always run `pnpm test:eslint`, `pnpm test:types`, and `pnpm test:unit` before committing code
Applied to files:
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/README.mde2e/vue-router/rspack-basic-file-based/README.md
📚 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/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-file-based/.gitignoree2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsxe2e/vue-router/rspack-basic-file-based/src/app.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/__root.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/.gitignoree2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.tse2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/index.tsxe2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/src/routes/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsxe2e/vue-router/rspack-basic-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/tests/setup/global.teardown.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsxe2e/vue-router/rspack-basic-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsxe2e/vue-router/rspack-basic-file-based/package.json
📚 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/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/index.tsxe2e/vue-router/rspack-basic-file-based/src/routes/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx
📚 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/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsxe2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.tse2e/vue-router/rspack-basic-file-based/.gitignoree2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsxe2e/vue-router/rspack-basic-file-based/src/app.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsxe2e/vue-router/rspack-basic-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-file-based/src/routes/__root.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/rsbuild.config.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/.gitignoree2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsxe2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/src/routes/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsxe2e/vue-router/rspack-basic-file-based/tsconfig.jsone2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsxe2e/vue-router/rspack-basic-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsxe2e/vue-router/rspack-basic-file-based/package.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/routes.tse2e/vue-router/rspack-basic-file-based/.gitignoree2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsxe2e/vue-router/rspack-basic-file-based/src/app.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/__root.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/.gitignoree2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsxe2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxe2e/vue-router/rspack-basic-file-based/src/routes/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/src/routes/posts.tsxe2e/vue-router/rspack-basic-file-based/tsconfig.jsone2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsxe2e/vue-router/rspack-basic-file-based/package.json
📚 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/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-file-based/src/index.tsxe2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/env.d.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.jsone2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/src/env.d.tse2e/vue-router/rspack-basic-file-based/package.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/rspack-basic-file-based/.gitignoree2e/vue-router/rspack-basic-virtual-named-export-config-file-based/.gitignoree2e/vue-router/rspack-basic-file-based/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 **/*.{ts,tsx} : Use TypeScript strict mode with extensive type safety for all code
Applied to files:
e2e/vue-router/rspack-basic-file-based/.gitignoree2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/tsconfig.jsone2e/vue-router/rspack-basic-file-based/src/env.d.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 **/package.json : Use workspace protocol `workspace:*` for internal dependencies in package.json files
Applied to files:
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.json
📚 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/rspack-basic-file-based/tests/setup/global.setup.tse2e/vue-router/rspack-basic-file-based/tests/app.spec.tse2e/vue-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.tse2e/vue-router/rspack-basic-file-based/playwright.config.ts
🧬 Code graph analysis (22)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx (3)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (1)
Route(3-27)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx (1)
Route(3-5)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (6)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
Route(5-8)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx (1)
Route(9-16)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx (3)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (1)
Route(3-27)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx (1)
Route(3-5)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx (2)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx (2)
PostErrorComponent(5-7)Route(9-16)e2e/vue-router/rspack-basic-file-based/src/posts.tsx (1)
fetchPost(16-29)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx (4)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
Route(5-8)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx (1)
Route(4-7)e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/index.tsx (1)
Route(2-4)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts (4)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/index.tsx (1)
setup(8-10)e2e/vue-router/rspack-basic-file-based/src/index.tsx (1)
setup(8-10)e2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)scripts/set-ts-version.js (1)
packageJson(33-33)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsx (1)
e2e/vue-router/rspack-basic-file-based/src/posts.tsx (3)
PostType(4-8)fetchPost(16-29)fetchPosts(31-36)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx (3)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (1)
Route(3-27)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
Route(3-5)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/root.tsx (1)
e2e/vue-router/rspack-basic-file-based/src/routes/__root.tsx (1)
Route(9-19)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx (8)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
Route(5-8)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx (1)
Route(4-7)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (1)
Route(3-27)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx (1)
Route(9-16)e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/index.tsx (1)
Route(2-4)
e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx (3)
e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx (1)
Route(3-5)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsx (1)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx (1)
Route(3-5)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.ts (2)
e2e/vue-router/rspack-basic-file-based/tests/setup/global.teardown.ts (1)
teardown(4-6)scripts/set-ts-version.js (1)
packageJson(33-33)
e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (4)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
Route(5-8)e2e/vue-router/rspack-basic-file-based/src/routes/__root.tsx (1)
Route(9-19)e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/routes/index.tsx (1)
Route(2-4)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx (4)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
Route(5-8)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx (1)
Route(3-5)e2e/vue-router/rspack-basic-file-based/src/posts.tsx (1)
fetchPosts(31-36)e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/posts.tsx (1)
fetchPosts(31-36)
e2e/vue-router/rspack-basic-file-based/src/routes/index.tsx (3)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
Route(5-8)e2e/vue-router/rspack-basic-file-based/src/routes/__root.tsx (1)
Route(9-19)e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
Route(3-5)
e2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.ts (7)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/vue-router/basic-vue-query-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/vue-router/basic-vue-query/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/basepath-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-file-based-code-splitting/tests/setup/global.setup.ts (1)
setup(4-6)e2e/solid-router/basic-file-based/tests/setup/global.setup.ts (1)
setup(4-6)e2e/react-router/basic-virtual-file-based/tests/setup/global.setup.ts (1)
setup(4-6)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (3)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx (1)
Route(4-7)e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx (1)
Route(9-16)e2e/vue-router/rspack-basic-file-based/src/posts.tsx (1)
fetchPosts(31-36)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx (1)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (1)
Route(3-27)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx (2)
e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx (2)
PostErrorComponent(5-7)Route(9-16)e2e/vue-router/rspack-basic-file-based/src/posts.tsx (1)
fetchPost(16-29)
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/playwright.config.ts (1)
scripts/set-ts-version.js (1)
packageJson(33-33)
e2e/vue-router/rspack-basic-file-based/playwright.config.ts (1)
scripts/set-ts-version.js (1)
packageJson(33-33)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (47)
e2e/vue-router/rspack-basic-file-based/src/env.d.ts (1)
1-1: LGTM! Triple-slash reference directive is the correct and idiomatic way to include type declarations in a TypeScript environment file. This ensures rsbuild types are available throughout the project.e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/env.d.ts (1)
1-1: Triple-slash reference is correctly formatted and properly located.@rsbuild/core is an actively maintained package (latest version 1.6.7), and triple-slash-reference-types directives are a valid way to declare dependencies on declaration packages in TypeScript files. The package.json confirms @rsbuild/core is present in devDependencies (^1.2.4), and the tsconfig.json has strict mode enabled as required by the coding guidelines.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-home.tsx (2)
1-5: Route definition structure is correct.The import and route definition follow the expected pattern for TanStack Vue Router file-based routing. The trailing slash in
'/posts/'correctly designates this as an index route.
7-9: Verify component imports and TanStack Vue Router configuration.TanStack recently added @tanstack/vue-router support, and Vue supports JSX with .tsx files when configured with "jsx": "preserve" in tsconfig.json. The React-style functional component syntax is valid for Vue when properly configured. However, confirm that:
- The file imports from the correct package (@tanstack/vue-router, not @tanstack/react-router)
- The project's tsconfig.json has appropriate JSX configuration for Vue
- This matches TanStack Vue Router's official component patterns
e2e/vue-router/rspack-basic-file-based/postcss.config.mjs (1)
1-5: LGTM! Standard PostCSS configuration.The PostCSS configuration correctly enables the Tailwind CSS plugin for the rspack-based e2e test suite.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/postcss.config.mjs (1)
1-5: LGTM! Standard PostCSS configuration.The PostCSS configuration correctly enables the Tailwind CSS plugin, consistent with the pattern used across the rspack-based e2e test suites.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/styles.css (2)
15-17: LGTM! Proper light/dark theme setup.The color-scheme declaration and body styling correctly establish light/dark mode theming using Tailwind utilities.
Also applies to: 21-23
1-3: CSS syntax is correct for Tailwind v4.The
@import 'tailwindcss'is Tailwind CSS v4's standard single-line CSS installation, and the@sourcedirective explicitly specifies source files that aren't picked up by Tailwind's automatic content detection. This configuration follows the documented v4 pattern and requires no additional verification.e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts.tsx (2)
1-7: LGTM! Route definition follows TanStack Router patterns.The imports and route definition are clean and follow the established patterns from the codebase. The route correctly uses
createFileRoutewith a loader and component.
15-18: The concern about type safety in this code is unfounded. PostType.id is explicitly typed asstring, notnumber. The fetchPost function acceptspostId: string, and the route passes the postId parameter directly to fetchPost without any type coercion. Adding{ id: 'i-do-not-exist', title: 'Non-existent Post' }to the array is perfectly type-safe because all post IDs throughout the code are consistently typed as strings. No type mismatch exists.Likely an incorrect or invalid review comment.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx (1)
1-8: LGTM!The route definition follows TanStack Vue Router conventions correctly. The file-based route pattern with
createFileRouteand the nested layout path structure (/_first/_second/layout-a) are properly implemented.e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/.gitignore (1)
1-21: LGTM!The gitignore patterns appropriately cover local files, build outputs, IDE configurations, autogenerated route tree files, and Playwright test artifacts.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tsconfig.json (1)
1-18: LGTM!The TypeScript configuration properly enables strict mode and uses appropriate settings for Vue 3 with JSX and modern bundlers. The compiler options align with the coding guidelines for TypeScript strict mode.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsx (1)
1-8: LGTM!The route definition correctly follows the same pattern as the layout-a route. Implementation is clean and consistent with TanStack Vue Router conventions.
e2e/vue-router/rspack-basic-file-based/.gitignore (1)
1-21: LGTM!The gitignore configuration appropriately excludes local files, build artifacts, IDE settings, and e2e test outputs. Consistent with the other rspack example project.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/app.tsx (2)
7-11: LGTM!The router configuration properly enables intent-based preloading and scroll restoration for good UX. The setup follows TanStack Vue Router best practices.
14-18: LGTM!Excellent use of module augmentation to register the router type for comprehensive type safety throughout the application.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/index.tsx (1)
1-12: LGTM! Clean Vue 3 bootstrap.The implementation correctly sets up a Vue 3 application with JSX/TSX support. The
!rootEl?.innerHTMLguard is a good practice to prevent remounting in development (HMR) or SSR scenarios.e2e/vue-router/rspack-basic-file-based/tsconfig.json (1)
1-18: LGTM! TypeScript configuration is correct.The configuration properly enables strict mode and sets up Vue 3 JSX/TSX support with appropriate compiler options for the rspack-based e2e project.
e2e/vue-router/rspack-basic-file-based/src/routes/posts.index.tsx (1)
1-9: LGTM! File-based route is correctly defined.The route definition follows TanStack Router's file-based routing pattern, and the component implementation is appropriate for this e2e test context.
e2e/vue-router/rspack-basic-file-based/src/styles.css (1)
1-23: LGTM! Tailwind CSS configuration is correct.The stylesheet properly sets up Tailwind CSS with light/dark theme support and appropriate base layer customizations for the e2e test application.
e2e/vue-router/rspack-basic-file-based/src/posts.tsx (1)
1-36: LGTM! Data fetching utilities are well-implemented.The fetchPost and fetchPosts functions correctly handle data fetching with appropriate error handling (404 → notFound) and environment-based URL configuration for testing.
e2e/vue-router/rspack-basic-file-based/rsbuild.config.ts (1)
1-33: LGTM! Rsbuild configuration is well-structured.The configuration correctly sets up Vue + JSX support with TanStack Router integration. The explicit environment variable definitions with fallbacks (lines 16-26) are a good defensive pattern to prevent runtime crashes when env vars are undefined, as explained by the inline comment.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.teardown.ts (1)
1-6: LGTM! Test teardown is correctly implemented.The teardown function properly cleans up the dummy server using the package name from package.json. The use of the modern import assertion syntax (
with { type: 'json' }) is appropriate.e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/README.md (1)
1-6: LGTM!Clear and concise setup instructions for the e2e example.
e2e/vue-router/rspack-basic-file-based/tests/setup/global.setup.ts (1)
1-6: LGTM!The global setup correctly starts the dummy server using the package name, consistent with other e2e test suites in the repository.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/setup/global.setup.ts (1)
1-6: LGTM!Consistent test setup implementation that properly initializes the dummy server for e2e tests.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/route.tsx (1)
1-27: LGTM!Well-structured parent route with proper navigation links and outlet placement for nested routes. The active styling and route hierarchy are correctly implemented.
e2e/vue-router/rspack-basic-file-based/tests/setup/global.teardown.ts (1)
1-6: LGTM!The teardown correctly stops the dummy server, properly complementing the setup file and ensuring clean test lifecycle management.
e2e/vue-router/rspack-basic-file-based/src/index.tsx (1)
1-12: LGTM!Proper Vue 3 application bootstrap with a safeguard against duplicate mounting. The setup function pattern is idiomatic and correct.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/index.tsx (1)
1-5: LGTM!Clean index route implementation that serves as the default view for the
/classic/hello/path.e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/universe.tsx (1)
1-5: LGTM!Well-defined child route that correctly integrates with the parent route's navigation structure. The implementation is clean and follows the established pattern.
e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx (1)
1-9: LGTM!The route definition follows the correct file-based routing pattern for TanStack Vue Router. The component is simple, correctly structured, and consistent with sibling layout routes.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/first-layout.tsx (1)
1-16: LGTM!The layout route correctly uses
Outletfor nested route rendering and follows the proper file-based routing pattern. The component structure is appropriate for a layout wrapper.e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/file-based-subtree/hello/world.tsx (1)
1-5: LGTM!The route definition is clean and follows the correct pattern. Using an inline arrow function component is appropriate for this simple route with static content.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/home.tsx (1)
1-12: LGTM!The root route definition is correct and the Home component is appropriately structured. This follows the standard file-based routing pattern for the index/home route.
e2e/vue-router/rspack-basic-file-based/src/routes/index.tsx (1)
1-12: LGTM!The index route correctly defines the root path and provides a simple welcome component. The structure aligns with TanStack Router conventions for file-based routing.
e2e/vue-router/rspack-basic-file-based/src/routes/_layout.tsx (1)
1-16: LGTM!The layout route correctly uses the pathless route convention (underscore prefix) and properly renders nested routes via
Outlet. The component structure is appropriate for a layout wrapper.e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx (1)
1-9: LGTM!The route definition is correct and follows the file-based routing pattern. The component is appropriately simple for a test route within a nested layout structure.
e2e/vue-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsx (1)
1-34: LGTM!The nested layout route is well-structured with proper navigation links and outlet placement. The use of
activePropsfor styling active links provides good visual feedback. The pathless layout route convention (underscore prefix) correctly resolves the child routes to/layout-aand/layout-b.e2e/vue-router/rspack-basic-file-based/package.json (1)
13-14: LGTM! Correct workspace protocol usage.The internal TanStack dependencies correctly use the
workspace:^protocol as per coding guidelines.Also applies to: 25-27
e2e/vue-router/rspack-basic-file-based/src/app.tsx (1)
1-23: LGTM! Router setup is correct.The router configuration and type registration follow TanStack Vue Router best practices. The TSX syntax is properly supported via the rsbuild Vue JSX plugin.
e2e/vue-router/rspack-basic-file-based/src/routes/posts.tsx (1)
1-40: LGTM! Route configuration and component implementation are correct.The file-based route setup with loader, the use of
Route.useLoaderData(), and Vue ref access via.valueall follow proper patterns.e2e/vue-router/rspack-basic-file-based/tests/app.spec.ts (1)
1-33: LGTM! Well-structured e2e tests.The tests use role-based selectors and cover key routing scenarios including navigation, nested layouts, and not-found handling.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/tests/app.spec.ts (1)
1-33: LGTM! Tests correctly validate routing behavior.The test suite mirrors the basic-file-based variant, which is appropriate since both configurations should exhibit the same routing behavior.
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/package.json (1)
13-14: LGTM! Correct workspace protocol usage.Internal TanStack dependencies properly use the
workspace:^protocol as per coding guidelines.Also applies to: 25-27
e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx (1)
1-27: LGTM! Post detail route is correctly implemented.The route configuration with loader, error, and notFound components follows best practices. The component correctly accesses loader data via
Route.useLoaderData()and properly uses.valuefor Vue ref access.
| getDummyServerPort, | ||
| getTestServerPort, | ||
| } from '@tanstack/router-e2e-utils' | ||
| import packageJson from './package.json' with { type: 'json' } |
There was a problem hiding this comment.
Update Node.js version requirement in project configuration.
The with { type: 'json' } import attributes syntax requires Node.js 21+. Verify that the project's minimum Node version (in package.json engines field, .nvmrc, or similar) is set to 21 or higher to support this syntax.
🤖 Prompt for AI Agents
In e2e/vue-router/rspack-basic-file-based/playwright.config.ts around line 6,
the import attributes syntax "with { type: 'json' }" requires Node.js 21+, so
update the project's Node requirement to >=21; specifically, set "engines.node"
in package.json to ">=21", update or create .nvmrc to contain "21" (or
"21.x"/">=21"), and adjust any CI/workflow files (GitHub Actions, Dockerfiles,
etc.) to use Node 21+ so the import-attributes JSON syntax is supported.
| <Link | ||
| to="/layout-a" | ||
| activeProps={{ | ||
| class: 'font-bold', | ||
| }} | ||
| > | ||
| Layout A | ||
| </Link> | ||
| <Link | ||
| to="/layout-b" | ||
| activeProps={{ | ||
| class: 'font-bold', | ||
| }} | ||
| > | ||
| Layout B | ||
| </Link> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find route definitions for layout-a and layout-b
echo "=== Searching for createFileRoute calls with layout patterns ==="
rg -n "createFileRoute.*layout-[ab]" --type tsx
echo ""
echo "=== Searching for route definitions in the test directory ==="
find e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes -type f -name "*.tsx" -o -name "*.ts" | head -20
echo ""
echo "=== Looking at the second-layout.tsx file ==="
cat -n "e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx"Repository: TanStack/router
Length of output: 2483
🏁 Script executed:
#!/bin/bash
# Search for layout-a and layout-b route definitions without file type restriction
echo "=== Searching for layout-a and layout-b in route files ==="
rg -n "layout-a|layout-b" e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes --type-list | head -5
echo ""
echo "=== List all files in the layout directory ==="
ls -la e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/
echo ""
echo "=== Check if there's a route tree file ==="
find e2e/vue-router/rspack-basic-virtual-named-export-config-file-based -name "routeTree*" -o -name "route-tree*"
echo ""
echo "=== Search for all createFileRoute calls in the test directory ==="
rg "createFileRoute" e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes -A 1 -B 0Repository: TanStack/router
Length of output: 7495
🏁 Script executed:
#!/bin/bash
# Check the a.tsx and b.tsx files to see their full content
echo "=== Content of a.tsx ==="
cat e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/a.tsx
echo ""
echo "=== Content of b.tsx ==="
cat e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/b.tsxRepository: TanStack/router
Length of output: 555
Fix the Link paths to match the actual route structure.
The Links currently use /layout-a and /layout-b, but the actual routes are defined at /_first/_second/layout-a and /_first/_second/layout-b (see a.tsx and b.tsx). Update the links to either:
- Use relative paths:
to="./layout-a"andto="./layout-b", or - Use the full absolute paths:
to="/_first/_second/layout-a"andto="/_first/_second/layout-b"
🤖 Prompt for AI Agents
In
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/layout/second-layout.tsx
around lines 12 to 27, the Link components point to /layout-a and /layout-b
which do not match the actual routes at /_first/_second/layout-a and
/_first/_second/layout-b; update the Link paths to either use relative paths
to="./layout-a" and to="./layout-b" or use the full absolute paths
to="/_first/_second/layout-a" and to="/_first/_second/layout-b" so the links
navigate to the correct routes.
|
|
||
| export const Route = createFileRoute('/posts/$postId')({ | ||
| loader: async ({ params: { postId } }) => fetchPost(postId), | ||
| errorComponent: PostErrorComponent as any, |
There was a problem hiding this comment.
Remove the as any type assertion to maintain type safety.
The errorComponent property doesn't require the as any assertion. The file-based variant at e2e/vue-router/rspack-basic-file-based/src/routes/posts.$postId.tsx (line 10) uses errorComponent: PostErrorComponent without type casting, which is the correct approach.
Apply this diff:
- errorComponent: PostErrorComponent as any,
+ errorComponent: PostErrorComponent,As per coding guidelines, TypeScript strict mode with extensive type safety should be used for all TypeScript code.
📝 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.
| errorComponent: PostErrorComponent as any, | |
| errorComponent: PostErrorComponent, |
🤖 Prompt for AI Agents
In
e2e/vue-router/rspack-basic-virtual-named-export-config-file-based/src/routes/posts/posts-detail.tsx
around line 11, remove the unnecessary "as any" type assertion on the
errorComponent property and ensure the component matches the expected route
error component type; replace "errorComponent: PostErrorComponent as any" with
"errorComponent: PostErrorComponent" and if TypeScript complains, update the
PostErrorComponent export/type (or the route type annotation) so the component's
type is compatible instead of suppressing type checking.
adds the following e2e suites:
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.