Skip to content

Conversation

@birkskyum
Copy link
Member

@birkskyum birkskyum commented Nov 12, 2025

Summary by CodeRabbit

  • Documentation

    • Added installation and configuration guide for TanStack Router with Esbuild for Solid.js, including setup examples and VS Code configuration recommendations.
  • New Features

    • Introduced a Solid.js quickstart example project demonstrating file-based routing with Esbuild, including build configuration, sample routes, and data fetching utilities.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 12, 2025

Walkthrough

This PR adds a complete Solid.js quickstart example featuring esbuild and file-based routing for TanStack Router, including installation documentation, build configuration, route definitions, and project setup utilities.

Changes

Cohort / File(s) Summary
Documentation
docs/router/framework/solid/installation/with-esbuild.md
New documentation covering TanStack Router installation with esbuild for Solid, including plugin setup, esbuild configuration, route tree generation, VSCode settings guidance, and file-based routing defaults.
Project Configuration
examples/solid/quickstart-esbuild-file-based/.gitignore, .vscode/settings.json, tsconfig.json, package.json
Standard project setup: gitignore entries (node_modules, dist, .DS_Store, *.local), VSCode exclusion/readonly settings for routeTree.gen.ts, TypeScript configuration with strict mode and Solid JSX support, and npm package manifest with dependencies (@tanstack/solid-router, esbuild, solid-js, etc.) and scripts.
Build & Server Configuration
examples/solid/quickstart-esbuild-file-based/build.js, index.html, README.md
Esbuild build script supporting dev and production modes with file watching, dev server on port 3005, and plugin integration; HTML entry point with Tailwind CSS; quickstart README.
Router Initialization
examples/solid/quickstart-esbuild-file-based/src/main.tsx, src/routeTree.gen.ts
Main entry point creating and rendering the Router with routeTree, TypeScript module augmentation for type-safe Router access, and generated route tree file defining file-based routes and type-safe route mappings.
Route Definitions
examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx, routes/about.tsx, routes/index.tsx
Root layout route with navigation and devtools, and two file-based routes (home and about) using createFileRoute and createRootRoute patterns.
Data Utilities
examples/solid/quickstart-esbuild-file-based/src/posts.tsx
Post data-fetching utilities including PostType, PostNotFoundError, and async functions fetchPost() and fetchPosts() using redaxios with 500ms artificial latency.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • build.js: Verify esbuild configuration, plugin integration, dev server setup, and handling of --dev flag
  • src/main.tsx: Confirm Router initialization, module augmentation pattern, and DOM rendering logic
  • src/routeTree.gen.ts: Validate generated type exports and module augmentation correctness (though auto-generated)
  • Route definitions: Ensure proper use of createFileRoute/createRootRoute and component wiring

Possibly related PRs

Suggested reviewers

  • schiller-manuel
  • birkskyum
  • brenelz

Poem

🐇 With esbuild swift and routes so neat,
Solid meets the Router's beat,
File-based paths dance in the tree,
Types are safe, examples free!
A quickstart blooms, complete and fleet! 🌿✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies that this PR adds esbuild documentation and example for Solid Router, matching the comprehensive changes that include both a new guide and a complete working example.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch docs(solid-router)--esbuild-example

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@birkskyum birkskyum changed the title Docs(solid router) esbuild example docs(solid-router): esbuild example Nov 12, 2025
@nx-cloud
Copy link

nx-cloud bot commented Nov 12, 2025

View your CI Pipeline Execution ↗ for commit 2598a33

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 48s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-12 03:23:31 UTC

@github-actions github-actions bot added the documentation Everything documentation related label Nov 12, 2025
@birkskyum birkskyum changed the title docs(solid-router): esbuild example docs(solid-router): esbuild guide/example Nov 12, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 12, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5831

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5831

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5831

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5831

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5831

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5831

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5831

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5831

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5831

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5831

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5831

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5831

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5831

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5831

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5831

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5831

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5831

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5831

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5831

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5831

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5831

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5831

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5831

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5831

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5831

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5831

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5831

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5831

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5831

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5831

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5831

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5831

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5831

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5831

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5831

