docs(solid-router): rspack/build guides and example #5834
Conversation
WalkthroughAdds documentation and example projects for Solid.js file-based routing with TanStack Router across multiple bundlers. Introduces a complete Rspack/Rsbuild quickstart example with routing, styling, and generated route trees. Enhances existing esbuild and webpack examples with Tailwind CSS and PostCSS integration. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User/Dev
participant RsBuild as RsBuild
participant TanStackPlugin as TanStack Router Plugin
participant FileSystem as File System
participant Bundler as Bundler (Rspack)
User->>RsBuild: npm run dev/build
RsBuild->>TanStackPlugin: Execute tanstackRouter plugin
TanStackPlugin->>FileSystem: Scan routes/ directory
FileSystem-->>TanStackPlugin: Return route files
TanStackPlugin->>FileSystem: Generate routeTree.gen.ts
TanStackPlugin->>Bundler: Add generated tree to bundle
Bundler->>Bundler: Apply babel + solid plugins
Bundler->>Bundler: Process CSS with PostCSS/Tailwind
Bundler-->>RsBuild: Output bundle
RsBuild-->>User: Dev server / dist artifacts
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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)
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 b64a089
☁️ 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: 4
🧹 Nitpick comments (1)
examples/solid/quickstart-rspack-file-based/README.md (1)
1-6: Consider adding more context to the README.While functional, the README could benefit from a brief description of what this example demonstrates (e.g., "Solid.js file-based routing with TanStack Router using Rspack/Rsbuild") and perhaps a link to the relevant documentation.
📜 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 (26)
docs/router/framework/solid/installation/with-rspack.md(1 hunks)examples/solid/quickstart-esbuild-file-based/build.js(1 hunks)examples/solid/quickstart-esbuild-file-based/package.json(1 hunks)examples/solid/quickstart-esbuild-file-based/postcss.config.mjs(1 hunks)examples/solid/quickstart-esbuild-file-based/src/main.tsx(1 hunks)examples/solid/quickstart-esbuild-file-based/src/styles.css(1 hunks)examples/solid/quickstart-rspack-file-based/.gitignore(1 hunks)examples/solid/quickstart-rspack-file-based/.vscode/settings.json(1 hunks)examples/solid/quickstart-rspack-file-based/README.md(1 hunks)examples/solid/quickstart-rspack-file-based/package.json(1 hunks)examples/solid/quickstart-rspack-file-based/postcss.config.mjs(1 hunks)examples/solid/quickstart-rspack-file-based/rsbuild.config.ts(1 hunks)examples/solid/quickstart-rspack-file-based/src/app.tsx(1 hunks)examples/solid/quickstart-rspack-file-based/src/env.d.ts(1 hunks)examples/solid/quickstart-rspack-file-based/src/index.tsx(1 hunks)examples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts(1 hunks)examples/solid/quickstart-rspack-file-based/src/routes/__root.tsx(1 hunks)examples/solid/quickstart-rspack-file-based/src/routes/about.tsx(1 hunks)examples/solid/quickstart-rspack-file-based/src/routes/index.tsx(1 hunks)examples/solid/quickstart-rspack-file-based/src/styles.css(1 hunks)examples/solid/quickstart-rspack-file-based/tsconfig.json(1 hunks)examples/solid/quickstart-webpack-file-based/package.json(1 hunks)examples/solid/quickstart-webpack-file-based/postcss.config.mjs(1 hunks)examples/solid/quickstart-webpack-file-based/src/index.tsx(1 hunks)examples/solid/quickstart-webpack-file-based/src/styles.css(1 hunks)examples/solid/quickstart-webpack-file-based/webpack.config.js(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/router/framework/solid/installation/with-rspack.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/framework/solid/installation/with-rspack.md
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/src/routes/about.tsxexamples/solid/quickstart-esbuild-file-based/src/main.tsxexamples/solid/quickstart-rspack-file-based/src/app.tsxexamples/solid/quickstart-rspack-file-based/src/env.d.tsexamples/solid/quickstart-rspack-file-based/rsbuild.config.tsexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/src/routes/about.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/README.mdexamples/solid/quickstart-webpack-file-based/postcss.config.mjsexamples/solid/quickstart-webpack-file-based/webpack.config.jsexamples/solid/quickstart-rspack-file-based/tsconfig.jsonexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-webpack-file-based/src/styles.cssexamples/solid/quickstart-rspack-file-based/src/routes/about.tsxexamples/solid/quickstart-rspack-file-based/src/styles.cssexamples/solid/quickstart-webpack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/src/styles.cssexamples/solid/quickstart-esbuild-file-based/src/main.tsxexamples/solid/quickstart-esbuild-file-based/build.jsexamples/solid/quickstart-rspack-file-based/src/app.tsxexamples/solid/quickstart-rspack-file-based/src/env.d.tsexamples/solid/quickstart-esbuild-file-based/postcss.config.mjsexamples/solid/quickstart-rspack-file-based/postcss.config.mjsexamples/solid/quickstart-rspack-file-based/rsbuild.config.tsexamples/solid/quickstart-esbuild-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-webpack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/package.json
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-plugin/** : Use unplugin for universal bundler plugins in the router-plugin package
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.
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to docs/{router,start}/** : Place router docs under docs/router/ and start framework docs under docs/start/
Applied to files:
docs/router/framework/solid/installation/with-rspack.md
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-rspack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/tsconfig.jsonexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/src/routes/about.tsxexamples/solid/quickstart-webpack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/src/main.tsxexamples/solid/quickstart-esbuild-file-based/build.jsexamples/solid/quickstart-rspack-file-based/.vscode/settings.jsonexamples/solid/quickstart-rspack-file-based/src/app.tsxexamples/solid/quickstart-rspack-file-based/rsbuild.config.tsexamples/solid/quickstart-esbuild-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-webpack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
📚 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:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/.vscode/settings.jsonexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
📚 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:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/src/routes/about.tsxexamples/solid/quickstart-rspack-file-based/.vscode/settings.jsonexamples/solid/quickstart-rspack-file-based/src/app.tsxexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-plugin/** : Use unplugin for universal bundler plugins in the router-plugin package
Applied to files:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/build.jsexamples/solid/quickstart-rspack-file-based/rsbuild.config.tsexamples/solid/quickstart-esbuild-file-based/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/src/app.tsxexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-devtools,*-router-devtools}/** : Keep router devtools packages in packages/router-devtools/ and packages/*-router-devtools/
Applied to files:
docs/router/framework/solid/installation/with-rspack.mdexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-webpack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/quickstart-rspack-file-based/src/routes/index.tsxexamples/solid/quickstart-rspack-file-based/src/routes/__root.tsxexamples/solid/quickstart-rspack-file-based/src/routes/about.tsxexamples/solid/quickstart-rspack-file-based/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:
examples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-esbuild-file-based/src/main.tsxexamples/solid/quickstart-rspack-file-based/src/app.tsxexamples/solid/quickstart-rspack-file-based/src/env.d.tsexamples/solid/quickstart-esbuild-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/solid/quickstart-webpack-file-based/src/index.tsxexamples/solid/quickstart-rspack-file-based/tsconfig.jsonexamples/solid/quickstart-esbuild-file-based/src/main.tsxexamples/solid/quickstart-esbuild-file-based/build.jsexamples/solid/quickstart-rspack-file-based/src/env.d.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/package.json : Use workspace:* protocol for internal dependencies in package.json files
Applied to files:
examples/solid/quickstart-rspack-file-based/package.jsonexamples/solid/quickstart-rspack-file-based/.vscode/settings.json
🧬 Code graph analysis (4)
examples/solid/quickstart-rspack-file-based/src/routes/index.tsx (2)
examples/solid/quickstart-rspack-file-based/src/routes/__root.tsx (1)
Route(4-6)examples/solid/quickstart-rspack-file-based/src/routes/about.tsx (1)
Route(3-5)
examples/solid/quickstart-rspack-file-based/src/routes/__root.tsx (3)
examples/solid/quickstart-rspack-file-based/src/routes/about.tsx (1)
Route(3-5)examples/solid/quickstart-rspack-file-based/src/routes/index.tsx (1)
Route(3-5)examples/solid/quickstart-file-based/src/routes/__root.tsx (1)
RootComponent(13-41)
examples/solid/quickstart-rspack-file-based/src/routes/about.tsx (2)
examples/solid/quickstart-rspack-file-based/src/routes/__root.tsx (1)
Route(4-6)examples/solid/quickstart-rspack-file-based/src/routes/index.tsx (1)
Route(3-5)
examples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts (3)
examples/solid/basic-solid-query-file-based/src/routeTree.gen.ts (1)
FileRouteTypes(89-111)examples/solid/start-basic/src/routeTree.gen.ts (1)
FileRouteTypes(160-210)examples/solid/start-convex-better-auth/src/routeTree.gen.ts (1)
FileRouteTypes(63-76)
⏰ 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: Test
- GitHub Check: Preview
🔇 Additional comments (21)
examples/solid/quickstart-rspack-file-based/tsconfig.json (1)
1-16: LGTM — TypeScript configuration is correct and well-suited for the Solid + Rsbuild example.The configuration properly enables strict mode per project guidelines, correctly configures Solid.js JSX handling with the appropriate
jsxImportSource, and sets sensible compiler options for modern bundler-based development. The module resolution and target are well-aligned with Rsbuild/Rspack tooling.examples/solid/quickstart-rspack-file-based/src/env.d.ts (1)
1-1: Dependency verified. The@rsbuild/corepackage (v1.2.4) is present in the project dependencies, so the triple-slash reference directive will work correctly to include Rsbuild's core type definitions.examples/solid/quickstart-rspack-file-based/.gitignore (1)
1-11: LGTM!Standard .gitignore patterns appropriately configured for a Node.js/build tool quickstart example.
examples/solid/quickstart-webpack-file-based/postcss.config.mjs (1)
1-5: LGTM!PostCSS configuration correctly enables Tailwind CSS via the
@tailwindcss/postcssplugin, consistent with other quickstart examples in this PR.examples/solid/quickstart-rspack-file-based/.vscode/settings.json (1)
1-11: LGTM!VSCode settings appropriately exclude the autogenerated
routeTree.gen.tsfile from watching, search, and mark it readonly to prevent accidental modifications.examples/solid/quickstart-rspack-file-based/postcss.config.mjs (1)
1-5: LGTM!PostCSS configuration correctly enables Tailwind CSS, matching the pattern used across other quickstart examples.
examples/solid/quickstart-esbuild-file-based/package.json (1)
17-17: LGTM!Tailwind CSS v4 dependency correctly added to support the new PostCSS configuration and styling integration.
examples/solid/quickstart-esbuild-file-based/postcss.config.mjs (1)
1-5: LGTM!PostCSS configuration correctly enables Tailwind CSS, maintaining consistency across all quickstart examples.
examples/solid/quickstart-esbuild-file-based/build.js (1)
16-16: I cannot definitively verify whether thestylecondition is necessary in this sandbox environment, as the node_modules directory is not available. However, based on the gathered information:Analysis:
- The
stylecondition is a legitimate esbuild option for resolving CSS/style export conditions from packages- The project includes
tailwindcss(^4.1.17), which typically provides style-related exports- No other style configuration or references exist in the quickstart project itself
- The condition appears isolated and unused by other project code
To verify necessity: Check the actual
exportsfields in your installed dependencies (particularlytailwindcss,solid-js, and@tanstack/*packages). If none of these packages have a"style"export condition defined, theconditions: ['style']option can be removed. You can test by removing it and runningnpm run buildto confirm the build and CSS resolution still work.examples/solid/quickstart-rspack-file-based/rsbuild.config.ts (1)
1-18: LGTM! Well-structured Rsbuild configuration.The configuration correctly sets up Babel, Solid, and TanStack Router plugins with appropriate settings. The
autoCodeSplitting: trueoption is a good choice for optimizing the bundle.docs/router/framework/solid/installation/with-rspack.md (1)
1-89: LGTM! Comprehensive and well-structured documentation.The documentation provides clear installation and configuration instructions, helpful warnings about generated files, and useful VSCode settings. The configuration example matches the actual implementation in the quickstart example.
examples/solid/quickstart-webpack-file-based/src/index.tsx (1)
3-3: LGTM! Enables Tailwind CSS integration.The CSS import correctly loads the Tailwind styles, which are processed by the PostCSS configuration added in related changes.
examples/solid/quickstart-esbuild-file-based/src/main.tsx (1)
4-4: LGTM! Consistent Tailwind CSS integration.The CSS import follows the same pattern as the webpack example, enabling Tailwind styles to be loaded.
examples/solid/quickstart-rspack-file-based/src/styles.css (1)
1-21: LGTM! Standard Tailwind setup with dark mode support.The CSS file correctly imports Tailwind and applies base styles with light/dark mode theming. The layered approach to border colors is acceptable.
examples/solid/quickstart-webpack-file-based/webpack.config.js (1)
35-38: LGTM! Standard webpack CSS handling.The CSS module rule correctly uses the standard loader chain (style-loader, css-loader, postcss-loader) for processing CSS files with PostCSS/Tailwind support.
examples/solid/quickstart-webpack-file-based/src/styles.css (1)
1-21: LGTM! Clean Tailwind v4 setup.The stylesheet correctly imports Tailwind v4, establishes a base layer with consistent border colors, enables light/dark color-scheme detection, and applies utility classes for theming across both modes.
examples/solid/quickstart-esbuild-file-based/src/styles.css (1)
1-21: LGTM! Consistent Tailwind setup across examples.The stylesheet is identical to the webpack example and correctly configured. Duplication across example projects is expected to keep each example self-contained.
examples/solid/quickstart-rspack-file-based/src/routes/index.tsx (1)
1-13: LGTM! Properly structured file-based route.The route correctly uses
createFileRoute('/')API and the component follows Solid.js conventions. The implementation is clean and appropriate for an example.examples/solid/quickstart-rspack-file-based/src/routes/about.tsx (1)
1-13: LGTM! Clean about route implementation.The route correctly implements the file-based routing pattern with proper use of
createFileRoute('/about')and follows Solid.js conventions.examples/solid/quickstart-rspack-file-based/src/routes/__root.tsx (1)
1-35: LGTM! Well-structured root route.The root route correctly uses
createRootRouteand implements standard navigation patterns with active link styling, route outlet, and devtools integration. All TanStack Router APIs are used appropriately.examples/solid/quickstart-rspack-file-based/src/app.tsx (1)
1-23: LGTM! Excellent router setup.The app correctly configures the router with performance optimizations (
defaultPreload: 'intent'), scroll restoration, and proper module augmentation for type safety. The RouterProvider integration follows TanStack Router best practices.
| "@tanstack/router-plugin": "^1.135.2", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", |
There was a problem hiding this comment.
Use workspace protocol for internal TanStack dependencies.
Internal TanStack packages should use the workspace:* protocol instead of version ranges like ^1.135.2.
As per coding guidelines, apply this diff:
- "@tanstack/router-plugin": "^1.135.2",
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
+ "@tanstack/router-plugin": "workspace:*",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@tanstack/router-plugin": "^1.135.2", | |
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/router-plugin": "workspace:*", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", |
🤖 Prompt for AI Agents
In examples/solid/quickstart-esbuild-file-based/package.json around lines 12 to
14, the three internal TanStack dependencies use caret version ranges; replace
each version string with the workspace protocol (e.g., "workspace:*") so the
package.json references local workspace packages instead of external semver
ranges; update "@tanstack/router-plugin", "@tanstack/solid-router", and
"@tanstack/solid-router-devtools" to use "workspace:*".
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace:* protocol for internal dependencies.
Internal TanStack packages should use the workspace:* protocol instead of version ranges per coding guidelines.
Apply this diff:
"dependencies": {
"@tailwindcss/postcss": "^4.1.15",
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
"postcss": "^8.5.1",
"solid-js": "^1.9.10",
"tailwindcss": "^4.1.15"
},
"devDependencies": {
"@rsbuild/core": "1.2.4",
"@rsbuild/plugin-babel": "^1.0.6",
"@rsbuild/plugin-solid": "1.0.6",
- "@tanstack/router-plugin": "^1.135.2",
+ "@tanstack/router-plugin": "workspace:*",
"typescript": "^5.6.2"
}Based on coding guidelines.
Also applies to: 22-22
🤖 Prompt for AI Agents
In examples/solid/quickstart-rspack-file-based/package.json around lines 12-13
(and also line 22), the internal TanStack packages use version ranges; replace
those entries to use the workspace:* protocol for internal dependencies. Update
the dependency values for "@tanstack/solid-router" and
"@tanstack/solid-router-devtools" (and any other internal TanStack package on
line 22) to "workspace:*" so they resolve to workspace packages instead of
external semver ranges.
| import { render } from 'solid-js/web' | ||
| import App from './app' | ||
|
|
||
| const rootElement = document.getElementById('root')! | ||
|
|
||
| if (!rootElement.innerHTML) { | ||
| render(() => <App />, rootElement) | ||
| } |
There was a problem hiding this comment.
Missing CSS import for Tailwind styles.
Unlike the webpack and esbuild examples (which import './styles.css'), this rspack example doesn't import the styles.css file, even though the file exists at examples/solid/quickstart-rspack-file-based/src/styles.css. The CSS import should be added to enable Tailwind styling.
Apply this diff to add the missing CSS import:
import { render } from 'solid-js/web'
import App from './app'
+import './styles.css'
const rootElement = document.getElementById('root')!📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { render } from 'solid-js/web' | |
| import App from './app' | |
| const rootElement = document.getElementById('root')! | |
| if (!rootElement.innerHTML) { | |
| render(() => <App />, rootElement) | |
| } | |
| import { render } from 'solid-js/web' | |
| import App from './app' | |
| import './styles.css' | |
| const rootElement = document.getElementById('root')! | |
| if (!rootElement.innerHTML) { | |
| render(() => <App />, rootElement) | |
| } |
🤖 Prompt for AI Agents
In examples/solid/quickstart-rspack-file-based/src/index.tsx around lines 1 to
8, the file is missing the import of the styles.css (Tailwind) file; add an
import for './styles.css' at the top of the file (before rendering) so Tailwind
styles are included when the app mounts.
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace:* protocol for internal dependencies.
As per coding guidelines, internal TanStack packages should use the workspace:* protocol instead of version ranges.
Apply this diff:
"dependencies": {
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
"solid-js": "^1.9.10",
"tailwindcss": "^4.1.17"
},
"devDependencies": {
"@babel/core": "^7.28.5",
"@babel/preset-typescript": "^7.27.1",
"@tailwindcss/postcss": "^4.1.15",
- "@tanstack/router-plugin": "^1.135.2",
+ "@tanstack/router-plugin": "workspace:*",Based on coding guidelines.
Also applies to: 19-19
🤖 Prompt for AI Agents
In examples/solid/quickstart-webpack-file-based/package.json around lines 10-11
and line 19, the internal TanStack packages use semver ranges; update the
dependency versions for "@tanstack/solid-router" and
"@tanstack/solid-router-devtools" to use the workspace:* protocol instead of
version numbers (and similarly change any other TanStack internal package on
line 19), so they resolve to the workspace packages during local development and
monorepo installs.
Summary by CodeRabbit