commit: 2598a33

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
examples/solid/quickstart-esbuild-file-based/tsconfig.json (1)

1-10: Consider adding additional TypeScript compiler options.

The configuration is minimal but functional. Consider adding these commonly useful options for better IDE support and type checking:

 {
   "compilerOptions": {
     "strict": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true
-  }
+  },
+  "include": ["src"]
 }

These additions provide:

  • Explicit target and module settings for clarity
  • moduleResolution: "bundler" aligns with modern bundlers like esbuild
  • isolatedModules ensures compatibility with bundlers that transpile files independently
  • noEmit since esbuild handles compilation
  • include to scope type checking to the src directory
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 80a9923 and 2598a33.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (14)
  • docs/router/framework/solid/installation/with-esbuild.md (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/.gitignore (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/.vscode/settings.json (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/README.md (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/build.js (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/index.html (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/package.json (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/src/posts.tsx (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx (1 hunks)
  • examples/solid/quickstart-esbuild-file-based/tsconfig.json (1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/package.json

📄 CodeRabbit inference engine (AGENTS.md)

Use workspace:* protocol for internal dependencies in package.json files

Files:

  • examples/solid/quickstart-esbuild-file-based/package.json
examples/{react,solid}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep example applications under examples/react/ and examples/solid/

Files:

  • examples/solid/quickstart-esbuild-file-based/package.json
  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/build.js
  • examples/solid/quickstart-esbuild-file-based/index.html
  • examples/solid/quickstart-esbuild-file-based/src/posts.tsx
  • examples/solid/quickstart-esbuild-file-based/README.md
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
  • examples/solid/quickstart-esbuild-file-based/tsconfig.json
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-esbuild.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-esbuild.md
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/src/posts.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
**/src/routes/**

📄 CodeRabbit inference engine (AGENTS.md)

Place file-based routes under src/routes/ directories

Files:

  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx
🧠 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/
📚 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:

  • examples/solid/quickstart-esbuild-file-based/package.json
  • docs/router/framework/solid/installation/with-esbuild.md
  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
  • examples/solid/quickstart-esbuild-file-based/tsconfig.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-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:

  • examples/solid/quickstart-esbuild-file-based/package.json
  • docs/router/framework/solid/installation/with-esbuild.md
  • examples/solid/quickstart-esbuild-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:

  • examples/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-plugin/** : Use unplugin for universal bundler plugins in the router-plugin package

Applied to files:

  • examples/solid/quickstart-esbuild-file-based/package.json
  • docs/router/framework/solid/installation/with-esbuild.md
  • examples/solid/quickstart-esbuild-file-based/build.js
📚 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-esbuild-file-based/package.json
  • examples/solid/quickstart-esbuild-file-based/build.js
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
  • examples/solid/quickstart-esbuild-file-based/tsconfig.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:

  • docs/router/framework/solid/installation/with-esbuild.md
  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/.vscode/settings.json
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
📚 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-esbuild.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:

  • docs/router/framework/solid/installation/with-esbuild.md
  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/.vscode/settings.json
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
📚 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:

  • examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routeTree.gen.ts
  • examples/solid/quickstart-esbuild-file-based/src/main.tsx
📚 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-esbuild-file-based/src/routes/about.tsx
  • examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx
  • examples/solid/quickstart-esbuild-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-esbuild-file-based/.vscode/settings.json
  • examples/solid/quickstart-esbuild-file-based/tsconfig.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 examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/

Applied to files:

  • examples/solid/quickstart-esbuild-file-based/README.md
🧬 Code graph analysis (3)
examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx (3)
examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx (1)
  • Route (3-5)
examples/solid/quickstart-esbuild-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-esbuild-file-based/src/routes/about.tsx (2)
examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx (1)
  • Route (4-6)
examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx (1)
  • Route (3-5)
examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx (2)
examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx (1)
  • Route (4-6)
examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx (1)
  • Route (3-5)
🔇 Additional comments (11)
examples/solid/quickstart-esbuild-file-based/.gitignore (1)

1-5: Consider ignoring generated route tree file.

The AI summary indicates that this project generates routeTree.gen.ts (located at src/routeTree.gen.ts) as part of the build process. Generated files should typically not be committed to the repository. This entry appears to be missing from the .gitignore.

Please verify whether src/routeTree.gen.ts (or a similar pattern matching generated files) should be added to .gitignore. If confirmed, you can add it as:

 node_modules
 .DS_Store
 dist
 dist-ssr
 *.local
+src/routeTree.gen.ts

Or, if the project generates multiple .gen.ts files, consider a broader pattern:

+**/*.gen.ts
examples/solid/quickstart-esbuild-file-based/.vscode/settings.json (1)

1-11: LGTM!

The VSCode settings correctly exclude the generated routeTree.gen.ts file from file watching, search results, and mark it as read-only. This prevents accidental edits and IDE performance issues with the auto-generated file.

docs/router/framework/solid/installation/with-esbuild.md (1)

1-99: LGTM!

The documentation provides comprehensive guidance for setting up TanStack Router with esbuild and Solid.js, including:

  • Clear installation instructions
  • Complete build.js example with dev/prod modes
  • Important warnings about generated files and VSCode configuration
  • Configuration defaults and customization options
  • Proper relative links to API documentation (per coding guidelines)

The example code correctly demonstrates the tanstackRouter plugin with target: 'solid' and autoCodeSplitting: true, and the VSCode settings align with the actual settings file in the quickstart example.

examples/solid/quickstart-esbuild-file-based/src/posts.tsx (1)

1-33: LGTM!

The data fetching utilities are well-structured with:

  • Proper TypeScript typing with PostType
  • Custom PostNotFoundError for semantic error handling
  • Appropriate error checking for 404 responses
  • Artificial delay for demonstrating loading states
  • Reasonable data limiting (first 10 posts)

The use of redaxios (lightweight axios alternative) is appropriate for this example.

examples/solid/quickstart-esbuild-file-based/README.md (1)

1-6: LGTM!

The README provides clear, concise instructions for running the example. The commands are correct and support both npm and yarn workflows.

examples/solid/quickstart-esbuild-file-based/src/routes/index.tsx (1)

1-13: LGTM!

The index route is correctly implemented:

  • Proper use of createFileRoute('/') for file-based routing
  • Clean component structure with Solid.js JSX (class prop, not className)
  • Appropriate for a quickstart example
examples/solid/quickstart-esbuild-file-based/index.html (1)

1-24: LGTM overall!

The HTML scaffold correctly sets up:

  • Tailwind CSS via CDN (appropriate for examples)
  • Color scheme support for light/dark modes
  • Proper module loading for /dist/main.js
  • Root mounting point for the Solid app
examples/solid/quickstart-esbuild-file-based/src/routes/__root.tsx (1)

1-34: Solid root route scaffolding looks great

Navigation state handling, outlet placement, and devtools wiring all match the expected Solid quickstart pattern. Nicely done.

examples/solid/quickstart-esbuild-file-based/src/routes/about.tsx (1)

1-12: About route wiring is tidy

The route registration and component stub are minimal and correct for the example.

examples/solid/quickstart-esbuild-file-based/build.js (1)

1-29: Esbuild dev/prod flow is well put together

Context-based setup, plugin registration, and the dev/serve toggle look solid for this example.

examples/solid/quickstart-esbuild-file-based/src/main.tsx (1)

1-23: Router bootstrap matches recommended pattern

Type-safe router registration and guarded render mirror the established quickstart setup—looks good.

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Update the page title to reflect esbuild setup.

The title currently says "Vite App" but this is an esbuild-based example, not Vite.

Apply this diff:

-    <title>Vite App</title>
+    <title>TanStack Router + Solid + Esbuild</title>
📝 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.

Suggested change
<title>Vite App</title>
<title>TanStack Router + Solid + Esbuild</title>
🤖 Prompt for AI Agents
In examples/solid/quickstart-esbuild-file-based/index.html at line 6, the page
title incorrectly reads "Vite App"; update the <title> element text to reflect
this is an esbuild example (e.g., "esbuild Quickstart" or "Solid + esbuild
Quickstart") so the page title accurately describes the project.

"dev": "node build.js --dev",
"build": "node build.js",
"serve": "node build.js --dev",
"start": "dev"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix the start script reference.

The start script references "dev" as a bare string, which won't work correctly. It should reference the dev script properly.

Apply this diff:

   "scripts": {
     "dev": "node build.js --dev",
     "build": "node build.js",
     "serve": "node build.js --dev",
-    "start": "dev"
+    "start": "npm run dev"
   },
📝 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.

Suggested change
"start": "dev"
"scripts": {
"dev": "node build.js --dev",
"build": "node build.js",
"serve": "node build.js --dev",
"start": "npm run dev"
},
🤖 Prompt for AI Agents
In examples/solid/quickstart-esbuild-file-based/package.json around line 9, the
"start" script incorrectly contains the bare string "dev"; replace it with a
proper script reference such as "npm run dev" (or "pnpm run dev"/"yarn dev" to
match your package manager) so the start script invokes the dev script
correctly.

Comment on lines +11 to +18
"dependencies": {
"@tanstack/solid-router": "^1.135.2",
"@tanstack/solid-router-devtools": "^1.135.2",
"@tanstack/router-plugin": "^1.135.2",
"solid-js": "^1.9.10",
"redaxios": "^0.5.1",
"zod": "^3.24.2"
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Use workspace protocol for internal TanStack dependencies.

According to the coding guidelines, internal dependencies should use the workspace:* protocol instead of version ranges. This ensures the example always uses the current workspace versions during development.

Apply this diff:

   "dependencies": {
-    "@tanstack/solid-router": "^1.135.2",
-    "@tanstack/solid-router-devtools": "^1.135.2",
-    "@tanstack/router-plugin": "^1.135.2",
+    "@tanstack/solid-router": "workspace:*",
+    "@tanstack/solid-router-devtools": "workspace:*",
+    "@tanstack/router-plugin": "workspace:*",
     "solid-js": "^1.9.10",
     "redaxios": "^0.5.1",
     "zod": "^3.24.2"
   },

Based on coding guidelines

📝 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.

Suggested change
"dependencies": {
"@tanstack/solid-router": "^1.135.2",
"@tanstack/solid-router-devtools": "^1.135.2",
"@tanstack/router-plugin": "^1.135.2",
"solid-js": "^1.9.10",
"redaxios": "^0.5.1",
"zod": "^3.24.2"
},
"dependencies": {
"@tanstack/solid-router": "workspace:*",
"@tanstack/solid-router-devtools": "workspace:*",
"@tanstack/router-plugin": "workspace:*",
"solid-js": "^1.9.10",
"redaxios": "^0.5.1",
"zod": "^3.24.2"
},
🤖 Prompt for AI Agents
In examples/solid/quickstart-esbuild-file-based/package.json around lines 11 to
18, the internal TanStack packages use fixed version ranges; change those to use
the workspace protocol. Replace the versions for "@tanstack/solid-router",
"@tanstack/solid-router-devtools", and "@tanstack/router-plugin" with
"workspace:*" so the example consumes local workspace packages during
development, leaving third-party deps (solid-js, redaxios, zod) unchanged.

@birkskyum birkskyum merged commit d5ce04c into main Nov 12, 2025
6 checks passed
@birkskyum birkskyum deleted the docs(solid-router)--esbuild-example branch November 12, 2025 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Everything documentation related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants